/* Shared design tokens. These mirror the generated PDF report so the site and
   the deliverable read as one product — brand red for identity, blue for
   interactive elements, and the same neutral ramp. */
:root {
  --brand-red: #d1000a;
  --brand-red-dark: #a80008;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border: #e5e7eb;
  --bg: #ffffff;
  --bg-subtle: #f9fafb;
  --green: #22c55e;
  --amber: #f59e0b;
  --radius: 10px;
  --maxw: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The header stays pinned at the top, so a jump to a section (#teams,
     #report) stops below it instead of hiding the heading underneath. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

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

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

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  color: var(--brand-red);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1;
}
.brand:hover {
  text-decoration: none;
}
.brand img {
  width: 30px;
  height: 30px;
  display: block;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14.5px;
}
/* Scoped to .nav-link rather than every anchor: "a" inside ".site-nav" beats
   a bare ".btn" on specificity, which left the header's call-to-action with
   grey text on a blue fill. */
.site-nav .nav-link {
  color: var(--text-secondary);
}
.site-nav .nav-link:hover,
.site-nav .nav-link[aria-current="page"] {
  color: var(--text-primary);
  text-decoration: none;
}
/* A link's words never split across two lines; the header gives way below. */
.site-nav .nav-link {
  white-space: nowrap;
}
/* "The report" and "How it works" only jump down the home page, so they are
   the first to go when a tablet-width header can't fit every link (measured
   2026-10-08, when "Sample report" and "FAQ" joined it). Raised from 860px to
   1000px the same day for "For teams": with it, the full header wraps the
   wordmark and the button between 870px and 980px. Phones hide every
   section link, below. */
@media (max-width: 1000px) {
  .site-nav .nav-scroll {
    display: none;
  }
}
/* Below 760px, About and the FAQ leave the header too. Both are in every
   footer, and Pricing isn't. Without this, the button wrapped onto two lines
   between 580px and 720px once "For teams" joined (measured 2026-10-08). */
@media (max-width: 760px) {
  .site-nav .nav-link[href="/faq.html"],
  .site-nav .nav-link[href="/about.html"] {
    display: none;
  }
}
.site-header .site-nav .btn {
  white-space: nowrap;
}

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

.btn {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  border: 1px solid var(--brand-red);
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
  background: var(--brand-red-dark);
  border-color: var(--brand-red-dark);
  text-decoration: none;
  color: #fff;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-secondary {
  background: #fff;
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: #d1d5db;
}
.btn-lg {
  padding: 14px 26px;
  font-size: 16px;
}

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

/* Centred: the headline is short and declarative, and at 15ch left-aligned it
   broke into three ragged lines with a column of white space beside it. Centring
   gives it the whole measure and lets the lede sit under it symmetrically. */
.hero {
  padding: 84px 0 68px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 0 0 16px;
}
.hero h1 {
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 auto 20px;
  max-width: 20ch;
  /* Evens out the line lengths instead of leaving one orphaned word. */
  text-wrap: balance;
}
.hero .lede {
  font-size: 19px;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 auto 30px;
  /* Discourages a one-word last line. The final two words are also joined by
     a non-breaking space in the markup, which guarantees it where text-wrap
     is unsupported. */
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-note {
  font-size: 14px;
  color: var(--text-muted);
  margin: 18px 0 0;
}

/* ---------- generic section ---------- */

.section {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.section-subtle {
  background: var(--bg-subtle);
}
.section h2 {
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.section .section-lede {
  color: var(--text-secondary);
  max-width: 65ch;
  margin: 0 0 40px;
  font-size: 17px;
}

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

.grid {
  display: grid;
  gap: 20px;
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.card h3 {
  font-size: 17px;
  margin: 0 0 8px;
}
.card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
}
.card .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ---------- sample report rows ---------- */

.sample {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.sample-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sample-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.sample-row:last-child {
  border-bottom: none;
}
.sample-op {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 3px;
}
.sample-desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 10px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-block;
  background: #eff6ff;
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 500;
}
.confidence {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.confidence-track {
  display: block;
  width: 52px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
/* Needs an explicit block: as an inline span the fill collapsed to zero by
   zero and every bar rendered empty. */
.confidence-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
}
.confidence-fill.mid {
  background: var(--amber);
}
.confidence-pct {
  font-size: 13px;
  font-weight: 600;
}

.callout {
  border-left: 3px solid var(--brand-red);
  background: var(--bg-subtle);
  border-radius: 6px;
  padding: 18px 20px;
  margin-top: 20px;
}
.callout h4 {
  margin: 0 0 6px;
  font-size: 15px;
}
.callout p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14.5px;
}

/* ---------- source list ---------- */

.source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.source-pill {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

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

.price-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.price-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.price {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.price span {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0;
}
.price-card h3 {
  margin: 14px 0 6px;
  font-size: 18px;
}
.price-card > p {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0 0 18px;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.price-features li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 14.5px;
  color: var(--text-secondary);
}
.price-features li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 5px;
  height: 9px;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- order form ---------- */

.form-page {
  padding: 56px 0 80px;
}
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: start;
}
.form-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.field {
  margin-bottom: 20px;
}
.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.field .req,
.req {
  color: var(--brand-red);
  font-weight: 600;
}
.field .hint {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 3px;
}
.field input,
.field select {
  width: 100%;
  /* Fixed height rather than padding alone: a select carries its own
     intrinsic line-height and rendered 2px taller than a text input, so the
     City and State controls sat on different baselines even once their
     labels were reconciled. box-sizing is border-box globally. */
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  line-height: normal;
  color: var(--text-primary);
  background: var(--bg);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.field.invalid input,
.field.invalid select {
  border-color: var(--brand-red);
}
.field-error {
  color: var(--brand-red);
  font-size: 13px;
  margin-top: 5px;
  display: none;
}
.field.invalid .field-error {
  display: block;
}
/* City and State sit side by side but their labels are different heights —
   one carries a hint line, the other doesn't — which left their inputs on
   different baselines. Letting the label absorb the slack pushes both inputs
   to the bottom of the row, so they line up whatever the labels say. */
.field-row > .field {
  display: flex;
  flex-direction: column;
}
.field-row > .field label {
  flex: 1 0 auto;
}
/* The line under the order button naming what the buyer agrees to. Darker
   than the form's hints: it has to be easy to see to count as notice. */
.order-terms {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}

/* ---------- order page: details box and payment box ---------- */

/* The business details in a three-column box, with the report depth, payment
   and button in a grey box under it, so the whole order fits on one screen
   (mockup E, chosen 2026-10-21). The tips sit underneath. */
/* The top spacing is trimmed (with the eyebrow's, the intro's and the gap
   between the boxes) to make room for the two-line sign-in note, so the
   whole form still fits a 1536x730 laptop screen. */
.form-page.order-page {
  padding: 10px 0 64px;
}
.order-page .eyebrow {
  margin-bottom: 12px;
}
/* Header and footer widen with it, so the logo lines up with the form. */
.page-wide .wrap {
  max-width: 1240px;
}
.order-intro {
  color: var(--text-secondary);
  margin: 0 0 12px;
}
/* The bottom margin takes back the last row's gap under its boxes. */
.order-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  margin-bottom: -20px;
}
/* Each field spans two rows, label and body, on a subgrid, so the labels in
   a row share one height and the boxes under them line up even when a label
   wraps. A box that grows (an error, more trade names) pushes only its own
   body down. */
.order-fields > .field,
.order-fields > .field-row,
.order-fields > .field-row > .field {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  margin: 0;
}
.order-fields > .field-row {
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 0 12px;
}
.order-fields .field-body {
  position: relative;
  min-width: 0;
  padding-bottom: 20px;
}
/* A label, its (i), and on the right of some: "+ Add another", or the
   sign-in line beside "Your email". */
/* Centred rather than on a shared baseline: lining up "+ Add another"'s
   baseline pushed the DBA label 7px below the labels beside it. */
.label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin-bottom: 6px;
}
/* No growing, which .field-row's labels otherwise do, so the (i) stays
   beside its label. */
.field .label-row label {
  flex: 0 1 auto;
  margin-bottom: 0;
}
.label-row > .lookup-clear,
.label-row > .email-status {
  margin-left: auto;
  padding-left: 10px;
  white-space: nowrap;
}
.email-status {
  font-size: 13px;
  color: var(--text-muted);
}
/* "Ordering on a company account? / Enter your email above, then click Sign
   in." on two lines under the email box, within its width, in the details
   box's bottom padding, which grows to hold it while it shows. The email's
   error takes the same spot, so the note hides while one shows; typing
   clears it (order.js). */
.signin-prompt {
  position: absolute;
  top: 49px;
  left: 0;
  right: 0;
  font-size: 13px;
  line-height: 16px;
  color: var(--text-muted);
}
.signin-prompt-lead {
  display: block;
}
.order-details:has(#signin-prompt:not([hidden])) {
  padding-bottom: 45px;
}
#f-email.invalid .signin-prompt {
  display: none;
}

/* Signing in from that line: the payment box holds the code box alone, and
   the choices come back once the code is confirmed (the user's call,
   2026-10-21). */
.signing-in #f-tier,
.signing-in .order-terms {
  display: none;
}
.signing-in .order-submit {
  grid-column: 1 / -1;
  padding-top: 0;
}
/* The code box spans the payment box: the explanation on the left, and the
   code, button and links in the right-hand column, under where the order
   button sits. */
.signing-in .verify {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: 24px;
  align-items: center;
  margin-top: 0;
}
.signing-in .verify-text p {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .signing-in .verify {
    display: block;
  }
  .signing-in .verify-text p {
    margin-bottom: 12px;
  }
}
.order-pay .verify {
  background: var(--bg);
}

/* Each hint sits behind an (i) beside its label, shown while the mouse is on
   the (i) or once it is clicked or tapped, never on clicking into a box (the
   user's call, 2026-10-21). order.js opens and closes it. Screen readers get
   it through the box's aria-describedby. */
.tip-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
/* A 28px target for a finger, around the 16px circle. */
.tip-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.tip-icon:hover,
.tip-icon[aria-expanded="true"] {
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.tip-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.order-fields .bubble {
  display: none;
  position: absolute;
  top: calc(100% - 14px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 8px 11px;
  border-radius: 8px;
  background: #1f2937;
  color: #f9fafb;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  font-size: 12.5px;
  line-height: 1.5;
}
.order-fields .bubble::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 18px;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom-color: #1f2937;
}
/* City's hint spans the City and State row: State's 96px column plus the
   12px gap. */
.order-fields #f-city .bubble {
  right: auto;
  width: calc(100% + 108px);
}
/* The State box is too narrow for its hint, which opens leftward instead. */
.order-fields #f-state .bubble {
  left: auto;
  width: min(280px, 80vw);
}
.order-fields #f-state .bubble::before {
  left: auto;
  right: 18px;
}
.order-fields .field.tip-open .bubble,
.order-fields .field:has(.tip-icon:hover) .bubble {
  display: block;
}

/* "Not sure you have the right name?" on one line across the box. */
.order-fields > .lookup {
  grid-column: 1 / -1;
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--bg);
}
.order-fields .lookup-head {
  align-items: center;
}
/* 14px, the size of the "— optional" notes beside the labels. */
.order-fields .lookup-head p {
  display: inline;
  max-width: none;
  font-size: 14px;
}
.order-fields .lookup-head strong {
  display: inline;
  margin: 0 6px 0 0;
}

