/* =============================================================================
   page.css — the content pages: about, privacy, terms.

   WHY A SECOND STYLESHEET
   app.css dresses the chat: a full-height shell, a sidebar, a composer pinned
   to the bottom. A document needs the opposite — a measured column that scrolls
   — so borrowing app.css would mean fighting it, and every future restyle of
   the chat would quietly break these pages.

   Shared with the chat: the palette, the amber, the triangle in front of the
   wordmark. Nothing else.

   Themes follow the system here. The chat has a theme switch because people sit
   in it for minutes at a time; a policy page does not need one, and a switch
   that only worked on some pages would read as a bug.
   ========================================================================== */

:root {
  --amber-300: #ffd75e;
  --amber-500: #fcaa2a;
  --amber-600: #f0930f;
  --grad-brand: linear-gradient(135deg, #ffd75e 0%, #fcaa2a 45%, #f0930f 100%);

  --ink:    #14100a;
  --text-2: #4c443a;
  --text-3: #736a5e;
  --bg:     #fbf9f6;
  --bg-2:   #f4efe7;
  --panel:  #ffffff;
  --line:   rgba(20, 16, 10, .12);
  --line-2: rgba(20, 16, 10, .07);
  --link:   #a9660f;
  --shadow: 0 1px 2px rgba(20, 16, 10, .04), 0 8px 24px rgba(20, 16, 10, .06);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "DM Sans", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --r-md: 14px;
  --r-lg: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:    #f7f3ec;
    --text-2: #c3baac;
    --text-3: #8b8375;
    --bg:     #0a0806;
    --bg-2:   #100d09;
    --panel:  #17130d;
    --line:   rgba(255, 255, 255, .10);
    --line-2: rgba(255, 255, 255, .06);
    --link:   var(--amber-500);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.7 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--amber-600); }

/* ── Layout ────────────────────────────────────────────────────────────────
   Two widths, deliberately. --wide carries the hero and the card grids;
   --read carries prose, where a line longer than about 70 characters stops
   being comfortable no matter how much screen there is. */
.shell { width: min(1120px, 100% - 48px); margin-inline: auto; }
.read  { width: min(760px,  100% - 48px); margin-inline: auto; }

@media (max-width: 640px) {
  .shell, .read { width: calc(100% - 32px); }
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.site-head__in { display: flex; align-items: center; gap: 16px; padding-block: 12px; }

.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mark img { width: 32px; height: 29px; }
.mark__name { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.mark__name .qbit { color: var(--amber-500); }
.mark__tag {
  display: block; font-size: 10px; font-weight: 600; color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  padding: 7px 11px; border-radius: 9px;
  color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none;
}
.site-nav a:hover { background: var(--bg-2); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.btn-chat {
  padding: 8px 15px !important;
  border-radius: 10px !important;
  background: var(--grad-brand);
  color: #1a1206 !important;
  font-weight: 650 !important;
}
.btn-chat:hover { filter: brightness(1.05); }

@media (max-width: 560px) {
  .mark__tag { display: none; }
  .site-nav a { padding: 6px 8px; font-size: 13px; }
}

/* ── Type ─────────────────────────────────────────────────────────────────── */

h1 { font-size: clamp(30px, 5.2vw, 46px); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 18px; }
h2 { font-size: clamp(21px, 3vw, 27px); line-height: 1.25; letter-spacing: -.02em; margin: 48px 0 14px; }
h3 { font-size: 16px; line-height: 1.35; margin: 0 0 6px; }
p  { margin: 0 0 18px; color: var(--text-2); }
ul, ol { margin: 0 0 18px; padding-left: 22px; color: var(--text-2); }
li { margin-bottom: 8px; }
strong { color: var(--ink); font-weight: 650; }

.lede { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.6; color: var(--ink); }
.eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-600);
}
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--amber-500); } }

.updated { font-size: 13px; color: var(--text-3); margin-bottom: 32px; }

/* ── Hero with the quantum visual ─────────────────────────────────────────── */

.hero { padding-block: clamp(40px, 7vw, 76px) 8px; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
}

/* The hero figure: a neural network feeding a MedQbit chip, with electrons
   running three orbital planes around it.

   WHY 3D TRANSFORMS AND NOT SQUASHED CIRCLES
   The first version drew each orbit as a circle scaled down on one axis. That
   thins the border where the squash is greatest, so the rings all but vanished
   at the top and bottom of every ellipse — and any dot travelling the ring came
   out as an ellipse too.

   rotateX() tilts the plane instead of flattening it: the border keeps its
   full 2px the whole way round, and the electron rides inside the same
   transformed space, counter-rotated so it faces the viewer and stays a circle.

   Everything animated here is a transform, an opacity or a dash offset — no
   layout property moves, so the figure costs compositing and not reflow. */

