/* NoteFix QA — notefixqa.com
   Built for people who read clinical software all day: quiet surfaces, fine
   borders, no decoration competing with the content. Red and amber are
   reserved for review findings, never for branding. */

@import url("fonts.css");

:root {
  --navy: #173042;
  /* Tiffany teal, from Xtian (2026-09-30): "I like the teal accents, let's try
     more like a Tiffany teal". True Tiffany (#81D8D0) is too light to carry
     text or sit under white text, so it is split: --teal is the Tiffany-leaning
     shade that still reads (5.2:1 with white), --tiffany the bright accent for
     bars, and --tiffany-soft the pale one for tags and tints. */
  --teal: #067a75;
  --tiffany: #0abab5;
  --tiffany-soft: #81d8d0;
  --text: #243746;
  --text-soft: #526370;
  --offwhite: #f7f9f8;
  --paleteal: #e7f7f5;
  --border: #d6e0dc;
  --white: #ffffff;

  --finding-red: #9e2b21;
  --finding-amber: #8a5a10;

  --sans: "Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --shell: 1160px;
  --gap: 80px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.375rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  font-weight: 600;
}

h2 {
  font-size: clamp(1.6rem, 2.7vw, 2.125rem);
  font-weight: 600;
}

h3 {
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

p {
  margin: 0;
  max-width: 68ch;
}

a {
  color: var(--teal);
  text-underline-offset: 2px;
}

a:focus-visible,
summary:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 3px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;
}

.btn--primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.btn--primary:hover {
  background: #05625e;
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}

.btn--ghost:hover {
  border-color: var(--navy);
}

/* ── masthead ──────────────────────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  flex-wrap: wrap;
  padding-block: 12px;
}

.wordmark {
  font-family: var(--sans);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

/* The QA tag in its box, as the first version had it. The polish pass on
   2026-09-22 dropped the box for plain coloured text; Keith asked for it back
   (2026-09-29): "the older logo had a stylize kind of boxy thing around the QA
   and diff font". */
.wordmark-qa {
  display: inline-block;
  vertical-align: 0.14em;
  margin-left: 0.3em;
  padding: 0.18em 0.34em 0.14em;
  border: 1px solid var(--tiffany-soft);
  border-radius: 4px;
  color: var(--teal);
  font-size: 0.6em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Slogan under the wordmark, from Xtian (2026-10-01): "Put up a slogan:
   Better Documentation, Better Reimbursement. Top left under NoteFix". */
.brand {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.brand-tagline {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--teal);
}

.wordmark--light {
  color: #fff;
  display: inline-block;
  margin-bottom: 14px;
}

.wordmark--light .wordmark-qa {
  color: var(--tiffany-soft);
  border-color: rgba(129, 216, 208, 0.45);
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 1rem;
}

.masthead nav a:not(.btn) {
  color: var(--text-soft);
  text-decoration: none;
}

.masthead nav a:not(.btn):hover {
  color: var(--navy);
  text-decoration: underline;
}

/* ── sections ──────────────────────────────────────────────────────────── */

section .shell {
  padding-block: var(--gap);
}

.band--tint {
  background: var(--paleteal);
  border-block: 1px solid var(--border);
}

.band--soft {
  background: var(--offwhite);
  border-block: 1px solid var(--border);
}

.eyebrow {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 14px;
}

.section-intro {
  margin-top: 14px;
  color: var(--text-soft);
  max-width: 62ch;
}

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 48px;
  align-items: center;
  padding-block: 72px;
}

.hero p.lead {
  margin-top: 20px;
  color: var(--text-soft);
  max-width: 54ch;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* "we need to put in that it's a chrome extension more at the top" (Xtian,
   2026-10-01). Tagged the same way as the QA box in the logo. */
.platform-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border: 1px solid var(--tiffany-soft);
  border-radius: 4px;
  color: var(--teal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.05em;
}

.platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.platform-tags .platform-tag {
  margin-right: 0;
}

.platform-tag--link {
  text-decoration: none;
}

.platform-tag--link:hover {
  border-color: var(--teal);
}

/* "Built for HIPAA", Keith's pick over "HIPAA compliant" (2026-10-01): every
   clause is true today; "compliant" waits on the BAA check, a risk assessment
   and written policies. */
.hipaa {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 18px 22px;
  background: var(--paleteal);
  border: 1px solid var(--tiffany-soft);
  border-radius: 6px;
  max-width: 78ch;
}

.hipaa p {
  margin: 0;
  color: var(--text);
}

.hipaa .hipaa-title {
  margin-bottom: 8px;
}

.hero .grounding {
  margin-top: 22px;
  font-size: 1rem;
  color: var(--text-soft);
  max-width: 48ch;
}

figure.frame {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--offwhite);
}

figure.frame figcaption {
  border-top: 1px solid var(--border);
  background: var(--white);
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--text-soft);
}

/* ── three-up ──────────────────────────────────────────────────────────── */

.three-up {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-top: 44px;
}

.three-up h3 {
  color: var(--navy);
}

.three-up p {
  margin-top: 8px;
  color: var(--text-soft);
}

.three-up > div {
  border-top: 3px solid var(--tiffany);
  padding-top: 16px;
}

/* "Make the For Therapists section bigger" (Xtian, 2026-10-01): it spans the
   row above the other two, with a larger heading and its own checklist. */
.three-up:has(.three-up__lead) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.three-up > .three-up__lead {
  grid-column: 1 / -1;
  padding-top: 22px;
}

.three-up__lead h3 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  font-weight: 600;
}

.three-up__lead > p {
  font-size: 1.125rem;
  color: var(--text);
  max-width: 60ch;
}

