/* adoptai.studio — site styles. No external requests: system fonts only. */
/* LOCKED 2026-07-24 — operator has signed off on this look (font stack,
   color tokens, background, shadows/spacing system below). Do not change
   any of these design decisions unless explicitly asked to. Structural/
   content edits (new pages, new components) are fine — match the existing
   tokens rather than introducing new ones. Full record:
   docs/website-design-system.md */

:root {
  --ink: #1a2332;
  --ink-soft: #4d5972;
  --paper: #fbfaf7;
  --card: #ffffff;
  --wash: #f2f0ea;
  --line: #e3e0d8;
  --accent: #0f6b5c;      /* deep teal-green */
  --accent-dark: #0b5347;
  --accent-soft: #e7f2ef;
  --amber: #b9741a;       /* citation / highlight */
  --amber-soft: #fdf3e3;
  --max: 62rem;
  --radius: 14px;
  --radius-sm: 8px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --shadow-sm: 0 1px 2px rgba(26, 35, 50, .06), 0 1px 1px rgba(26, 35, 50, .05);
  --shadow-md: 0 10px 24px -8px rgba(26, 35, 50, .18), 0 2px 8px rgba(26, 35, 50, .07);
  --shadow-lift: 0 20px 44px -14px rgba(26, 35, 50, .26);
  --chrome-strip: rgba(20, 30, 25, .025);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaf0;
    --ink-soft: #a8b0c2;
    --paper: #12161f;
    --card: #1a2029;
    --wash: #191f29;
    --line: #2a3140;
    --accent: #4fbfa4;
    --accent-dark: #3ea78e;
    --accent-soft: #16302b;
    --amber: #e0a24a;
    --amber-soft: #33270f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-lift: 0 20px 44px -14px rgba(0, 0, 0, .6);
    --chrome-strip: rgba(255, 255, 255, .03);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--accent); }
h1, h2, h3 { font-weight: 700; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* Header */
header.site {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 0 rgba(26, 35, 50, .02);
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .85rem; padding-bottom: .85rem; gap: 1rem;
}
.wordmark {
  font-family: var(--font-body);
  font-weight: 700; letter-spacing: -0.02em; text-decoration: none;
  color: var(--ink); font-size: 1.18rem; white-space: nowrap;
}
.wordmark span { color: var(--accent); }
nav.main { display: flex; gap: 1.3rem; flex-wrap: wrap; }
nav.main a {
  position: relative;
  text-decoration: none; color: var(--ink-soft); font-size: .95rem;
  padding-bottom: .2rem;
}
nav.main a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
  transition: right .18s ease;
}
nav.main a:hover { color: var(--accent); }
nav.main a:hover::after, nav.main a[aria-current="page"]::after { right: 0; }
nav.main a[aria-current="page"] { color: var(--accent); }

/* Hero */
.hero {
  padding: 4.5rem 0 3rem;
  background:
    radial-gradient(60rem 26rem at 12% -15%, var(--accent-soft), transparent 60%);
}
.hero h1, .hero .hero-title {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 1.1rem;
  max-width: 22ch;
}
.hero p.lead {
  font-size: 1.2rem; color: var(--ink-soft); max-width: 46ch; margin: 0 0 1.8rem;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: center;
}
@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.hero-image {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}

/* Buttons */
.btn {
  display: inline-block; padding: .75rem 1.4rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 1rem;
  border: 1.5px solid var(--accent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.btn.primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(15, 107, 92, .3), 0 6px 16px -6px rgba(15, 107, 92, .4);
}
.btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15, 107, 92, .32), 0 10px 22px -6px rgba(15, 107, 92, .48); }
.btn.primary:active { transform: translateY(0); }
.btn.ghost { color: var(--accent); background: transparent; margin-left: .6rem; border-color: var(--line); }
.btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-1px); }

/* Sections */
section { padding: 3.2rem 0; }
section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 { font-size: 1.75rem; letter-spacing: -0.01em; margin: 0 0 .5rem; }
.kicker {
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .1em; font-size: .78rem;
  font-weight: 700; color: var(--accent); margin: 0 0 .6rem;
}
p.sub { color: var(--ink-soft); max-width: 60ch; margin-top: 0; }

