:root{
  /* Palette tokens: spec.md section 4, hex values verbatim. Do not introduce any other colour. */
  --ink-slate:#1F2A37;      /* primary text; primary bg for reversed sections */
  --warm-white:#FAF7F2;     /* page bg; reversed text on Ink Slate */
  --safety-amber:#E8A33D;   /* accent / "flagged, needs your input" motif — decorative only on Warm White */
  --amber-on-slate:#E8A33D; /* Amber on Ink Slate passes AA (~6.7:1); used for small accent labels/links there */
  --verified-green:#2E7D4F; /* success/reviewed states, Warm White background only (~4.72:1) */
  --alert-rust:#B54334;     /* overdue/unresolved only, Warm White background only (~5.14:1) */
  --border-hairline:rgba(31,42,55,0.22);  /* Ink Slate at low alpha: section dividers only, never a form control */
  --border-control:#1F2A37;               /* solid Ink Slate: every input/select/button border (>=3:1, in fact ~13.6:1) */

  /*
    Type per spec.md section 4 names three Google Fonts (IBM Plex Serif, Inter, JetBrains Mono).
    This page loads zero external requests (build brief's page rules), so no font is fetched from
    Google's CDN. Each stack names the spec's font first (used if the visitor has it installed),
    then system fonts in the same register.
  */
  --font-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --fs-small:0.875rem;
  --fs-body:1.0625rem;
  --fs-lead:1.25rem;
  --fs-h4:1.125rem;
  --fs-h3:1.4rem;
  --fs-h2:1.9rem;
  --fs-h1:2.5rem;

  --space-1:0.5rem;
  --space-2:0.85rem;
  --space-3:1.25rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:4.5rem;

  --max-prose:42rem;
  --max-wide:62rem;
  --radius:6px;
}

/*
  No prefers-color-scheme flip: the brief allows one only "if you can keep contrast in both themes",
  and this page's audited pairs (spec.md section 4) are only checked for Ink Slate on Warm White and
  the reverse. One high-contrast theme throughout avoids re-deriving a second set of pairs.
*/

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--warm-white);
  color:var(--ink-slate);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.6;
}
main, section{display:block;}
h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:600;
  line-height:1.25;
  margin:0 0 var(--space-2) 0;
  color:var(--ink-slate);
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);}
p{margin:0 0 var(--space-3) 0; max-width:var(--max-prose);}
ul,ol{margin:0 0 var(--space-3) 0; padding-left:1.3em; max-width:var(--max-prose);}
li{margin-bottom:var(--space-1);}
a{color:var(--ink-slate); text-decoration-thickness:1.5px; text-underline-offset:2px;}
a:hover{text-decoration-thickness:3px;}
small,.fs-small{font-size:var(--fs-small);}
sup a{text-decoration:none;}
strong{font-weight:600;}
code,.mono{font-family:var(--font-mono);}

:focus-visible{outline:3px solid var(--ink-slate); outline-offset:2px;}
.hero :focus-visible, .site-footer :focus-visible, .closing :focus-visible{outline-color:var(--warm-white);}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--warm-white); color:var(--ink-slate);
  padding:0.75em 1.25em; z-index:100; border-radius:var(--radius);
}
.skip-link:focus{left:var(--space-2); top:var(--space-2);}

.wrap{max-width:var(--max-wide); margin:0 auto; padding:0 1.25rem;}
.wrap-prose{max-width:var(--max-wide); margin:0 auto; padding:0 1.25rem;}
.wrap-prose > h1{max-width:40rem;}

section{padding:var(--space-6) 0;}
section + section{border-top:1px solid var(--border-hairline);}

/* Small utilities (these replace what were inline style attributes, which the page's CSP no longer allows) */
.wrap-prose.flush{padding:0;}
.mb-0{margin-bottom:0;}
table.pricing.wide{max-width:none;}
.site-footer .logo-mark{width:1.7em; height:1.7em;}

