/* =========================================================================
   System
   Type: 12 14 16 18 20 24 32 48 display. Radii: 8 controls, 12 cards and rows, 20 panels.
   Spacing: 4 8 12 16 24 32 48 72 96. One split everywhere: 5fr / 7fr, 72px gap.
   Ink outlines only on things you can press or type into.
   Hard offset shadow only on the page's real calls to action.
   Icons are Phosphor Bold, drawn as filled shapes: a 1.5px line at 16px.
   ========================================================================= */
:root {
  --accent: #f2a33a;
  --on-accent: #171717;
  --accent-ring: rgb(242 163 58 / 0.4);
  --font-sans:
    "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-48: 48px;
  --fs-display: clamp(44px, 5.6vw, 80px);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 64px;
  --section-y: 96px;
  --gap: 72px;
  --head-gap: 48px;
}
:root,
[data-theme="light"] .ctx-light {
  --canvas: #fafafa;
  --surface: #fff;
  --surface-2: #f5f5f5;
  --bubble: #efefef;
  --ink: #171717;
  --text-2: #525252;
  --muted: #737373;
  --line: #171717;
  --hair: rgb(0 0 0 / 0.08);
  --hair-strong: rgb(0 0 0 / 0.14);
  --accent-soft: #fde6bd;
  --accent-wash: #fff7ea;
  --good: #1f7a4d;
  --bad: #a3361f;
  --cta-shadow: 3px 3px 0 #171717;
  --cta-border: #171717;
  --ring: 0 0 0 1px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.03);
  --lift: 0 0 0 1px rgb(0 0 0 / 0.08), 0 24px 60px rgb(0 0 0 / 0.08);
  color-scheme: light;
  color: var(--ink);
}
[data-theme="dark"],
[data-theme="light"] .ctx-dark {
  --canvas: #0a0a0a;
  --surface: #151515;
  --surface-2: #0e0e0e;
  --bubble: #262626;
  --ink: #ededed;
  --text-2: #a3a3a3;
  --muted: #8a8a8a;
  --line: rgb(255 255 255 / 0.32);
  --hair: rgb(255 255 255 / 0.08);
  --hair-strong: rgb(255 255 255 / 0.16);
  --accent-soft: rgb(242 163 58 / 0.16);
  --accent-wash: rgb(242 163 58 / 0.06);
  --good: #5fc98f;
  --bad: #f08a70;
  --cta-shadow: 3px 3px 0 #7a4a10;
  --cta-border: #f2a33a;
  --ring: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  --lift: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 24px 60px rgb(0 0 0 / 0.5);
  color-scheme: dark;
  color: var(--ink);
}
[data-theme="light"] .ctx-dark {
  --canvas: #111;
  --surface: #1a1a1a;
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 var(--fs-16) / 1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
svg.ph {
  fill: currentColor;
  stroke: none;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
main {
  position: relative;
}

/* ---------- Controls ---------- */

.mark {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(assets/hughie-icon.png) center / contain no-repeat;
  font-size: 0;
  color: transparent;
  flex: none;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 var(--fs-20) / 1 var(--font-display);
  letter-spacing: -0.03em;
}
.logo .wordmark {
  display: block;
  width: auto;
  height: 28px;
  fill: currentColor;
  stroke: none;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--hair);
}
.nav .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
}
.nav-links {
  display: flex;
  gap: 32px;
  font-size: var(--fs-14);
  color: var(--text-2);
}
.nav-links a:hover {
  color: var(--ink);
}
.nav .btn {
  justify-self: end;
}
/* The logo link is as wide as the wordmark, not the whole first column. */
.nav .logo {
  justify-self: start;
}
/* On a touch screen the logo and the links get a 44px box; the wordmark
   keeps its size and the bar stays 64px. */
@media (pointer: coarse) {
  .nav .logo,
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-links a {
    justify-content: center;
    min-width: 44px;
  }
}

