/* Styling for the public homepage (home.html).
 *
 * Like legal.css this deliberately does NOT build on styles.css: that sheet frames
 * everything inside a fixed-height phone shell with its own scroll container, which is
 * wrong for a full-width marketing page. Google's OAuth reviewers fetch "/" directly and
 * must get a readable description of the app with no sign-in, so the page stays plain
 * static HTML whose only call is the public job counter.
 *
 * The palette is the "gold + espresso" system from the JobSwipe design canvas: one ink
 * colour, warm off-white paper, gold for emphasis, green for anything that means "sent"
 * and clay for anything that needs the user. It is deliberately light-only — the design
 * commits to a single warm look, and a dark inversion of it reads as a different product.
 */

:root {
  color-scheme: light;

  --ink: #2b2114;          /* headings, primary fills, text on paper */
  --ink-deep: #241c0a;     /* text on a gold fill */
  --ink-hover: #3d2f16;    /* primary button hover */
  --mid: #57534b;          /* body copy inside cards */
  --muted: #7a766e;        /* secondary copy */
  --faint: #a09b93;        /* labels, captions */

  --gold: #C69A3F;
  --gold-soft: #f7edd6;
  --gold-line: #eaddbe;
  --gold-ink: #96701f;

  --green: #3f6f52;
  --green-soft: #f2f6f3;

  --clay: #c46a4a;
  --clay-soft: #fbf1ec;

  --paper: #fdfcfb;        /* page and card ground */
  --card: #ffffff;
  --sunk: #f7f5f2;         /* inset panels */
  --hair: #f1efeb;         /* dividers */
  --stone: #eae7e1;
  --line: #e4e0da;
  --line-2: #e8e5e0;

  --display: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

a { color: var(--ink); text-underline-offset: 2px; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }

/* ---- top bar ---- */

.topbar { border-bottom: 1px solid var(--hair); background: var(--paper); }
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  flex-wrap: wrap;
  row-gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand .mark {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--gold);
  color: var(--ink-deep);
  font-size: 15px;
}

.topbar nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.topbar nav a { color: var(--mid); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }

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

.btn {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 16px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-hover); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--faint); }
.topbar .btn { padding: 11px 20px; font-size: 14px; border-radius: 14px; }

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

.hero {
  padding: 74px 0 84px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--gold-soft) 0%, var(--paper) 60%);
}
.hero .wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; }

/* The live job count. Hidden until the API answers, so a number we cannot stand behind
   is never on screen — see the script at the bottom of home.html. */
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 8px 8px 8px 14px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 10px 26px -18px rgba(198, 154, 63, .7);
}
.stat-pill .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--green); }
.stat-pill b { font-variant-numeric: tabular-nums; font-weight: 700; }
.stat-pill .live {
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.hero .emoji {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--gold-line);
  font-size: 30px;
  box-shadow: 0 12px 30px -16px rgba(198, 154, 63, .6);
}
.hero h1 {
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
  max-width: 840px;
  text-wrap: balance;
}
.hero p.lede {
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 680px;
  margin: 0;
  text-wrap: pretty;
}
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .fineprint { margin: 0; font-size: 14px; color: var(--faint); }

/* ---- phone showcase ---- */

/* Three static screens from the app, at a size where the copy is still legible. They are
   pictures, not a live demo: nothing here calls the API or needs a session. */
