/*
  WellParsed — marketing.

  Second design pass. The palette moved off the previous warm grey onto the near-black/cream/lime
  triad from "Resume Coach Landing v2", and the page is now read as numbered chapters rather than
  as one continuous scroll.

  Two things about this file are deliberate and easy to undo by accident:

  1. Mobile first. The design arrives from a drawing tool as inline styles with no media query, so
     at 375px its header wraps into three rows. Here the small screen is the default and the wide
     layout is the enhancement.
  2. Every tap target clears 44px, including the nav chapter pills and the footer links. An e2e
     test measures this, because it is the kind of thing that silently regresses when a padding
     value gets tuned for how it looks on a desktop.
*/

/* ----------------------------------------------------------------- fonts */

/*
  Self-hosted, not a CDN. A landing page that asks people to trust it with their career history
  should not open a connection to a font host to render its own name — and the files were already
  shipping in public/fonts while the stylesheet named two families that were never loaded, so the
  whole page has been falling back to system-ui since it launched.
*/
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* Lifted from the v2 design rather than reinvented. */
  --night: #101208;
  --night-card: #181a10;
  --night-line: #2a2d1e;
  --night-dim: #8f957e;
  --night-body: #c6c9b6;
  --night-strong: #e3e5d6;

  --cream: #f2f0e6;
  --paper: #ffffff;
  --ink: #15170d;
  --olive: #6b7040;
  --body: #3c3f2e;
  --faint: #5d604f;
  --line: #e4e2d6;

  --lime: #d6f245;
  --lime-deep: #c2de35;
  --flag: #a8452f;
  --flag-dark: #e07a5f;

  --sans: "Public Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1200px;
  --gap: clamp(20px, 5vw, 24px);
  --bar-h: 64px;
  /* 44px is the smallest thing a thumb hits reliably. */
  --tap: 44px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchored sections must clear the fixed bar, or the heading lands underneath it. */
  scroll-padding-top: var(--bar-h);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  /* The bar is fixed, so the document owes it the height it takes out of the viewport. */
  padding-top: var(--bar-h);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--olive); }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--lime); color: var(--ink);
  padding: 12px 18px; border-radius: 8px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
.measure { max-width: 62ch; }

/* ---------------------------------------------------------------- header */

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--night); border-bottom: 1px solid var(--night-line);
}
.bar-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.wordmark {
  font-family: var(--mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.18em; color: var(--cream);
  min-height: var(--tap); display: inline-flex; align-items: center;
  flex: none;
}
.wordmark:hover { color: var(--lime); }

/*
  The chapter nav is a desktop affordance and nothing is hidden behind it: every pill is a jump to
  a section the reader will reach by scrolling anyway. That is why there is no hamburger — on a
  phone the sticky bar at the foot of the page carries the only control that matters.
*/
.nav { display: none; }

@media (min-width: 1040px) {
  .nav { display: flex; align-items: center; gap: 4px; }
  /* :not(.btn) throughout — the legal pages reuse this nav and put the CTA inside it, and a
     button set in spaced mono caps stops reading as a button. */
  .nav a:not(.btn) {
    display: inline-flex; align-items: center;
    min-height: var(--tap); padding: 0 16px; border-radius: 999px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--night-dim); white-space: nowrap;
  }
  .nav a:not(.btn):hover { color: var(--cream); }
  .nav a[aria-current="true"] { background: var(--lime); color: var(--ink); }
  .nav .plain-link { border-radius: 0; padding: 0 10px; }
}

/* The legal pages have no chapters, so their nav is simply always there. */
.nav-static { display: flex; align-items: center; gap: 4px; }
/* :not(.btn) — the call to action is a button, and a button set in spaced mono caps stops
   reading as one. Only the navigation links take the chapter-pill treatment. */
.nav-static a:not(.btn) {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--night-dim); white-space: nowrap;
}
.nav-static a:not(.btn):hover { color: var(--cream); }
.nav-static .btn { margin-left: 8px; padding: 10px 18px; font-size: 14px; }

/* ------------------------------------------------------------------ type */

h1, h2, h3 { font-family: var(--sans); margin: 0; text-wrap: balance; }
h1 {
  font-size: clamp(42px, 7vw, 84px); line-height: 1.02;
  letter-spacing: -0.02em; font-weight: 700;
}
h1 em { display: block; font-style: italic; color: var(--lime); }
.section-title {
  font-size: clamp(30px, 4vw, 44px); line-height: 1.1;
  letter-spacing: -0.015em; font-weight: 700; max-width: 18ch;
}
h3 { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--olive); margin: 0 0 18px;
}
.lede {
  font-size: clamp(17px, 2vw, 19px); line-height: 1.55;
  color: var(--body); max-width: 60ch; margin: 24px 0 0;
}
.muted { color: var(--body); }
.footnote { font-size: 13px; color: var(--faint); }
.mono-sm {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 12px;
}
.col-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--olive); margin: 0 0 12px;
}