/* Header */
.site-header{padding:var(--space-3) 0; border-bottom:1px solid var(--border-hairline);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;}
.logo{display:flex; align-items:center; gap:0.6em; text-decoration:none; color:var(--ink-slate);}
.logo:hover{color:var(--ink-slate);}
.logo-mark{width:2.1em; height:2.1em; flex:none;}
.logo-img{height:1.8rem; width:auto; display:block;}
.logo-word{font-family:var(--font-serif); font-weight:600; font-size:1.3rem; letter-spacing:0.01em;}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:var(--space-3); flex-wrap:wrap;}
.site-nav a{font-size:var(--fs-small); text-decoration:none; color:var(--ink-slate); font-weight:600;}
.site-nav a:hover{text-decoration:underline;}
.site-nav ul{align-items:center;}
.site-nav .nav-auth{margin:0;}
.header-cta{
  font-size:var(--fs-small); font-weight:600; text-decoration:none;
  padding:0.55em 1em; border-radius:var(--radius);
  background:var(--ink-slate); color:var(--warm-white); white-space:nowrap;
}
.header-cta:hover{background:var(--safety-amber); color:var(--ink-slate);}

/* Buttons */
.btn{
  display:inline-block; font-family:var(--font-sans); font-weight:600; font-size:var(--fs-body);
  text-decoration:none; padding:0.75em 1.4em; border-radius:var(--radius);
  border:2px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--ink-slate); color:var(--warm-white);}
.btn-primary:hover{background:var(--safety-amber); color:var(--ink-slate);}
.btn-secondary{background:transparent; color:var(--ink-slate); border-color:var(--ink-slate);}
.btn-secondary:hover{background:var(--safety-amber); color:var(--ink-slate); border-color:var(--ink-slate);}
.hero .btn-primary, .closing .btn-primary{background:var(--warm-white); color:var(--ink-slate);}
.hero .btn-primary:hover, .closing .btn-primary:hover{background:var(--safety-amber); color:var(--ink-slate);}
.hero .btn-secondary, .closing .btn-secondary{color:var(--warm-white); border-color:var(--warm-white);}
.hero .btn-secondary:hover, .closing .btn-secondary:hover{color:var(--ink-slate); background:var(--warm-white);}
.btn-small{padding:0.4em 0.9em; font-size:var(--fs-small);}
.cta-row{display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin:var(--space-3) 0;}

/* Hero */
.hero{background:var(--ink-slate); color:var(--warm-white); border-top:none;}
.hero h1{color:var(--warm-white);}
.hero p{color:var(--warm-white); max-width:38rem;}
.hero .lead{font-size:var(--fs-lead);}
.hero .fine-print{max-width:38rem;}
/* Plain links on the dark sections take the light text colour (the default link colour is Ink Slate, invisible there). */
.hero a:not(.btn), .closing a:not(.btn), .site-footer a{color:var(--warm-white);}
.stage-note{
  border:1px solid rgba(250,247,242,0.4); border-radius:var(--radius);
  padding:var(--space-2) var(--space-3); max-width:38rem; margin:var(--space-3) 0;
  font-size:var(--fs-small);
}

.prose-section h2{max-width:var(--max-prose);}

.steps{list-style:none; margin:0 0 var(--space-4) 0; padding:0; counter-reset:step; max-width:var(--max-prose);}
.steps li{counter-increment:step; position:relative; padding-left:2.6em; margin-bottom:var(--space-3);}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:1.9em; height:1.9em; border-radius:50%; background:var(--ink-slate); color:var(--warm-white);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:600;
}

.strengths-list{list-style:none; margin:0; padding:0; max-width:var(--max-prose);}
.strengths-list li{padding:var(--space-2) 0; border-top:1px solid var(--border-hairline);}
.strengths-list li:first-child{border-top:none;}
.strengths-list h3{font-size:var(--fs-h4); margin-bottom:0.3em;}
.strengths-list p{margin-bottom:0;}