/* Cards */
.grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.6rem; }
.card {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); opacity: .5;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
section.alt .card { background: var(--paper); }
.card h3 { margin: 0 0 .45rem; font-size: 1.1rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* Chat / answer device-style vignettes */
.chat, .answer {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.6rem 1.35rem 1.3rem;
  box-shadow: var(--shadow-md);
  max-width: 34rem;
  font-size: .97rem;
}
.answer { max-width: 36rem; }
.chat::before, .answer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.35rem;
  background: var(--chrome-strip);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.chat::after, .answer::after {
  content: ""; position: absolute; top: 1rem; left: 1.3rem;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #e0645c;
  box-shadow: 1rem 0 0 #e8b23d, 2rem 0 0 #3fae5a;
}

/* The message-exchange vignette always renders as a light-mode phone
   screenshot — real chat apps don't retint to the visitor's OS theme. */
.chat {
  background: #ffffff; border-color: #e3e0d8; color: #1a2332;
}
.chat::before { background: rgba(20, 30, 25, .025); border-bottom-color: #e3e0d8; }
.chat .msg { margin: .6rem 0; }
.chat .who { font-weight: 700; font-size: .8rem; color: #4d5972; display: block; }
.chat .time { color: #4d5972; font-size: .78rem; margin-left: .4rem; font-weight: 400; }
.chat .bubble {
  display: inline-block; padding: .5rem .85rem; border-radius: 10px;
  background: #e7f2ef; margin-top: .15rem; color: #1a2332;
}
.chat .bubble.owner { background: #fdf3e3; }
.answer .q { font-weight: 650; margin: 0 0 .7rem; font-size: 1.05rem; }
.answer .a { margin: 0 0 .8rem; }
.cite {
  display: inline-block; background: var(--amber-soft); color: var(--amber);
  border-radius: 999px; padding: .18rem .75rem; font-size: .8rem; font-weight: 650;
}
.note { font-size: .85rem; color: var(--ink-soft); }

/* Steps — connected timeline */
ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 1rem; position: relative; }
ol.steps li {
  counter-increment: step; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.05rem 1.3rem 1.05rem 3.6rem; position: relative;
  box-shadow: var(--shadow-sm);
}
section.alt ol.steps li { background: var(--paper); }
ol.steps li::before {
  content: counter(step); position: absolute; left: 1.05rem; top: 1.05rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  z-index: 1;
}
ol.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.95rem; top: 2.85rem; bottom: -1rem;
  width: 2px; background: var(--line);
}
ol.steps b { display: block; margin-bottom: .2rem; }
ol.steps p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* Never list */
ul.never { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
ul.never li {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .65rem .95rem; font-size: .95rem; color: var(--ink-soft);
  transition: background .15s ease, border-color .15s ease;
}
ul.never li:hover { background: var(--amber-soft); border-color: var(--amber); }
ul.never li::before { content: "✕ "; color: var(--amber); font-weight: 700; }

/* Connected list — same shape as the never list, opposite sign.
   Reuses the locked accent tokens; no new colours introduced. */
ul.connected { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
ul.connected li {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .65rem .95rem; font-size: .95rem; color: var(--ink-soft);
  transition: background .15s ease, border-color .15s ease;
}
ul.connected li:hover { background: var(--accent-soft); border-color: var(--accent); }
ul.connected li::before { content: "→ "; color: var(--accent); font-weight: 700; }
section.alt ul.connected li, section.alt ul.never li { background: var(--paper); }

/* Diagrams — inline SVG inherits the locked tokens, so light/dark adapt
   automatically and no new colours are introduced. */
figure.diagram {
  margin: 1.8rem 0 0; padding: 1.4rem 1.2rem 1.1rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
section.alt figure.diagram { background: var(--paper); }
figure.diagram svg { display: block; width: 100%; height: auto; }
figure.diagram figcaption {
  margin-top: .9rem; font-size: .86rem; color: var(--ink-soft); text-align: center;
}
.dg-label { font-size: 11px; font-weight: 600; fill: var(--ink); }
.dg-muted { font-size: 10px; fill: var(--ink-soft); font-weight: 400; }
.dg-box { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
section.alt .dg-box { fill: var(--card); }
.dg-hub { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.dg-line { stroke: var(--line); stroke-width: 1.5; fill: none; }
.dg-flow { stroke: var(--accent); stroke-width: 2; fill: none; }
.dg-warn { stroke: var(--amber); stroke-width: 1.5; fill: none; }
.dg-warn-fill { fill: var(--amber-soft); stroke: var(--amber); stroke-width: 1.5; }
.dg-accent { fill: var(--accent); }
.dg-on-accent { fill: var(--accent-dark); font-size: 11px; font-weight: 700; }

/* Calculator inputs — locked tokens only, no new colours */
.calc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1.4rem; }
.calc-grid label {
  display: flex; flex-direction: column; gap: .35rem;
  font-weight: 650; font-size: .95rem; color: var(--ink);
}
.calc-grid label span { font-weight: 400; font-size: .84rem; color: var(--ink-soft); }
.calc-grid input {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .55rem .7rem; width: 100%; margin-top: .15rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.calc-grid input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#result h3 { margin-top: 2rem; }

/* Calculator — keeping the number (capture + share). Existing tokens only. */
.capture {
  margin-top: 1.1rem; padding: 1.3rem 1.4rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.capture-ask { display: block; font-weight: 650; font-size: .95rem; color: var(--ink); }
.capture-ask span {
  display: block; font-weight: 400; font-size: .84rem;
  color: var(--ink-soft); margin-top: .2rem; line-height: 1.55;
}
.capture-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.capture-row input {
  flex: 1 1 15rem; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.capture-row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.capture-row .btn { flex: 0 0 auto; }
.capture-check {
  display: flex; gap: .55rem; align-items: flex-start;
  margin: .95rem 0 .2rem; font-size: .86rem; color: var(--ink-soft); line-height: 1.5;
}
.capture-check input { flex: 0 0 auto; margin-top: .28rem; accent-color: var(--accent); }
.capture .note { margin: .7rem 0 0; }
.capture button[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.share-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.share-row .btn.ghost { margin-left: 0; margin-top: 0; }
#share-link {
  width: 100%; margin-top: .7rem; font: inherit; font-size: .85rem;
  padding: .5rem .6rem; color: var(--ink-soft); background: var(--wash);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}

/* Tables */
table {
  border-collapse: separate; border-spacing: 0; width: 100%; margin-top: 1.5rem; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.table-scroll { overflow-x: auto; border-radius: var(--radius); }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
  background: var(--wash); font-weight: 700;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--accent-soft); }

/* Prose pages */
.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.9rem; margin-bottom: .3rem; }
.prose blockquote {
  margin: 1.5rem 0; padding: 1rem 1.3rem; border-left: 4px solid var(--accent);
  background: var(--card); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft); font-style: italic; font-size: 1.06rem;
  box-shadow: var(--shadow-sm);
}

/* CTA band */
.cta-band {
  text-align: center; padding: 3.6rem 2rem; margin: 1rem 0 2.5rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.cta-band h2 { font-size: 1.95rem; }

/* Footer */
footer.site {
  border-top: 1px solid var(--line); padding: 2.2rem 0 3rem;
  color: var(--ink-soft); font-size: .9rem;
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
footer.site a { color: var(--ink-soft); }

@media (max-width: 40rem) {
  nav.main { gap: .85rem; font-size: .9rem; }
  .hero { padding-top: 3rem; }
  .btn.ghost { margin-left: 0; margin-top: .6rem; }
}

/* Mesh hero — connected-intelligence.html only. A standalone landing page,
   so the field fills the first screen: heading and CTAs above it, all the
   marketing copy in the sections below. The canvas is transparent and the
   script reads --ink and --accent at runtime, so the locked palette (and
   its dark-mode mirror) stays the one source of colour. */
.mesh-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: calc(100svh - 4.6rem);
  padding: 3.5rem 0 0;
}
.mesh-copy { position: relative; z-index: 2; flex: 0 0 auto; text-align: center; }
.mesh-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0;
}
.mesh-actions .btn.ghost { margin-left: 0; }

/* Typography exception, requested 2026-09-03 and scoped to the mesh hero:
   the study's font stack and display heading instead of the site's. It stops
   at the hero deliberately — the front page scrolls on into the rest of the
   site's copy, and from there to every other page, so the body type stays
   the locked system stack rather than changing as you navigate. Same
   no-external-requests rule as everywhere else: Inter is used only if the
   visitor already has it, and the fallbacks are the system stack. Recorded
   in docs/website-design-system.md. */
.mesh-page .mesh-hero {
  font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
.mesh-page .mesh-copy h1 {
  max-width: 980px; margin: 0 auto;
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 450; letter-spacing: -0.065em; line-height: 0.96;
  text-wrap: balance;
}
.mesh-page .mesh-copy p.lead {
  max-width: 560px; margin: 24px auto 28px;
  font-size: clamp(16px, 1.8vw, 21px); line-height: 1.45;
  text-wrap: balance;
}
.mesh-stage {
  position: relative; z-index: 1; flex: 1 1 auto;
  min-height: 20rem; margin-top: 1.2rem; pointer-events: none;
}
#cloud-mesh, .static-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
#cloud-mesh {
  display: block; opacity: 0; transition: opacity .9s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent);
}
#cloud-mesh.is-ready { opacity: 1; }
/* No WebGL 2: the same shape as a still, sparse point texture. */
.static-fallback {
  display: none; opacity: .5;
  background:
    radial-gradient(circle at 34% 42%, var(--ink-soft) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 61%, var(--ink-soft) 0 1px, transparent 1.5px);
  background-size: 21px 19px, 31px 27px;
  -webkit-mask-image: radial-gradient(ellipse 43% 38% at 50% 54%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 43% 38% at 50% 54%, #000 20%, transparent 75%);
}

/* Which of the three states the field is in, and the way out of the still
   one — a reduced-motion visitor can start it without changing their OS. */
.mesh-status {
  position: absolute; z-index: 3; right: 1.25rem; bottom: 1rem; margin: 0;
  display: flex; align-items: center; gap: .6rem;
  color: var(--ink-soft); font-size: .78rem; letter-spacing: .03em;
}
.mesh-status .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.mesh-toggle {
  font: inherit; font-size: .78rem; line-height: 1; cursor: pointer;
  padding: .42rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  transition: color .15s ease, border-color .15s ease;
}
.mesh-toggle:hover { color: var(--accent); border-color: var(--accent); }
.mesh-toggle[disabled] { opacity: .55; cursor: default; }
.mesh-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 40rem) {
  .mesh-hero { padding-top: 2.5rem; min-height: calc(100svh - 4.2rem); }
  .mesh-page .mesh-copy p.lead { margin: 19px auto 22px; }
  .mesh-stage { min-height: 16rem; margin-inline: -12%; }
  .mesh-status { right: 1rem; bottom: .8rem; font-size: .72rem; }
}