.viz {
  position: relative;
  width: min(400px, 88vw);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

/* ── The AI half ───────────────────────────────────────────────────────────
   Signals run along the edges toward the chip. A dash pattern marching from
   one end to the other reads as flow without moving any element. */

.viz__net { position: absolute; inset: 0; width: 100%; height: 100%; }

.net__edges path {
  stroke: var(--amber-500);
  stroke-width: 1.4;
  opacity: .32;
  stroke-dasharray: 5 11;
  animation: net-flow 2.6s linear infinite;
}
.net__edges path:nth-child(2) { animation-duration: 3.4s; }
.net__edges path:nth-child(3) { animation-duration: 2.1s; }
.net__edges path:nth-child(4) { animation-duration: 3s; }

.net__nodes circle {
  fill: var(--amber-500);
  opacity: .5;
  animation: net-pulse 3s ease-in-out infinite;
}
.net__nodes circle:nth-child(odd)  { animation-delay: -1.1s; }
.net__nodes circle:nth-child(3n)   { animation-delay: -2.2s; }

@keyframes net-flow  { to { stroke-dashoffset: -32; } }
@keyframes net-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }

/* ── The quantum half ─────────────────────────────────────────────────────── */

.orbit {
  position: absolute;
  inset: 9%;
  transform-style: preserve-3d;
}
.orbit--a { transform: rotateX(74deg) rotateY(0deg); }
.orbit--b { transform: rotateX(74deg) rotateY(60deg); }
.orbit--c { transform: rotateX(74deg) rotateY(120deg); }

.orbit__path {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(20, 16, 10, .22);
  border-radius: 50%;
}
@media (prefers-color-scheme: dark) {
  .orbit__path { border-color: rgba(252, 215, 94, .26); }
}

.orbit__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: orbit-run 9s linear infinite;
}
.orbit--b .orbit__spin { animation-duration: 12s; animation-direction: reverse; }
.orbit--c .orbit__spin { animation-duration: 15s; }

/* The electron. Counter-rotated by exactly the plane's tilt, so it faces the
   viewer as a circle rather than a flattened smear. */
.orbit__atom {
  position: absolute;
  top: -8px; left: calc(50% - 8px);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 14px 3px rgba(252, 170, 42, .55);
  transform: rotateX(-74deg);
}
.orbit--b .orbit__atom { width: 13px; height: 13px; top: -6.5px; left: calc(50% - 6.5px); }
.orbit--c .orbit__atom {
  width: 11px; height: 11px; top: -5.5px; left: calc(50% - 5.5px);
  background: var(--amber-300);
}

@keyframes orbit-run { to { transform: rotateZ(360deg); } }

/* ── What both halves feed ────────────────────────────────────────────────── */

.chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 43%;
  aspect-ratio: 1.22;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg) 70%, transparent),
              0 10px 30px rgba(20, 16, 10, .16),
              0 0 44px rgba(252, 170, 42, .22);
}

/* The pins. Two repeating gradients, so a silicon package reads at a glance
   without another element per leg. */
.chip::before,
.chip::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%;
  height: 7px;
  background: repeating-linear-gradient(to right,
      var(--amber-500) 0 4px, transparent 4px 13px);
  opacity: .65;
}
.chip::before { top: -7px;    border-radius: 2px 2px 0 0; }
.chip::after  { bottom: -7px; border-radius: 0 0 2px 2px; }