/* ---------- Sections and type ---------- */
section {
  position: relative;
  padding: var(--section-y) 0;
  scroll-margin-top: var(--nav-h);
}
section + section {
  box-shadow: 0 -1px 0 var(--hair);
}
.band-alt {
  background: var(--surface);
}
[data-theme="dark"] .band-alt {
  background: var(--canvas);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap);
  align-items: start;
}
h2.h {
  font: 600 var(--fs-48) / 1.08 var(--font-display);
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}
.lede {
  margin-top: 16px;
  max-width: 44ch;
  font-size: var(--fs-18);
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 400ms var(--ease),
    transform 400ms var(--ease);
}
.reveal-ready .reveal:not(.in) {
  opacity: 0;
  transform: translateY(8px);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Hero ---------- */
.waitlist {
  max-width: 520px;
}
.waitlist-fields {
  display: flex;
  gap: 8px;
}
.waitlist.is-checking .cf-turnstile {
  margin-top: 8px;
}
.waitlist .note {
  margin-top: 12px;
  font-size: var(--fs-14);
  color: var(--muted);
}
.waitlist .error {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-14);
  color: var(--bad);
}
.waitlist .error:empty {
  margin-top: 0;
}
.waitlist.ready .waitlist-fallback {
  display: none;
}
.waitlist.has-error .error {
  display: block;
}
.waitlist .done {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
}
.waitlist .done svg {
  width: 20px;
  height: 20px;
  color: var(--good);
  stroke-width: 2;
}
.waitlist.is-done form,
.waitlist.is-done .note,
.waitlist.is-done .error {
  display: none;
}
.waitlist.is-done .done {
  display: flex;
  animation: fade-in 300ms var(--ease);
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Hero options ---------- */
/* The hero is cropped by its own bottom edge: the app window rises into the
   first view and runs on under the next section (the Amie treatment). */
/* Spacing is set so the first job card, buttons and all, sits inside a
   1440x900 screen: 32 above the headline, 16 to the lede, 24 to the form,
   24 to the window. */
.hero {
  padding: 32px 0 0;
  overflow: hidden;
}
.hero h1 {
  font: 640 var(--fs-display) / 1.02 var(--font-display);
  letter-spacing: -0.038em;
}
.hero .lede {
  margin-top: 16px;
}
.hero .waitlist {
  margin-top: 24px;
}
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Two lines wherever the first fits; the line break keeps the highlight on its own line. */
.hero-center h1 {
  max-width: none;
  text-wrap: balance;
}
/* The window's visible height: 24px above it, then 448px of window, the chat
   through the job cards and the reply actions. The rest is under the crop. */
.hero-window {
  height: 472px;
}
/* Wide enough that a lede of up to about 140 characters stays on two lines,
   balanced so the second line is not a short tail. */
.hero-center .lede {
  max-width: 60ch;
  text-wrap: balance;
}
.hero-center .waitlist {
  width: 100%;
}
.hero-center .note {
  text-align: center;
}

/* A. Product window */
.hero-a {
  padding-bottom: 0;
  background: radial-gradient(
    60% 50% at 50% 100%,
    var(--accent-soft),
    transparent 70%
  );
}
.obj .bub-user {
  align-self: flex-end;
  padding: 8px 12px;
  border-radius: 16px 16px 4px 16px;
  background: var(--bubble);
}
.obj .bub-bot {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
}
.hl {
  background: linear-gradient(
    transparent 14%,
    var(--accent-soft) 14%,
    var(--accent-soft) 96%,
    transparent 96%
  );
  padding-right: 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme="dark"] .hl {
  background: none;
  color: var(--accent);
}
/* The period sits outside the light-mode marker but takes the dark-mode color. */
[data-theme="dark"] .hl-period {
  color: var(--accent);
}

/* ---------- Daily email on an iPhone lock screen ----------
   Measured from Apple's iOS 26 support image (iPhone 16 Pro, 402pt screen):
   card 377pt wide, 24pt radius, 8pt gap, 39pt icon inset 14pt, 13pt gap to text,
   16pt SF text on 19pt lines (-0.2 tracking), 14pt timestamp, white glass at ~13%. */
.notify .split {
  align-items: center;
}
.wall {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 580px;
  padding: 48px 24px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, #3a2a17 0%, #1c1611 58%, #110e0b 100%);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro",
    "Helvetica Neue", system-ui, sans-serif;
}
.wall-shape {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.wall-shape.a {
  width: 720px;
  height: 720px;
  right: -280px;
  top: -320px;
  background: radial-gradient(
    circle at 35% 65%,
    #e8b271 0%,
    #c98b45 38%,
    #8f5a2a 72%,
    #4f3017 100%
  );
}
.wall-shape.b {
  width: 640px;
  height: 640px;
  left: -300px;
  bottom: -400px;
  background: radial-gradient(
    circle at 60% 30%,
    #e9ddca 0%,
    #b9a68a 50%,
    #6c5a44 100%
  );
}
.wall-shape.c {
  width: 980px;
  height: 240px;
  left: -160px;
  top: 46%;
  border-radius: 200px;
  transform: rotate(-24deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(18 13 9 / 0.6),
    transparent
  );
  filter: blur(12px);
}
.ios-stack {
  display: grid;
  gap: 8px;
  width: min(377px, 100%);
}
/* Calibrated pixel-for-pixel against Apple's image (see ios-calibration.html) */
.ios-n {
  position: relative;
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  column-gap: 13px;
  align-items: center;
  padding: 11px 17.5px 12.5px 14px;
  border-radius: 24px;
  background: rgb(255 255 255 / 0.13);
  backdrop-filter: blur(30px) saturate(1.35);
  -webkit-backdrop-filter: blur(30px) saturate(1.35);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.1),
    0 1px 3px rgb(0 0 0 / 0.12);
  color: #fff;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
}
.ios-n::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.6),
    rgb(255 255 255 / 0.3) 28%,
    rgb(255 255 255 / 0.24) 72%,
    rgb(255 255 255 / 0.55)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.ios-icon {
  display: block;
  width: 39px;
  height: 39px;
}
.ios-icon svg {
  display: block;
  width: 39px;
  height: 39px;
  stroke: none;
  stroke-width: 1;
}
.ios-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  height: 19px;
}
.ios-head b,
.ios-subject {
  font-weight: 600;
}
.ios-head time {
  flex: none;
  font-size: 14px;
  line-height: 19px;
  color: rgb(255 255 255 / 0.5);
  mix-blend-mode: plus-lighter;
}
.ios-preview {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wall .ios-n {
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  transition:
    opacity 400ms var(--ease),
    transform 550ms cubic-bezier(0.3, 1.25, 0.6, 1);
  transition-delay: calc((2 - var(--i)) * 400ms);
}
.wall.in .ios-n {
  opacity: 1;
  transform: none;
}
@media (max-width: 640px) {
  .wall {
    margin: 0 -20px;
    min-height: 440px;
    padding: 40px 12px;
    border-radius: 0;
  }
}

/* ---------- Board ---------- */
.sticky-copy {
  position: sticky;
  top: calc(var(--nav-h) + 48px);
}
.scale {
  margin-top: 48px;
}
/* The page's one centred, wide section after the hero: the heading over the
   rating key and the board, which share one 920px column so their edges line up. */
.board-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.board-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.board-key,
.board .ds-board-panel {
  width: 100%;
  max-width: 920px;
}
.board-key {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: 48px;
  align-items: end;
  margin-top: var(--head-gap);
}
.board-key .scale,
.board-key .source-note {
  margin-top: 0;
}
.board .ds-board-panel {
  margin-top: 32px;
}
.scale-bracket {
  position: relative;
  width: calc(50% - 2px);
  margin-bottom: 12px;
  padding-bottom: 8px;
  font-size: var(--fs-14);
  font-weight: 600;
}
.scale-bracket::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  border: 1.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  opacity: 0.8;
}
.scale-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.scale-bar span {
  height: 12px;
  border-radius: 4px;
  background: var(--hair-strong);
}
.scale-bar span.on {
  background: var(--accent);
}
.scale-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 8px;
  line-height: 1.35;
  color: var(--muted);
}
.scale-labels span:nth-child(-n + 3) {
  color: var(--ink);
}
.row-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms var(--ease);
}
.row-body > div {
  overflow: hidden;
}
.mini {
  display: grid;
  grid-template-columns: repeat(6, 8px);
  gap: 2px;
  flex: none;
}
.mini i {
  height: 12px;
  border-radius: 2px;
  background: var(--hair-strong);
}
.mini i.on {
  background: var(--accent);
}
.row.is-open .row-body {
  grid-template-rows: 1fr;
}