/* Two columns read top to bottom, so the list keeps its order. */
.checklist {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  columns: 2 340px;
  column-gap: 40px;
}

.checklist li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  break-inside: avoid;
  color: var(--text);
}

/* Rectangular, like the QA tag in the logo: "instead of a round checkbox make
   the boxes rectangular like the QA logo" (Xtian, 2026-10-01). */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 22px;
  height: 18px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--tiffany-soft);
}

.checklist li::after {
  content: "";
  position: absolute;
  left: 8.5px;
  top: calc(0.32em + 4px);
  width: 5px;
  height: 9px;
  border: solid var(--teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── worked example ────────────────────────────────────────────────────── */

.example {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}

.example > div {
  padding: 26px 28px;
  border-right: 1px solid var(--border);
}

.example > div:last-child {
  border-right: 0;
}

.example .step-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 12px;
}

.example .quote {
  font-family: var(--serif);
  font-size: 1.1875rem;
  color: var(--navy);
  background: var(--offwhite);
  border-left: 3px solid var(--border);
  padding: 12px 16px;
}

.example p {
  color: var(--text-soft);
}

.example p + p {
  margin-top: 12px;
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--finding-amber);
  margin-bottom: 10px;
}

.flag::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.note-label {
  margin-top: 26px;
  font-size: 0.875rem;
  color: var(--text-soft);
}

/* ── steps ─────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 14px;
}

.steps p {
  margin-top: 8px;
  color: var(--text-soft);
}

/* Workflow split by role (Xtian, 2026-10-01): therapists and QA side by side,
   each a short numbered run of steps. */
.flows {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 28px 48px;
}

.flow {
  border-top: 3px solid var(--tiffany);
  padding-top: 18px;
}

.flow h3 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  font-weight: 600;
}

.flow h3 .tag {
  font-family: var(--sans);
  font-size: 0.8125rem;
  vertical-align: 0.2em;
}

.flow .steps {
  margin-top: 20px;
  grid-template-columns: 1fr;
  gap: 14px;
}

.flow .steps li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.flow .steps li::before {
  margin-bottom: 0;
  flex: none;
  border-radius: 4px;
  background: var(--teal);
}

.flow .steps h4 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
}

.standfirst {
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--navy);
  border-radius: 4px;
  max-width: 72ch;
}

/* ── pilot ─────────────────────────────────────────────────────────────── */

.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.paths > div {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 26px 28px;
}

.paths p {
  margin-top: 10px;
  color: var(--text-soft);
}

.tag {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 8px;
  margin-left: 8px;
  vertical-align: 2px;
}

.measure {
  margin-top: 44px;
}

.measure ul {
  margin: 16px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  color: var(--text-soft);
  max-width: 60ch;
}

/* ── questions ─────────────────────────────────────────────────────────── */

/* Does / doesn't, from Xtian (2026-10-01): "we don't store patient data, we
   don't have access to devero, we cannot make changes or alter fields. all we
   do is catch errors and make suggestions". Every line checked against the
   extension and backend code; the feedback exception is stated, not hidden. */
.does {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 28px 48px;
}

.does-col {
  border-top: 3px solid var(--tiffany);
  padding-top: 18px;
}

.does-col--not {
  border-top-color: var(--navy);
}

.does-col h3 {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
}

.does-col .checklist {
  columns: 1;
}

.crosslist {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.crosslist li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  color: var(--text);
}

.crosslist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 22px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #b7c4cc;
}

.crosslist li::after {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 22px;
  height: 18px;
  display: grid;
  place-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--navy);
}

.does-note {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  color: var(--text-soft);
  max-width: 78ch;
}

/* Bullets: the QA tag's Tiffany outline with a mark inside. "put checkbox in
   the tiffany blue outline and do the same for the workflow section" (Xtian,
   2026-10-01). The doesn't-do list carries a cross instead of a tick, since a
   tick beside "Keep your notes" would read as the opposite of what it means. */
.checklist li::before,
.crosslist li::before,
.flow .steps li::before,
.edition .steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 22px;
  height: 18px;
  margin: 0;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--tiffany-soft);
}

.checklist li::after,
.flow .steps li::after,
.edition .steps li::after {
  content: "";
  position: absolute;
  left: 8.5px;
  top: calc(0.38em + 3px);
  width: 5px;
  height: 9px;
  border: solid var(--teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.crosslist li::after {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 22px;
  height: 18px;
  display: grid;
  place-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--teal);
  border: 0;
  transform: none;
}

.flow .steps li {
  display: block;
  position: relative;
  padding-left: 34px;
}

.questions {
  margin-top: 36px;
  border-top: 1px solid var(--border);
  max-width: 78ch;
}

.questions details {
  border-bottom: 1px solid var(--border);
}

.questions summary {
  cursor: pointer;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  color: var(--navy);
  position: relative;
  list-style: none;
  min-height: 48px;
}

.questions summary::-webkit-details-marker {
  display: none;
}

.questions summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--teal);
  line-height: 1;
}

.questions details[open] summary::after {
  content: "\2212";
}

.questions .answer {
  padding: 0 0 22px;
  color: var(--text-soft);
}

.questions .answer > * + * {
  margin-top: 12px;
}

/* ── closing ───────────────────────────────────────────────────────────── */

.closing .shell {
  text-align: left;
}

.closing p {
  margin-top: 14px;
  color: var(--text-soft);
}

.closing .actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

footer {
  background: var(--navy);
  color: #c7d6db;
  font-size: 0.9375rem;
}