.showcase {
  padding: 0 0 88px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--sunk) 100%);
}
.showcase .wrap { display: flex; justify-content: center; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.phone {
  width: 250px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 34px;
  box-shadow: 0 30px 60px -34px rgba(43, 33, 20, .35);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phone.lift { margin-bottom: 26px; }
.phone .ph-head { display: flex; justify-content: space-between; align-items: center; }
.phone .ph-day { font-size: 10px; color: var(--faint); }
.phone .ph-name { font-family: var(--display); font-size: 15px; font-weight: 700; }
.phone .ph-av {
  width: 28px; height: 28px; border-radius: 99px; background: var(--stone);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.phone .ph-dark { background: var(--ink); border-radius: 20px; padding: 16px; color: var(--paper); }
.phone .ph-dark .k { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #8f8b82; }
.phone .ph-dark .v { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; margin-top: 4px; }
.bars { display: flex; gap: 4px; align-items: flex-end; height: 32px; margin-top: 12px; }
.bars i { flex: 1; border-radius: 3px; background: var(--green); }
.bars i.on { background: var(--gold); }
.bars i.off { background: rgba(253, 252, 251, .16); }
.phone .ph-row { display: flex; gap: 10px; }
.phone .ph-tile { flex: 1; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; padding: 12px; }
.phone .ph-tile .n { font-family: var(--display); font-size: 19px; font-weight: 700; }
.phone .ph-tile .n.gold { color: var(--gold); }
.phone .ph-tile .l { font-size: 10px; color: var(--faint); }
.phone .ph-list { background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; padding: 6px 12px; }
.phone .ph-item { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.phone .ph-item:last-child { border-bottom: 0; }
.phone .ph-item .pip { width: 6px; height: 6px; border-radius: 99px; background: var(--green); }
.phone .ph-item .pip.clay { background: var(--clay); }
.phone .ph-item .t { font-size: 11px; font-weight: 600; }
.phone .ph-item .s { font-size: 9px; color: var(--faint); }
.phone .ph-card { background: var(--card); border: 1px solid var(--line-2); border-radius: 22px; padding: 16px; flex: 1; }
.phone .ph-card .logo {
  width: 40px; height: 40px; border-radius: 13px; background: var(--gold); color: var(--ink-deep);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 15px;
}
.phone .ph-card .match {
  border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--gold-ink);
  border-radius: 10px; padding: 5px 9px; font-size: 11px; font-weight: 700;
}
.phone .ph-card .role { font-family: var(--display); font-size: 21px; line-height: 1.1; font-weight: 700; margin-top: 14px; }
.phone .ph-card .co { font-size: 12px; color: var(--muted); margin-top: 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.chips span { background: var(--hair); border-radius: 9px; padding: 6px 9px; font-size: 11px; font-weight: 600; }
.chips span.pay { background: var(--green-soft); color: var(--green); }
.phone .ph-acts { display: flex; gap: 10px; align-items: center; }
.phone .ph-acts .circle {
  width: 44px; height: 44px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--card); display: grid; place-items: center; font-size: 15px; color: var(--mid);
}
.phone .ph-acts .wide {
  flex: 1; height: 48px; border-radius: 16px; background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600;
}
.phone .ph-acts .wide em { color: #7fbf98; font-style: normal; }
.phone .ph-thread { background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; padding: 14px; }
.phone .ph-thread .from { font-size: 10px; color: var(--faint); }
.phone .ph-thread .msg { font-size: 11px; line-height: 1.5; color: var(--mid); margin-top: 6px; }
.phone .ph-thread .reply { background: var(--green-soft); border-radius: 14px; padding: 12px; margin-top: 10px; }
.phone .ph-thread .reply .who { font-size: 10px; font-weight: 700; color: var(--green); }
.phone .ph-cap { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* ---- sections ---- */

section { padding: 84px 0; border-top: 1px solid var(--hair); }
section h2 { font-size: 40px; line-height: 1.05; margin: 0 0 10px; scroll-margin-top: 20px; text-wrap: balance; }
section > .wrap > p.sub { color: var(--muted); margin: 0 0 40px; max-width: 62ch; font-size: 17px; }

.steps { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 28px;
  padding: 28px;
}
.step .n {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}
.step h3 { font-size: 22px; margin: 0 0 8px; }
.step p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

/* The drafted email shown inside step 3 — the one part of the flow a visitor cannot
   picture from a sentence. */
.mail {
  margin-top: 18px;
  background: var(--sunk);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 16px;
  font-size: 13px;
  color: var(--mid);
}
.mail .hdr { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint); }
.mail .hdr b { color: var(--ink); font-weight: 700; }
.mail .subj { margin-top: 8px; font-size: 12px; color: var(--faint); }
.mail .subj b { color: var(--ink); }
.mail .body { margin-top: 10px; line-height: 1.6; }
.mail .attach {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 12px; font-weight: 600;
}

/* ---- CV studio ---- */

.studio {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 880px) { .studio { grid-template-columns: 1fr; } }
.studio .tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-ink);
  border-radius: 999px; padding: 7px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.studio h2 { margin: 18px 0 12px; }
.studio > div > p { color: var(--muted); margin: 0 0 22px; font-size: 17px; text-wrap: pretty; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--mid); }
.ticks .tick {
  flex: none; width: 22px; height: 22px; border-radius: 99px; margin-top: 2px;
  background: var(--green-soft); color: var(--green);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.ticks b { color: var(--ink); }

.cvcard {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 30px 60px -40px rgba(43, 33, 20, .4);
}
.cvcard .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cvcard .file { font-size: 15px; font-weight: 700; }
.cvcard .when { font-size: 12px; color: var(--faint); }
.cvcard .score {
  background: var(--green-soft); color: var(--green); border-radius: 10px;
  padding: 7px 11px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.cvcard .sheet { margin-top: 18px; background: var(--sunk); border-radius: 18px; padding: 18px; }
.cvcard .sheet .lbl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cvcard .sheet .ln { height: 8px; border-radius: 99px; background: var(--stone); margin-top: 8px; }
.cvcard .sheet .ln.short { width: 62%; }
.cvcard .sheet .gap { height: 18px; }
.cvcard .skills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cvcard .skills span { background: var(--gold-soft); color: var(--gold-ink); border-radius: 9px; padding: 6px 10px; font-size: 12px; font-weight: 600; }
.cvcard .skills span.more { background: var(--hair); color: var(--muted); }

/* ---- scope table ---- */

.table-scroll { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 22px; background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; }
th, td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
tr:last-child td { border-bottom: 0; }
th { background: var(--sunk); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
td { color: var(--mid); }
code {
  background: var(--sunk);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink);
  word-break: break-word;
}

.callout {
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: 22px;
  padding: 22px 24px;
  margin: 24px 0 0;
  color: var(--mid);
}
.callout p { margin: 0 0 12px; }
.callout p:last-child { margin-bottom: 0; }
.callout a { color: var(--gold-ink); }

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

.faq { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.faq > div { background: var(--card); border: 1px solid var(--line-2); border-radius: 24px; padding: 24px; }
.faq h3 { font-size: 17px; margin: 0 0 8px; }
.faq p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---- closing call to action ---- */

#start { border-top: 0; padding-top: 0; }
#start .wrap > div {
  background: var(--ink);
  color: var(--paper);
  border-radius: 36px;
  padding: 72px 40px;
  text-align: center;
}
#start h2 { color: var(--paper); font-size: 40px; margin: 0 0 12px; }
#start p.sub { color: #a8a29a; margin: 0 auto 28px; max-width: 46ch; }
#start .btn-primary { background: var(--gold); color: var(--ink-deep); }
#start .btn-primary:hover { background: #d8ab4a; }

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

footer.site {
  border-top: 1px solid var(--hair);
  padding: 40px 0 56px;
  color: var(--faint);
  font-size: 14px;
}
footer.site .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer.site .links { display: flex; gap: 22px; flex-wrap: wrap; font-weight: 600; }
footer.site .links a { color: var(--mid); text-decoration: none; }
footer.site .links a:hover { color: var(--ink); }
footer.site .legal { text-align: right; line-height: 1.6; }
footer.site p { margin: 0; }

@media (max-width: 720px) {
  .hero { padding: 52px 0 60px; }
  .hero h1 { font-size: 38px; }
  .hero p.lede { font-size: 17px; }
  section { padding: 56px 0; }
  section h2, #start h2 { font-size: 28px; }
  #start .wrap > div { padding: 48px 24px; border-radius: 28px; }
  footer.site .wrap { flex-direction: column; }
  footer.site .legal { text-align: left; }
  /* Brand on its own row, then the links and the call to action share the next one.
     The in-page jump links go: at this width the whole page is a short scroll, and
     keeping them forces the row to wrap again. Privacy and Terms stay — those are the
     links a visitor (and Google's reviewer) comes looking for. */
  .brand { flex: 1 0 100%; margin-right: 0; }
  .topbar nav { gap: 18px; margin-right: auto; }
  .nav-jump { display: none; }
}