/* Texas Accessible Documents: one stylesheet, no web fonts.
   Every colour pair below is checked by tools/contrast.py (WCAG 2.2 AA). */

:root {
  --paper: #F7F8FA;
  --surface: #FFFFFF;
  --ink: #17212B;
  --navy: #17324D;
  --blue: #145EA8;
  --blue-dark: #0E4A87;
  --muted: #4A5664;
  --field: #6A7684;
  --error: #A3262A;
  --note: #EAF1F8;
  --rule: #CBD3DC;
  --ruled: #EEF2F6;       /* ruled-paper lines behind text */
  --wide: 68.75rem;       /* 1100px */
  --measure: 40rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 6px;
  --band-pad: clamp(3rem, 6vw, 5.5rem);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html {
  font-size: 112.5%;            /* 18px body */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-wrap: break-word;
}

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

h1, h2, h3 {
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.125rem; letter-spacing: -0.005em; }

p, ul, ol, dl { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: 0.35em; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--blue-dark); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 10;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--navy);
  padding: 0.6rem 1rem;
}
.skip:focus { top: 1rem; }

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.measure { max-width: var(--measure); margin-inline: auto; }
.centre { text-align: center; }
.muted { color: var(--muted); }

/* Header */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.wordmark {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.wordmark:hover { color: var(--navy); text-decoration: underline; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}
.site-nav li + li { margin-top: 0; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 0.25rem 0; display: inline-block; }
.site-nav a:hover { color: var(--blue-dark); text-decoration: underline; }
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
  text-decoration-color: var(--blue);
}

/* Buttons */
.button {
  display: inline-block;
  background: var(--blue);
  color: var(--surface);
  border: 2px solid var(--blue);
  border-radius: 4px;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--surface); text-decoration: none; }
.button-small { padding: 0.45rem 0.9rem; font-size: 0.9375rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  margin: 1.75rem 0 1rem;
}

/* Main and bands */
main { display: block; }
main:focus { outline: none; }

.band { padding: var(--band-pad) 0; }
.band--white { background: var(--surface); }
.band--paper { background: var(--paper); }
.band + .band--paper, .band--paper + .band--paper { border-top: 1px solid var(--rule); }
.band--navy { background: var(--navy); color: var(--surface); text-align: center; }
.band--navy h2 { color: var(--surface); }
.band--navy p { max-width: var(--measure); margin-inline: auto; }
.band--navy :focus-visible { outline-color: var(--surface); }
.band--navy .button { background: var(--surface); color: var(--navy); border-color: var(--surface); }
.band--navy .button:hover { background: var(--note); border-color: var(--note); color: var(--navy); }

.band-head {
  text-align: center;
  max-width: var(--measure);
  margin: 0 auto 2.5rem;
}
.band-head p { color: var(--muted); font-size: 1.0625rem; margin: 0; text-wrap: balance; }
.band-head h2:last-child { margin-bottom: 0; }

.band-foot { text-align: center; max-width: 48rem; margin: 2.5rem auto 0; }
.band-foot p:last-child { margin-bottom: 0; }

