/* =========================================================================
   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;
}

/* ---------- 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 form {
  display: flex;
  gap: 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 ---------- */
.hero {
  padding: 88px 0 0;
  overflow: hidden;
}
.hero h1 {
  font: 640 var(--fs-display) / 1.02 var(--font-display);
  letter-spacing: -0.038em;
}
.hero .lede {
  margin-top: 24px;
}
.hero .waitlist {
  margin-top: 32px;
}
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-center h1 {
  max-width: 14ch;
}
.hero-center .lede {
  max-width: 52ch;
}
.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);
}

/* ---------- 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;
}
.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);
}
.how-track {
  position: relative;
  height: 500vh;
  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);
}
.steps::after {
  height: 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 300ms;
}
.step p {
  margin-top: 8px;
  max-width: 40ch;
  color: var(--muted);
  font-size: var(--fs-16);
  transition: color 300ms;
}
.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;
}
.example-saved .example-action {
  gap: 8px;
  margin: 0;
}
.example-saved .example-action.is-ghost {
  border-color: transparent;
  background: 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) {
  .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;
}
.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);
  }
  #board .split {
    gap: 16px;
  }
  #board .source-note {
    margin-top: 8px;
  }
  .sticky-copy {
    position: static;
  }
  .how-track {
    height: auto;
  }
  .how-sticky {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
  }
  .stage {
    display: none;
  }
  .steps {
    gap: 48px;
  }
  .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;
  }
  .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: 640px) {
  :root {
    --section-y: 72px;
    --head-gap: 32px;
  }
  .wrap {
    padding: 0 20px;
  }
  h2.h {
    font-size: var(--fs-32);
  }
  .lede {
    font-size: var(--fs-16);
  }
  .waitlist form {
    flex-direction: column;
  }
  .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;
  }
}
.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;
}
/* On a phone one job card fills most of the row and the next one peeks in, as in the app. */
@media (max-width: 640px) {
  .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);
  }
}