/* Site polish pass 1 (2026-09-29). Shared presentation rules for quantgpt.co.
   Each page links this file AFTER its own <style>, so a rule here wins a tie
   on specificity and a page keeps everything it declares that this file does
   not touch. Text never changes here: motion, hover and focus states, table
   readability, card surfaces and spacing only. js/polish.js adds the
   html.pz-motion class (viewer allows motion, IntersectionObserver exists)
   and the pz-hide / pz-in classes on the elements a page names in
   body[data-reveal]. Without the script nothing here hides anything. */

/* ---- open fonts (2026-10-05): the SIL OFL stand-ins for the Windows-only
   brand faces, self-hosted from /fonts/ (licences and sha256 in
   fonts/SOURCES.txt). Every page's stack names the Windows face first
   ("Segoe UI", Selawik / "Bahnschrift", "D-DIN" / Consolas, Cascadia Mono
   Web), so Windows keeps its own face and never fetches these; a Mac, an
   iPhone, Android or Linux fetches only the weights a page draws.
   scripts/open_fonts.py keeps the stacks; pages that do not load this file
   carry the same rules inline. The size and line overrides give each one
   the Windows face's room: Selawik takes Segoe UI's line box (its widths
   already match), D-DIN at 109% sets a headline the same length as
   Bahnschrift does (its caps stand 6% taller), Cascadia Mono at 94% has
   Consolas's 0.55em advance, so headlines wrap and tables line up the way
   they do on Windows. ---- */
@font-face { font-family: "Selawik"; font-style: normal; font-weight: 400; font-display: swap;
  ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%;
  src: url("/fonts/selawik-regular.woff2?v=1") format("woff2"); }
@font-face { font-family: "Selawik"; font-style: normal; font-weight: 600; font-display: swap;
  ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%;
  src: url("/fonts/selawik-semibold.woff2?v=1") format("woff2"); }
@font-face { font-family: "Selawik"; font-style: normal; font-weight: 700; font-display: swap;
  ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%;
  src: url("/fonts/selawik-bold.woff2?v=1") format("woff2"); }
@font-face { font-family: "D-DIN"; font-style: normal; font-weight: 400; font-display: swap;
  size-adjust: 109%; ascent-override: 91.2%; descent-override: 18.9%; line-gap-override: 0%;
  src: url("/fonts/d-din-regular.woff2?v=1") format("woff2"); }
@font-face { font-family: "D-DIN"; font-style: normal; font-weight: 700; font-display: swap;
  size-adjust: 109%; ascent-override: 91.2%; descent-override: 18.9%; line-gap-override: 0%;
  src: url("/fonts/d-din-bold.woff2?v=1") format("woff2"); }
