/* v5 Services page (2026-09-06): the small business analytics offer, scoped under .page-services.
   Same shell, tokens and components as the data pages; only the pieces the offer needs are new
   (a button, the four questions, the ledger of deliverables, the three steps, the bulletin, the form). */

/* ---------- buttons: the one place the site asks for an action ---------- */
.page-services .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  background: var(--blue); color: var(--on-accent); border: 1px solid var(--blue); border-radius: var(--r-pill);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; letter-spacing: -0.005em;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.page-services .btn:hover { background: color-mix(in srgb, var(--blue) 88%, var(--ink)); border-color: color-mix(in srgb, var(--blue) 88%, var(--ink)); }
.page-services .btn:active { transform: translateY(1px); }
.page-services .btn.quiet { background: transparent; color: var(--blue-ink); border-color: var(--rule); }
.page-services .btn.quiet:hover { background: var(--rule-soft); border-color: var(--ink-2); }
.page-services .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- the four questions ---------- */
.page-services .asks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-soft); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-soft); }
.page-services .asks li { background: var(--page); padding: 18px 28px 18px 0; display: grid; gap: 4px; align-content: start; }
.page-services .asks li:nth-child(even) { padding-left: 28px; }
.page-services .asks b { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; }
.page-services .asks span { color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 720px) {
  .page-services .asks { grid-template-columns: 1fr; }
  .page-services .asks li, .page-services .asks li:nth-child(even) { padding: 16px 0; }
}

/* ---------- section rhythm ---------- */
.page-services .chart-section h2 { margin-bottom: 10px; }
.page-services .intro { color: var(--ink-2); font-size: 1.05rem; max-width: 62ch; text-wrap: pretty; margin-bottom: 28px; }
.page-services .block .period { color: var(--ink-2); font-size: 0.95rem; max-width: 62ch; }
/* the floating Expand button sits 34px above the chart; leave it that room so it never covers the sentence above */
.page-services .block .chart-wrap { margin-top: 44px; }
.page-services .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-services details.about table { width: auto; }
.page-services details.about td.num, .page-services details.about th.num { text-align: right; }

/* ---------- the sample bulletin: a letter, not a card ---------- */
.page-services .bulletin {
  max-width: 68ch; margin-top: 6px; padding: 26px 28px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 8px 24px -18px rgba(31, 42, 48, 0.45), var(--shadow); position: relative;
}
html.mode-dark .page-services .bulletin { box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.7), var(--shadow); }
.page-services .bulletin::before {
  /* the pencil arc, the site's own mark of attention, drawn once at the corner */
  content: ""; position: absolute; right: 18px; top: 16px; width: 34px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M27 4 A 20 20 0 0 0 4 26' fill='none' stroke='%23B85C44' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='40 6'/></svg>") no-repeat center / contain;
  opacity: 0.9;
}
html.mode-dark .page-services .bulletin::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M27 4 A 20 20 0 0 0 4 26' fill='none' stroke='%23DF8064' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='40 6'/></svg>"); }
.page-services .bulletin header { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); padding-right: 48px; }
.page-services .bulletin .b-title { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.page-services .bulletin .b-for { color: var(--ink-2); font-size: 0.9rem; margin-top: 2px; }
.page-services .bulletin h4 { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-2); margin: 18px 0 6px; }
.page-services .bulletin p { font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.page-services .bulletin ol { margin: 0; padding-left: 22px; }
.page-services .bulletin li { margin: 6px 0; line-height: 1.5; }
.page-services .bulletin li::marker { color: var(--blue-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .page-services .bulletin { padding: 20px 18px 18px; } }

/* ---------- the ledger of deliverables ---------- */
.page-services .ledger { margin: 0; border-top: 1px solid var(--rule); }
.page-services .ledger > div:last-child { border-bottom: 0; }
.page-services .ledger > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 8px 32px; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
.page-services .ledger dt { font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; }
.page-services .ledger dd { margin: 0; color: var(--ink); max-width: 62ch; text-wrap: pretty; }
@media (max-width: 640px) { .page-services .ledger > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- the three steps: the order is the information ---------- */
/* hairlines between the columns the way .strip draws them: a 1px gap over the rule tone */
.page-services .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule-soft); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-soft); }
.page-services .steps li { position: relative; background: var(--page); padding: 22px 28px 26px 0; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 6px; }
.page-services .steps li + li { padding-left: 28px; }
.page-services .steps .step-n { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.page-services .steps h3 { font-size: 1.2rem; margin-top: 6px; }
.page-services .steps .price { font-size: 1.05rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.page-services .steps p:not(.price) { color: var(--ink); font-size: 0.97rem; line-height: 1.5; text-wrap: pretty; margin-top: 4px; }
.page-services .terms { margin-top: 22px; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 860px) {
  .page-services .steps { grid-template-columns: 1fr; }
  .page-services .steps li, .page-services .steps li + li { padding: 18px 0 22px; grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-rows: auto; column-gap: 12px; }
  .page-services .steps .step-n { grid-row: 1 / span 3; font-size: 2.2rem; }
  .page-services .steps h3 { margin-top: 0; }
}

/* ---------- who it fits ---------- */
.page-services .fit-table td:first-child { font-weight: 600; width: 38%; }
.page-services .fit-table td, .page-services .fit-table th { padding-right: 24px; }
.page-services .fit-split { margin-top: 28px; }
.page-services .fit-split h3, .page-services .partners h3 { margin-bottom: 6px; }
.page-services .partners { margin-top: 28px; }
@media (max-width: 640px) {
  .page-services .fit-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page-services .fit-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
  .page-services .fit-table td, .page-services .fit-table td:first-child { display: block; padding: 2px 0; border: 0; width: auto; }
  .page-services .fit-table td:nth-child(2)::before { content: "First offer: "; color: var(--ink-2); }
  .page-services .fit-table td:nth-child(3)::before { content: "Needs: "; color: var(--ink-2); }
}

/* ---------- contact ---------- */
.page-services .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.page-services .who p + p { margin-top: 12px; }
.page-services .ask-form { display: grid; gap: 14px; }
.page-services .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.page-services .ask-form .field { display: flex; width: 100%; }
.page-services .ask-form .field input, .page-services .ask-form .field select, .page-services .ask-form .field textarea {
  width: 100%; min-height: 44px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 9px 12px;
  caret-color: var(--blue); transition: border-color 140ms var(--ease);
}
.page-services .ask-form .field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.page-services .ask-form .field input:hover, .page-services .ask-form .field select:hover, .page-services .ask-form .field textarea:hover { border-color: var(--ink-2); }
.page-services .ask-form .field input:focus-visible, .page-services .ask-form .field select:focus-visible, .page-services .ask-form .field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.page-services .ask-form .field input:user-invalid, .page-services .ask-form .field textarea:user-invalid { border-color: var(--clay); }
.page-services .ask-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.page-services .f-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.page-services .f-actions .note { margin: 0; }
.page-services .sent { grid-column: 2; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); }
.page-services .sent:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 860px) {
  .page-services .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-services .sent { grid-column: auto; }
}
@media (max-width: 520px) { .page-services .f-row { grid-template-columns: 1fr; } }

/* selection and the caret carry the palette on this page too */
.page-services ::selection { background: var(--ochre-wash); color: var(--ink); }