footer .shell {
  padding-block: 40px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

footer a {
  color: #fff;
}

footer p {
  max-width: 56ch;
}

footer .links {
  display: grid;
  gap: 8px;
  justify-items: start;
}

/* ── policy pages ──────────────────────────────────────────────────────── */

.policy .shell {
  max-width: 760px;
  padding-block: 56px 72px;
}

.policy h2 {
  margin-top: 40px;
  font-size: 1.375rem;
}

.policy p,
.policy li {
  color: var(--text-soft);
}

.policy p + p {
  margin-top: 14px;
}

.policy ul {
  padding-left: 22px;
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}

.policy .updated {
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--text-soft);
}

/* ── narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root {
    --gap: 56px;
  }

  h1 {
    font-size: clamp(2.125rem, 7vw, 2.5rem);
  }

  .hero .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-block: 48px;
  }

  .masthead .shell {
    justify-content: flex-start;
  }

  .masthead nav {
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.9375rem;
  }

  .example > div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .example > div:last-child {
    border-bottom: 0;
  }

  footer .shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── hero balance ──────────────────────────────────────────────────────── */

.hero-copy h1 {
  max-width: 19ch;
}

.hero-shot img {
  width: 100%;
}

.section-note {
  margin-top: 18px;
  font-size: 1rem;
  color: var(--text-soft);
}

/* ── walkthrough ───────────────────────────────────────────────────────── */

.walkthrough {
  margin-top: 36px;
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.video-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--navy);
  display: grid;
  place-items: center;
}

.video-slot .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

/* A scrim, so the label reads over a real product frame rather than fighting
   the text inside it. */
.video-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 48, 66, 0.78);
}

.video-slot .player {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

.video-pending {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px;
}

.pending-label {
  color: #fff;
  font-weight: 600;
  font-size: 1.0625rem;
}

.video-pending .btn--ghost {
  background: #fff;
  border-color: #fff;
}

.transcript-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 1rem;
}

.walkthrough-notes h3 {
  color: var(--navy);
}

.walkthrough-notes ul {
  margin: 12px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: var(--text-soft);
}

/* ── worked example ────────────────────────────────────────────────────── */

.worked {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  background: var(--white);
  overflow: hidden;
}

.worked > div {
  padding: 24px 26px;
}

.worked-source {
  border-right: 1px solid var(--border);
  background: var(--white);
}

.facts {
  margin: 0;
  display: grid;
  gap: 6px;
}

.facts > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.facts dt {
  color: var(--text-soft);
  font-size: 0.9375rem;
}

.facts dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
}

.written {
  margin-top: 16px;
  color: var(--text-soft);
  font-size: 0.9375rem;
}

.worked-suggestion {
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--white);
  padding: 24px 26px;
}

.worked-suggestion .quote {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 1.1875rem;
  color: var(--navy);
  background: var(--paleteal);
  border-left: 3px solid var(--tiffany);
  padding: 14px 18px;
  max-width: none;
}

.worked-caveat {
  margin-top: 14px;
  font-size: 0.9375rem;
  color: var(--text-soft);
  max-width: 78ch;
}

.worked-caveat .label {
  color: var(--navy);
  font-weight: 600;
}

/* ── pilot ─────────────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-soft);
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 3px;
  padding: 2px 9px;
  margin: 0 0 12px;
}

.tag--available {
  color: var(--teal);
  border-color: #a8ccc3;
}

.measures {
  margin-top: 44px;
}

.measure-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 32px;
  max-width: 800px;
}

.measure-grid h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--navy);
}

.measure-grid p {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 0.9375rem;
}

/* ── patient data layout ───────────────────────────────────────────────── */

.data-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
}

.data-intro p {
  margin-top: 14px;
  color: var(--text-soft);
}

.data-layout .questions {
  margin-top: 0;
}

/* The does/doesn't columns take their own full-width row under the intro and
   the questions, rather than displacing the questions from the right column. */
.data-layout .does {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0;
}

/* ── contact ───────────────────────────────────────────────────────────── */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.contact-copy p {
  margin-top: 14px;
  color: var(--text-soft);
}

.founder {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.founder h3 {
  color: var(--navy);
}

#inquiry-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px;
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 6px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.field label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
}

.optional {
  font-weight: 400;
  color: var(--text-soft);
  font-size: 0.875rem;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid #b9c5cd;
  border-radius: 4px;
  padding: 11px 12px;
  min-height: 48px;
  width: 100%;
}

.field textarea {
  min-height: 108px;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--finding-red);
}

.field-hint {
  font-size: 0.875rem;
  color: var(--text-soft);
}

.field-error {
  font-size: 0.9375rem;
  color: var(--finding-red);
  font-weight: 600;
}

/* Off-screen rather than display:none, so a bot filling every field still
   trips it while nobody sees or tabs into it. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status:empty {
  display: none;
}

.form-status {
  font-size: 1rem;
  color: var(--text-soft);
}

.form-status--error {
  color: var(--finding-red);
  font-weight: 600;
}

.form-status--ok {
  color: var(--teal);
  font-weight: 600;
}

@media (max-width: 900px) {
  .walkthrough,
  .data-layout,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .hero-copy h1 {
    max-width: none;
  }

  .worked-source {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .wordmark {
    font-size: 23px;
  }
}

/* ══ v4 visual layer (2026-10-02) ═════════════════════════════════════════
   Xtian: make it pop, use the Tiffany teal from the top of their site, add
   some life, a little tech without scaring off clinicians. One bold move: a
   full-bleed Tiffany field behind the hero, with a real home visit photo and
   the real panel laid over it. One motion: the panel is scanned once on load.
   Everything below stays quiet and photo-led. */