@font-face { font-family: "Cascadia Mono Web"; font-style: normal; font-weight: 200 700; font-display: swap;
  size-adjust: 94%; ascent-override: 97.9%; descent-override: 26.7%; line-gap-override: 0%;
  src: url("/fonts/cascadia-mono-latin.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; }

:root {
  --pz-amber: #F0A83C;
  --pz-amber-hover: #F6B957;
  --pz-line: #212A38;
  --pz-line2: #2E3A4D;
  --pz-line-hover: #3A475B;
  --pz-ease: cubic-bezier(.2, .7, .25, 1);
  --pz-fast: 160ms;
  --pz-rise: 360ms;
}

/* ---- type: no orphan headings, tidier paragraph rag, one underline offset ---- */
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li, dd, figcaption) { text-wrap: pretty; }
:where(a) { text-underline-offset: .16em; text-decoration-thickness: 1px; }

/* ---- the site header and footer: one of each on every page (UX pass
   2026-10-08, mock 5; the markup is written by scripts/build.mjs, siteHead
   and siteFoot). They copy the home's bar and footer (index.html draws its
   own with the landing's tokens): the mark, five links in sentence case,
   Sign in as a text link and one filled button; under 1080px the links fold
   behind Menu, and on a phone the header is the mark, Sign in and Menu.
   Every value is set here, because each page's own CSS styles bare a, p,
   nav, header and footer elements differently (the legal pages underline
   links, the 404 sets mono capitals). Night only: the site pages other
   than the home have no Day theme. ---- */
.qg-head {
  position: sticky; top: 0; z-index: 30; display: block; margin: 0; padding: 0;
  background: rgba(10, 13, 19, .88); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px);
  border: 0; border-bottom: 1px solid var(--pz-line);
  font: 400 14.5px/1.2 "Segoe UI", Selawik, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal; text-transform: none; color: #9AA5B6;
}
.qg-head-in {
  max-width: 1200px; height: 62px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px);
  display: flex; align-items: center; gap: 30px; box-sizing: border-box;
}
.qg-head a, .qg-foot a {
  display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: none; text-decoration: none; color: inherit;
  min-height: 0; width: auto; transform: none;
}
.qg-head .qg-mark, .qg-foot .qg-mark {
  display: inline-flex; align-items: center; gap: 11px; color: #E7ECF4;
  font: 700 15px/1 "Bahnschrift", "D-DIN", "Arial Narrow", Arial, sans-serif; letter-spacing: .22em;
}
.qg-head .qg-mark::before, .qg-foot .qg-mark::before { content: none; }
.qg-tri {
  display: inline-block; width: 0; height: 0; border-left: .42em solid transparent;
  border-right: .42em solid transparent; border-bottom: .73em solid var(--pz-amber);
}
.qg-head .qg-mark .qg-tri { font-size: 17px; }
.qg-links { display: flex; gap: 28px; margin: 0; padding: 0; }
.qg-head .qg-links a { position: relative; transition: color var(--pz-fast) var(--pz-ease); }
.qg-head .qg-links a:hover, .qg-head .qg-links a.here { color: #E7ECF4; }
.qg-head .qg-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--pz-amber); transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--pz-ease);
}
.qg-head .qg-links a:hover::after, .qg-head .qg-links a:focus-visible::after,
.qg-head .qg-links a.here::after { transform: scaleX(1); }
.qg-head .qg-links .qg-monly { display: none; }
.qg-r { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.qg-head .qg-door { transition: color var(--pz-fast) var(--pz-ease); }
.qg-head .qg-door:hover { color: #E7ECF4; }
.qg-head .qg-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px;
  border: 1px solid var(--pz-amber); border-radius: 6px; background: var(--pz-amber); color: #14100A;
  font: 700 .98rem/1 "Bahnschrift", "D-DIN", "Arial Narrow", Arial, sans-serif; letter-spacing: .02em;
  transition: background-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease);
}
.qg-head .qg-cta:hover { background: var(--pz-amber-hover); border-color: var(--pz-amber-hover); transform: translateY(-1px); }
.qg-head .qg-cta:active { transform: none; background: #D9932F; }
.qg-head a:focus-visible, .qg-head button:focus-visible, .qg-foot a:focus-visible {
  outline: 2px solid var(--pz-amber); outline-offset: 3px; border-radius: 4px;
}
.qg-menu {
  display: none; align-items: center; gap: 9px; min-height: 44px; margin: 0; padding: 0 4px;
  background: none; border: 0; color: #E7ECF4; font: 500 14.5px/1 "Segoe UI", Selawik, system-ui, sans-serif;
  letter-spacing: normal; text-transform: none; cursor: pointer;
}
.qg-menu i { display: block; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
@media (max-width: 1080px) {
  .qg-head .qg-links { display: none; }
  .qg-menu { display: inline-flex; }
  #qg-sitenav.open .qg-links {
    display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%;
    padding: 4px clamp(16px, 4vw, 40px) 10px; background: #0A0D13; border-bottom: 1px solid var(--pz-line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }
  #qg-sitenav.open .qg-links a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--pz-line); color: #E7ECF4; }
  #qg-sitenav.open .qg-links a:last-child { border-bottom: 0; }
  #qg-sitenav.open .qg-links a::after { content: none; }
}
@media (max-width: 520px) {
  .qg-head-in { gap: 12px; }
  .qg-head .qg-cta { display: none; }
  #qg-sitenav.open .qg-links .qg-monly { display: flex; color: var(--pz-amber); }
}
.qg-foot {
  display: block; max-width: none; margin: 4rem 0 0; padding: 44px 0 56px; background: none;
  border: 0; border-top: 1px solid var(--pz-line);
  font: 400 13.5px/1.5 "Segoe UI", Selawik, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal; text-transform: none; text-align: left; color: #7C889B;
  position: static;
}
.qg-foot-in { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); box-sizing: border-box; }
.qg-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.qg-foot .qg-frow a { color: #9AA5B6; transition: color var(--pz-fast) var(--pz-ease); }
.qg-foot .qg-frow a:hover { color: #E7ECF4; }
.qg-foot .qg-frow .qg-mark { font-size: 13px; color: #E7ECF4; }
.qg-flegal { margin-top: 18px; }
.qg-foot .qg-nia {
  max-width: none; margin: 22px 0 0; padding: 0; color: #9AA5B6;
  font: 600 11.5px/1.5 "Cascadia Mono", Consolas, Cascadia Mono Web, ui-monospace, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---- section entry: fade and rise, once, on the elements the page names.
   The script hides only what sits below the fold when it runs, so nothing
   already on screen blinks. ---- */
html.pz-motion .pz-hide {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--pz-rise) var(--pz-ease), transform var(--pz-rise) var(--pz-ease);
}
html.pz-motion .pz-hide.pz-in { opacity: 1; transform: none; }

/* ---- the home, below the hero ---- */
.how-step, .plan, .spec, .chip {
  transition: border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease), color var(--pz-fast) var(--pz-ease), background-color var(--pz-fast) var(--pz-ease);
}
@media (hover: hover) {
  .how-step:hover { border-color: var(--pz-line-hover); transform: translateY(-2px); }
  .plan:hover { border-color: var(--pz-line-hover); transform: translateY(-2px); }
  .plan.hot:hover { border-color: var(--pz-amber-hover); }
  .spec:hover .v { color: var(--pz-amber); }
  .spec .v { transition: color var(--pz-fast) var(--pz-ease); }
}
.go:active { transform: translateY(1px); }
.go.ghost:focus-visible { border-color: var(--pz-amber); }
.plans .plan ul { margin: 0; }
.plans .chip-note { margin-top: -.15rem; }
/* the library chips are links into the library search now; same words */
a.chip { text-decoration: none; cursor: pointer; }
@media (hover: hover) {
  a.chip:hover { border-color: var(--pz-amber); color: var(--pz-amber); transform: translateY(-1px); }
  a.chip.hot:hover { background: rgba(240, 168, 60, .16); }
}
a.chip:focus-visible { border-color: var(--pz-amber); }
.study-library .library-link { display: inline-block; line-height: 1.55; }
footer a { transition: color var(--pz-fast) var(--pz-ease); }

/* ---- hub pages (learn, contact): tiles lift, cards read as one list ---- */
a.tile {
  position: relative;
  transition: border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease), background-color var(--pz-fast) var(--pz-ease);
}
@media (hover: hover) {
  a.tile:hover { transform: translateY(-2px); }
  a.tile .tt { transition: color var(--pz-fast) var(--pz-ease); }
}
a.tile:focus-visible { border-color: var(--pz-amber); outline-offset: 3px; }
a.tile:active { transform: translateY(0); }
.stepnav a { transition: border-color var(--pz-fast) var(--pz-ease), color var(--pz-fast) var(--pz-ease), background-color var(--pz-fast) var(--pz-ease); }
@media (hover: hover) {
  .stepnav a:hover { color: var(--pz-amber); background: rgba(240, 168, 60, .06); }
}
.stepnav a:focus-visible { border-color: var(--pz-amber); }

/* the ramp on /learn: the six RAMP rows were six boxes; they are one rail
   now, with a marker per step and the three columns aligned */
.stp .card {
  position: relative; margin: 0; padding: .15rem 0 1rem 1.5rem;
  background: transparent; border: 0; border-left: 1px solid var(--pz-line2); border-radius: 0;
}
.stp .card::before {
  content: ""; position: absolute; left: -5px; top: .5rem; width: 9px; height: 9px; border-radius: 50%;
  background: #0A0D13; border: 2px solid var(--pz-amber);
}
.stp .card:last-of-type { padding-bottom: .4rem; }
.stp .card:last-of-type::after {
  content: ""; position: absolute; left: -1px; bottom: 0; top: 1.1rem; width: 1px; background: #0A0D13;
}
.stp .step { display: grid; grid-template-columns: 5.2em 11em minmax(0, 1fr); gap: .35rem .9rem; align-items: baseline; }
.stp .step .n, .stp .step .t { min-width: 0; }
.stp .step p { min-width: 0; margin: 0; }
.stp .sublabel { margin-bottom: .9rem; }
@media (max-width: 600px) {
  .stp .step { grid-template-columns: auto minmax(0, 1fr); }
  .stp .step p { grid-column: 1 / -1; }
}

/* the contact page */
.custom li { transition: background-color var(--pz-fast) var(--pz-ease); }
.btn { transition: background-color var(--pz-fast) var(--pz-ease), border-color var(--pz-fast) var(--pz-ease), color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease); }
.btn:active { transform: translateY(1px); }

/* ---- the strategy library ---- */
.library-page .controls { position: sticky; top: var(--pz-stick, 0px); z-index: 5; background: #0A0D13; padding-top: .6rem; padding-bottom: .6rem; margin-top: .65rem; }
.library-page .controls::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--pz-line); opacity: 0; transition: opacity var(--pz-fast) var(--pz-ease); }
.library-page .controls.pz-stuck::after { opacity: 1; }
.library-page .card { transition: border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease); }
@media (hover: hover) {
  .library-page .card:hover { transform: translateY(-2px); border-color: var(--pz-line-hover); }
  .library-page .card.starred:hover { border-color: var(--pz-amber); }
  .library-page .details:hover { color: var(--pz-amber); }
  .library-page a.runbtn.live:hover { background: var(--pz-amber-hover); border-color: var(--pz-amber-hover); }
}
.library-page .details { transition: color var(--pz-fast) var(--pz-ease); }
.library-page a.runbtn.live { transition: background-color var(--pz-fast) var(--pz-ease), border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease); }
.library-page a.runbtn.live:active { transform: translateY(1px); }
.library-page .card .more { animation: pz-open 220ms var(--pz-ease); }
@keyframes pz-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .library-page .controls { position: static; padding-top: 0; padding-bottom: 0; }
  .library-page .controls::after { display: none; }
  .library-page .card:hover { transform: none; }
}

