/* GPUVerified site styles. Brand: charcoal #1E2328, emerald #0F9D6A (light bg),
   bright emerald #2BD38E (dark bg), off-white #F6F7F4. No external resources. */

@font-face {
  font-family: "Outfit";
  src: url("/static/fonts/outfit-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --charcoal: #1E2328;
  --emerald: #0F9D6A;
  --emerald-bright: #2BD38E;
  --offwhite: #F6F7F4;
  --surface: #FFFFFF;
  --ink: #1E2328;
  --ink-2: #4A535C;
  --ink-3: #6B747D;
  --line: #DDE1DC;
  --line-soft: #ECEEEA;
  --pass: #0B7A52;
  --pass-bg: #E3F5EC;
  --warn: #8A5A00;
  --warn-bg: #FFF3D6;
  --fail: #B42318;
  --fail-bg: #FDE8E6;
  --radius: 12px;
  --display: "Outfit", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Sticky footer: the page is at least as tall as the window and <main> takes the spare height, so the
   footer sits at the bottom on short pages and after the content on long ones. 100dvh follows mobile
   browsers' sliding toolbars; 100vh is for browsers that don't know it. */
body { margin: 0; background: var(--offwhite); color: var(--ink); font: 16px/1.6 var(--body);
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
a { color: var(--emerald); text-underline-offset: 2px; }
a:hover { color: var(--charcoal); }
:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.8rem, 4.5vw, 2.7rem); margin: 0 0 .5rem; font-weight: 800; }
h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; font-weight: 800; }
h3 { font-size: 1.08rem; margin: 1.4rem 0 .4rem; font-weight: 800; }
p { margin: 0 0 1rem; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.mono-block { font-family: var(--mono); font-size: .85rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: .75rem 1rem; overflow-wrap: anywhere; }
.break { overflow-wrap: anywhere; }
.muted { color: var(--ink-3); font-size: .92rem; }
.center { text-align: center; }
.lead { font-size: 1.13rem; color: var(--ink-2); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--ink-3); margin: 0 0 .4rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 680px; padding-top: 2rem; padding-bottom: 2rem; }
.prose { max-width: 760px; padding-top: 2rem; padding-bottom: 3rem; }
.prose li { margin-bottom: .5rem; }
.section { padding: 2rem 16px; }

/* header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-top: .7rem; padding-bottom: .7rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { display: block; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.015em; line-height: 1; }
.wordmark.small { font-size: 1.15rem; margin: 0 0 .25rem; }
.wm-gpu { color: var(--charcoal); }
.wm-verified { color: var(--emerald); }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; font-size: .95rem; }
.site-nav a { color: var(--ink-2); text-decoration: none; padding: .3rem 0; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav .nav-cta { color: var(--emerald); font-weight: 700; }
/* "My account" menu: hidden until hover or keyboard focus (plain CSS, works without JavaScript).
   app.js adds .open for taps and .dismissed for Escape, and keeps aria-expanded in step.
   The panel is positioned outside the flow, so opening it never moves the menu bar. */
