/* ============================================================================
   page.css — shared stylesheet for the jobshifu.com CONTENT SUB-PAGES
   (/honesty, /autofill, and the rest of the Tier-A set).

   Why this file exists instead of a shared extraction from index.html:
   the landing page carries ~640 lines of INLINE css, most of it driving the
   hero tailoring loop, the showcase rows and the autofill animation. Pulling a
   common base out of it would mean rewriting index.html's <style> block and
   re-verifying every animation on the highest-value page we own. The sub-pages
   need maybe 15% of that css, so they get their own lean sheet and index.html
   stays byte-stable apart from its nav/footer links.

   ⚠️ The :root block below is COPIED from index.html, which is itself a copy of
   apps/web/src/app/style.css (seed #fc7000). Three copies now. On a theme change
   update all three. Tokens only, no new hexes: DESIGN.md is law.

   Voice constraints that apply to every page using this sheet:
     · "resume" is UNACCENTED, always.
     · No em dashes in prose.
     · No "copilot", no "local-first", no "BYO key", no privacy-moat claims.
     · The differentiator is the Honesty Engine (non-fabrication).
   ========================================================================== */

:root {
  /* Warm Signal tokens (mirror apps/web/src/app/style.css — seed #fc7000) */
  --neutral-1: #fdfcfc; --neutral-2: #faf8f8; --neutral-3: #f3f0ee; --neutral-4: #ebe7e5;
  --neutral-5: #e3dcda; --neutral-6: #d8d0cd; --neutral-7: #cbc1bd; --neutral-11: #69615e; --neutral-12: #312d2b;
  --accent-2: #fff7f3; --accent-3: #ffece3; --accent-4: #ffe1d2; --accent-7: #ffad84; --accent-9: #fc7000; --accent-11: #974b1f; --accent-12: #49210b;
  --accent-on-solid: #140b06;
  --sand: #dcc59b; --sand-soft: #efe4cf; --sand-ink: #5c4a2a;
  --amber-3: #fef1d6; --amber-9: #f59e0b; --amber-11: #96470a;
  --success-3: #dafbd9; --success-9: #00dd3e; --success-11: #03791f;
  --error-3: #ffebe9; --error-11: #a93433;
  --info-3: #e3f3ff; --info-11: #226a95;
  --grad-brand: linear-gradient(120deg, #ffa04d 0%, #fc7000 55%, #e65100 100%);
  --grad-cta: linear-gradient(135deg, #cf470a 0%, #b83e05 100%);
  --sand-mid: #e6d4b4;
  --font-display: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-badge: 10px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(90,40,0,.07); --shadow: 0 4px 16px rgba(90,40,0,.10); --shadow-lg: 0 12px 40px rgba(90,40,0,.18);
  --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --background: var(--neutral-1); --surface: var(--neutral-2); --text: var(--neutral-12); --text-secondary: var(--neutral-11);
  --maxw: 1120px;
  --readw: 720px;   /* measure for long-form prose: ~72ch at 17px */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); color: var(--text); background: var(--background);
  font-size: 16px; line-height: 1.6; font-weight: 450; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
a { color: var(--accent-11); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Visible-on-focus skip link (the sub-pages are long-form; keyboard users
   should not have to tab the whole nav on every one). */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: #fff; color: var(--accent-11); font-weight: 600;
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0; box-shadow: var(--shadow);
}
.skip:focus { left: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--accent-11); background: var(--accent-3);
  padding: 6px 12px; border-radius: 6px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-9); box-shadow: 0 0 0 4px rgba(252,112,0,.18); }

/* ============ Buttons (copied from index.html) ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; border: none; border-radius: var(--radius);
  padding: 12px 20px; transition: transform 200ms var(--ease-spring), box-shadow 200ms, background 200ms;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
/* --grad-cta is the ONLY gradient allowed to carry white text (strict AA across
   every stop). --grad-brand is signal-only and takes dark text. See DESIGN.md. */
.btn-cta { background: var(--grad-cta); color: #fff; box-shadow: var(--shadow); }
.btn-cta:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--neutral-6); }
.btn-ghost:hover { background: var(--surface); text-decoration: none; }
.btn-lg { padding: 15px 26px; font-size: 16px; }