/* ---- reading pages (futuretesting, compare, security, the legal set):
   tables that read, code that reads, no motion in the text ---- */
.tw { position: relative; scrollbar-width: thin; scrollbar-color: var(--pz-line2) transparent; }
.cmp { border-bottom: 1px solid var(--pz-line); }
.cmp th { white-space: nowrap; }
.cmp th:first-child, .cmp td:first-child { position: sticky; left: 0; background: #0A0D13; z-index: 1; }
.cmp.num tr:nth-child(even) td { background: rgba(231, 236, 244, .025); }
.cmp.num tr:nth-child(even) td:first-child { background: #0E1219; }
@media (hover: hover) {
  .cmp tbody tr:hover td, .cmp tr:hover td { background: rgba(240, 168, 60, .05); }
  .cmp tr:hover td:first-child { background: #12151C; }
}
.cmp td { transition: background-color var(--pz-fast) var(--pz-ease); }
.facts li { transition: background-color var(--pz-fast) var(--pz-ease); }
.case { transition: border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease); }
@media (hover: hover) { .case:hover { border-color: var(--pz-line-hover); } }
.toc a { display: inline-block; }
pre { position: relative; line-height: 1.55; tab-size: 2; border-left: 2px solid rgba(240, 168, 60, .6); scrollbar-width: thin; }
pre::-webkit-scrollbar { height: 8px; }
pre::-webkit-scrollbar-thumb { background: var(--pz-line2); border-radius: 4px; }
code { overflow-wrap: anywhere; }
table.tools tr:hover td { background: rgba(240, 168, 60, .04); }

/* the status page: the probe dot breathes only while the check is still out */
.probe:not([data-state])::before { animation: pz-breathe 1.6s ease-in-out infinite; }
@keyframes pz-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* the 404: the card settles in once */
.not-found { animation: pz-settle 360ms var(--pz-ease) both; }
@keyframes pz-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #qg-sitenav .links a::after, .how-step, .plan, .spec, .chip, a.tile, .stepnav a, .btn, .library-page .card,
  .library-page a.runbtn.live, .case, .cmp td { transition: none; }
  .not-found, .probe:not([data-state])::before, .library-page .card .more { animation: none; }
  html.pz-motion .pz-hide { opacity: 1; transform: none; transition: none; }
}