/* ==========================================================================
   Clinoria — site layer
   Extends landing.css. Same tokens, same materials: deep forest ground, mint
   accents, mineral paper, hairline rules. Nothing glows.

   landing.css holds the original single-page components and is left untouched;
   everything a page needs beyond that lives here. If a component exists in both
   files, this one wins by load order.
   ========================================================================== */

:root {
  /* Type scale. Fixed steps rather than a fluid soup: headings get one clamp,
     body copy stays at a comfortable measure on every page. */
  --t-display: clamp(2.15rem, 3.9vw, 3.35rem);
  --t-h1: clamp(1.95rem, 3.1vw, 2.7rem);
  --t-h2: clamp(1.5rem, 2.4vw, 2.05rem);
  --t-h3: 1.0625rem;
  --t-body: 16px;
  --t-small: 13px;
  --t-micro: 11px;

  --measure: 68ch;
  --measure-tight: 56ch;
  --rail: 1180px;
}

/* ---------- document-level bits ---------- */

.noscript-bar {
  margin: 0;
  padding: 10px 18px;
  background: #FBF3E2;
  border-bottom: 1px solid #E8D9B8;
  color: #6B5527;
  font-size: 12.5px;
  text-align: center;
}

/* ---------- navigation state ---------- */

.site-nav a.is-active {
  color: var(--forest-deep);
  font-weight: 600;
  border-bottom-color: var(--jade);
}

/* Six labels plus a CTA is tighter than the original three; give the bar room
   before it collapses, then hand over to the menu button earlier than 900px. */
@media (max-width: 1180px) {
  .site-nav { gap: 20px; margin-left: 0; }
  .site-nav a { font-size: 12.75px; }
}

@media (max-width: 1080px) {
  .header-inner { gap: 16px; }
  .menu-btn { display: flex; }
  .header-actions .btn-outline { display: none; }
  .site-nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--hairline);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 24px 14px;
    display: none;
    box-shadow: 0 18px 24px rgba(5, 47, 41, .08);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    font-size: 15px;
    padding: 13px 0;
    border-bottom: 1px solid var(--hairline);
    border-left: 0;
  }
  .site-nav a:last-child { border-bottom: 0; }
}

/* ---------- breadcrumbs ---------- */

.crumbs {
  max-width: var(--rail);
  margin: 0 auto;
  padding: 18px 24px 0;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #7A8880;
  letter-spacing: .01em;
}
.crumbs li { display: inline-flex; align-items: center; gap: 7px; }
.crumbs li + li::before {
  content: "/";
  color: #C3CDC6;
}
.crumbs a { color: #7A8880; text-decoration: none; }
.crumbs a:hover { color: var(--jade); }
.crumbs [aria-current] { color: var(--graphite); }

/* ---------- page hero (interior pages) ---------- */

.page-hero {
  background: var(--forest);
  color: var(--white);
  padding: clamp(40px, 4.6vw, 62px) 0 clamp(40px, 4.6vw, 58px);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 130% at 88% -20%, rgba(22, 122, 104, .5) 0%, rgba(7, 59, 50, 0) 60%),
    linear-gradient(180deg, rgba(5, 47, 41, 0) 40%, rgba(5, 47, 41, .45) 100%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 1; }

.page-hero .kicker { color: var(--mint); }

.page-hero h1 {
  font-size: var(--t-h1);
  line-height: 1.12;
  letter-spacing: -0.032em;
  color: var(--white);
  max-width: 22ch;
  text-wrap: balance;
}
.page-hero h1 .hl { color: var(--mint); }

.page-hero .lede {
  margin-top: 20px;
  max-width: 62ch;
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.72;
  color: #B6CDC4;
}

/* A quiet, explicit status line under the hero on pages that make claims. */
.hero-status {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(184, 230, 213, .26);
  background: rgba(184, 230, 213, .06);
  border-radius: 3px;
  padding: 7px 12px;
  font-size: 11.5px;
  letter-spacing: .01em;
  color: var(--mint);
}
.hero-status .dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  flex: none;
}

/* ---------- prose ---------- */

.prose {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: 1.72;
  color: #46534D;
}
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: var(--t-h2);
  line-height: 1.22;
  color: var(--forest-deep);
  margin-top: 2.1em;
  max-width: 30ch;
}
.prose h3 {
  font-size: var(--t-h3);
  color: var(--forest-deep);
  margin-top: 1.8em;
  letter-spacing: -0.012em;
}
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose strong { color: var(--forest-deep); font-weight: 600; }
.prose ul, .prose ol {
  display: grid;
  gap: .55em;
  padding-left: 1.15em;
}
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: 1.05em; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 1px;
  background: var(--jade);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--jade); font-variant-numeric: tabular-nums; }
.prose a {
  color: var(--jade);
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 122, 104, .32);
}
.prose a:hover { border-bottom-color: var(--jade); }
.prose code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .875em;
  background: var(--mineral);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: .08em .34em;
  color: #33403A;
}
.prose pre {
  margin: 0;
  background: var(--forest-deep);
  color: #CFE4DB;
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.62;
}
.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.prose blockquote {
  margin: 0;
  border-left: 2px solid var(--jade);
  padding: 2px 0 2px 18px;
  color: #52605A;
  font-size: 15.5px;
  line-height: 1.68;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2.4em 0;
}