.chip__face { display: grid; place-items: center; gap: 5px; }
.chip__face img { width: 26px; height: 24px; }
.chip__name {
  font-size: 12.5px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.chip__name b { color: var(--amber-500); font-weight: 800; }

/* Vestibular disorders make looping motion genuinely unpleasant. The figure
   stays — rings, electrons, network and chip all still read — only the motion
   stops. */
@media (prefers-reduced-motion: reduce) {
  .orbit__spin, .net__edges path, .net__nodes circle { animation: none !important; }
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0 0 8px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card p { margin: 0; font-size: 14.5px; }
.card__icon {
  width: 34px; height: 34px; margin-bottom: 12px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(252, 170, 42, .14);
  color: var(--amber-600);
}
@media (prefers-color-scheme: dark) { .card__icon { color: var(--amber-500); } }
.card__icon svg { width: 18px; height: 18px; }

/* The pathway. A numbered rail so the order is unmistakable: today's product
   first, research last. */
.rail { display: grid; gap: 0; margin: 0 0 8px; }
.rail__step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line-2);
}
.rail__step:last-child { border-bottom: 1px solid var(--line-2); }
.rail__n {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--text-3);
}
.rail__step--now .rail__n { background: var(--grad-brand); border-color: transparent; color: #1a1206; }
.rail__when {
  display: inline-block; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}
.rail__step--now .rail__when { color: var(--amber-600); }
@media (prefers-color-scheme: dark) { .rail__step--now .rail__when { color: var(--amber-500); } }
.rail__step p { margin: 0; font-size: 14.5px; }

/* ── Callout ──────────────────────────────────────────────────────────────── */

.callout {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin: 0 0 18px;
  box-shadow: var(--shadow);
}
.callout > :last-child { margin-bottom: 0; }
.callout__title { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }

/* ── Policy pages ─────────────────────────────────────────────────────────── */

.policy h2 { scroll-margin-top: 76px; }
.policy table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.policy th, .policy td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.policy th { color: var(--ink); font-weight: 650; }
.policy td { color: var(--text-2); }
.policy__wrap { overflow-x: auto; }

/* In-page contents. Short enough to be scannable; long documents are where
   people give up and ask support instead. */
.toc {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 0 0 36px;
}
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.toc li { margin-bottom: 4px; font-size: 14px; }
@media (max-width: 560px) { .toc ol { columns: 1; } }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-foot {
  margin-top: 72px;
  border-top: 1px solid var(--line-2);
  background: var(--bg-2);
}
.site-foot__in { padding-block: 32px 44px; }
.site-foot p { font-size: 13.5px; color: var(--text-3); margin: 0 0 10px; }
.site-foot__links { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.site-foot__links a { font-size: 14px; font-weight: 500; text-decoration: none; }
.site-foot__links a:hover { text-decoration: underline; }

/* ── Explore (about page) ─────────────────────────────────────────────────── */

/* Whole cards are the link: a target the size of the card, not of its heading. */
.explore__card { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.explore__card:hover { transform: translateY(-2px); border-color: rgba(252, 170, 42, .45); }
.explore__card h3 { color: var(--ink); }
.explore__xml { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* ── Sitemap page ─────────────────────────────────────────────────────────── */

.map {
  display: grid;
  gap: 8px 40px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.map__group h2 { margin-top: 32px; font-size: 18px; }
.map__list { list-style: none; padding: 0; margin: 0; }
.map__list li {
  padding: 12px 0;
  border-top: 1px solid var(--line-2);
  margin: 0;
}
.map__list a { display: inline-block; font-weight: 650; text-decoration: none; margin-bottom: 2px; }
.map__list a:hover { text-decoration: underline; }
.map__list span { display: block; font-size: 14px; color: var(--text-2); }

/* ── Analytics consent ────────────────────────────────────────────────────────
   The bar analytics.js builds, and the switch that turns analytics back off in
   privacy.html §8.

   These rules are a deliberate second copy of the .mq-consent block in app.css,
   not a shared file. The content pages load only this stylesheet, and app.css
   is 55 KB of chat furniture they have no other use for. The two copies differ
   in one value that matters: there is no composer here, so the bar sits near
   the bottom edge rather than 96px above it.

   "No thanks" and "Allow" stay the same size. Refusing must not look like the
   wrong answer, and a bar that nudges is not consent freely given.
   ========================================================================== */

.mq-consent {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(620px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow);
  z-index: 40;
}
.mq-consent__text { margin: 0; flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.mq-consent__text a { color: var(--link); text-underline-offset: 2px; }
.mq-consent__actions { display: flex; gap: 8px; flex: none; }
.mq-consent__btn {
  min-width: 92px; min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 600 12.5px/1 var(--font);
  cursor: pointer;
}
.mq-consent__btn:hover { background: var(--bg-2); }
.mq-consent__btn--yes { background: var(--grad-brand); border-color: transparent; color: #1a1206; }

@media (max-width: 560px) {
  .mq-consent { flex-direction: column; align-items: stretch; }
  .mq-consent__btn { flex: 1; }
}

/* The switch in privacy.html §8 — the way back, on the page that promises it.
   Rendered by script, because a control that cannot work without JavaScript
   must not be painted as though it could. */

.mq-optout {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.mq-optout__label { font-weight: 650; color: var(--ink); font-size: 15px; }
.mq-optout__state { color: var(--text-2); font-size: 14px; flex: 1; min-width: 180px; }
.mq-optout__btn {
  min-height: 38px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: 650 14px/1 var(--font);
  cursor: pointer;
}
.mq-optout__btn:hover { background: var(--bg); }

/* The footer route to that switch, on the pages that ask but cannot host it. */
.site-foot__analytics { margin-top: 10px; font-size: 14px; }