:root {
  --tiffany-field: #81d8d0;
  --ink: #102a35;
}

/* The Tiffany stripe, as on tiffany.com, across the very top of every page. */
body {
  border-top: 6px solid var(--tiffany-field);
}

.hero--tiffany {
  position: relative;
  overflow: hidden;
  background-color: var(--tiffany-field);
  /* A faint dot grid: the one quiet nod to "software" in the hero. */
  background-image: radial-gradient(rgba(16, 42, 53, 0.09) 1px, transparent 1.3px);
  background-size: 18px 18px;
}

.hero--tiffany .shell {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 64px;
  padding-block: 84px 112px;
}

.hero--tiffany .eyebrow {
  color: var(--ink);
}

.hero--tiffany h1 {
  color: var(--ink);
  font-size: clamp(2.4rem, 4.6vw, 3.75rem);
  letter-spacing: -0.02em;
}

.hero--tiffany p.lead {
  color: rgba(16, 42, 53, 0.86);
  font-size: 1.1875rem;
}

.hero--tiffany .btn--primary {
  background: var(--ink);
  border-color: var(--ink);
}

.hero--tiffany .btn--primary:hover {
  background: #1d4352;
}

.hero--tiffany .btn--ghost {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.hero--tiffany .btn--ghost:hover {
  border-color: var(--ink);
}

.hero--tiffany .grounding {
  color: rgba(16, 42, 53, 0.82);
}

.hero--tiffany .platform-tag {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.hero-visual {
  position: relative;
  margin: 0;
}

.hero-photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 40% center;
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(16, 42, 53, 0.45);
}

.hero-panel {
  position: absolute;
  left: -56px;
  bottom: -64px;
  width: min(46%, 300px);
  height: 380px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 28px 70px -18px rgba(16, 42, 53, 0.55), 0 0 0 1px rgba(16, 42, 53, 0.08);
}

.hero-panel img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}

/* The one orchestrated moment: a check runs down the panel once. */
.hero-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 28%;
  background: linear-gradient(rgba(129, 216, 208, 0), rgba(129, 216, 208, 0.55) 70%, rgba(6, 122, 117, 0.9));
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: nf-scan 1.8s 0.6s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

@keyframes nf-scan {
  0% { top: -30%; opacity: 1; }
  85% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scan { display: none; }
}

.hero-note {
  position: absolute;
  right: 4px;
  bottom: -34px;
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(16, 42, 53, 0.7);
}

/* ── role rows: photo and copy, alternating ─────────────────────────── */

.roles {
  display: grid;
  gap: 72px;
  margin-top: 56px;
}

.role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.role--flip .role-media {
  order: 2;
}

.role-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 50px -24px rgba(16, 42, 53, 0.4);
}

.role-media--tall img {
  object-position: center 58%;
}

.role-copy h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  color: var(--ink);
}

.role-copy > p {
  margin-top: 10px;
  font-size: 1.125rem;
  color: var(--text);
}

.role-copy .checklist {
  columns: 1;
  margin-top: 20px;
}

/* ── two editions ───────────────────────────────────────────────────── */

.editions-band {
  background: var(--paleteal);
  border-block: 1px solid var(--border);
}

.editions {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px;
}

.edition {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  background: #fff;
  border: 1px solid #cfe9e6;
  border-top: 6px solid var(--tiffany-field);
  border-radius: 16px;
}

.edition--qa {
  border-top-color: var(--ink);
}

.edition-head h3 {
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--ink);
}

.edition-head p {
  margin-top: 6px;
  color: var(--text);
}

.edition-shot {
  position: relative;
  height: 400px;
  margin: 22px 0 6px;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(rgba(16, 42, 53, 0.07) 1px, transparent 1.3px) 0 0 / 16px 16px,
    #f2fbfa;
}

.edition-shot img {
  display: block;
  width: min(78%, 330px);
  height: auto;
  margin: 28px auto 0;
  border-radius: 10px;
  box-shadow: 0 18px 40px -16px rgba(16, 42, 53, 0.45);
}

.edition-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  background: linear-gradient(rgba(242, 251, 250, 0), #f2fbfa);
}

.edition .steps {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.edition .steps li {
  display: block;
  position: relative;
  padding-left: 34px;
}

.edition .steps h4 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

footer {
  border-top: 6px solid var(--tiffany-field);
}

/* ── narrow screens ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero--tiffany .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-block: 56px 96px;
  }

  .hero-panel {
    left: auto;
    right: 12px;
    bottom: -56px;
    width: 52%;
    height: 280px;
  }

  .hero-note {
    left: 4px;
    right: auto;
  }

  .role,
  .role--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .role--flip .role-media {
    order: 0;
  }

  .edition-shot {
    height: 340px;
  }
}

/* ══ v5: design review round 1 (2026-10-02) ══════════════════════════════
   Tiffany used sparingly so it reads as premium: the hero field, the top
   stripe, accents. Main buttons are ink. Bands are white or near-white. */

.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
}

.btn--primary:hover {
  background: #1d4352;
}

.band--tint,
.editions-band {
  background: var(--offwhite);
}

.hero--tiffany {
  background-image: radial-gradient(rgba(16, 42, 53, 0.05) 1px, transparent 1.3px);
  background-size: 24px 24px;
}

/* Hero: the panel sits off the people, not over them, and ends cleanly. */
.hero-photo {
  aspect-ratio: 4 / 3;
  object-position: 62% center;
}

.hero-visual {
  padding-left: 48px;
}

.hero-panel {
  left: 0;
  bottom: -72px;
  width: min(40%, 270px);
  height: auto;
}