/* --------------------------------------------------------------- surfaces */

.band { padding: clamp(64px, 9vw, 88px) 0; scroll-margin-top: var(--bar-h); }
.band.cream { background: var(--cream); }
.band.paper { background: var(--paper); }
.band.night { background: var(--night); color: var(--cream); }

/* On the dark bands every muted role has to be re-pointed, or the text sinks into the panel. */
.night .eyebrow { color: var(--lime); }
.night .lede, .night .muted { color: var(--night-body); }
.night .footnote, .night .mono-sm { color: var(--night-dim); }
.night .col-label { color: var(--night-dim); }
.night a { color: var(--cream); }
.night a:hover { color: var(--lime); }
/*
  Card text inherits from the card rather than being set on `p`, because a rule on `p` outranks
  every utility class inside it — timestamps came out the same brightness as the headline.
*/
.night .card { background: var(--night-card); border-color: var(--night-line); color: var(--night-strong); }
.night .card .mono-sm { color: var(--night-dim); }
.night .card .muted { color: var(--night-body); }

/* ------------------------------------------------------------------ hero */

.hero {
  background: var(--night); color: var(--cream);
  padding: clamp(56px, 10vw, 96px) 0 clamp(52px, 9vw, 80px);
}
.hero .wrap { max-width: 960px; }
.hero .eyebrow { color: var(--night-dim); margin-bottom: 28px; }
.hero h1 { margin-bottom: 24px; }
.hero .lede { color: var(--night-body); max-width: 56ch; margin: 0 0 36px; }
.hero .footnote {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--night-dim); margin: 16px 0 0;
}

/*
  The hero control is drawn as a text field. It is a link, because it is one: nothing is typed
  here, the whole thing opens the app. A real input would promise a search that does not exist.
*/
.paste-field {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 620px; background: var(--paper); border-radius: 12px; padding: 8px;
  color: var(--faint);
}
.paste-field:hover { color: var(--faint); }
.paste-field .placeholder { flex: 1 1 220px; padding: 12px 14px; font-size: 15px; }
.paste-field .fake-btn {
  flex: none; background: var(--lime); color: var(--ink);
  border-radius: 8px; padding: 12px 18px; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.paste-field:hover .fake-btn { background: var(--lime-deep); }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: clamp(20px, 4vw, 24px);
}
.card > :last-child { margin-bottom: 0; }
.lime-edge { border: 1.5px solid var(--lime); }
.card-title { font-size: 18px; font-weight: 600; margin: 0 0 12px; }

/* One column until there is genuinely room for two. */
.cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .cols { grid-template-columns: 1fr 1fr; gap: 24px; } }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.verdict {
  font-size: clamp(19px, 2.4vw, 22px); line-height: 1.45;
  max-width: 46ch; margin: clamp(32px, 5vw, 44px) 0 0;
}
.verdict .hi { color: var(--olive); }
.night .verdict .hi { color: var(--lime); }

.callout {
  background: var(--paper); border: 1.5px solid var(--lime); border-radius: 12px;
  padding: clamp(24px, 4vw, 32px) clamp(24px, 4vw, 36px);
  margin-top: clamp(32px, 5vw, 44px); max-width: 720px;
}
.callout p {
  font-size: clamp(21px, 3vw, 30px); line-height: 1.3;
  margin: 0; font-weight: 600; letter-spacing: -0.01em;
}

/* --------------------------------------------------------------- chapter */

.chapter-steps { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .chapter-steps { grid-template-columns: repeat(3, 1fr); } }
.chapter-steps p:last-child { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; }

.lists { list-style: none; margin: 0; padding: 0; }
.lists li { padding: 9px 0; font-size: 15px; border-top: 1px solid var(--line); }
.lists li:first-child { border-top: 0; }
.night .lists li { border-color: var(--night-line); color: var(--night-strong); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips li {
  font-size: 13px; color: var(--night-strong);
  border: 1px solid var(--night-line); border-radius: 999px; padding: 5px 11px;
}

.lists .hit::before { content: "✓ "; color: var(--olive); }
.lists .miss::before { content: "✗ "; color: var(--flag); }
.night .lists .hit::before { color: var(--lime); }
.night .lists .miss::before { color: var(--flag-dark); }
.lists b {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); font-weight: 500;
}
.night .lists b { color: var(--night-dim); }