/* Preview */
.preview-honesty{
  background:var(--warm-white); border:1px solid var(--border-hairline); border-left:3px solid var(--ink-slate);
  border-radius:0 var(--radius) var(--radius) 0; padding:var(--space-3); max-width:var(--max-prose);
  font-size:var(--fs-small); color:var(--ink-slate); margin-bottom:var(--space-4);
}
.preview-honesty p{margin:0 0 0.5em 0; max-width:none;}
.preview-honesty p:last-child{margin-bottom:0;}
.sample-picker{border:none; margin:0 0 var(--space-3) 0; padding:0;}
.sample-picker legend{font-family:var(--font-serif); font-weight:600; color:var(--ink-slate); padding:0 0 0.5em 0; font-size:var(--fs-h4);}
.sample-options{display:flex; gap:0.6em; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.sample-options li{margin:0;}
.sample-options label{
  display:inline-block; border:1.5px solid var(--border-control); border-radius:999px; padding:0.5em 1.1em;
  font-size:var(--fs-small); font-weight:600; color:var(--ink-slate); cursor:pointer; background:var(--warm-white);
}
.sample-options input{position:absolute; opacity:0; width:1px; height:1px;}
.sample-options input:checked + label{background:var(--ink-slate); color:var(--warm-white); border-color:var(--ink-slate);}
.sample-options input:focus-visible + label{outline:3px solid var(--ink-slate); outline-offset:2px;}

.preview-controls{display:flex; align-items:center; gap:1em; flex-wrap:wrap; margin:var(--space-3) 0;}
.preview-progress{font-size:var(--fs-small); color:var(--ink-slate);}
.credit-meter{
  background:var(--warm-white); border:1px solid var(--border-hairline); border-radius:var(--radius);
  padding:var(--space-2) var(--space-3); max-width:var(--max-prose); font-size:var(--fs-small); margin-bottom:var(--space-3);
}
.preview-sample[hidden]{display:none;}
.scroll-hint{display:none; font-size:var(--fs-small);}
.preview-sample.is-running .job-tally, .preview-sample.is-running .proposal-draft{opacity:0.5;}
.sample-desc{color:var(--ink-slate); max-width:var(--max-prose);}
.trade-heading{font-size:var(--fs-h4); margin:var(--space-3) 0 0.4em 0;}
.trade-heading:first-of-type{margin-top:0;}

.table-scroll{overflow-x:auto; border:1px solid var(--border-hairline); border-radius:var(--radius); background:var(--warm-white); margin-bottom:var(--space-2);}
table.job{border-collapse:collapse; width:100%; min-width:38rem;}
table.job caption{text-align:left; padding:var(--space-2); font-size:var(--fs-small); color:var(--ink-slate); border-bottom:1px solid var(--border-hairline);}
table.job th, table.job td{text-align:left; padding:0.6em 0.8em; border-bottom:1px solid var(--border-hairline); vertical-align:top; font-size:var(--fs-small);}
table.job thead th{background:var(--warm-white); color:var(--ink-slate); font-weight:700;}
table.job tbody tr:last-child td{border-bottom:none;}
table.job .num{white-space:nowrap; font-variant-numeric:tabular-nums; font-family:var(--font-mono);}
table.job tfoot td{font-weight:700; border-top:2px solid var(--border-hairline); border-bottom:none;}

.qty-input,.price-input,.pct-input,.dollar-input{
  width:6.5em; font-family:var(--font-mono); font-size:var(--fs-small);
  border:1.5px solid var(--border-control); border-radius:4px; padding:0.35em 0.5em;
  background:var(--warm-white); color:var(--ink-slate);
}
.price-input{width:7.5em;}
.pct-input{width:4.5em;}
.qty-input{width:4.5em;}
input.needs-input{border-color:var(--alert-rust);}
.qty-input:focus-visible,.price-input:focus-visible,.pct-input:focus-visible,.dollar-input:focus-visible{
  outline:3px solid var(--ink-slate); outline-offset:1px;
}
.field-row{display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-end; margin:var(--space-3) 0;}
.field-row label{display:block; font-size:var(--fs-small); font-weight:600; margin-bottom:0.3em; color:var(--ink-slate);}
.field-note{font-size:var(--fs-small); color:var(--ink-slate); margin:0.3em 0 0 0;}
.toggle-row{display:flex; align-items:flex-start; gap:0.6em; margin:var(--space-3) 0; max-width:var(--max-prose);}
.toggle-row input{width:1.3em; height:1.3em; margin-top:0.2em; accent-color:var(--ink-slate);}
.exclusion-note{
  font-size:var(--fs-small); color:var(--ink-slate); border-left:3px solid var(--border-hairline);
  padding:0.4em 0.9em; margin:var(--space-2) 0; max-width:var(--max-prose);
}
.need-input-note{margin:0.3em 0 0 0; color:var(--alert-rust); font-size:var(--fs-small);}

.job-tally{
  margin-top:var(--space-3); padding:var(--space-3); background:var(--warm-white);
  border:1px solid var(--border-hairline); border-radius:var(--radius); max-width:var(--max-prose);
}
.job-tally p{margin:0 0 0.3em 0; font-family:var(--font-serif); color:var(--ink-slate); font-size:var(--fs-lead);}
.job-tally p:last-child{margin-bottom:0;}
.job-tally .tally-sub{font-family:var(--font-sans); font-size:var(--fs-small); color:var(--ink-slate);}
.job-tally .tally-flag{color:var(--alert-rust); font-family:var(--font-sans); font-size:var(--fs-small); font-weight:600;}

.proposal-draft{
  margin-top:var(--space-4); padding:var(--space-3); max-width:var(--max-prose);
  border:1px solid var(--border-hairline); border-top:3px solid var(--ink-slate); border-radius:var(--radius);
}
.proposal-draft h3{font-size:var(--fs-h3);}
.proposal-draft h4{font-size:var(--fs-h4); margin:var(--space-3) 0 0.3em 0;}
.proposal-draft p, .proposal-draft ul{margin-bottom:0.6em;}
.proposal-draft .draft-meta{font-size:var(--fs-small); border-left:3px solid var(--safety-amber); padding-left:0.8em;}
.footer-status{font-size:var(--fs-small); max-width:34rem;}
.preview-next{display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-top:var(--space-4);}

/* Comparison table */
.compare-scroll{overflow-x:auto; border:1px solid var(--border-hairline); border-radius:var(--radius); background:var(--warm-white);}
table.compare{border-collapse:collapse; width:100%; min-width:56rem;}
table.compare th, table.compare td{text-align:left; padding:0.85em 1em; border-bottom:1px solid var(--border-hairline); font-size:var(--fs-small); vertical-align:top;}
table.compare thead th{background:var(--warm-white); color:var(--ink-slate); font-weight:700;}
table.compare th[scope="row"]{font-weight:700; color:var(--ink-slate); width:11rem; min-width:11rem;}
table.compare th[scope="row"], table.compare thead th:first-child{
  position:sticky; left:0; z-index:1; background:var(--warm-white); box-shadow:1px 0 0 0 var(--border-hairline);
}
table.compare thead th:first-child{background:var(--warm-white); z-index:2;}
table.compare td.us, table.compare th.us{background:var(--warm-white); box-shadow:inset 3px 0 0 var(--safety-amber);}
.footnotes{font-size:var(--fs-small); color:var(--ink-slate); max-width:var(--max-prose); margin-top:var(--space-3);}
.footnotes ol{padding-left:1.2em;}
.fair-note{
  margin-top:var(--space-3); padding:var(--space-3); border-left:3px solid var(--ink-slate);
  background:var(--warm-white); border-radius:0 var(--radius) var(--radius) 0; max-width:var(--max-prose);
}

/* Pricing */
table.pricing{border-collapse:collapse; width:100%; max-width:var(--max-prose); margin-bottom:var(--space-3);}
table.pricing th, table.pricing td{text-align:left; padding:0.7em 1em; border-bottom:1px solid var(--border-hairline);}
table.pricing thead th{color:var(--ink-slate); background:var(--warm-white);}
table.pricing td.price{font-family:var(--font-mono); font-weight:700; color:var(--ink-slate);}
.pilot-note{padding:var(--space-3); background:var(--warm-white); border:1px solid var(--border-hairline); border-radius:var(--radius); max-width:var(--max-prose);}

/* FAQ */
.faq details{border-top:1px solid var(--border-hairline); padding:var(--space-2) 0; max-width:var(--max-prose);}
.faq details:last-child{border-bottom:1px solid var(--border-hairline);}
.faq summary{cursor:pointer; font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h4); color:var(--ink-slate); padding-right:1.5em;}
.faq summary:hover{text-decoration:underline;}
.faq p{margin-top:var(--space-2);}