.hero-panel::after {
  content: none;
}

.hero-scan {
  animation-duration: 1.2s;
  opacity: 0.35;
}

@keyframes nf-scan {
  0% { top: -30%; opacity: 0.35; }
  85% { opacity: 0.35; }
  100% { top: 105%; opacity: 0; }
}

/* Roles: one band of three photo cards. */
.roles--strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.roles--strip .role {
  display: block;
}

.roles--strip .role-media img {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}

.roles--strip .role-copy {
  margin-top: 22px;
}

.roles--strip .role-copy h3 {
  font-size: 1.5rem;
}

.roles--strip .role-copy > p {
  font-size: 1.0625rem;
}

.edition-shot {
  background: #f2fbfa;
}

/* Pilot measures: four small cards in a row. */
.measure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.measure-grid > div {
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--tiffany-field);
  border-radius: 10px;
}

@media (max-width: 1000px) {
  .roles--strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .measure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* Phones: a compact header, and the panel itself in the hero. */
  .masthead nav .btn {
    padding: 10px 16px;
    min-height: 40px;
    width: auto;
  }

  .hero-visual {
    padding-left: 0;
  }

  .hero-photo {
    display: none;
  }

  .hero-panel {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(100%, 340px);
    margin: 0 auto;
  }

  .hero-note {
    position: static;
    margin-top: 12px;
    text-align: center;
  }

  .hero--tiffany .shell {
    padding-block: 48px 56px;
  }
}

@media (max-width: 560px) {
  .measure-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Panel overlaps only the photo's lower edge, over arms rather than faces,
   and hangs into the Tiffany field. */
@media (min-width: 901px) {
  .hero-visual {
    padding-left: 0;
    margin-bottom: 230px;
  }

  .hero-photo {
    object-position: 45% 30%;
  }

  .hero-panel {
    left: auto;
    right: -28px;
    top: 62%;
    bottom: auto;
    width: 270px;
  }

  .hero-note {
    left: 0;
    right: auto;
    bottom: auto;
    top: calc(100% + 14px);
  }
}

/* ══ v6: design review round 2 ═════════════════════════════════════════
   The suggested sentence is the one thing nobody else does, so it is the
   largest type in the example and sits under the flag it answers. */
.worked-review .worked-suggestion {
  margin-top: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.worked-review .worked-suggestion .quote {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paleteal);
  border-left: 4px solid var(--tiffany-field);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
}

.worked-review .worked-caveat {
  font-size: 0.875rem;
}

/* Phones: wordmark and button on one row; the section links live in the
   page itself, so the header stays short. */
@media (max-width: 600px) {
  .masthead .shell {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
  }

  .masthead nav a:not(.btn) {
    display: none;
  }

  .masthead nav .btn {
    white-space: nowrap;
  }

  .brand-tagline {
    font-size: 0.75rem;
  }
}

/* ══ v7: Tiffany as an accent, a rhythm of backgrounds (2026-10-03) ═════
   Xtian: Tiffany teal as an accent colour, not a field. Keith: more life in
   section 2, better tags, no run of same-grey sections. The page now moves
   white hero, dark story, white, mist, white, soft, white, dark footer. */

:root {
  --mist: #eff9f8;
  --soft: #f5f7f8;
}

.band--white { background: #fff; border: 0; }
.band--mist { background: var(--mist); border: 0; }
.band--soft { background: var(--soft); border: 0; }

/* ── hero: white, with a soft Tiffany glow behind the visual ───────────── */
.hero--glow {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.hero--glow::before {
  content: "";
  position: absolute;
  right: -12%;
  top: -18%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(129, 216, 208, 0.55), rgba(129, 216, 208, 0));
  pointer-events: none;
}

.hero--glow .shell {
  position: relative;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 64px;
  padding-block: 80px 104px;
}

.hero--glow h1 {
  color: var(--ink);
  font-size: clamp(2.4rem, 4.6vw, 3.75rem);
  letter-spacing: -0.02em;
}

.hero--glow .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--teal);
}

.hero--glow .eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--tiffany-field);
}

.hero--glow p.lead {
  font-size: 1.1875rem;
  color: var(--text-soft);
}

.hero--glow .btn--ghost {
  background: #fff;
  border-color: var(--border);
  color: var(--ink);
}

/* Trust row: three facts with icons, in place of the plain tags. */
.trust {
  list-style: none;
  margin: 36px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.trust li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.trust a {
  color: inherit;
  text-decoration: none;
}

.trust a:hover b {
  text-decoration: underline;
  text-decoration-color: var(--tiffany-field);
  text-underline-offset: 3px;
}

.trust-icon {
  flex: none;
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--mist);
  box-shadow: inset 0 0 0 1px rgba(129, 216, 208, 0.7);
}

.trust-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust b {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink);
}

.trust small {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text-soft);
}

/* ── the story: section 2, dark, three steps ────────────────────────────── */
.story {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.86);
}

.story::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: 70%;
  aspect-ratio: 2;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(129, 216, 208, 0.22), rgba(129, 216, 208, 0));
  pointer-events: none;
}

.story .shell {
  position: relative;
}

.story h2 {
  color: #fff;
}

.story .section-intro {
  color: rgba(255, 255, 255, 0.7);
}

.story-steps {
  list-style: none;
  counter-reset: story;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.story-card {
  position: relative;
  counter-increment: story;
  padding: 26px 24px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* The arrow from one step to the next. */
.story-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  right: -22px;
  width: 16px;
  height: 16px;
  border: solid var(--tiffany-field);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  opacity: 0.8;
}

.story-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tiffany-field);
}

