/* RepsHub - shared stylesheet for every hand-written page in the hub.
   Smart Assistant for Reps. Not SARA for Retailers.

   The visual language is lifted from the agency calculator (docs/originial/Agency Calc.html)
   so the landing page, the survey, the forms and the calculator read as one product:
   warm paper ground, cream cards with a soft rule, near-black ink, navy for emphasis,
   logo blue for focus. Same token names as the calculator - do not rename them.

   Three fonts, one Google Fonts call, made below. Newsreader for display titles and the
   summary statements, IBM Plex Sans for everything you read or type, IBM Plex Mono for
   numbers, units and small caps labels. No Fraunces, no Inter, anywhere.

   Mobile first: every rule here is written for a 360px phone held in one hand, and the
   media queries only add room. Tap targets are 44px minimum. Inputs are >=17px so iOS
   does not zoom the page when one is focused.

   Caddy serves this file with no-cache, must-revalidate - the filename is permanent and
   there is no content hashing, so nothing here may be cached hard. See deploy/caddy/. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --paper: #F2EDE4;
  --cream: #faf6ee;
  --ink: #1d1d1b;
  --ink-soft: #3a352e;
  --ink-mute: #5a5247;
  --rule: #d8cdb8;
  --navy: #0d2552;
  --blue: #1E8DC8;
  --blue-soft: #e3eff6;
  --ochre: #c2722a;
  --moss: #3a4a2c;
  --moss-soft: #e4e8d8;
  --red: #a3261b;
  --red-soft: #f8e4df;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

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

.wrap {
  max-width: 740px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 16px 48px;
}
.wrap.narrow { max-width: 620px; }
@media (min-width: 560px) { .wrap { padding-inline: 20px; padding-block: 20px 60px; } }

/* Keyboard users get a way past the header on every page. */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 14px; border-radius: 0 0 8px 0; z-index: 10;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

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

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.topbar .mark { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
/* The logo PNG has a white plate behind it. `multiply` drops that plate onto the
   paper ground, so the lockup sits on the page instead of in a white box. */
.topbar .mark img, .lockup img, footer img { mix-blend-mode: multiply; }
.topbar .mark img { height: 30px; width: auto; display: block; }
.topbar .wordmark {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); line-height: 1.2;
}
/* "SMART ASSISTANT FOR REPS" is about twice the width of the old wording and does not
   fit beside the logo on a phone. The logo already reads "ai.tomic | sara", so the
   wordmark is the part that can go. Same choice the calculator makes with its
   subtitle. */
@media (max-width: 560px) {
  .topbar .wordmark { display: none; }
}
.topbar nav { display: flex; gap: 14px; flex-wrap: wrap; }
.topbar nav a { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.topbar nav a:hover { border-bottom-color: var(--ink); }

/* Unused since 2026-10-20: the big in-body lockup was removed from the landing page
   and the survey intro because the header already carries the logo. Rules kept in
   case it comes back; delete them if it has not by the next substantive edit. */
.lockup { margin: 26px 0 0; }
.lockup img {
  width: 100%; max-width: 260px; height: auto; display: block;
}
@media (min-width: 560px) { .lockup img { max-width: 320px; } }

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

h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 8.4vw, 52px); line-height: 1.06; letter-spacing: -.02em;
  margin: 18px 0 0; text-wrap: balance;
}
h1 em { font-style: italic; color: var(--blue); }
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 5.4vw, 32px); line-height: 1.15; margin: 32px 0 0;
}
h3 { font-size: 19px; font-weight: 600; margin: 0; line-height: 1.35; }
.eyebrow {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px;
}
.lede { margin: 14px 0 0; color: var(--ink-soft); font-size: 19px; max-width: 54ch; }
p { margin: 14px 0 0; max-width: 62ch; }
.hint { color: var(--ink-mute); font-size: 15px; margin: 6px 0 0; max-width: 60ch; }
.fine { color: var(--ink-mute); font-size: 15px; }
.footnote {
  color: var(--ink-mute); font-size: 15px; margin: 18px 0 0;
  border-left: 3px solid var(--ochre); padding: 4px 0 4px 12px; max-width: 60ch;
}
a { color: var(--navy); }
a:hover { color: var(--blue); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 15px 22px;
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 999px;
}
.btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--cream); color: var(--ink); border-color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.small { min-height: 46px; padding: 11px 18px; font-size: 14px; }
.btn-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; max-width: 520px; }
@media (min-width: 560px) { .btn.auto { width: auto; } }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px;
}
/* Headings we move focus to after a screen change. They are focus targets, not
   controls, so they must not draw a focus ring - a keyboard user still gets one,
   because :focus-visible does not match programmatic focus. */
