/* Denver Men's Therapy · Therapist match quiz, from the Claude Design review (November 5, 2026).
   Plain CSS. No outside requests: the fonts are self-hosted from fonts/ (SIL Open Font License, see fonts/LICENSE-fonts.txt).
   Brand: #103C35 green, #B8543D terracotta, #E0CC19 gold (shape accent only, never text on white). */

@font-face { font-family: "Oswald"; src: url("fonts/oswald-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/oswald-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

html { margin: 0; background: #fff; }
.dmt-match {
  --green: #103C35; --green-deep: #0a2a25; --clay: #B8543D; --clay-deep: #8f3f2c;
  --gold: #E0CC19; --cream: #F2EEDF; --surface: #f8faf9;
  --text: #4a4a4a; --strong: #1a2a25; --muted: #6c706b; --on-dark: #f6f4ea;
  --line: rgba(16, 60, 53, 0.18);
  --display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  margin: 0;
  container-type: inline-size;
  background:
    radial-gradient(70% 55% at 0% 100%, rgba(16,60,53,.13), rgba(16,60,53,0) 70%),
    radial-gradient(60% 50% at 100% 70%, rgba(184,84,61,.10), rgba(184,84,61,0) 70%),
    radial-gradient(50% 40% at 100% 0%, rgba(242,238,223,.9), rgba(242,238,223,0) 70%),
    #fff;
  font: 400 17px/1.6 var(--body);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
}
.dmt-match *, .dmt-match *::before, .dmt-match *::after { box-sizing: border-box; }
.dmt-match [hidden] { display: none !important; }
.dmt-match button, .dmt-match input, .dmt-match select { font: inherit; }
.dmt-match__inner {
  max-width: 680px; margin: 0 auto; outline: none;
  padding: 24px 20px; display: flex; flex-direction: column; gap: 28px;
}
@container (min-width: 600px) { .dmt-match__inner { padding: 48px 40px; } }
.dmt-match .block { display: flex; flex-direction: column; gap: 22px; }
.dmt-match .foot-area { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.dmt-match .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Links */
.dmt-match a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(16,60,53,.35); text-underline-offset: 4px; transition: color 140ms var(--ease); }
.dmt-match a:hover { color: var(--clay); text-decoration-color: currentColor; }
.dmt-match a.tel { font-weight: 700; white-space: nowrap; }
.dmt-match .text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; align-self: flex-start; padding: 0 8px 0 0; font: 600 16px var(--body); color: var(--green); background: none; border: 0; text-decoration: underline; text-decoration-color: rgba(16,60,53,.35); text-underline-offset: 4px; cursor: pointer; }
.dmt-match .text-link:hover { color: var(--clay); }
.dmt-match .text-link svg { width: 18px; height: 18px; flex: none; }

/* Focus: visible everywhere. Headings take focus only so screen readers start at the new question. */
.dmt-match :focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.dmt-match h1:focus, .dmt-match h2:focus { outline: none; }
.dmt-match .btn-book:focus-visible { outline-color: var(--green); outline-offset: 3px; }

/* Progress */
.dmt-match .progress { height: 10px; background: rgba(16,60,53,.12); border-radius: 999px; overflow: hidden; }
.dmt-match .progress > span { display: block; width: 0; height: 100%; background: var(--clay); border-radius: 999px; transition: width 300ms var(--ease); }

/* Type */
.dmt-match .eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }
.dmt-match .rule { width: 64px; height: 3px; background: var(--clay); margin: 12px 0 20px; border: 0; }
.dmt-match .rule--solo { margin: 0; }
.dmt-match h1, .dmt-match h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: 0; color: var(--strong); text-wrap: balance; text-transform: none; }
.dmt-match h1 { font-size: clamp(32px, 6.4cqi, 48px); line-height: 1.12; margin-bottom: 20px; }
.dmt-match h2 { font-size: clamp(28px, 5.2cqi, 38px); line-height: 1.15; }
.dmt-match .lede { margin: 0; font-size: clamp(17px, 2.6cqi, 19px); max-width: 560px; text-wrap: pretty; }
.dmt-match .intro { display: flex; flex-direction: column; padding-top: clamp(0px, 3cqi, 24px); }
.dmt-match .intro .lede { margin-bottom: 32px; }
.dmt-match .result-head { display: flex; flex-direction: column; gap: 6px; }
.dmt-match .result-lead { display: block; font: 600 18px/1.3 var(--body); color: var(--clay); }
.dmt-match .result-name { display: block; font-size: clamp(32px, 6cqi, 44px); line-height: 1.1; }
.dmt-match .none h2 { font-size: clamp(30px, 5.6cqi, 42px); line-height: 1.12; }
.dmt-match .none .lede { margin-bottom: 8px; }

