@font-face {
  font-family: "Besley";
  src: url("/fonts/besley.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-next.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("/fonts/spline-sans-mono.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --paper: #F2EEE4;
  --paper-deep: #E4DDCC;
  --sheet: #FAF8F2;
  --ink: #16271F;
  --accent: #1E3B2F;         /* forest green */
  --accent-hover: var(--ink);
  --on-accent: var(--paper);
  --accent-text: #1E3B2F;
  --muted: #47574F;
  --edge: #A13F2A;     /* title-plan red edging, used sparingly */
  --rule: #CDC5B2;

  --serif: "Besley", Georgia, serif;
  --sans: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

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

.wrap { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 48rem) { .wrap { padding-inline: 2rem; } }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--accent); color: var(--on-accent); padding: .5rem 1rem;
}
.skip:focus { top: 1rem; }

/* Logo: supplied OM mark, top right of the header */
.logo { display: block; flex: none; line-height: 0; }
.logo img { display: block; height: 2.5rem; width: auto; }
@media (min-width: 48rem) { .logo img { height: 3rem; } }
/* Hover and keyboard focus: the mark lifts slightly and tilts, like a sign catching the light */
.logo:hover img, .logo:focus-visible img { transform: translateY(-2px) rotate(-3deg) scale(1.05); }
@media (prefers-reduced-motion: no-preference) {
  .logo img { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .75rem 1.5rem;
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  border-radius: 2px;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn--small { min-height: 2.75rem; padding: .5rem .75rem; font-size: .9375rem; white-space: nowrap; }
@media (min-width: 48rem) { .btn--small { padding-inline: 1rem; font-size: 1rem; } }
.btn--paper { background: var(--paper); color: var(--accent); }
.btn--paper:hover { background: #fff; }
.btn--paper:focus-visible { outline-color: var(--paper); }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1rem;
}
/* The header spans the full window, so the logo sits at the far left edge */
.site-header.wrap { max-width: none;
}
@media (min-width: 48rem) { .site-header { padding-block: 1.5rem; } }

/* Hero */
.hero {
  display: grid; gap: 2.5rem;
  padding-top: 2.5rem; padding-bottom: 4rem;
}
.hero h1 {
  font-size: clamp(2.375rem, 5.5vw + .6rem, 3.75rem);
  line-height: 1.05; letter-spacing: -.015em;
  max-width: 14ch;
}
.edged {
  text-decoration: underline;
  text-decoration-color: var(--edge);
  text-decoration-thickness: .07em;
  text-underline-offset: .14em;
  text-decoration-skip-ink: none;
  white-space: nowrap;
}
.subhead {
  margin-top: 1.25rem;
  font: 500 clamp(1.25rem, 1.2vw + 1rem, 1.625rem)/1.35 var(--serif);
  color: var(--muted);
}
.hero__edge { margin-top: .875rem; max-width: 38ch; font-size: 1.0625rem; color: var(--muted); }
.hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.hero__note { font-size: .9375rem; color: var(--muted); }

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center; gap: 3.5rem;
    padding-top: 4rem; padding-bottom: 6rem;
  }
  .hero__sample { justify-self: end; }
}