/* The payment box. A guest's report depth cards sit side by side across two
   columns; with the company's "Pay with" cards showing, each choice stacks
   in a column of its own. The button takes the third column either way. */
.form-card.order-pay {
  margin-top: 10px;
  padding: 18px 28px;
  background: var(--bg-subtle);
}
.order-pay-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
}
/* Kept to their own height, so a taller neighbour never stretches the rows
   of cards apart. */
.order-choice {
  align-self: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.order-choice .tiers {
  align-content: start;
}
#f-tier {
  grid-column: span 2;
}
.order-pay-cols:has(#f-billing:not([hidden])) #f-tier {
  grid-column: span 1;
}
.order-choice .tiers {
  gap: 12px;
}
.order-pay-cols:has(#f-billing:not([hidden])) .tiers,
#f-billing .tiers {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
/* The cards are labels inside a .field, so they picked up its labels' 6px
   bottom margin, which widened the gap between stacked cards. Flex lets a
   card fill its row without the cards' height: 100%. */
.order-pay .tier {
  display: flex;
  margin: 0;
}
.order-pay .tier-body {
  flex: 1 1 auto;
  height: auto;
  padding: 10px 14px;
}
/* The padding is a legend plus its gap, so the button lines up with the
   cards. */
.order-submit {
  grid-column: -2 / -1;
  padding-top: 28.4px;
}
/* Beside the two rows of cards, the button and the terms under it are
   centred on the cards together (the margin stands in for the legend above
   them). */
.order-pay-cols:has(#f-billing:not([hidden])) .order-submit {
  align-self: center;
  padding-top: 0;
  margin-top: 28.4px;
}

.order-tips {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 1fr;
  gap: 32px;
  margin-top: 40px;
}
.order-tips p,
.order-tips ul {
  margin: 0 0 18px;
}
.order-tips > div > :last-child {
  margin-bottom: 0;
}
@media (max-width: 960px) {
  .order-fields,
  .order-pay-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  /* One column, with nothing beside it to run under: the line wraps under
     the box instead. */
  .signin-prompt {
    position: static;
    display: block;
    margin-top: 6px;
  }
  .order-details:has(#signin-prompt:not([hidden])) {
    padding-bottom: 28px;
  }
  #f-tier,
  .order-pay-cols:has(#f-billing:not([hidden])) #f-tier,
  .order-submit {
    grid-column: 1 / -1;
  }
  .order-choice {
    margin-bottom: 16px;
  }
  .order-pay-cols:has(#f-billing:not([hidden])) .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-submit,
  .order-pay-cols:has(#f-billing:not([hidden])) .order-submit {
    padding-top: 0;
    margin-top: 0;
  }
  .order-tips {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .order-fields .lookup-head {
    align-items: flex-start;
  }
  .order-fields .lookup-head p {
    display: block;
    margin-top: 2px;
  }
  .order-pay-cols:has(#f-billing:not([hidden])) .tiers {
    grid-template-columns: minmax(0, 1fr);
  }
  .order-tips {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* ---------- business lookup ---------- */

.lookup {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-subtle);
  padding: 14px 16px;
  margin: 0 0 20px;
}
.lookup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.lookup-head strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.lookup-head p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 46ch;
}
.lookup-head .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* On a phone the button kept its full width beside the text and squeezed the
   text into a column one word wide (found 2026-10-08), so they stack. */
@media (max-width: 560px) {
  .lookup-head {
    flex-direction: column;
    gap: 12px;
  }
}
.lookup-results:empty {
  display: none;
}
.lookup-results {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lookup-msg {
  font-size: 13px;
  color: var(--text-muted);
}
.lookup-msg.error {
  color: var(--brand-red);
}
.lookup-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lookup-option:hover,
.lookup-option:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.lookup-option[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.lookup-name {
  font-weight: 600;
  display: block;
}
.lookup-addr {
  color: var(--text-secondary);
  font-size: 13px;
}
.lookup-tags {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.lookup-closed {
  color: var(--brand-red);
  font-weight: 600;
}
.lookup-selected {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lookup-clear {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 14px;
}

/* The order form's extra trade-name boxes. The × sits inside each box's
   right edge, so every box keeps the full width of the first. */
.dba-row {
  position: relative;
  margin-top: 8px;
}
.field .dba-row input {
  padding-right: 42px;
}
.dba-remove {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.dba-remove:hover,
.dba-remove:focus-visible {
  background: var(--bg-subtle);
  color: var(--text-primary);
}
.dba-add {
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
}
.dba-add[hidden] {
  display: none;
}

.status {
  display: none;
  margin-top: 22px;
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 14.5px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}
.status.visible {
  display: block;
}
.status.success {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.status.error {
  border-color: #fecaca;
  background: #fef2f2;
}
.status strong {
  display: block;
  margin-bottom: 4px;
}
.status p {
  margin: 0;
  color: var(--text-secondary);
}

/* ---------- email sign-in on the order form ---------- */

.signin-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* "Sign out" always stays on one line; the email beside it wraps instead
   (the user's rule, 2026-10-21). */
#signout-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.signin-note > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The hidden attribute has to win over any class that sets display. Without
   this, the .btn rule kept the order form's submit button showing while a
   code was awaited. */
[hidden] {
  display: none !important;
}
.verify {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-subtle);
  padding: 16px 18px;
}
.verify strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
.verify p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-secondary);
}
.verify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.verify-row input {
  flex: 1 1 160px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 18px;
  letter-spacing: 0.2em;
  color: var(--text-primary);
  background: var(--bg);
}
.verify-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.verify-row .btn {
  flex: 1 0 auto;
  white-space: nowrap;
}
.verify .verify-msg {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.verify .verify-msg:empty {
  display: none;
}
.verify .verify-msg.error {
  color: var(--brand-red);
}
.verify .verify-links {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- company account page ---------- */

#views > section + section {
  margin-top: 22px;
}
.account-h {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.account-facts {
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}
.account-facts > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  font-size: 14.5px;
}
.account-facts dt {
  color: var(--text-secondary);
}
.account-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
/* What happens next on the account, above its buttons. An admin's version
   ends in a short list of what Account settings covers. */
.account-next {
  margin: 0 0 16px;
}
.account-next p {
  margin: 0 0 12px;
}
.account-next p.list-lead {
  margin-bottom: 6px;
}
.account-next p:only-child {
  margin-bottom: 0;
}
.account-next ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}
.account-next li {
  margin-bottom: 4px;
}
.account-next li::marker {
  color: var(--text-muted);
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.account-saved {
  margin-left: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
/* Unsaved changes are easy to walk away from, so the note stands out. */
.account-saved.unsaved {
  color: var(--brand-red);
  font-weight: 700;
}
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg);
  resize: vertical;
}
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
/* Ten orders show, and the rest scroll inside the card with the column
   headings held in place, so a busy account's page stays a page
   (2026-10-15, the user's call). At desktop width the headings measure
   60px and a row 58px, so 640px is ten rows; narrower screens wrap the
   business column and show fewer. */
.orders-scroll {
  overflow: auto;
  max-height: 640px;
}
.orders-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.orders-kept {
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.orders-table th,
.orders-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.orders-table th {
  color: var(--text-secondary);
  font-weight: 600;
  /* Bottom-aligned so the business column's second header line, "Who
     ordered", sits level with the other headers and "Business ordered"
     sits above them, mirroring the rows beneath. */
  vertical-align: bottom;
}
.orders-by-head {
  display: block;
  font-weight: 400;
}
/* Who ordered sits under the business, so five columns fit the card at
   desktop width where six ran past it (2026-10-08). */
.orders-table td.orders-business {
  white-space: normal;
  overflow-wrap: anywhere;
}
.orders-by {
  display: block;
  color: var(--text-secondary);
  font-size: 12.5px;
}
.orders-table td.orders-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* ---------- account settings ---------- */

.settings-back {
  margin: 0 0 8px;
  font-size: 14px;
}
.btn-danger {
  background: #fff;
  color: var(--brand-red);
  border-color: var(--brand-red);
}
.btn-danger:hover {
  background: var(--brand-red);
  color: #fff;
}

/* An email list: one address at a time or a pasted list, shown as chips that
   scroll in a box of fixed height, so 200 people never make a long page. */
.email-add {
  display: flex;
  gap: 8px;
}
.field .email-add input {
  flex: 1 1 auto;
  min-width: 0;
}
.email-add .btn {
  white-space: nowrap;
}
.email-msg {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.email-msg:empty {
  display: none;
}
.email-msg-error {
  color: var(--brand-red);
}
.email-list {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle);
  padding: 10px;
}
.email-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.field .email-tools .email-filter {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
}
.email-tools .lookup-clear {
  margin-left: auto;
}
.email-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 216px;
  overflow-y: auto;
}
.email-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
}
.email-chip-text {
  background: none;
  border: 0;
  padding: 4px 2px 4px 11px;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
  overflow-wrap: anywhere;
  text-align: left;
}
.email-chip-text:hover {
  text-decoration: underline;
}
.email-chip-remove {
  background: none;
  border: 0;
  padding: 2px 10px 4px 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.email-chip-remove:hover {
  color: var(--brand-red);
}
@media (max-width: 560px) {
  .account-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.aside h3 {
  font-size: 16px;
  margin: 0 0 10px;
}
.aside p,
.aside li {
  color: var(--text-secondary);
  font-size: 14.5px;
}
.aside ul {
  padding-left: 18px;
  margin: 0 0 22px;
}
.aside li {
  margin-bottom: 7px;
}

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

.site-footer {
  padding: 34px 0;
  color: var(--text-muted);
  font-size: 13.5px;
}
/* Both rows centered (2026-10-08): the copyright and links on the first, the
   disclaimer on the second. */
.site-footer .wrap {
  display: flex;
  justify-content: center;
  column-gap: 18px;
  row-gap: 12px;
  flex-wrap: wrap;
  text-align: center;
}
/* Policy links in every footer, where readers — and Stripe's reviewers — look
   for them. */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--text-muted);
}
.footer-links a:hover,
.footer-links a[aria-current="page"] {
  color: var(--text-secondary);
}
/* The disclaimer takes the footer's whole second row (2026-10-08), with room
   for the full sentence the one-row footer had to shorten. */
.footer-note {
  flex-basis: 100%;
  margin: 0;
}

/* ---------- policy pages ---------- */

/* Details the owner still has to supply — a contact address, the legal entity,
   the governing state. Highlighted so none can go live unnoticed. */
.fill-in {
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  padding: 0 5px;
  font-weight: 600;
  white-space: nowrap;
}
/* "The short version" at the top of each policy: the existing callout, with a
   list inside it. */
.callout ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.callout li {
  margin-bottom: 4px;
}
.prose > .callout:first-child {
  margin: 0 0 8px;
}

/* The order reference on the success page. The server names the report's
   folder with the same reference. */
.order-ref {
  margin: 0 0 14px;
  color: var(--text-secondary);
}
.order-ref strong {
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

/* ---------- responsive ---------- */

/* ---------- tier selector ---------- */
/* Two option cards rather than two submit buttons: the price belongs at the
   choice, and each option needs a line saying why it costs what it does. */

/* The group is a fieldset, so its heading is a legend rather than a label and
   picks up none of the field styling. These mirror ".field label" exactly.
   The gap to the cards sits on .tiers rather than as a legend margin, which
   browsers apply inconsistently. */
.field legend {
  display: block;
  width: 100%;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}
.tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 6px;
}
.tier {
  display: block;
  cursor: pointer;
}
/* Kept in the accessibility tree and focusable; the card is the visible
   control, so the radio itself is clipped rather than display:none. */
.tier input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tier-body {
  display: block;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tier input:checked + .tier-body {
  border-color: var(--brand-red);
  background: #fff5f5;
}
.tier input:focus-visible + .tier-body {
  box-shadow: 0 0 0 3px rgba(209, 0, 10, 0.18);
}
.tier:hover input:not(:checked):not(:disabled) + .tier-body {
  border-color: #d1d5db;
}
.tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
}
.tier-name {
  font-weight: 600;
  font-size: 14.5px;
}
.tier-price {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-secondary);
}
.tier input:checked + .tier-body .tier-price {
  color: var(--brand-red);
}
.tier-desc {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.tier-note {
  display: inline-block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Disabled until the second pass is actually built. */
.tier input:disabled + .tier-body {
  background: var(--bg-subtle);
  cursor: not-allowed;
}
.tier input:disabled + .tier-body .tier-name,
.tier input:disabled + .tier-body .tier-price {
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .tiers {
    grid-template-columns: 1fr;
  }
}

/* ---------- prose ---------- */
/* The About page reads as an argument rather than a set of features, so it
   gets a single reading column instead of the card grids used elsewhere. */

/* No measure cap: the copy spans the wrap so it ends with the same gap on the
   right as it begins with on the left. */
.prose {
  max-width: none;
}
.prose h2 {
  font-size: 23px;
  letter-spacing: -0.01em;
  margin: 46px 0 14px;
}
.prose > h2:first-child {
  margin-top: 0;
}
.prose p,
.prose ul {
  color: var(--text-secondary);
  font-size: 16.5px;
  line-height: 1.68;
}
.prose p {
  margin: 0 0 18px;
}
.prose ul {
  margin: 0 0 20px;
  padding-left: 20px;
}
.prose li {
  margin-bottom: 10px;
}
.prose li::marker {
  color: var(--text-muted);
}
.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}
.prose p:last-child,
.prose ul:last-child {
  margin-bottom: 0;
}
/* FAQ questions, under the page's group headings. */
.prose h3 {
  font-size: 18px;
  letter-spacing: -0.005em;
  margin: 30px 0 8px;
}
.prose h2 + h3 {
  margin-top: 16px;
}

/* FAQ answers open under their question on a click (2026-10-08), so the page
   reads as a list of questions rather than a wall of answers. */
.faq-item {
  border-bottom: 1px solid var(--border);
}
.prose h2 + .faq-item {
  border-top: 1px solid var(--border);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 2px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary h3 {
  margin: 0;
  font-size: 17.5px;
}
.faq-item summary:hover h3 {
  color: var(--accent);
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
  color: var(--text-muted);
}
.faq-item[open] summary::after {
  content: "\2212";
}
.prose .faq-item > p {
  margin: 0 2px 20px;
}

/* Sample report page: the report's own pages, shown as images. */
.sample-figure {
  margin: 28px 0 44px;
}
.sample-figure img {
  display: block;
  width: 100%;
  max-width: 850px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.08);
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: none;
}

/* Closing call to action: one line of copy and one button, side by side.
   Sits outside .prose so it spans the full column, as the home page does. */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 30px;
  margin-top: 50px;
}
.cta h2 {
  font-size: 19px;
  letter-spacing: -0.005em;
  margin: 0 0 5px;
}
.cta p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.55;
}
/* The button sets its own width; only the copy should flex. */
.cta .btn {
  flex: none;
}

@media (max-width: 640px) {
  .cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .prose h2 {
    font-size: 21px;
    margin-top: 36px;
  }
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .form-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero h1 {
    font-size: 34px;
    max-width: none;
  }
  .hero {
    padding: 56px 0 48px;
  }
  .section {
    padding: 52px 0;
  }
  .site-nav {
    gap: 16px;
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .site-nav .nav-link {
    display: none;
  }
  .site-header .btn {
    padding: 9px 14px;
    font-size: 14px;
    white-space: nowrap;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
  .sample-row {
    grid-template-columns: 1fr;
  }
}