.story-step::before {
  content: counter(story);
  display: grid;
  place-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--tiffany-field);
  font-size: 0.8125rem;
}

.story-card p {
  color: rgba(255, 255, 255, 0.82);
}

.story-facts {
  margin: 0;
  display: grid;
  gap: 10px;
}

.story-facts div {
  display: grid;
  gap: 2px;
}

.story-facts dt {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.story-facts dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}

.story-written {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

.story-written span {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.story-written mark {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(231, 160, 35, 0.2);
  color: #ffd98e;
  font-weight: 600;
}

.story-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #ffd98e !important;
}

.dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot--yellow {
  background: #f0ad2c;
  box-shadow: 0 0 0 4px rgba(240, 173, 44, 0.2);
}

/* The answer: the one white card, lit in Tiffany. */
.story-card--fix {
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 2px var(--tiffany-field), 0 30px 70px -24px rgba(129, 216, 208, 0.6);
}

.story-card--fix .story-step {
  color: var(--teal);
}

.story-card--fix .story-step::before {
  background: var(--tiffany-field);
  border-color: var(--tiffany-field);
  color: var(--ink);
}

.story-quote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink) !important;
}

.story-caveat {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--text-soft) !important;
}

.story-label {
  margin-top: 20px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Edition cards on mist; borders quieter, Tiffany as a thin top line. */
.band--mist .edition {
  border: 0;
  border-top: 4px solid var(--tiffany-field);
  box-shadow: 0 20px 50px -30px rgba(16, 42, 53, 0.35);
}

.band--mist .edition--qa {
  border-top-color: var(--ink);
}

/* Role photos: no heavy drop shadow on white. */
.roles--strip .role-media img {
  box-shadow: none;
}

@media (max-width: 1000px) {
  .story-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .story-card:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%) rotate(135deg);
  }
}

@media (max-width: 900px) {
  .hero--glow .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-block: 48px 56px;
  }

  .trust {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The trust row spans the hero, under copy and visual alike. */
.hero--glow .trust {
  grid-column: 1 / -1;
  margin-top: 8px;
  gap: 28px;
}

.hero--glow .trust small {
  font-size: 0.875rem;
}

@media (min-width: 901px) {
  .hero--glow .hero-visual {
    margin-bottom: 150px;
  }
}

/* ══ v8: visual design review (2026-10-03) ═══════════════════════════════
   Rhythm: white hero, ink story, white roles, mist editions, ink pilot,
   white data, mist contact, ink footer. No grey section anywhere. */

.band--ink {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  border: 0;
}

.band--ink h2,
.band--ink h3,
.band--ink h4 {
  color: #fff;
}

.band--ink .section-intro,
.band--ink p {
  color: rgba(255, 255, 255, 0.74);
}

/* Bigger section headings; the hero keeps its own size. */
section h2 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  letter-spacing: -0.015em;
}

/* Buttons: softer corners, a Tiffany focus-and-hover ring. */
.btn {
  border-radius: 10px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  box-shadow: 0 0 0 4px rgba(129, 216, 208, 0.45);
}

.btn--tiffany {
  background: var(--tiffany-field);
  border-color: var(--tiffany-field);
  color: var(--ink);
}

.btn--tiffany:hover {
  background: #9ae2db;
}

/* ── hero: the panel is the product, so it gets the size ──────────────── */
@media (min-width: 901px) {
  .hero--glow .shell {
    grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
    gap: 56px;
  }

  .hero--glow h1 {
    font-size: clamp(2.5rem, 4.4vw, 3.5rem);
    font-weight: 500;
  }

  .hero--glow .hero-visual {
    margin-bottom: 120px;
  }

  .hero--glow .hero-photo {
    aspect-ratio: 4 / 3;
  }

  .hero--glow .hero-panel {
    right: -36px;
    top: 44%;
    width: 340px;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 42, 53, 0.18), 0 0 0 1px rgba(16, 42, 53, 0.06);
  }

  .hero--glow .hero-panel img {
    border-radius: 10px;
  }
}

/* Trust row: bare line icons, no tinted squares. */
.trust-icon {
  width: auto;
  height: auto;
  margin-top: 1px;
  background: none;
  box-shadow: none;
}

/* ── roles as tabs ─────────────────────────────────────────────────────── */
.role-tabs {
  margin-top: 40px;
}

.role-tablist {
  display: none;
}

.role-tabs.is-tabbed .role-tablist {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
  overflow-x: auto;
}

.role-tablist [role="tab"] {
  position: relative;
  padding: 0 0 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
}

.role-tablist [role="tab"][aria-selected="true"] {
  color: var(--ink);
}

.role-tablist [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 2px;
  background: var(--tiffany-field);
}

.role-tablist [role="tab"]:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
  border-radius: 4px;
}

.role-tabs .role-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.role-tabs .role-panel + .role-panel {
  margin-top: 56px;
}

.role-tabs.is-tabbed .role-panel + .role-panel {
  margin-top: 0;
}

.role-tabs .role-panel[hidden] {
  display: none;
}

.role-tabs .role-media img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: none;
}

.role-tabs .role-copy h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  color: var(--ink);
}

.role-tabs .role-copy > p {
  margin-top: 10px;
  font-size: 1.125rem;
}

.role-tabs .checklist {
  columns: 1;
  margin-top: 22px;
}

/* ── editions: the moment each edition is for, at readable size ───────── */
.band--mist .edition-shot {
  height: auto;
  margin: 22px 0 8px;
  padding: 20px;
  border-radius: 12px;
  background: var(--mist);
}