/* ============ Header / footer (must match index.html exactly) ============ */
header.site {
  position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(1.4) blur(10px);
  background: rgba(252,253,253,.82); border-bottom: 1px solid var(--neutral-4);
}
.navbar { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); }
.navbar .brand { font-size: 24px; gap: 12px; letter-spacing: -0.01em; }
.navbar .brand .mark { width: 40px; height: 40px; border-radius: 10px; }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: url("/brand-mark.png") center / cover no-repeat;
  box-shadow: var(--shadow-sm);
}
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--text-secondary); font-weight: 500; font-size: 15px; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent-11); font-weight: 600; }
.nav-links .btn { color: #fff; padding: 9px 16px; font-size: 14px; }
.nav-links .btn-ghost { color: var(--text); }
.nav-links .btn-ghost:hover { color: var(--text); }
@media (max-width: 860px) { .nav-links a:not(.btn) { display: none; } }
@media (max-width: 400px) { .nav-links { gap: 10px; } .nav-links .btn { padding: 8px 12px; } }

footer.site { border-top: 1px solid var(--neutral-4); background: var(--surface); padding: 34px 0; margin-top: 72px; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--text-secondary); }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { color: var(--text-secondary); }
.foot-links a:hover { color: var(--text); }
.foot-col-set { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text); margin-bottom: 3px; }
.foot-col a { color: var(--text-secondary); font-size: 14px; }
.foot-col a:hover { color: var(--text); }

/* ============ Page head ============ */
.page-head { position: relative; overflow: hidden; padding: 56px 0 8px; }
/* Warm blob only, no dot grid: the sub-pages are reading surfaces, and the
   texture that reads as energy on the hero reads as noise behind body copy. */
.page-head::before {
  content: ""; position: absolute; inset: -46% -18% auto auto; width: 54vw; height: 54vw; max-width: 620px; max-height: 620px;
  background: var(--grad-brand); filter: blur(104px); opacity: .20; border-radius: 50%; z-index: 0; pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.05rem); font-weight: 700; margin: 16px 0 0; max-width: 19ch; }
.page-head .sub { font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: var(--text-secondary); margin-top: 16px; max-width: 56ch; }

.crumbs { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.crumbs a { color: var(--text-secondary); }
.crumbs a:hover { color: var(--accent-11); }
.crumbs .sep { padding: 0 7px; color: var(--neutral-6); }

/* ---- The answer block.
   "Answer near the top" is the single highest-weight content factor in the AI
   citation data (8.8/10), and self-contained passages score 8.0: this block has
   to make sense quoted with zero surrounding context, so it never opens with
   "it" or "this" and always names JobShifu explicitly.
   Tinted region, NOT a left edge bar: one-sided colored strips are banned
   repo-wide (see the no-thin-accent-bars rule). ---- */
.answer {
  background: var(--accent-2); border: 1px solid var(--accent-4);
  border-radius: var(--radius-lg); padding: 24px 28px; margin: 34px 0 0; max-width: var(--readw);
}
.answer p { font-size: 1.09rem; line-height: 1.62; color: var(--accent-12); }
.answer p + p { margin-top: 12px; }
.answer strong { font-weight: 700; }

/* ============ Long-form article body ============ */
.article { padding: 8px 0 0; }
.article .wrap > * { max-width: var(--readw); }
.article section { margin-top: 56px; }
.article h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.95rem); font-weight: 700; margin: 0 0 16px;
  scroll-margin-top: 92px;   /* sticky header clearance for #anchor deep links */
}
.article h3 { font-size: 1.16rem; font-weight: 700; margin: 30px 0 10px; }
.article p { font-size: 1.045rem; line-height: 1.72; }
.article p + p { margin-top: 15px; }
.article ul, .article ol { margin: 15px 0 0; padding-left: 22px; }
.article li { font-size: 1.045rem; line-height: 1.68; margin-top: 9px; }
.article li strong { font-weight: 700; }
.article .lead { font-size: 1.1rem; color: var(--text-secondary); }