/* Page head: centred title, lead, illustration banner */
.page-head { text-align: center; }
.page-head:not(:has(.banner)) { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.page-head:has(.banner) { padding-bottom: 0; }
.page-head h1 { margin-bottom: 0.4em; }
.page-head .lead { font-size: 1.1875rem; color: var(--muted); max-width: 38rem; margin: 0 auto; }
.page-head .lead + .lead { margin-top: 0.75rem; }
.page-head .lead--long { text-align: left; font-size: 1.0625rem; }
.banner {
  margin: 2.5rem auto 0;
  max-width: 52rem;
  aspect-ratio: 21 / 8;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.banner img { width: 100%; height: 100%; object-fit: cover; }
.page-head + .band { border-top: 1px solid var(--rule); }

/* Home hero */
.hero { position: relative; overflow: hidden; padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: max(56.25vw, 26rem);   /* natural 16:9 at full width; never shorter than the card pair on phones */
  object-fit: cover;
  object-position: right bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 30%, #000 62%);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 30%, #000 62%);
}
.hero .wrap { position: relative; }
.hero-text { max-width: 46rem; margin: 0 auto; text-align: center; }
.eyebrow { color: var(--muted); font-weight: 600; margin: 0 0 0.9rem; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.12; margin-bottom: 0.45em; }
.hero .sub { font-size: 1.25rem; color: var(--ink); max-width: 34rem; margin: 0 auto; }
.hero .purpose { max-width: 36rem; margin: 0.9rem auto 0; color: var(--ink); text-wrap: pretty; }
.reassure { color: var(--muted); margin: 0; }
.hero-proof { margin-top: 3.5rem; }
.hero-caption {
  display: table;                /* shrink to fit, centred: a label lying on the desk */
  margin: 2rem auto 0;
  max-width: 40rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  color: var(--ink);
}

/* Paper sheets with folder tabs (real excerpts) */
.pair {
  display: grid;
  gap: 3rem 2.5rem;
  max-width: 62rem;
  margin: 0 auto;
}
@media (min-width: 48rem) { .pair { grid-template-columns: 1fr 1fr; } }

.sheet {
  position: relative;
  margin: 1.9rem 6px 6px 0;     /* room for the tab above and the sheet behind */
}
.sheet::before {                 /* the second page peeking out behind */
  content: "";
  position: absolute;
  inset: 6px -6px -6px 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.sheet-page {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  overflow: hidden;
}
.sheet-page img { width: 100%; }
.sheet .tab {
  position: absolute;
  left: -1px;
  bottom: 100%;
  background: var(--navy);
  color: var(--surface);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1;
  padding: calc(0.45rem - 1px) calc(0.9rem - 1px) 0.4rem;
  border: 1px solid transparent;   /* drawn by forced-colors mode (a11y-v1 A6); invisible otherwise */
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.sheet .pageno {
  display: block;
  border-top: 1px solid var(--rule);
  padding: 0.35rem 0.8rem;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: right;
}
.sheet figcaption { position: relative; padding-top: 1rem; font-size: 0.9375rem; color: var(--muted); }

/* What I fix: three cards */
.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 56rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards > li { margin: 0; }
.card {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.card img { width: 100%; aspect-ratio: 36 / 13; object-fit: cover; object-position: top; border-bottom: 1px solid var(--rule); }
.card-body { padding: 1.25rem 1.4rem 1.4rem; }
.card h3 { margin-bottom: 0.4em; }
.card p { margin: 0; color: var(--muted); }

.notice {
  background: var(--note);
  border-left: 4px solid var(--navy);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
.notice p:last-child { margin-bottom: 0; }
.band-foot.notice { margin: 2.5rem auto 0; border-left: 0; border-radius: var(--radius); text-align: center; }

/* How it works: numbered columns */
.strip { max-width: 60rem; margin: 0 auto 0.5rem; }
.strip img {                     /* fade all four edges of the illustration into the band */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
                      linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
                      linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-composite: intersect;
}
.strip img { width: 100%; }
.steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 60rem;
  counter-reset: step;
  display: grid;
  gap: 2rem;
  position: relative;
}
.steps > li {
  counter-increment: step;
  margin: 0;
  text-align: center;
  position: relative;
}
.steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.steps h3 { margin-bottom: 0.35em; }
.steps p { margin: 0 auto; max-width: 16rem; color: var(--muted); }
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps::before {               /* connector line behind the number circles */
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 16.67%;
    right: 16.67%;
    border-top: 2px solid var(--rule);
  }
}

/* Proof teaser: three measured numbers */
.tiles {
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem;
  max-width: 56rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.tiles > li {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1rem 1.25rem;
  text-align: center;
}
.tiles strong { display: block; font-size: 1.75rem; line-height: 1.2; color: var(--navy); letter-spacing: -0.02em; }
.tiles span { display: block; color: var(--muted); font-size: 0.9375rem; margin-top: 0.35rem; }

/* Two-column docs layout: sticky contents + prose (Pricing, Help) */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 3rem;
  justify-content: center;
}
@media (min-width: 60rem) {
  .doc { grid-template-columns: 14rem minmax(0, var(--measure)); }
  .toc { position: sticky; top: 1.5rem; align-self: start; }
}
.toc { font-size: 0.9375rem; }
.toc h2 { font-size: 1rem; margin: 0 0 0.6rem; color: var(--muted); letter-spacing: 0; }
.toc ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.toc li { margin: 0; }
.toc a { display: block; padding: 0.3rem 0 0.3rem 0.9rem; color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--blue-dark); text-decoration: underline; }
.prose h2 { font-size: 1.375rem; margin: 2.2em 0 0.5em; }
.prose > :first-child,
.prose > section:first-child > h2:first-child,
.prose > div:first-child > section:first-child > h2:first-child { margin-top: 0; }
.prose details + p { margin-top: 1.25rem; }
.prose section { scroll-margin-top: 1rem; }

/* Pricing timeline */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  counter-reset: t;
}
.timeline > li {
  counter-increment: t;
  position: relative;
  margin: 0;
  padding: 0 0 1.4rem 3.25rem;
}
.timeline > li::before {
  content: counter(t);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy);
  font-weight: 700;
  line-height: 1;
  z-index: 1;
}
.timeline > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.125rem - 1px);
  top: 2.25rem;
  bottom: 0;
  border-left: 2px solid var(--rule);
}
.timeline strong { display: block; color: var(--navy); line-height: 2.25rem; }
.timeline p { margin: 0; color: var(--muted); }