/* Sample shortlist: echoes the product's lead table, in the site's palette */
.hero__sample { margin: 0; width: 100%; max-width: 40rem; }
.sheet {
  container-type: inline-size;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(22, 39, 31, .06), 0 12px 32px -12px rgba(22, 39, 31, .18);
  overflow: hidden;
}
.sheet__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .875rem 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.sheet__title { font-weight: 600; font-size: 1rem; }
.sheet__title span { margin-left: .375rem; font-weight: 400; font-size: .875rem; color: var(--muted); }
.sheet__filters { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.sheet__filters li {
  font-size: .8125rem; font-weight: 600; color: var(--accent-text);
  padding: .125rem .625rem; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 999px;
}

.leads__cols { display: none; }
.leads__cols span, .age__label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.leads { list-style: none; margin: 0; padding: 0; }

/* Narrow: each lead is a stacked card */
.lead {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .375rem 1rem;
  grid-template-areas: "tier age" "co co" "lender letter";
  padding: 1rem 1rem 1.125rem 1.25rem;
}
.lead + .lead { border-top: 1px solid var(--rule); }
.lead::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tier-colour, transparent);
}
.lead--critical { --tier-colour: var(--edge); }
.lead--high { --tier-colour: #C98C7C; }

.cell--tier { grid-area: tier; }
.cell--co { grid-area: co; }
.cell--lender { grid-area: lender; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.cell--age { grid-area: age; font-size: .875rem; font-variant-numeric: tabular-nums; align-self: center; }
.cell--letter { grid-area: letter; align-self: end; justify-self: end; }
.letter {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .625rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: .8125rem; font-weight: 600; line-height: 1.5;
}
.letter svg { width: .9375rem; height: .9375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.age__label { margin-right: .25rem; }
.cell--age .none { display: none; }

.lead__name { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.lead__area { font-size: .875rem; color: var(--muted); }
.lead__prop { margin-top: .25rem; font-size: .875rem; line-height: 1.4; }
.lead__prop span {
  display: block;
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.flag {
  display: inline-block; margin-top: .375rem;
  font-size: .8125rem; padding: .125rem .5rem;
  background: var(--paper-deep); border-radius: 8px;
}

.pill {
  display: inline-block; padding: .125rem .625rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; line-height: 1.5;
}
.pill--critical { background: #F3DDD5; color: #8A2F1E; }
.pill--high     { background: #F4E4D6; color: #84441A; }
.pill--medium   { background: #EFE5C9; color: #65500F; }
.pill--class    { background: #DCE9DF; color: #235237; }
.none { font-size: .875rem; color: var(--muted); }

.unconfirmed {
  display: inline-block; padding: 0 .5rem;
  font-size: .75rem; font-weight: 600; line-height: 1.6; color: var(--muted);
  border: 1px dashed currentColor; border-radius: 999px;
}

/* Wide: a proper table, like the dashboard */
@container (min-width: 36rem) {
  .leads__cols, .lead {
    display: grid; align-items: center; column-gap: .75rem;
    grid-template-columns: 4.5rem minmax(0, 1fr) 6.75rem 4.25rem 4.75rem;
    grid-template-areas: none;
  }
  .leads__cols { padding: .625rem 1rem .625rem 1.25rem; border-bottom: 1px solid var(--rule); }
  .lead { padding-block: 1rem; }
  .lead > .cell { grid-area: auto; }
  .cell--letter { align-self: center; justify-self: start; }
  .cell--lender { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .age__label { display: none; }
  .cell--age .none { display: inline; }
}

/* Explains the Letter button, directly under the shortlist */
.letter-note { margin-top: 1.25rem; padding-left: .875rem; border-left: 3px solid var(--accent); display: grid; gap: .25rem; }
.letter-note p { font-size: .9375rem; }
.letter-note .letter-note__small { font-size: .8125rem; color: var(--muted); }

.hero__sample figcaption, .summary figcaption, .chat figcaption {
  margin-top: 1rem;
  font: 450 .75rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .lead { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.25s + var(--i) * .15s); }
  .lead::before { transform-origin: top; animation: edge .5s cubic-bezier(.5, 0, .2, 1) both; animation-delay: calc(.7s + var(--i) * .15s); }
}
@keyframes rise { from { opacity: 0; transform: translateY(.5rem); } }
@keyframes edge { from { transform: scaleY(0); } }

/* How it works: set out like a schedule in a survey report */
.how { border-top: 1px solid var(--rule); padding-block: 3.5rem 4rem; }
.how h2 { font-size: clamp(1.75rem, 3vw + .75rem, 2.5rem); }
.steps { list-style: none; margin: 2rem 0 0; padding: 0; }
.step {
  display: grid; gap: .5rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__label {
  font: 450 .8125rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--edge);
}
.step h3 { font-size: 1.375rem; line-height: 1.25; }
.step p:not(.step__label) { max-width: 52ch; }
.step__body { display: grid; gap: .75rem; }
.step__note { font-size: .9375rem; color: var(--muted); }

/* Sample lead summary: same card language as the shortlist */
.summary { margin: .75rem 0 0; max-width: 36rem; }
.summary__card {
  container-type: inline-size;
  padding: 1.25rem;
  background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(22, 39, 31, .06), 0 12px 32px -12px rgba(22, 39, 31, .18);
}
.summary__card p { max-width: none; }
.summary__title { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1rem; }
.summary__title svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; }
.summary__co { margin-top: 1rem; font-weight: 700; font-size: 1.0625rem; letter-spacing: .02em; text-transform: uppercase; }
.summary__addr { font-size: .875rem; color: var(--muted); }
.summary__tags { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.pill--plain { background: var(--paper-deep); color: var(--ink); }

/* Narrow: label and value on one line; wide: three boxes like the dashboard */
.summary__stats { margin: 1rem 0 0; display: grid; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
.summary__stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem .75rem; }
.summary__stats div + div { border-top: 1px solid var(--rule); }
.summary__stats dt { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.summary__stats dd { margin: 0; font-weight: 700; }
@container (min-width: 26rem) {
  .summary__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; background: none; border: 0; }
  .summary__stats div { display: block; padding: .625rem .75rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
  .summary__stats div + div { border-top: 1px solid var(--rule); }
  .summary__stats dd { margin-top: .125rem; }
}

.summary__text {
  margin-top: 1rem; padding: .875rem 1rem;
  background: var(--paper); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  font-size: .9375rem; line-height: 1.6;
}
.summary__foot { margin-top: .875rem; font-size: .8125rem; color: var(--muted); }

@media (min-width: 48rem) {
  .how { padding-block: 5rem 5.5rem; }
  .step {
    grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1.35fr);
    column-gap: 2rem; align-items: baseline;
    padding-block: 2rem;
  }
  .step > p:not(.step__label), .step__body { grid-column: 3; }
  .step--figure .summary { grid-column: 3; }
}
@media (min-width: 64rem) {
  /* Shortlists row: text sits under the heading, the sample summary takes the right-hand column */
  .step--figure { align-items: start; row-gap: 1rem; grid-template-rows: auto 1fr; }
  .step--figure .step__label { margin-top: .4rem; }
  .step--figure h3 { grid-column: 2; grid-row: 1; }
  .step--figure .step__body { grid-column: 2; grid-row: 2; }
  .step--figure .summary { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}

/* Ask in plain English: chat mock */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ask { padding-block: 3.5rem 4.5rem; }
.ask h2 { font-size: clamp(1.75rem, 3vw + .75rem, 2.5rem); }
.ask__intro { display: grid; gap: .75rem; max-width: 30rem; }
.ask__intro p:first-of-type { margin-top: .25rem; }

.chat { margin: 2rem 0 0; }
.chat__window {
  container-type: inline-size;
  background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(22, 39, 31, .06), 0 12px 32px -12px rgba(22, 39, 31, .18);
  overflow: hidden;
}
.chat__bar { display: flex; gap: .25rem; padding: .5rem .75rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
.chat__tab { padding: .25rem .75rem; border-radius: 8px; font-size: .875rem; font-weight: 600; color: var(--muted); }
.chat__tab--on { background: var(--accent); color: var(--on-accent); }

.chat__body { display: grid; }
.chat__side { display: none; }
.chat__main { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 1rem; min-width: 0; }

.chat__thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.msg { font-size: .9375rem; line-height: 1.5; }
.msg--you {
  align-self: flex-end; max-width: 85%;
  padding: .625rem .875rem; border-radius: 14px 14px 4px 14px;
  background: var(--accent); color: var(--on-accent);
}
.msg--bot {
  display: grid; gap: .75rem;
  padding: .875rem; border-radius: 14px 14px 14px 4px;
  background: var(--paper); border: 1px solid var(--rule);
}
.msg--typing { display: none; }

.chat__filters { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.chat__filters li {
  font-size: .8125rem; font-weight: 600; color: var(--accent-text);
  padding: .125rem .625rem; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 999px;
}
.chat__result {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .625rem .75rem; background: var(--sheet);
  border: 1px solid var(--rule); border-left: 3px solid var(--edge); border-radius: 8px;
}
.chat__result-co { display: grid; flex: 1 1 10rem; font-size: .875rem; line-height: 1.35; }
.chat__result-co span { color: var(--muted); font-size: .8125rem; }
.chat__result-age { font-size: .875rem; }
.chat__open { font-size: .875rem; font-weight: 600; color: var(--accent-text); }

.chat__suggest p { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chat__suggest ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .375rem; }
.chat__suggest li {
  padding: .5rem .75rem; font-size: .8125rem; font-weight: 600;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px;
}

.chat__input { display: flex; gap: .5rem; }
.chat__input span:first-child {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: .625rem .75rem; font-size: .875rem; color: var(--muted);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px;
}
.chat__send { padding: .625rem 1rem; font-size: .875rem; font-weight: 600; background: var(--accent); color: var(--on-accent); border-radius: 8px; }

@container (min-width: 40rem) {
  .chat__body { grid-template-columns: 13rem minmax(0, 1fr); }
  .chat__side { display: block; padding: .75rem; border-right: 1px solid var(--rule); }
  .chat__new {
    display: block; padding: .5rem; text-align: center;
    font-size: .875rem; font-weight: 600; background: var(--accent); color: var(--on-accent); border-radius: 8px;
  }
  .chat__history { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .125rem; }
  .chat__history li {
    padding: .5rem; font-size: .8125rem; border-radius: 6px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .chat__history .is-on { background: var(--paper-deep); font-weight: 600; }
  .chat__main { padding: 1.5rem; }
  .chat__thread { min-height: 19rem; }
  .chat__suggest ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Replays the conversation once when it scrolls into view (JS adds .chat--anim; reduced motion skips it) */
.chat--anim .chat__thread .msg { display: none; }
.chat--anim .chat__thread .msg.is-in { display: grid; animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.chat--anim .chat__thread .msg--you.is-in { display: block; }
.chat--anim .chat__thread .msg--typing.is-in {
  display: flex; gap: .25rem; align-self: flex-start;
  padding: .75rem .875rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px 14px 14px 4px;
}
.msg--typing span { width: .375rem; height: .375rem; border-radius: 50%; background: var(--muted); animation: dot 1s ease-in-out infinite; }
.msg--typing span:nth-child(2) { animation-delay: .15s; }
.msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: .25; transform: translateY(-2px); } }

@media (min-width: 64rem) {
  .ask { padding-block: 5rem 5.5rem; }
  .ask .wrap { display: grid; grid-template-columns: 17rem minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  .chat { margin-top: 0; }
}

/* Beta band */
.beta { background: var(--accent); color: var(--on-accent); }
.beta__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem; padding-block: 2.5rem;
}
.beta__line { font: 500 clamp(1.25rem, 1.5vw + .9rem, 1.625rem)/1.35 var(--serif); max-width: 32ch; }

/* Footer */
.site-footer {
  display: grid; gap: .75rem;
  padding-block: 2.5rem 3rem;
  font-size: .9375rem; color: var(--muted);
}
.site-footer__name { font-family: var(--serif); font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.site-footer a { text-underline-offset: .2em; }
.site-footer a:hover { color: var(--ink); }

/* Privacy page */
.doc { max-width: 44rem; padding-block: 2.5rem 4rem; }
.doc h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); line-height: 1.1; }
.doc h2 { font-size: 1.375rem; margin-top: 2.25rem; }
.doc p, .doc ul { margin-top: .875rem; }
.doc ul { padding-left: 1.25rem; }
.notfound { padding-block: 4rem 6rem; }
.notfound h1 { margin-top: .75rem; }
.notfound .notfound__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.notfound .notfound__actions a:not(.btn) { text-underline-offset: .2em; }
.doc .doc__see-also { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--muted); }
.doc .updated { margin-top: .75rem; color: var(--muted); font-size: .9375rem; }