/* Pull-quote style statement line. Used sparingly: one per page at most. */
.claim {
  font-family: var(--font-display); font-size: clamp(1.22rem, 2.1vw, 1.5rem); font-weight: 700;
  line-height: 1.32; letter-spacing: -0.015em; color: var(--accent-12);
  margin: 26px 0; padding: 20px 24px; background: var(--sand-soft); border-radius: var(--radius-lg);
}

/* Step list */
.steps { counter-reset: step; margin: 22px 0 0; padding: 0; list-style: none; }
.steps li { position: relative; padding-left: 46px; margin-top: 20px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-3); color: var(--accent-11); font-family: var(--font-display);
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.steps li h3 { margin: 0 0 5px; font-size: 1.08rem; }

/* Card grid */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0 0; max-width: var(--readw); }
.card { background: #fff; border: 1px solid var(--neutral-4); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.card p { font-size: .975rem; color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }

/* Comparison table. Wide content scrolls in its own container so the page body
   never scrolls horizontally on a phone. */
.table-scroll { overflow-x: auto; margin: 24px 0 0; max-width: var(--readw); -webkit-overflow-scrolling: touch; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .975rem; }
table.cmp th, table.cmp td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--neutral-4); vertical-align: top; }
table.cmp thead th { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); background: var(--neutral-3); }
table.cmp thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
table.cmp thead th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
table.cmp tbody tr:last-child td { border-bottom: none; }
table.cmp td:first-child { font-weight: 600; }

/* Inline "no source, no line" style code/label chip */
.chip {
  display: inline-block; font-size: .82rem; font-weight: 600; padding: 3px 9px; border-radius: 6px;
  background: var(--neutral-3); color: var(--text-secondary); white-space: nowrap;
}
.chip.ok { background: var(--success-3); color: var(--success-11); }
.chip.no { background: var(--error-3); color: var(--error-11); }
.chip.warn { background: var(--amber-3); color: var(--amber-11); }

/* ============ FAQ ============
   Rendered as <details> so every answer is in the DOM at load. An extractor
   that never fires a click still reads the full text, which is the entire point
   of shipping FAQ content at all. Do not convert these to JS-toggled panels. */
.faq { max-width: var(--readw); margin-top: 22px; }
.faq-item { border: 1px solid var(--neutral-4); border-radius: var(--radius); background: #fff; margin-top: 10px; overflow: hidden; }
.faq-item > summary {
  cursor: pointer; list-style: none; padding: 16px 46px 16px 20px; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.03rem; color: var(--text);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg); transition: transform 200ms var(--ease-out);
}
.faq-item[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item > summary:hover { background: var(--neutral-2); }
.faq-item > summary:focus-visible { outline: 2px solid var(--accent-9); outline-offset: -2px; }
.faq-item .a { padding: 0 20px 18px; }
.faq-item .a p { font-size: 1.0rem; line-height: 1.68; color: var(--text-secondary); }
.faq-item .a p + p { margin-top: 11px; }

/* ============ Related links (internal linking is how the new pages get
   discovered at all: index.html linked nothing but /privacy and /terms) ====== */
.related { margin-top: 56px; max-width: var(--readw); }
.related h2 { font-size: 1.25rem; margin-bottom: 14px; }
.rel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rel-grid a {
  display: block; padding: 15px 18px; border: 1px solid var(--neutral-4); border-radius: var(--radius);
  background: #fff; color: var(--text); font-weight: 600; font-size: .98rem;
  transition: border-color 180ms, transform 180ms var(--ease-out);
}
.rel-grid a:hover { text-decoration: none; border-color: var(--accent-7); transform: translateY(-1px); }
.rel-grid a span { display: block; font-weight: 450; font-size: .9rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
@media (max-width: 700px) { .rel-grid { grid-template-columns: 1fr; } }

/* ============ Closing CTA band ============ */
.cta-band { margin-top: 68px; padding: 52px 0; background: var(--sand-soft); text-align: center; }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 700; }
.cta-band p { margin: 14px auto 0; max-width: 52ch; color: var(--sand-ink); font-size: 1.05rem; }
.cta-band .launch-cta { display: flex; gap: 12px; margin-top: 26px; justify-content: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}