.demo-head { font-size: clamp(19px, 2.4vw, 23px); font-weight: 600; margin: 0 0 20px; line-height: 1.3; }
.ask { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.ask-q { font-size: clamp(17px, 2.1vw, 19px); font-weight: 600; margin: 0 0 8px; }
.ask .muted { font-size: 15px; margin: 0; }

.three { list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; margin: 36px 0 0; padding: 0; }
.three li { padding: 16px 0 0; border-top: 2px solid var(--ink); font-size: 15px; color: var(--body); }
.three b { color: var(--ink); }
@media (min-width: 760px) { .three { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
}
.cta-row p { font-size: 15px; color: var(--faint); margin: 0; }

/* --------------------------------------------------------------- pricing */

.plans { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.plan { display: flex; flex-direction: column; }
.plan h3 { margin: 0 0 14px; }
.plan p { margin: 0 0 14px; color: var(--body); font-size: 15px; }
.plan .btn { margin-top: auto; }
/* Scoped to .plan, because a bare `.price` loses to the `.plan p` rule above it and renders at
   body size — which is exactly how it shipped the first time this was written. */
.plan .price {
  font-size: clamp(34px, 4.4vw, 44px); font-weight: 700; line-height: 1;
  margin: 0 0 16px; letter-spacing: -0.02em; color: var(--ink);
}
.plan .price span { font-size: 15px; font-weight: 400; color: var(--faint); letter-spacing: 0; }

/* ----------------------------------------------------------------- trust */

.trust { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
@media (min-width: 760px) { .trust { grid-template-columns: 1fr 1fr; gap: 32px; } }
.trust h3 { margin-bottom: 8px; }
.trust p { margin: 0; color: var(--body); font-size: 16px; }

/* ------------------------------------------------------------------- faq */

.faq { max-width: 760px; margin-top: 28px; }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 28px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--olive); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq p { font-size: 15px; line-height: 1.6; color: var(--body); margin: 10px 0 0; max-width: 68ch; }

/* --------------------------------------------------------------- closing */

.closing { text-align: center; }
.closing .wrap { max-width: 800px; }
.closing .section-title { max-width: none; margin: 0 auto 28px; }
.closing .footnote {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 18px 0 0;
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 12px 22px;
  border: 1px solid var(--ink); border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--ink); background: transparent;
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn-lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime-deep); border-color: var(--lime-deep); color: var(--ink); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.night .btn { border-color: var(--cream); color: var(--cream); }
.night .btn:hover { background: var(--cream); color: var(--ink); }
.night .btn-lime, .bar .btn-lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.night .btn-lime:hover, .bar .btn-lime:hover { background: var(--lime-deep); border-color: var(--lime-deep); color: var(--ink); }
.bar .btn { flex: none; padding: 10px 18px; font-size: 14px; }

/* A standalone link that still has to clear 44px, so it cannot sit inline in a paragraph. */
.link-out {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}

/* ----------------------------------------------------------- sticky bar */

/*
  The one enhancement on this page that needs a script: it appears once the hero is behind you.
  Everything it offers is a duplicate of a control already in the document, so with JavaScript off
  the page loses a shortcut and nothing else.
*/
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(16, 18, 8, 0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid var(--night-line);
  padding: 12px var(--gap);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transform: translateY(110%); transition: transform 180ms ease;
}
.sticky-cta[data-shown="true"] { transform: translateY(0); }
/* `display: flex` outranks the UA rule for [hidden], so with no script the bar has to be told. */
.sticky-cta[hidden] { display: none; }
.sticky-cta span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--night-body);
}
.sticky-cta .btn { flex: none; padding: 11px 18px; font-size: 14px; }
/* Under ~420px the label and the button cannot both fit on one row, and the button is the point. */
@media (max-width: 419px) { .sticky-cta { justify-content: center; } .sticky-cta span { display: none; } }
/* Above this width the header CTA is always on screen, so a second one is just clutter. */
@media (min-width: 1040px) { .sticky-cta { display: none; } }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--night); color: var(--night-dim); border-top: 1px solid var(--night-line); padding: 28px 0 40px; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.foot .wordmark { color: var(--night-dim); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot a { color: var(--night-dim); display: inline-flex; align-items: center; min-height: var(--tap); font-size: 13px; }
.foot a:hover { color: var(--lime); }
.foot p { margin: 0; }
.foot .tagline { font-size: 13px; color: var(--night-dim); }

/* ------------------------------------------------------------ legal pages */

/*
  Privacy and terms are read, not scanned, so they get a single measured column and more room
  between thoughts than the marketing page needs.
*/
.legal .wrap { max-width: 760px; }
.legal-title { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; font-weight: 700; }
.legal h2 {
  font-size: clamp(20px, 2.6vw, 25px); font-weight: 600;
  margin: 40px 0 12px; padding-top: 22px; border-top: 1px solid var(--line);
}
.legal p { margin: 0 0 16px; color: var(--body); }
.legal p b, .legal li b { color: var(--ink); }
.legal .plain { list-style: none; margin: 0 0 16px; padding: 0; }
.legal .plain li { color: var(--body); padding: 10px 0; border-top: 1px solid var(--line); }
.legal .plain li:first-child { border-top: 0; }
.legal .lede { margin-bottom: 10px; }
.legal .footnote { margin-bottom: 24px; }