/* Closing + footer */
.closing{background:var(--ink-slate); color:var(--warm-white); text-align:left;}
.closing h2{color:var(--warm-white);}
.closing p{color:var(--warm-white); max-width:38rem;}
.site-footer{background:var(--ink-slate); color:var(--warm-white); border-top:1px solid rgba(250,247,242,0.25); padding:var(--space-4) 0;}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; align-items:flex-start;}
.site-footer a{color:var(--warm-white);}
.site-footer .footer-brand{display:flex; align-items:center; gap:0.6em;}
.site-footer .footer-brand .logo-word{font-size:1.1rem;}
.site-footer p{color:var(--warm-white); font-size:var(--fs-small); max-width:34rem;}
.footer-links{list-style:none; margin:0.6em 0 0 0; padding:0; display:flex; gap:1em; flex-wrap:wrap;}
.footer-links li{margin:0;}
.footer-links .not-written{font-size:var(--fs-small);}

@media (max-width:640px){
  :root{--fs-h1:1.9rem; --fs-h2:1.5rem; --fs-h3:1.2rem; --space-6:3rem;}
  .site-nav li:not(.nav-auth){display:none;}
  .cta-row{flex-direction:column; align-items:stretch;}
  .cta-row .btn{text-align:center;}
  .preview-controls{flex-direction:column; align-items:stretch;}
  .preview-next{flex-direction:column; align-items:stretch;}
  .preview-next .btn{text-align:center;}
  table.compare th[scope="row"]{width:7.5rem; min-width:7.5rem;}
  table.pricing th, table.pricing td{padding:0.6em 0.5em; font-size:var(--fs-small);}
  table.pricing td.price{white-space:nowrap;}
  .field-row{flex-direction:column; align-items:stretch;}
  .scroll-hint{display:block;}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
}

html{scroll-behavior:smooth;}

/* Web shell (app-core/web): brand tokens for the sign-in button and the Your work panel.
   This file must load after /assets/app/app-shell.css so these win over the shell defaults.
   :root also carries them because the sign-in button lives in the header, outside #app-shell.
   Ink Slate is the accent: white text on it passes AA, and Safety Amber is decorative only. */
:root{
  --app-ink:var(--ink-slate);
  --app-accent:var(--ink-slate);
  --app-bg:var(--warm-white);
  --app-font:var(--font-sans);
}
#app-shell{
  --app-ink:var(--ink-slate);
  --app-accent:var(--ink-slate);
  --app-bg:var(--warm-white);
  --app-font:var(--font-sans);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius);
  margin-top:var(--space-3);
}
/* The page has one light theme; the shell's own dark override has the same specificity, so repeat the tokens. */
@media (prefers-color-scheme:dark){
  #app-shell:not([data-theme="light"]){
    --app-ink:var(--ink-slate);
    --app-accent:var(--ink-slate);
    --app-bg:var(--warm-white);
    --app-font:var(--font-sans);
  }
}
.section-intro{max-width:var(--max-prose);}