/* ---------- How it works ---------- */
.band-ink {
  background: var(--canvas);
}
/* Five scenes over three screens of scroll: each scene plays in about
   three-fifths of a screen, then holds before the next. */
.how-track {
  position: relative;
  height: 300vh;
  margin-top: var(--head-gap);
}
.how-sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  min-height: 600px;
  display: flex;
  align-items: center;
}
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap);
  align-items: start;
  width: 100%;
}
.steps {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-left: 32px;
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  width: 2px;
  border-radius: 2px;
}
.steps::before {
  bottom: 14px;
  background: var(--hair-strong);
}
/* The script sets --fill so the line's tip reaches each step's dot as its
   scene starts; --progress is the fallback before it runs. */
.steps::after {
  height: var(--fill, calc((100% - 28px) * var(--progress, 0)));
  background: var(--accent);
}
.step {
  position: relative;
}
.step::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: inset 0 0 0 2px var(--hair-strong);
  transition:
    background 300ms,
    box-shadow 300ms;
}
.step.is-done::before {
  background: var(--accent);
  box-shadow: none;
}
.step.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(242 163 58 / 0.25);
}
.step h3 {
  font: 600 var(--fs-24) / 1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--muted);
  transition: color 400ms var(--ease);
}
/* The step text changes on the same 400ms curve as its scene, so they turn together. */
.step p {
  margin-top: 8px;
  max-width: 40ch;
  color: var(--muted);
  font-size: var(--fs-16);
  transition: color 400ms var(--ease);
}
.step.is-active h3 {
  color: var(--ink);
}
.step.is-active p {
  color: var(--text-2);
}