[tabindex="-1"]:focus { outline: none; }

/* ---- cards and fields ---------------------------------------------------- */

.card {
  background: var(--cream); border: 1px solid var(--rule); border-radius: 12px;
  padding: 16px; margin-top: 16px;
}
@media (min-width: 560px) { .card { padding: 18px 20px; } }
.card.flag { border-color: var(--red); border-width: 2px; background: var(--red-soft); }

/* One labelled control. The label is always a real <label for>. */
.field { margin-top: 16px; }
.field:first-child { margin-top: 0; }
.field > label { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.field > label .opt { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-left: 8px; }
.field .hint { margin-top: 4px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select {
  display: block; width: 100%; margin-top: 8px;
  font-family: var(--sans); font-size: 18px; line-height: 1.4; color: var(--ink);
  background: #fff; border: 1.5px solid var(--rule); border-radius: 10px;
  padding: 12px 14px; min-height: 50px;
}
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #b5ab9a; }
input:focus, textarea:focus, select:focus {
  outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); background: #fff; }

/* Visually hidden, still read aloud. Used to put the task name inside the label of
   each number box, so "How many a week" is never announced without saying which task. */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The six tasks: one list, not six cards.
   They were six separate bordered cards, each repeating the same two column labels.
   Six copies of "HOW MANY A WEEK / MINUTES EACH" is most of what made this screen
   feel long - about a third of its height was chrome and repetition rather than
   questions. Now: one container, hairline rows, and the labels printed once at the
   top. Each input keeps its own full label for screen readers (visually hidden), so
   the header row is decoration and is hidden from the accessibility tree. */
.tasks {
  margin-top: 12px; background: var(--cream);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}
.task { padding: 9px 12px 11px; border-top: 1px solid var(--rule); }
.task:first-of-type { border-top: none; }
.task .tname { font-size: 15.5px; font-weight: 600; line-height: 1.3; display: block; }

/* Each field says what it is, inside itself.
   A single header row at the top was shorter but worse: by the fourth task it has
   scrolled away and the two boxes are unlabelled. The affix travels with the field,
   so the meaning is never off-screen. Same pattern as the calculator's $ and %
   fields, which is also why it already looks right here. */
.numfield {
  display: flex; align-items: stretch; background: #fff;
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
}
.numfield:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.numfield input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--mono); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums;
  text-align: right; padding: 9px 6px 9px 10px; color: var(--ink);
}
.numfield input::placeholder { color: #b5ab9a; font-weight: 400; }
/* The bridge from hours to dollars.
   The survey deliberately holds no money: a rep does not know their agency's revenue,
   commission or split, so any figure here would rest on a number we invented. The
   calculator asks for those three and computes it properly. This block exists to hand
   the question over rather than answer it badly. */
.bridge { margin-top: 20px; }
.bridge-h {
  font-family: var(--serif); font-size: 22px; line-height: 1.3; margin: 0 0 6px; color: var(--ink);
}
.bridge-h em { font-style: italic; color: var(--blue); }
.bridge-p { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 14px; max-width: 54ch; }

/* "Three questions. About 2 minutes." as its own line rather than a clause buried in
   the paragraph. Reassurance only works if it is read, and nobody reads the middle of
   a paragraph before deciding whether to start. */
.pitch {
  font-family: var(--serif); font-size: 21px; line-height: 1.35;
  margin: 14px 0 0; color: var(--ink);
}
.pitch em { font-style: italic; color: var(--blue); }

/* One short line under each task. Reps asked what some of these meant - "entering
   orders" reads differently to someone who types them into MT than to someone whose
   customer does. The name is the label; this is the clarification. */
.tdesc {
  display: block; font-size: 13.5px; line-height: 1.4; color: var(--ink-mute);
  margin-top: 2px; max-width: 48ch;
}

/* Per-question progress: a tick beside each question that fills in as it is answered,
   plus a live count for the six-row one. The bar at the top says which screen you are
   on; these say how much of THIS screen is done, which is the question someone
   actually has while filling it in. */
.qtick {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--rule); margin-right: 8px; vertical-align: -2px; flex: none;
  background: transparent; transition: background-color .15s, border-color .15s;
}
.qtick.done {
  background: var(--moss) no-repeat center / 9px 9px; border-color: var(--moss);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.qtick.part { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 3px var(--cream); }

.qstatus { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.qbar { flex: 1; max-width: 160px; height: 5px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.qbar i { display: block; height: 100%; width: 0; background: var(--navy); border-radius: 999px; transition: width .2s; }
.qtext { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }

/* Progress. The point is reassurance before the first tap: someone opening this on a
   phone sees a short bar and "3 questions, about 2 minutes" and knows what they are
   in for. "Step 2 of 3" in small type was true and did not register.
   aria-hidden: the heading and the step text already say where you are, so the bar
   would only be noise to a screen reader. */
.steps { display: flex; gap: 5px; margin: 0 0 8px; }
.steps i {
  flex: 1; height: 5px; border-radius: 999px; background: var(--rule); display: block;
}
.steps i.on { background: var(--navy); }
.progress-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 14px;
}
.progress-line .left { font-weight: 600; color: var(--ink-soft); }

.numfield .affix {
  display: flex; align-items: center; padding: 0 10px 0 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-mute); white-space: nowrap;
}
.qblock { margin-top: 28px; }
.qblock:first-of-type { margin-top: 20px; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
/* The visible wording now lives in .task-head, printed once. The label element stays
   in the markup, and stays the input's accessible name - it is hidden, not deleted.
   Deleting it would leave six pairs of unlabelled number boxes. */
.two-up label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.two-up input {
  font-family: var(--mono); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums;
  text-align: center; padding: 9px 8px;
}
@media (min-width: 560px) { .two-up { gap: 14px; max-width: 420px; } }

/* 0–10 chips. aria-pressed carries the state; the colour only reflects it. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips button {
  font-family: var(--mono); font-size: 17px; font-weight: 500;
  min-width: 48px; min-height: 48px; padding: 10px 12px;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: 10px; cursor: pointer;
}
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* The honeypot. Off-screen, out of the tab order, hidden from assistive tech.
   Never display: none - some bots skip fields that are display: none. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- messages ------------------------------------------------------------ */

.msg { margin: 14px 0 0; font-size: 16px; font-weight: 600; max-width: 60ch; }
.msg:empty { display: none; }
.msg.error { color: var(--red); }
.msg.ok { color: var(--moss); }
/* A nudge, not a problem: the row would add nothing as typed. Never blocks a save. */
.msg.note { color: var(--ink-mute); font-weight: 500; font-size: 15px; }
.notice {
  margin-top: 16px; padding: 14px 16px; border-radius: 10px;
  background: var(--cream); border: 1px solid var(--rule); font-size: 16px; color: var(--ink-soft);
}
.notice.warn { background: var(--red-soft); border-color: var(--red); color: var(--ink); }
.notice.good { background: var(--moss-soft); border-color: var(--moss); color: var(--ink); }
.notice strong { color: var(--ink); }
.notice p { margin-top: 8px; }
.notice p:first-child { margin-top: 0; }

/* ---- survey summary ------------------------------------------------------ */

.stmt {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 5.6vw, 28px); line-height: 1.3; color: var(--ink);
  margin: 0; max-width: 34ch;
}
.stmt + .stmt { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.stmt b { font-weight: 600; color: var(--navy); }
.stmt .num { font-family: var(--mono); font-weight: 500; font-size: .88em; color: var(--navy); }
.stmt.quiet { font-family: var(--sans); font-size: 17px; color: var(--ink-soft); max-width: 54ch; }

.lines { list-style: none; margin: 16px 0 0; padding: 0; }
.lines li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.lines li:last-child { border-bottom: 0; }
.lines .t { font-size: 16px; color: var(--ink-soft); }
.lines .v { font-family: var(--mono); font-weight: 600; font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.progress {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
  margin: 20px 0 0;
}

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

footer {
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule);
  color: var(--ink-mute); font-size: 15px;
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
}
footer img { height: 22px; width: auto; display: block; }
footer a { color: var(--ink); font-weight: 600; }
footer .foot-mark { display: flex; align-items: center; gap: 10px; }
footer .foot-name { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* Someone with JavaScript off still gets a usable page, just a plainer one. */
noscript .notice { display: block; }

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