/* Long-form article shell: a single narrow column, generous top and bottom. */
.article-body {
  max-width: 760px;
  margin: 0 auto;
}
.article-body .prose { max-width: 100%; }
.article-body .prose > p:first-child {
  font-size: 17.5px;
  line-height: 1.7;
  color: #46534D;
}

/* ---------- layout helpers ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.split-wide { grid-template-columns: 1.15fr .85fr; }
.split-rail { grid-template-columns: minmax(0, 1fr) 320px; }

.section-tight { padding: clamp(40px, 4.5vw, 64px) 0; }
.section-white + .section-white { padding-top: 0; }
.section-rule { border-top: 1px solid var(--hairline); }

.lede-quiet {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  gap: 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--white);
  padding: 24px 24px 26px;
}
.card h3 {
  font-size: 14.5px;
  color: var(--forest-deep);
  margin-bottom: 8px;
}
.card p { font-size: 13.5px; line-height: 1.62; color: var(--ink-soft); }
.card > * + * { margin-top: 10px; }
.card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jade);
}

.card-dark { background: var(--forest); }
.card-dark h3 { color: var(--white); }
.card-dark p { color: var(--mint-2); }
.card-dark .card-tag { color: var(--mint); }

/* A card that carries a limitation rather than a capability. Used on research,
   security and responsible-ai so disclosures never look like marketing. */
.card-limit {
  background: #FCFAF4;
  border-left: 2px solid #C9A24A;
}
.card-limit h3 { color: #6B5527; }
.card-limit p { color: #6E6250; }

/* ---------- tags ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 2px 7px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag-ok { background: #EAF3EE; color: #146B5A; border-color: #CFE5DA; }
.tag-warn { background: #FBF3E2; color: #7A5F1F; border-color: #E8D9B8; }
.tag-bad { background: #FBEFEC; color: #8A3B32; border-color: #E9CFC9; }
.tag-neutral { background: var(--mineral); color: #5C6B64; border-color: var(--hairline); }
.tag-dark {
  background: rgba(184, 230, 213, .1);
  color: var(--mint);
  border-color: rgba(184, 230, 213, .28);
}

/* ---------- pipeline diagram ---------- */

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}
.flow-step {
  padding: 22px 20px 24px;
  border-right: 1px solid var(--hairline);
  position: relative;
}
.flow-step:last-child { border-right: 0; }
.flow-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mint);
}
.flow-step:nth-child(4)::before { background: var(--jade); }
.flow-no {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--jade);
  display: block;
  margin-bottom: 12px;
}
.flow-step h3 { font-size: 13.5px; color: var(--forest-deep); margin-bottom: 7px; }
.flow-step p { font-size: 12.5px; line-height: 1.58; color: var(--ink-soft); }

.flow-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  gap: 8px;
  align-items: baseline;
}

/* ---------- fact graph specimen ---------- */

.specimen {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}
.specimen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--mineral);
  border-bottom: 1px solid var(--hairline);
}
.specimen-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6C7A72;
}
.specimen-body { padding: 16px; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.5;
}
.spec-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7A8880;
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
  vertical-align: bottom;
}
.spec-table td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid #F0F3EE;
  color: var(--graphite);
  vertical-align: top;
}
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table td:first-child { color: var(--forest-deep); font-weight: 500; }
.spec-table .mono {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  color: #52605A;
  /* Reproduction strings are clinical sentences and can be long. Without this
     they force the table wider than its container and push the status column
     out of view, which hides the most important cell on the research page. */
  overflow-wrap: anywhere;
}
.spec-table { table-layout: auto; }
.spec-table td, .spec-table th { min-width: 0; }
.spec-table .dim { color: #8A968F; }

/* ---------- transcript / note pair ---------- */

.transcript {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.transcript-head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--mineral);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6C7A72;
}
.turn {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid #F2F5F0;
  font-size: 13px;
  line-height: 1.6;
}
.turn:last-child { border-bottom: 0; }
.turn-speaker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8A968F;
  padding-top: 2px;
}
.turn-text { color: var(--graphite); }
.turn.is-key { background: #F8FBF7; }
.turn.is-key .turn-text { color: var(--forest-deep); }

/* ---------- callouts ---------- */

.callout {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--jade);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: #F8FBF7;
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #46534D;
}
.callout > * + * { margin-top: .7em; }
.callout-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jade);
}
.callout-warn {
  background: #FCFAF4;
  border-left-color: #C9A24A;
}
.callout-warn .callout-title { color: #7A5F1F; }

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--forest);
  color: var(--white);
  padding: clamp(46px, 5.4vw, 74px) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 120% at 82% 0%, rgba(22, 122, 104, .45) 0%, rgba(7, 59, 50, 0) 62%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band .kicker { color: var(--mint); }