.stage {
  position: relative;
  height: 680px;
}
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 400ms var(--ease),
    transform 400ms var(--ease);
  pointer-events: none;
}
.scene.is-active {
  opacity: 1;
  transform: none;
}
.scene.is-past {
  transform: translateY(-16px);
}
.appear {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 300ms var(--ease),
    transform 400ms var(--ease);
}
.appear.on {
  opacity: 1;
  transform: none;
}
.example-user-message {
  display: flex;
  align-self: flex-end;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 85%;
}
.bub-user {
  width: fit-content;
  padding: 8px 16px;
  border-radius: 16px 16px 4px 16px;
  background: var(--surface-2);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
/* Lighter than the panel, like the app's bubble in dark mode. */
[data-theme="dark"] .bub-user {
  background: #1f1f1f;
}
.bub-bot {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
}
.bub-bot > div {
  padding-top: 2px;
}
.bub-bot > img {
  width: 24px;
  height: 24px;
}
.indent {
  margin-left: 36px;
}

/* ---------- Ask Hughie ---------- */
.prompts {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 32px;
}
.askstage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 620px;
  overflow: clip;
}
/* "Edit my resume for this job" under an answer, like the app's outline button. */
.example-action {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  margin: -8px 0 0 36px;
  padding: 4px 12px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-weight: 500;
  transition: background 150ms var(--ease);
}
.example-action.is-pressed {
  background: var(--accent-soft);
}
/* The saved copy and "Edit again", as the app shows them under the answer. */
.example-saved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -8px 0 0 36px;
}
/* The file stays on one line; "Edit again" wraps under it when there is no room. */
.example-saved .example-action {
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.example-saved .example-action.is-ghost {
  border-color: transparent;
  background: none;
}
/* A file name on one line. A long one loses letters from the middle, so its
   ending, like "(edited).pdf", stays readable. */
.file-name {
  display: flex;
  min-width: 0;
}
.file-name > span {
  white-space: pre;
}
.file-name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-name > span:last-child {
  flex: none;
}
/* A new chat in the app: a question, a line about Hughie, and suggestions. */
.example-empty {
  display: grid;
  gap: 6px;
  padding-top: 24px;
  color: var(--text-2);
}
.example-empty-title {
  color: var(--ink);
  font: 600 20px / 1.3 var(--font-sans);
}
.example-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.example-suggestion {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  transition: background 150ms var(--ease);
}
.example-suggestion.is-pressed {
  background: var(--accent-soft);
}
.example-sheet-job {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
}
.example-sheet-job strong {
  font-weight: 600;
}
.example-sheet-job span,
.example-sheet-note {
  color: var(--text-2);
}
.example-sheet-working {
  display: grid;
  gap: 12px;
}
.example-sheet-working > p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.example-sheet[hidden] {
  display: none;
}
.example-saved svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
  color: var(--accent);
}
/* The app's resume editor sheet, inside the example frame. */
.example-sheet {
  position: absolute;
  z-index: 4;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  border-left: 1px solid var(--hair);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.5;
  animation: example-sheet-in 380ms var(--ease);
}
@keyframes example-sheet-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
.example-sheet svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
  stroke: none;
}
.example-sheet-head {
  position: relative;
  padding: 20px 48px 16px 20px;
  border-bottom: 1px solid var(--hair);
}
.example-sheet-head > svg {
  position: absolute;
  top: 24px;
  right: 20px;
}
.example-sheet-head strong {
  font-size: 16px;
  font-weight: 600;
}
.example-sheet-head p {
  margin-top: 4px;
  color: var(--text-2);
}
.example-sheet-body {
  display: grid;
  align-content: start;
  gap: 12px;
  flex: 1;
  min-height: 0;
  padding: 16px 20px;
  overflow: hidden;
}
.example-spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid var(--hair-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: example-spin 800ms linear infinite;
}
@keyframes example-spin {
  to {
    transform: rotate(360deg);
  }
}
.example-sheet-review {
  display: none;
  gap: 12px;
}
.example-sheet:not([data-state="working"]) .example-sheet-working {
  display: none;
}
.example-sheet:not([data-state="working"]) .example-sheet-review {
  display: grid;
}
.example-doc {
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
}
.example-doc-head {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hair);
}
.example-doc-head strong {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.example-doc-head span {
  color: var(--text-2);
}
.example-doc-body {
  padding: 10px 14px;
}
.example-doc-name {
  font-size: 20px;
  font-weight: 600;
}
.example-doc-section {
  margin-top: 8px;
  font-weight: 600;
}
.example-revision {
  margin-top: 8px;
  padding: 8px 8px 8px 12px;
  border-left: 2px solid #1d4ed8;
  background: rgb(29 78 216 / 6%);
}
.example-new-wording {
  color: #1d4ed8;
}
.example-old-wording {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 13px;
}
.example-old-wording span {
  font-weight: 500;
}
[data-theme="dark"] .example-new-wording {
  color: #93c5fd;
}
[data-theme="dark"] .example-revision {
  border-color: #93c5fd;
  background: rgb(147 197 253 / 6%);
}
.example-sheet-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.example-sheet-check > span {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 4px;
}
.example-sheet-check svg {
  width: 12px;
  height: 12px;
  opacity: 0;
}
.example-sheet[data-state="confirmed"] .example-sheet-check > span {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.example-sheet[data-state="confirmed"] .example-sheet-check svg {
  opacity: 1;
}
.example-sheet-foot {
  display: none;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--hair);
}
.example-sheet:not([data-state="working"]) .example-sheet-foot {
  display: flex;
}
.example-sheet-button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  font-weight: 500;
  white-space: nowrap;
}
.example-sheet-button.is-primary {
  border: 1.5px solid var(--line);
  background: var(--accent);
  color: var(--on-accent);
  opacity: 0.5;
}
.example-sheet[data-state="confirmed"] .example-sheet-button.is-primary {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .example-sheet,
  .example-spinner {
    animation: none;
  }
}
.example-chat-body {
  position: relative;
  flex: 1;
  min-height: 0;
}
.askstage .log {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  font-size: var(--fs-14);
}
.log-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
/* Each new message, card, and file fades up as it arrives. Job cards follow one another. */
@keyframes example-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.askstage .log-content > :not(.example-carousel),
.askstage .example-answer > * + *,
.askstage .example-carousel-head,
.askstage .example-job,
.askstage .composer-documents,
.askstage .composer-upload,
.askstage .composer-attachment {
  animation: example-enter 400ms var(--ease) both;
}
.askstage .example-job:nth-child(2) {
  animation-delay: 100ms;
}
.askstage .example-job:nth-child(3) {
  animation-delay: 200ms;
}
@media (prefers-reduced-motion: reduce) {
  .askstage .log-content > *,
  .askstage .example-answer > *,
  .askstage .example-carousel-head,
  .askstage .example-job,
  .askstage .composer-documents,
  .askstage .composer-upload,
  .askstage .composer-attachment {
    animation: none;
  }
}
.example-jump {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
  border: 1px solid var(--hair);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px #00000014;
}
.example-jump[hidden] {
  display: none;
}
.example-jump svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.example-chat-heading {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hair);
  font: 700 20px / 1.2 var(--font-display);
}
.example-chat-heading img {
  flex: none;
  width: 28px;
  height: 28px;
}
/* Like the app: 28px icon boxes, tucked under the answer. */
.example-reply-actions {
  display: flex;
  gap: 2px;
  margin: -8px 0 0 30px;
  color: var(--text-2);
}
.example-reply-actions > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
.example-reply-actions svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
@media (pointer: coarse) {
  /* Bigger boxes, pulled further left so the icons still line up with the answer. */
  .example-reply-actions {
    margin-left: 20px;
  }
  .example-reply-actions > span {
    width: 48px;
    height: 48px;
  }
  .askstage .log {
    overscroll-behavior-y: auto;
  }
}
.example-answer {
  display: grid;
  gap: 12px;
}
.example-answer p {
  white-space: pre-wrap;
}
.example-topic {
  display: grid;
  gap: 4px;
}
.example-topic-title {
  font-weight: 500;
  color: var(--ink);
}
.example-answer ul {
  padding-left: 20px;
  list-style: disc;
}
.example-answer ul ul {
  margin-top: 4px;
  list-style: circle;
}
.example-answer li + li {
  margin-top: 4px;
}
.example-mention {
  border-radius: 3px;
  background: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.example-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14px;
}
.example-attachment svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
  stroke: none;
  color: var(--text-2);
}
.example-attachment span {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The app's job cards: side by side when they fit. */
.example-carousel {
  display: grid;
  gap: 8px;
  margin-left: 36px;
}
.example-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}
.example-carousel-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.example-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--ink);
}
.example-arrow svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.example-arrow.is-off {
  opacity: 0.4;
}
@media (pointer: coarse) {
  .example-arrow {
    display: none;
  }
}
/* One row that runs past the chat's edge, so the next card peeks in. */
.example-jobs {
  display: flex;
  gap: 12px;
  margin-right: -24px;
  overflow: hidden;
}
.example-job {
  display: flex;
  flex: 0 0 20rem;
  flex-direction: column;
  min-width: 0;
  container-type: inline-size;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 16px;
  background: var(--surface);
}
.example-job > strong {
  font-weight: 600;
  line-height: 20px;
}
.example-job > span {
  margin-top: 4px;
  color: var(--text-2);
}
.example-job > .example-job-employer {
  margin: 0 0 4px;
  font-size: 12px;
}
.example-job-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.example-job-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-top: 8px;
}
.example-job-facts b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.example-exposure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}
.example-meter {
  display: inline-flex;
  gap: 2px;
}
.example-meter i {
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--hair-strong);
}
.example-meter .is-on {
  background: var(--accent);
}
.example-view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px;
  white-space: nowrap;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
}
.example-view svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}
.example-sources {
  margin: -4px 0 0 36px;
  color: var(--text-2);
  font-size: 12px;
}
.example-sources-title {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  cursor: pointer;
  min-height: 32px;
}
.example-sources-title svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
  transform: rotate(-90deg);
}
.example-sources[open] .example-sources-title svg {
  transform: none;
}
.example-sources[open] .example-sources-title {
  margin-bottom: 8px;
}
.example-source-content {
  padding: 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  line-height: 1.6;
}
.example-source-content strong {
  font-weight: 500;
  color: var(--ink);
}
.example-source-content p {
  margin-top: 8px;
}
@media (pointer: coarse) {
  .example-sources-title {
    min-height: 44px;
  }
}
.dots {
  display: inline-flex;
  gap: 4px;
  padding: 8px 0;
}
.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: dot 1s infinite;
}
.dots i:nth-child(2) {
  animation-delay: 150ms;
}
.dots i:nth-child(3) {
  animation-delay: 300ms;
}
@keyframes dot {
  0%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}