.band--mist .edition-shot::after {
  content: none;
}

.band--mist .edition-shot img {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--tiffany-field), 0 16px 40px -18px rgba(16, 42, 53, 0.4);
}

.standfirst--line {
  max-width: none;
  margin-top: 36px;
  padding: 4px 0 4px 18px;
  background: none;
  border: 0;
  border-left: 3px solid var(--tiffany-field);
  border-radius: 0;
  font-size: 1.0625rem;
}

/* ── pilot, on ink ─────────────────────────────────────────────────────── */
.band--ink .measures h3 {
  color: var(--tiffany-field);
  font-family: var(--sans);
  font-size: 1rem;
}

.band--ink .measure-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 16px;
}

.band--ink .measure-grid > div {
  padding: 22px 24px 4px 0;
  margin-right: 24px;
  background: none;
  border: 0;
  border-top: 2px solid var(--tiffany-field);
  border-radius: 0;
}

.band--ink .measure-grid h4 {
  font-size: 1.125rem;
  color: #fff;
}

.band--ink .measure-grid p {
  margin-top: 6px;
  font-size: 0.9375rem;
}

.band--ink .actions {
  margin-top: 28px;
}

/* ── patient data: lists, then the HIPAA strip, then questions ─────────── */
.data-flow .data-intro {
  max-width: 62ch;
}

.data-flow .data-intro h2 br {
  display: none;
}

.data-flow .does {
  margin-top: 40px;
}

.does-col {
  border-top: 0;
  padding-top: 0;
}

.does-col h3 {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--tiffany-field);
}

.does-col--not h3 {
  border-bottom-color: #8a99a3;
}

.does-col li {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}

.does-col li::before,
.does-col li::after {
  top: calc(10px + 0.38em);
}

.does-col li::after {
  top: calc(10px + 0.38em + 3px);
}

/* A cross in Tiffany read as "approved". Neutral grey. */
.crosslist li::before {
  border-color: #c3ccd1;
}

.crosslist li::after {
  top: calc(10px + 0.38em);
  color: #8a99a3;
}

.data-flow .hipaa {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: none;
  margin-top: 40px;
  padding: 22px 26px;
  background: var(--mist);
  border: 0;
  border-left: 4px solid var(--tiffany-field);
  border-radius: 0 12px 12px 0;
}

.hipaa-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-flow .hipaa .hipaa-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--ink);
}

.data-flow .hipaa p + p {
  margin-top: 0;
}

.questions-title {
  margin-top: 56px;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
}

.data-flow .questions {
  margin-top: 16px;
  max-width: none;
}

/* ── the moment: highlighter, strike, then the fix lights up ──────────── */
.story-written mark {
  position: relative;
  background-image: linear-gradient(rgba(240, 173, 44, 0.32), rgba(240, 173, 44, 0.32));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
}

.story-written mark::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 52%;
  height: 2px;
  background: #ffd98e;
  transform-origin: left;
}

.story--ready .story-written mark {
  background-size: 0% 100%;
  transition: background-size 0.6s ease 0.2s;
}

.story--ready .story-written mark::after {
  transform: scaleX(0);
  transition: transform 0.45s ease 0.95s;
}

.story--ready .story-card--fix {
  opacity: 0.35;
  transform: translateY(10px);
  transition: opacity 0.6s ease 1.45s, transform 0.6s ease 1.45s;
}

.story--ready.is-playing .story-written mark {
  background-size: 100% 100%;
}

.story--ready.is-playing .story-written mark::after {
  transform: scaleX(1);
}

.story--ready.is-playing .story-card--fix {
  opacity: 1;
  transform: none;
}

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .role-tabs .role-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .band--ink .measure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }
}

@media (max-width: 600px) {
  .hero--glow .actions .btn {
    width: 100%;
    text-align: center;
  }

  .hero--glow .actions {
    gap: 12px;
  }

  #contact form {
    border: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .role-tablist [role="tab"] {
    font-size: 0.9375rem;
  }

  .role-tabs.is-tabbed .role-tablist {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .brand-tagline {
    display: none;
  }
}

/* Hero, round 2: icon list sits in the left column under the buttons;
   the panel hangs below the photo with room reserved for it. */
@media (min-width: 901px) {
  .hero--glow .shell {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
    padding-top: 72px;
  }

  .hero--glow .hero-copy {
    padding-top: 24px;
  }

  .hero--glow .hero-visual {
    margin-bottom: 260px;
  }

  .hero--glow .hero-panel {
    top: 56%;
    right: -20px;
    width: 310px;
  }

  .hero--glow .hero-note {
    max-width: 48%;
  }
}

.hero--glow .trust {
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 36px;
  padding-top: 24px;
}

/* ══ v9: visual design review round 2 ═════════════════════════════════ */

/* Secondary text up a size for readers 40 to 60. */
.section-intro { font-size: 1.1875rem; }
.edition-head p,
.role-tabs .role-copy > p { font-size: 1.125rem; }
.trust small { font-size: 0.9375rem; }

/* Hero: three-line headline, taller photo, panel on its lower corner,
   caption under the panel. */
@media (min-width: 901px) {
  .hero--glow .shell {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: 48px;
  }

  .hero--glow h1 {
    font-size: clamp(2.5rem, 4vw, 3.25rem);
  }

  .hero--glow .hero-photo {
    aspect-ratio: auto;
    height: 430px;
    object-position: 38% 30%;
  }

  .hero--glow .hero-visual {
    margin-bottom: 290px;
  }

  .hero--glow .hero-panel {
    top: 50%;
    right: -24px;
    width: 300px;
  }

  .hero--glow .hero-copy h1 {
    max-width: 22ch;
  }

  .hero--glow .hero-panel .hero-note {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 10px;
    text-align: right;
  }
}

/* Pilot: intro and the ask side by side, measures across the full width. */
.pilot-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
}