/* Buttons */
.dmt-match .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 340px; min-height: 54px; padding: 14px 26px;
  font: 600 16px/1.25 var(--body); letter-spacing: .04em; text-transform: uppercase; text-align: center; text-decoration: none;
  border: 1.5px solid transparent; border-radius: 999px; cursor: pointer;
  white-space: normal;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), transform 140ms var(--ease);
}
.dmt-match .btn svg { width: 18px; height: 18px; flex: none; }
.dmt-match .btn:active, .dmt-match .answer:active { transform: translateY(1px); transition-duration: 100ms; }
.dmt-match .btn-primary { background: var(--green); border-color: var(--green); color: var(--on-dark); }
.dmt-match .btn-primary:hover, .dmt-match .btn-primary:active { background: var(--green-deep); border-color: var(--green-deep); color: var(--on-dark); }
.dmt-match .btn-book { background: var(--clay); border-color: var(--clay); color: #fff; min-height: 56px; }
.dmt-match .btn-book:hover, .dmt-match .btn-book:active { background: var(--clay-deep); border-color: var(--clay-deep); color: #fff; }

/* Answers. Pick-one answers are buttons; pick-any answers are labels around a real checkbox,
   so keyboards and screen readers get native checkbox behavior. */
.dmt-match .answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dmt-match .answer {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px;
  padding: 14px 16px 14px 18px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px;
  font: 600 17px/1.35 var(--body); color: var(--strong); text-align: left; cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.dmt-match .answer > .label { flex: 1; min-width: 0; text-wrap: pretty; }
.dmt-match .answer:hover { border-color: var(--green); background: var(--surface); }
.dmt-match .answer .arrow { flex: none; width: 20px; height: 20px; color: var(--green); }
.dmt-match .answer .box { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; }
.dmt-match .answer .box--tap { display: none; }
.dmt-match .answer:hover .box { border-color: var(--green); }
.dmt-match .answer .box svg { display: none; width: 16px; height: 16px; color: var(--green); }
.dmt-match .answer input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dmt-match .answer:has(input:focus-visible) { outline: 2px solid var(--clay); outline-offset: 2px; }
.dmt-match .answer[data-on],
.dmt-match .answer:has(input:checked) { background: var(--green); border-color: var(--green); color: var(--on-dark); }
.dmt-match .answer:has(input:checked):hover { background: var(--green-deep); }
.dmt-match .answer[data-on] .box,
.dmt-match .answer:has(input:checked) .box { display: flex; background: var(--gold); border-color: var(--gold); }
.dmt-match .answer[data-on] .box svg,
.dmt-match .answer:has(input:checked) .box svg { display: block; }
.dmt-match .answer[data-on] .arrow { display: none; }

/* Men's group: Yes / Maybe / No */
.dmt-match .answers--row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; }
.dmt-match .answers--row .answer { justify-content: center; text-align: center; padding: 12px 8px; min-height: 56px; }

/* Notes and boxes */
.dmt-match .note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--cream); border-radius: 12px; font-size: 16px; line-height: 1.5; color: var(--strong); }
.dmt-match .note p { margin: 0; }
.dmt-match .group-box { padding: 20px; gap: 14px; }
.dmt-match .group-box .icon { width: 24px; height: 24px; margin-top: 1px; color: var(--green); }
.dmt-match .crisis { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; line-height: 1.5; color: var(--strong); }
.dmt-match .crisis p { margin: 0; }
.dmt-match .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.dmt-match .icon--clay { color: var(--clay-deep); }