.example-activity {
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: var(--fs-14);
  font-weight: 500;
}
.example-activity-ring {
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px);
  animation: dot 1s 2;
}
/* ---------- Plans ---------- */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--head-gap);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--ring);
  overflow: hidden;
}
.plan {
  padding: 32px;
}
.plan + .plan {
  box-shadow: inset 1px 0 0 var(--hair);
}
.plan h3 {
  font-size: var(--fs-16);
  font-weight: 600;
}
.plan-for {
  margin-top: 4px;
  font-size: var(--fs-14);
  color: var(--muted);
}
.price {
  margin-top: 8px;
  color: var(--muted);
}
.price b {
  color: var(--ink);
  font: 600 var(--fs-48) / 1 var(--font-display);
  letter-spacing: -0.03em;
  margin-right: 6px;
}
.plan ul {
  list-style: none;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 12px;
}
.plan li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
}
.plan li svg {
  margin-top: 5px;
  color: var(--good);
}

/* ---------- Founder and Job-ish quotes ---------- */
/* Three quotes in a row with hairline dividers, no cards. Captions sit on one line across the row. */
.proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--head-gap) 0 0;
  padding: 0;
  list-style: none;
}
.proof-row li {
  padding: 0 32px;
}
.proof-row li:first-child {
  padding-left: 0;
}
.proof-row li:last-child {
  padding-right: 0;
}
.proof-row li + li {
  box-shadow: -1px 0 0 var(--hair);
}
.proof-row figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
  margin: 0;
}
.proof-row blockquote {
  margin: 0;
}
.proof-row p {
  position: relative;
  margin: 0;
  font: 500 var(--fs-20) / 1.45 var(--font-sans);
  text-wrap: pretty;
}
.proof-row p::before {
  position: absolute;
  transform: translateX(-100%);
  content: "\201C";
}
.proof-row p::after {
  content: "\201D";
}
.proof-row figcaption {
  font-size: var(--fs-14);
  color: var(--muted);
}
.proof-row figcaption b {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Closing call to action ---------- */
.closing .split {
  align-items: center;
}
#waitlist {
  scroll-margin-top: calc(var(--nav-h) + 48px);
}