.nav-menu { position: relative; }
.nav-menu-toggle::after { content: ""; display: inline-block; margin-left: .4em; vertical-align: .15em;
  border: .3em solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.nav-submenu { display: none; position: absolute; top: 100%; right: 0; z-index: 20; min-width: 12rem; padding: .35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(30, 35, 40, .14); font-size: .95rem; }
.nav-submenu.align-left { right: auto; left: 0; }
.nav-menu:focus-within .nav-submenu, .nav-menu.open .nav-submenu { display: block; }
/* Hover only where there is a real pointer: on touch screens "hover" sticks to the last thing tapped. */
@media (hover: hover) { .nav-menu:hover .nav-submenu { display: block; } }
.nav-menu.dismissed .nav-submenu { display: none; }
.nav-submenu form { margin: 0; }
.nav-submenu a, .nav-submenu button { display: block; width: 100%; margin: 0; padding: .55rem .75rem; border: 0; border-radius: 8px;
  -webkit-appearance: none; appearance: none; background: none; color: var(--ink-2); font: inherit; line-height: 1.6;
  text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.nav-submenu a:hover, .nav-submenu button:hover, .nav-submenu a:focus-visible, .nav-submenu button:focus-visible {
  background: var(--offwhite); color: var(--ink); text-decoration: none; }
.nav-submenu hr { border: 0; border-top: 1px solid var(--line); margin: .35rem .25rem; }
.nav-submenu .nav-danger, .nav-submenu .nav-danger:hover, .nav-submenu .nav-danger:focus-visible { color: var(--fail); }
.nav-submenu .nav-danger:hover, .nav-submenu .nav-danger:focus-visible { background: var(--fail-bg); }

/* footer */
.site-footer { flex-shrink: 0; margin-top: 3rem; background: var(--charcoal); color: #C9CFD4; }
.site-footer .wm-gpu { color: var(--offwhite); }
.site-footer .wm-verified { color: var(--emerald-bright); }
.site-footer a { color: var(--emerald-bright); }
.footer-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; padding-top: 2rem; padding-bottom: 2rem; }
.tagline { margin: 0; font-size: .9rem; color: #C9CFD4; }
.fine { font-size: .85rem; margin: 0; }

/* buttons */
.btn { display: inline-block; background: var(--emerald); color: #fff; border: 2px solid var(--emerald); border-radius: 10px;
  padding: .6rem 1.1rem; font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; }
.btn:hover { background: #0B7F55; border-color: #0B7F55; color: #fff; }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-ghost:hover { background: var(--charcoal); color: var(--offwhite); border-color: var(--charcoal); }
.btn-small { padding: .45rem .8rem; font-size: .9rem; }
.btn[aria-disabled=true] { opacity: .6; cursor: progress; }
.btn-danger, .btn-danger:hover { background: var(--fail); border-color: var(--fail); }
.btn-danger:hover { filter: brightness(.9); }
.notice-row { padding-top: 1rem; }
.notice-row .banner { margin-bottom: 0; }
.btn-link { background: none; border: 0; padding: 0; color: var(--ink-2); font: inherit; cursor: pointer; text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 1rem; }

/* home */
.hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: center; padding-top: 3rem; padding-bottom: 3rem; }
.note { color: var(--ink-3); font-size: .92rem; }
.hero-card { display: flex; justify-content: center; }
.mini-cert { display: flex; gap: 1rem; align-items: center; background: var(--offwhite); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; max-width: 360px; width: 100%; }
.mini-grade { flex: none; width: 84px; height: 84px; border-radius: 16px; background: var(--charcoal); color: var(--emerald-bright);
  font: 800 3.2rem/84px var(--display); text-align: center; }
.mini-title { font-weight: 700; margin: 0 0 .3rem; }
.mini-line { margin: 0; font-size: .9rem; color: var(--ink-2); }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; }
.dot.pass { background: var(--emerald); }
.cards { display: grid; gap: 1rem; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.25rem .4rem; }
.card h2, .card h3 { margin-top: 0; }
.steps-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.steps-col h2 { margin-top: 0; }
.steps { padding-left: 1.3rem; }
.steps li { margin-bottom: .8rem; }
.callout { background: var(--surface); border-left: 4px solid var(--emerald); border-radius: 8px; padding: 1.25rem 1.5rem .3rem; }
.callout h2 { margin-top: 0; }

/* tables */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; background: var(--surface); margin: .5rem 0 1rem; }
table.data th, table.data td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { font-size: .85rem; color: var(--ink-3); }
table.data.compact th { width: 38%; font-weight: 600; color: var(--ink-2); }
table.data td.mono { overflow-wrap: anywhere; }

/* code */
pre.code { background: var(--charcoal); color: var(--offwhite); padding: 1rem; border-radius: 10px; overflow-x: auto; font-size: .88rem; line-height: 1.5; }
pre.code code { font-size: inherit; }

/* forms */
label { display: block; font-weight: 600; margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: .65rem .8rem; border: 1px solid #AEB5AE; border-radius: 10px; font: inherit; background: var(--surface); color: var(--ink); }
input[aria-invalid=true] { border-color: var(--fail); }
.input-row { display: flex; gap: .5rem; }
.input-row input { flex: 1; min-width: 0; }
.verify-form { margin: 1.5rem 0 2rem; }
.form-error { color: var(--fail); font-weight: 600; margin-top: .5rem; }
.form-ok { color: var(--pass); font-weight: 600; }
.form-stack { display: grid; gap: 1rem; margin: 1.5rem 0; }
.field-hint { font-size: .85rem; color: var(--ink-3); margin: .3rem 0 0; }
.limits dt { font-weight: 700; margin-top: 1.1rem; }
.limits dd { margin: .25rem 0 0; }
.phases li { margin-bottom: .7rem; }
ul.plain { list-style: none; padding: 0; }

/* certificate */
.cert { padding-top: 1.5rem; }
.banner { border-radius: 10px; padding: .85rem 1rem; margin-bottom: 1rem; }
.banner-warn { background: var(--warn-bg); color: #4D3300; border: 1px solid #E8C67A; }
.banner-fail { background: var(--fail-bg); color: #6E140D; border: 1px solid #F0A8A1; }
.banner-ok { background: var(--pass-bg); color: #0A4F36; border: 1px solid #9ED9BE; }
.cert-head { display: flex; gap: 1.25rem; align-items: center; margin: .5rem 0 1.25rem; }
.grade-tile { flex: none; width: 112px; height: 112px; border-radius: 22px; background: var(--charcoal); color: var(--emerald-bright);
  font: 800 4.6rem/112px var(--display); text-align: center; }
.grade-tile.grade-c { color: #FFC54D; }
.grade-tile.grade-d, .grade-tile.grade-f { color: #FF8A80; }
.cert-head-text { min-width: 0; }
.eyebrow .mono { text-transform: none; letter-spacing: 0; font-size: .95em; }  /* IDs are case-sensitive */
.cert-head h1 { overflow-wrap: anywhere; }
.grade-line { margin: 0; color: var(--ink-2); }
.seller-line { margin: .35rem 0 0; color: var(--ink-2); font-size: .95rem; }
.confirm-box { background: var(--surface); border: 1px dashed #AEB5AE; border-radius: var(--radius); padding: 1rem 1.25rem .2rem; margin-bottom: 1.25rem; }
.confirm-box h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.confirm-box.confirmed { border: 2px solid var(--emerald); background: var(--pass-bg); }
.ok-mark { color: var(--emerald); }
.cert-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem .4rem; margin-bottom: 1.25rem; min-width: 0; }
/* This margin used to merge with the footer's; now that <main> is a flex item it would add to it. */
.cert > .panel:last-child { margin-bottom: 0; }
.panel h2 { margin-top: 0; }
.checks { list-style: none; padding: 0; margin: 0 0 .8rem; }
.check { display: flex; gap: .8rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); }
.check:last-child { border-bottom: 0; }
.check-text { display: flex; flex-direction: column; min-width: 0; }
.check-text span { color: var(--ink-2); font-size: .93rem; overflow-wrap: anywhere; }
.pill { flex: none; display: inline-block; min-width: 6.2rem; border-radius: 999px; padding: .15rem .6rem; font-size: .82rem; font-weight: 700; text-align: center; }
.pill-pass { background: var(--pass-bg); color: var(--pass); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-fail { background: var(--fail-bg); color: var(--fail); }
.pill-info { background: var(--line-soft); color: var(--ink-2); }  /* shown, not graded */
.share .qr { max-width: 220px; margin: 0 auto; background: #fff; padding: 8px; border-radius: 8px; }
.qr-svg { display: block; width: 100%; height: auto; }
.copy-row { display: flex; gap: .5rem; margin: .5rem 0 1rem; }
.copy-row input { flex: 1; min-width: 0; font-size: .85rem; padding: .45rem .6rem; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .4rem 1rem; margin: 0 0 1rem; }
.kv dt { font-weight: 600; color: var(--ink-2); }
.kv dd { margin: 0; min-width: 0; }
.buyer-steps li { margin-bottom: .4rem; }

/* charts */
.chart { margin: 0 0 1.25rem; }
.chart-title { font-weight: 700; margin-bottom: .3rem; }
.chart-sum { display: block; font-weight: 400; color: var(--ink-3); font-size: .88rem; }
.chart-box { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .band { fill: transparent; }
.chart .band-shade { fill: #F1F3EF; }
.chart .band-label { fill: var(--ink-3); font-size: 11px; font-family: var(--body); }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis { stroke: #AEB5AE; stroke-width: 1; }
.chart .tick { fill: var(--ink-3); font-size: 11px; font-family: var(--body); }
.chart .series { fill: none; stroke: var(--emerald); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .peak { fill: var(--emerald); stroke: var(--surface); stroke-width: 2; }
.chart .peak-label { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--body); }
.chart .hover[hidden], .chart-tip[hidden] { display: none; }
.chart .hover-line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .hover-dot { fill: var(--emerald); stroke: var(--surface); stroke-width: 2; }
.chart-tip { position: absolute; top: 0; pointer-events: none; background: var(--charcoal); color: var(--offwhite); font-size: .8rem;
  padding: .3rem .55rem; border-radius: 6px; white-space: nowrap; transform: translateX(-50%); }

/* account */
.cert-list { list-style: none; padding: 0; margin: 0; }
.cert-list li { display: flex; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.cert-list .g { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--charcoal); color: var(--emerald-bright);
  font: 800 1.6rem/44px var(--display); text-align: center; }
.cert-list .meta { min-width: 0; flex: 1; }
.cert-list .meta .sub { display: block; color: var(--ink-3); font-size: .88rem; }
.tag { display: inline-block; font-size: .75rem; font-weight: 700; padding: .05rem .45rem; border-radius: 6px; background: var(--pass-bg); color: var(--pass); margin-left: .3rem; }
.tag.tag-off { background: var(--fail-bg); color: var(--fail); }
.tag.tag-demo { background: var(--warn-bg); color: var(--warn); }
.inline-form { display: inline; }

@media (max-width: 820px) {
  .hero-grid, .steps-section, .cert-grid, .footer-row { grid-template-columns: minmax(0, 1fr); }
  .cards.three { grid-template-columns: minmax(0, 1fr); }
  .hero-card { justify-content: flex-start; }
}
@media (max-width: 520px) {
  body { font-size: 15px; }
  .cert-head { align-items: flex-start; }
  .grade-tile { width: 76px; height: 76px; border-radius: 16px; font-size: 3rem; line-height: 76px; }
  .check { flex-direction: column; gap: .3rem; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { margin-top: .4rem; }
  .input-row, .copy-row { flex-direction: column; }
  /* Keep chart labels readable on phones; the chart scrolls sideways inside its own box. */
  .chart-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart svg { min-width: 560px; }
  .wordmark { font-size: 1.25rem; }
  .brand img { width: 44px; height: 26px; }
  /* Phones: the menu bar wraps and "My account" can sit at either edge, so the panel spans the
     bar's width just below it instead of hanging off one side of the screen. */
  .site-nav { position: relative; }
  .nav-menu { position: static; }
  .nav-submenu, .nav-submenu.align-left { left: 0; right: 0; }
  .nav-submenu a, .nav-submenu button { padding: .8rem .75rem; }  /* finger-sized */
}
@media (forced-colors: active) {
  .chart .series { stroke: CanvasText; }
  .pill { border: 1px solid CanvasText; }
  .nav-submenu { border-color: CanvasText; }
}
@media print {
  .site-nav, .share .copy-row, .copy-row button, .site-footer { display: none; }
  body { background: #fff; display: block; min-height: 0; }
}