/* Disclosure (Help, Samples) */
details { border-bottom: 1px solid var(--rule); }
.qa { border-top: 1px solid var(--rule); }
summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2.25rem 1rem 0;
  position: relative;
  font-weight: 650;
  color: var(--navy);
}
summary::-webkit-details-marker { display: none; }
summary::after {                 /* chevron, rotates when open */
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 1.45rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
details[open] > summary::after { transform: rotate(225deg); top: 1.7rem; }
summary:hover { color: var(--blue-dark); }
details > :not(summary) { margin-left: 0; }
.answer { padding: 0 0 1.1rem; }
.answer p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }

.glossary { margin: 0; }
.glossary dt { font-weight: 650; color: var(--ink); margin-top: 0.9rem; }
.glossary dt:first-child { margin-top: 0; }
.glossary dd { margin: 0.15rem 0 0; }

/* Data table (Privacy) and summary table (Samples) */
.table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.9375rem; }
.table caption { text-align: left; font-weight: 650; color: var(--navy); padding-bottom: 0.5rem; }
.table th, .table td { text-align: left; vertical-align: top; padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--rule); }
.table thead th { border-bottom: 2px solid var(--navy); color: var(--navy); }
.table tbody th { color: var(--navy); font-weight: 650; width: 7rem; }
@media (min-width: 40rem) { .table--data th:last-child, .table--data td:last-child { width: 8rem; } }

/* Samples */
.sample-grid {
  display: grid;
  gap: 2.5rem 3rem;
  max-width: 62rem;
  margin: 3rem auto 0;
}
@media (min-width: 56rem) { .sample-grid { grid-template-columns: minmax(0, 1fr) 20rem; } }
.sample-solo { max-width: var(--measure); margin: 3rem auto 0; }
.files { list-style: none; padding: 0; margin: 0 0 1rem; }
.files li { margin: 0 0 0.5rem; }
.files .meta { color: var(--muted); font-size: 0.9375rem; }
.not-yet { color: var(--muted); }
.record { margin: 0; }
.record dt { font-weight: 650; color: var(--navy); margin-top: 1rem; }
.record dt:first-child { margin-top: 0.25rem; }
.record dd { margin: 0.2rem 0 0; }
.record dd ul { margin: 0; }
.tag-key { font-size: 0.9375rem; color: var(--muted); }