/* ---------- Footer ---------- */
footer {
  padding: 48px 0 64px;
  box-shadow: 0 -1px 0 var(--hair);
  color: var(--muted);
  font-size: var(--fs-14);
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
footer .left {
  display: flex;
  align-items: center;
  gap: 24px;
}
footer .logo {
  font-size: var(--fs-18);
  color: var(--ink);
}
footer .logo .wordmark {
  height: 24px;
}
footer nav {
  display: flex;
  gap: 24px;
}
footer a:hover {
  color: var(--ink);
}

/* Prototype controls, not part of the design */
.proto {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #111;
  font:
    500 12px / 1 system-ui,
    sans-serif;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}
.proto button {
  padding: 8px 10px;
  border-radius: 8px;
  color: #eee;
}
.proto button:hover {
  background: #333;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  :root {
    --gap: 48px;
  }
  .split,
  .how-grid,
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .proof-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .proof-row li,
  .proof-row li:first-child,
  .proof-row li:last-child {
    padding: 24px 0;
  }
  .proof-row li:first-child {
    padding-top: 0;
  }
  .proof-row li:last-child {
    padding-bottom: 0;
  }
  .proof-row li + li {
    box-shadow: 0 -1px 0 var(--hair);
  }
  .sticky-copy {
    position: static;
  }
  .how-track {
    height: auto;
  }
  .how-sticky {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
  }
  .stage {
    display: none;
  }
  /* Stacked, each scene sits under its step, so the steps drop the progress line and dots. */
  .steps {
    gap: 48px;
    padding-left: 0;
  }
  .steps::before,
  .steps::after,
  .step::before {
    display: none;
  }
  .step h3 {
    color: var(--ink);
  }
  .step p {
    color: var(--text-2);
  }
  .step .scene {
    position: relative;
    inset: auto;
    margin-top: 24px;
    opacity: 1;
    transform: none;
  }
  .plan + .plan {
    box-shadow: inset 0 1px 0 var(--hair);
  }
  .nav-links {
    display: none;
  }
  .nav .wrap {
    grid-template-columns: 1fr auto;
  }
}
@media (max-height: 700px) {
  .how-track {
    height: auto;
  }
  .how-sticky {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
  }
  .how-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stage {
    display: none;
  }
  .steps {
    gap: 48px;
    padding-left: 0;
  }
  .steps::before,
  .steps::after,
  .step::before {
    display: none;
  }
  .step h3 {
    color: var(--ink);
  }
  .step p {
    color: var(--text-2);
  }
  .step .scene {
    position: relative;
    inset: auto;
    max-width: 680px;
    margin-top: 24px;
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 760px) {
  .board-key {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
@media (max-width: 640px) {
  :root {
    --section-y: 72px;
    --head-gap: 32px;
  }
  /* On a phone every section starts at the left edge, this one too. */
  .board-layout,
  .board-intro {
    align-items: stretch;
    text-align: left;
  }
  .board .ds-board-panel {
    margin-top: 24px;
  }
  .wrap {
    padding: 0 20px;
  }
  h2.h {
    font-size: var(--fs-32);
  }
  .lede {
    font-size: var(--fs-16);
  }
  .waitlist-fields {
    flex-direction: column;
  }
  /* 24px above the window, then its header, the chat, one full job card and the reply actions. */
  .hero-window {
    height: 576px;
  }
  .indent {
    margin-left: 0;
  }
  .plan {
    padding: 24px;
  }
  footer .wrap,
  footer .left {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}
html.shot .how-track {
  height: auto;
}
html.shot .how-sticky {
  position: static;
  height: auto;
  min-height: 0;
  padding-bottom: 24px;
}
html.shot .reveal {
  opacity: 1;
  transform: none;
}
html.shot .proto {
  display: none;
}

.source-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--fs-14);
}
.source-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
footer nav button {
  color: inherit;
  font-size: inherit;
}
footer nav button:hover {
  color: var(--ink);
}
.waitlist .note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.confirmation-message {
  max-width: 52ch;
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  font-size: var(--fs-14);
}

.privacy-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  font-size: var(--fs-14);
}
.privacy-nav img {
  display: block;
  max-width: 110px;
  height: auto;
}
.privacy-content {
  max-width: 760px;
  padding-top: 96px;
  padding-bottom: 120px;
}
.privacy-content h1 {
  font: 800 clamp(40px, 5vw, 60px) / 1.05 var(--font-display);
  letter-spacing: -0.035em;
}
.privacy-content h2 {
  margin-top: 48px;
  font: 700 var(--fs-24) / 1.2 var(--font-display);
}
.privacy-content p {
  margin-top: 16px;
  color: var(--text-2);
  font-size: var(--fs-18);
  line-height: 1.7;
}
.privacy-content a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.privacy-content .privacy-updated {
  margin-top: 56px;
  font-size: var(--fs-14);
  color: var(--muted);
}

/* The 404 and 500 pages: one centered message, a little above the middle. */
.simple-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 760px;
  /* Center in the visible screen, not behind a phone browser's toolbars. */
  min-height: calc(100svh - var(--nav-h));
  padding-top: 64px;
  padding-bottom: 160px;
  text-align: center;
}
.simple-page h1 {
  font: 800 clamp(40px, 5vw, 60px) / 1.05 var(--font-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.simple-page p {
  max-width: 44ch;
  margin: 24px 0 32px;
  color: var(--text-2);
  font-size: var(--fs-18);
  text-wrap: pretty;
}
.simple-page p a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.simple-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
@media (pointer: coarse) {
  .privacy-nav .logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.privacy-nav .wordmark-dark {
  display: none;
}
[data-theme="dark"] .privacy-nav .wordmark-light {
  display: none;
}
[data-theme="dark"] .privacy-nav .wordmark-dark {
  display: block;
}

.information-body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.information-body .nav {
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
.information-body .privacy-nav {
  display: flex;
}
.information-content {
  flex: 1;
  width: 100%;
}
.information-content a {
  overflow-wrap: anywhere;
}
.information-content table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--fs-16);
}
.information-content th,
.information-content td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--hair-strong);
  vertical-align: top;
}
.information-content th:first-child,
.information-content td:first-child {
  padding-left: 0;
}
.site-footer {
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}
.footer-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  line-height: 1.25;
}
.footer-identity > :first-child {
  color: var(--ink);
  font-weight: 600;
}
.site-footer nav {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.site-footer a {
  text-underline-offset: 4px;
}
.site-footer a:hover {
  text-decoration: underline;
}
@media (pointer: coarse) {
  .site-footer nav a,
  .information-body .privacy-nav > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Short words like About and Terms still get a 44px-wide box; the text
     stays at the column's left edge. */
  .site-footer nav a {
    min-width: 44px;
  }
  /* The company link sits in a sentence. Its own 44px box opens up that
     line instead of reaching over the line above it. */
  .footer-identity a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.site-footer .footer-mark {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
}
.site-footer .footer-identity {
  flex-shrink: 1;
  min-width: 0;
}
/* The links sit in short unlabeled columns beside the identity. */
.site-footer .wrap {
  align-items: flex-start;
}
.site-footer .footer-nav {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 64px;
}
.footer-group {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}
.footer-group [data-theme-toggle] {
  font-size: inherit;
  line-height: inherit;
}
/* Each link is 44px tall on a touch screen, which spaces them already. */
@media (pointer: coarse) {
  .footer-group {
    gap: 0;
  }
}
@media (max-width: 640px) {
  .site-footer .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    width: 100%;
  }
  .site-footer .footer-group:last-child {
    grid-column: 1 / -1;
  }
}
/* On a phone one job card fills most of the row and the next one peeks in, as in the app.
   The cards run under Hughie's icon instead of beside it, as the app's do. */
@media (max-width: 640px) {
  .example-chat-heading,
  .log-content {
    padding-inline: 16px;
  }
  .example-carousel {
    margin-left: 0;
  }
  .example-job {
    flex-basis: 86%;
  }
  .example-jobs {
    margin-right: -16px;
  }
}
/* A card too narrow for both reactions side by side stacks them. */
@container (max-width: 290px) {
  .example-job-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keeps a hyphenated name like Job-ish on one line. */
.nowrap {
  white-space: nowrap;
}