.pilot-cta p {
  font-size: 1.0625rem;
  margin-bottom: 18px;
}

.band--ink .measures {
  margin-top: 56px;
}

.band--ink .measure-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.band--ink .measure-grid > div {
  margin-right: 0;
  padding-right: 0;
}

.band--ink .measure-grid h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

.band--ink .measure-grid p {
  font-size: 1rem;
  color: #b9cbd1;
}

/* Role tabs: a real segmented control. */
.role-tabs.is-tabbed .role-tablist {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--mist);
  max-width: 100%;
}

.role-tablist [role="tab"] {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 1rem;
  color: var(--ink);
  min-height: 48px;
}

.role-tablist [role="tab"][aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

.role-tablist [role="tab"][aria-selected="true"]::after {
  content: none;
}

.role-tablist [role="tab"]:not([aria-selected="true"]):hover {
  background: #dff3f0;
}

/* Editions: equal wells so both step lists line up. */
.band--mist .edition {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.band--mist .edition-head {
  min-height: 112px;
}

.band--mist .edition-shot {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 340px;
  overflow: hidden;
}

.band--mist .edition-shot img {
  max-height: 300px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Contact: what happens after you ask. */
.next-steps {
  list-style: none;
  counter-reset: next;
  margin: 28px 0 24px;
  padding: 0;
  display: grid;
  gap: 18px;
}

.next-steps li {
  counter-increment: next;
  position: relative;
  padding-left: 46px;
}

.next-steps li::before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--tiffany-field);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ink);
}

.next-steps b {
  display: block;
  color: var(--ink);
}

.next-steps span {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 1rem;
}

@media (max-width: 900px) {
  .pilot-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .band--ink .measure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .band--mist .edition-head {
    min-height: 0;
  }

  .band--mist .edition-shot {
    height: auto;
  }
}

@media (max-width: 600px) {
  .role-tabs.is-tabbed .role-tablist {
    display: flex;
  }

  .role-tablist [role="tab"] {
    flex: 1;
    padding: 10px 8px;
    font-size: 0.875rem;
    white-space: normal;
    line-height: 1.2;
  }
}

/* Caption travels with the panel at every width. */
.hero-panel .hero-note {
  position: static;
  width: auto;
  max-width: none;
  margin: 8px 4px 2px;
  text-align: right;
}

.band--ink .measures,
.band--ink .measure-grid {
  max-width: none;
  width: 100%;
}

@media (min-width: 1100px) {
  .hero--glow .shell {
    grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  }

  .hero--glow .hero-copy h1 {
    max-width: none;
    font-size: 2.875rem;
  }
}

/* Hero, round 3 (Xtian): the photo stands alone, nothing laid over it. */
@media (min-width: 901px) {
  .hero--glow .hero-visual {
    margin-bottom: 0;
  }

  .hero--glow .shell {
    align-items: center;
  }

  .hero--glow .hero-photo {
    height: 460px;
    object-position: 52% 45%;
  }
}

.band--ink .measures-result {
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(129, 216, 208, 0.25);
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
}

.band--ink .measures-result {
  max-width: none;
}

/* The therapist example is one short card: centre it in its well. */
.band--mist .edition-shot:has(img[src$="edition-therapist.png"]) {
  align-items: center;
}

/* The finding section carries the real panel (Xtian, 2026-10-04). */
.story-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: center;
}

.story-key {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 1.0625rem;
}

.story-key li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-key b {
  color: #fff;
}

.story-key .dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot--red { background: #e5484d; }
.dot--yellow { background: #f5a524; }
.dot--green { background: #30a46c; }

.story-lead {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.7);
}

.story-panel {
  margin: 0;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(129, 216, 208, 0.35);
}

.story-panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.story-panel figcaption {
  margin: 8px 4px 2px;
  font-size: 0.8125rem;
  color: rgba(16, 42, 53, 0.7);
  text-align: right;
}

@media (max-width: 900px) {
  .story-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .story-panel {
    max-width: 340px;
  }
}

.story-key li {
  display: block;
}

.story-key .dot {
  display: inline-block;
  margin-right: 12px;
  vertical-align: 1px;
  box-shadow: none;
}

.band--ink .measures-result {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  font-weight: 600;
}

/* Hero shows the tool itself (Xtian, 2026-10-04). */
.story-head {
  grid-template-columns: minmax(0, 1fr);
}

.hero-tool {
  position: relative;
  margin: 0 auto;
  width: min(100%, 360px);
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(16, 42, 53, 0.22), 0 0 0 1px rgba(16, 42, 53, 0.06);
}

.hero-tool img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.hero-tool figcaption {
  margin: 8px 4px 2px;
  font-size: 0.8125rem;
  color: rgba(16, 42, 53, 0.7);
  text-align: right;
}

/* Two sentences, one line each on desktop (Xtian). */
.hero--glow p.lead {
  max-width: none;
}

.hero-tool {
  width: min(100%, 460px);
}

/* Bigger product line above the headline (Xtian). */
.hero--glow .eyebrow {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.hero--glow .eyebrow::before {
  width: 36px;
}

@media (max-width: 600px) {
  .hero--glow .eyebrow {
    font-size: 1.0625rem;
    align-items: baseline;
  }

  .hero--glow .eyebrow::before {
    flex: none;
    width: 24px;
    transform: translateY(-4px);
  }
}