/* Real tag tree (Cameron) */
.tree-box {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.25rem;
  font-size: 0.875rem;
}
.tree-box h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.tree-box > p { color: var(--muted); margin-bottom: 0.9rem; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 0.55rem; }
.tree li { position: relative; margin: 0; padding: 0.12rem 0 0.12rem 1.2rem; }
.tree ul > li::before {          /* elbow connector */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 0.95rem;
  width: 0.85rem;
  border-left: 1px solid var(--field);
  border-bottom: 1px solid var(--field);
}
.tree ul > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  bottom: 0;
  border-left: 1px solid var(--field);
}
.tree > li { padding-left: 0; }
.tree code {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--note);
  border-radius: 3px;
  padding: 0 0.3rem;
}
.tree q { color: var(--ink); }

/* Ruled-paper sheet (quote side panel, received page) */
.paper {
  /* Ruled paper: one ruled line every 1.6em, and every line of text sits on one. Headings,
     list items and paragraphs keep a line height and margins of whole rows. */
  --row: 1.6em;
  position: relative;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row) - 1px), var(--ruled) calc(var(--row) - 1px), var(--ruled) var(--row));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--row) 1.6rem calc(var(--row) - 1px);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.paper::before {                 /* folded corner */
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 1.6rem;
  height: 1.6rem;
  background: linear-gradient(225deg, var(--paper) 50%, var(--rule) 50%);
  border-radius: 0 var(--radius) 0 0;
}
.paper h1, .paper h2 { margin: 0 0 0; }
.paper h2 { font-size: 1.25rem; line-height: calc(1.6 * 0.9375rem); }
.paper p, .paper ol { margin: 0 0 var(--row); }
.paper ol { padding-left: 1.3em; }
.paper li + li { margin-top: 0; }
.paper > :last-child { margin-bottom: 0; }
.receipt { max-width: 38rem; margin: 0 auto; padding-inline: 2.5rem; font-size: 1rem; }
.receipt h1 { font-size: 1.875rem; line-height: 3.2rem; }   /* two rows */
.receipt h1 + p { margin-top: 0; }
.link-list { list-style: none; padding: 0; text-align: center; }
.link-list li + li { margin-top: 0.6rem; }

/* Quote page */
.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem 3rem;
  justify-content: center;
}
@media (min-width: 60rem) {
  .quote-grid { grid-template-columns: minmax(0, 36rem) 20rem; }
  .quote-side { position: sticky; top: 1.5rem; align-self: start; }
}

/* Forms */
.form { max-width: 36rem; }
.field { margin: 0 0 1.5rem; }
.field label { display: block; font-weight: 650; margin-bottom: 0.25rem; }
.field .req, .field .opt { font-weight: 400; color: var(--muted); }
.hint { display: block; color: var(--muted); font-size: 0.9375rem; margin: 0 0 0.4rem; }
input[type="text"], input[type="email"], input[type="url"], textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--field);
  border-radius: 4px;
  padding: 0.55rem 0.7rem;
}
textarea { min-height: 8rem; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline-offset: 2px; }
.field-error {
  display: block;
  color: var(--error);
  font-weight: 650;
  margin-top: 0.35rem;
}
.field-error:empty { display: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }

.error-summary {
  border: 2px solid var(--error);
  background: var(--surface);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  max-width: 36rem;
}
.error-summary h2 { color: var(--error); font-size: 1.125rem; margin: 0 0 0.5rem; }
.error-summary ul { margin: 0; }
.error-summary a { color: var(--error); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Footer: who runs it / site links / contact */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 2.75rem 0 3rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 3rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer h2 { font-size: 0.9375rem; color: var(--ink); margin: 0 0 0.5rem; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: 0.3rem; }
.site-footer p { margin: 0 0 0.4rem; max-width: 30rem; }

@media (max-width: 30rem) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.4375rem; }
  .hero .sub { font-size: 1.125rem; }
  .tiles strong { font-size: 1.5rem; }
}

@media print {
  .site-header nav, .skip, .actions .button, .hero-art, .banner, .strip { display: none; }
  a { color: var(--ink); }
  .band { padding: 1.5rem 0; }
}