.cta-band h2 {
  font-size: var(--t-h2);
  line-height: 1.2;
  color: var(--white);
  max-width: 26ch;
  letter-spacing: -0.028em;
}
.cta-band p {
  margin-top: 16px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.68;
  color: #B6CDC4;
}
.cta-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cta-fine {
  margin-top: 22px;
  font-size: 11.5px;
  color: rgba(168, 201, 189, .78);
  max-width: 62ch;
  line-height: 1.6;
}

/* ---------- forms ---------- */

.demo-form {
  background: var(--mineral);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 26px;
  display: grid;
  gap: 16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > label,
.field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6C7A72;
}
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--graphite);
  background: var(--white);
  border: 1px solid #D3DDD4;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 1px;
  border-color: var(--jade);
}
.field-hint { font-size: 11.5px; color: #8A968F; line-height: 1.5; }
.field-invalid { border-color: #B4553F !important; }
.field-error {
  font-size: 11.5px;
  color: #8A3B32;
  margin: 0;
}
.form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.form-check input { width: auto; margin-top: 3px; flex: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-status {
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0;
  min-height: 1.2em;
}
.form-status.is-error { color: #8A3B32; }
.form-status.is-ok { color: var(--jade); }
.form-alt {
  font-size: 12.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.form-alt a { color: var(--jade); }

/* ---------- footer ---------- */

.footer-cols {
  display: grid;
  grid-template-columns: 1.35fr .8fr .8fr .8fr .7fr;
  gap: 32px;
}
.f-brand .footer-note { max-width: 30ch; }
.footer-note-quiet { color: rgba(168, 201, 189, .62); margin-top: 10px; font-size: 11.5px; }
.footer-note-quiet a { color: rgba(184, 230, 213, .8); text-decoration: none; }
.footer-note-quiet a:hover { color: var(--white); }

.f-col ul { display: grid; gap: 8px; }
.f-head {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 14px;
  font-family: var(--font-body);
}
.f-col a {
  font-size: 12.5px;
  color: rgba(184, 230, 213, .86);
  text-decoration: none;
  line-height: 1.5;
}
.f-col a:hover { color: var(--white); }

.footer-base {
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(184, 230, 213, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-base .footer-legal { max-width: 72ch; margin: 0; }
.footer-copy {
  font-size: 11.5px;
  color: rgba(168, 201, 189, .55);
  white-space: nowrap;
}

/* ---------- figures on light ground ---------- */

.figure {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}
.figure img { width: 100%; height: auto; display: block; }
.figure figcaption {
  font-size: 11.5px;
  line-height: 1.55;
  color: #6C7A72;
  padding: 10px 14px 11px;
  border-top: 1px solid #EDF1EC;
  background: var(--white);
}
.figure-dark { border-color: rgba(255, 255, 255, .14); }
.figure-dark figcaption {
  background: var(--forest-deep);
  border-top-color: rgba(255, 255, 255, .1);
  color: rgba(184, 230, 213, .82);
}

/* ---------- key/value list ---------- */

.kv {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.kv > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.kv dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7A8880;
  padding-top: 2px;
}
.kv dd { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--graphite); }

/* ---------- numbered steps (long form) ---------- */

.steps { display: grid; gap: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--jade);
  padding-top: 3px;
}
.steps h3 { font-size: 14.5px; color: var(--forest-deep); margin-bottom: 6px; }
.steps p { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.steps > li > div > * + * { margin-top: .6em; }

/* ---------- page-level responsive ---------- */

@media (max-width: 1024px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-step:nth-child(2) { border-right: 0; }
  .flow-step:nth-child(1),
  .flow-step:nth-child(2) { border-bottom: 1px solid var(--hairline); }
  .footer-cols { grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; }
  .f-brand { grid-column: 1 / -1; }
  .split-rail { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .split, .split-wide { grid-template-columns: 1fr; gap: 32px; }
  .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv > div { grid-template-columns: 1fr; gap: 6px; }
  .footer-base { flex-direction: column; }
  .footer-copy { white-space: normal; }
}

@media (max-width: 640px) {
  .cards-2, .cards-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .demo-form { padding: 20px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .f-brand { grid-column: 1 / -1; }
  .flow { grid-template-columns: 1fr; }
  .flow-step { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .flow-step:last-child { border-bottom: 0; }
  .turn { grid-template-columns: 1fr; gap: 3px; padding: 10px 14px; }
  .turn-speaker { padding-top: 0; }
  .crumbs { padding: 14px 18px 0; }
  .spec-table { font-size: 12px; }
  .spec-table th:nth-child(4),
  .spec-table td:nth-child(4) { display: none; }
  .cta-actions .btn-primary,
  .cta-actions .btn-secondary { width: 100%; }
}

/* Print: clinicians print limitation tables and case notes. */
@media print {
  .site-header, .site-footer, .cta-band, .menu-btn, .crumbs { display: none !important; }
  .page-hero, .hero { background: #fff !important; color: #000 !important; }
  .page-hero h1, .hero h1 { color: #000 !important; }
  .page-hero::after, .hero::after, .cta-band::after { display: none !important; }
  body { font-size: 11pt; }
  .prose { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}