/* Form */
.dmt-match form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.dmt-match .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 16px; }
.dmt-match .field { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 600; color: var(--strong); }
.dmt-match input[type="text"], .dmt-match input[type="email"], .dmt-match input[type="tel"], .dmt-match select {
  width: 100%; height: 52px; padding: 0 14px;
  font: 400 17px var(--body); color: var(--strong); background: #fff;
  border: 1.5px solid var(--line); border-radius: 8px;
}
.dmt-match input:focus, .dmt-match select:focus { border-color: var(--green); outline: 2px solid var(--clay); outline-offset: 2px; }
.dmt-match input[aria-invalid="true"], .dmt-match select[aria-invalid="true"] { border-color: var(--clay-deep); }
.dmt-match .select { position: relative; display: block; }
.dmt-match .select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.dmt-match .select svg { position: absolute; right: 14px; top: 16px; width: 20px; height: 20px; color: var(--green); pointer-events: none; }
.dmt-match .check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding-top: 4px; font-size: 16px; line-height: 1.45; color: var(--strong); cursor: pointer; }
.dmt-match .check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--green); }
.dmt-match .small-print { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.dmt-match .error { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: #f8ece8; border: 1px solid rgba(143,63,44,.35); border-radius: 8px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--clay-deep); }
.dmt-match .error .icon { margin-top: 1px; }

/* Loading */
.dmt-match .loading { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.dmt-match .loading p { margin: 0; font: 500 clamp(24px, 4cqi, 30px)/1.2 var(--display); color: var(--strong); }
.dmt-match .spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--cream); border-top-color: var(--green); animation: dmt-spin 1.1s linear infinite; }
@keyframes dmt-spin { to { transform: rotate(360deg); } }

/* Result */
.dmt-match .result { display: flex; flex-direction: column; gap: 24px; }
.dmt-match .card { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; padding: clamp(20px, 4.4cqi, 32px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 3px 14px rgba(16,60,53,.08); }
.dmt-match .photo { flex: none; width: 96px; height: 96px; padding: 3px; border-radius: 50%; background: var(--gold); }
.dmt-match .photo img, .dmt-match .photo .initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; object-position: 50% 30%; background: var(--cream); }
.dmt-match .photo .initials { font: 600 28px var(--display); color: var(--green); }
.dmt-match .card-body { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.dmt-match blockquote { margin: 0; font: italic 400 18px/1.55 var(--serif); color: var(--strong); text-wrap: pretty; }
.dmt-match .card-body .text-link { margin: -10px 0; }
.dmt-match .divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.dmt-match .opening { margin: 0; display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--strong); }
.dmt-match .opening .icon { margin-top: 0; color: var(--green); }
.dmt-match .later { margin: 0; padding: 14px 16px; background: var(--cream); border-radius: 8px; font-size: 16px; line-height: 1.5; color: var(--strong); text-wrap: pretty; }
.dmt-match .book { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.dmt-match .book .talk { margin: 0; font-size: 16px; line-height: 1.5; color: var(--strong); }
.dmt-match .book > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }

/* Motion. The crisis line and Back link never move. All of it is off under reduced motion. */
@keyframes dmt-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dmt-fade { from { opacity: 0; } to { opacity: 1; } }
.dmt-match .is-entering > :not(.foot-area) { animation: dmt-enter 200ms var(--ease) both; }
.dmt-match .reveal .r1, .dmt-match .reveal .r2, .dmt-match .reveal .r3, .dmt-match .reveal .r4 { animation: dmt-fade 200ms var(--ease) both; }
.dmt-match .reveal .r1 { animation-delay: 0ms; }   /* photo */
.dmt-match .reveal .r2 { animation-delay: 100ms; } /* name */
.dmt-match .reveal .r3 { animation-delay: 200ms; } /* next opening or 30+ day note */
.dmt-match .reveal .r4 { animation-delay: 300ms; } /* booking button */

@media (prefers-reduced-motion: reduce) {
  .dmt-match *, .dmt-match *::before, .dmt-match *::after { transition: none !important; animation: none !important; }
}