/* Assay landing page. Tokens and fonts live in base.css.
   Frame: a quiet verification product. One object on graphite: a gold bar drawn in flat facets,
   large in the middle of the first screen, with a short headline above it and one address field
   under it. The bar is the demo: hallmarks are struck on it, the score is punched into the top
   face, and what each hallmark says is written beside the bar. The header is the logo and one
   text link. Below: six small tiles, a sources panel, a report card, questions as accordion
   cards in one column, and the bar again beside the last line. Cards: radius 6, 1px border.
   Buttons: radius 4, height 52, gold. Flat colour only. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 18px/1.55 var(--sans); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: 4px; background: var(--gold); color: var(--gold-ink); font-weight: 500; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:root { --gutter: max(24px, calc((100vw - 1200px) / 2)); --rule: #6E5A26; }

/* ---------- small pieces ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 52px; padding: 0 26px; border: 0; border-radius: 4px; background: var(--gold); color: var(--gold-ink); font: 500 17px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, translate .1s ease-out; }
.btn:hover { background: var(--au-top); }
.btn:active { translate: 0 1px; }
.btn:focus-visible { outline-color: var(--text); }
.tag { display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 9px 1px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: .02em; color: var(--text-2); }
.card { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.card__top { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 20px 0 22px; font-size: 17px; }
.card__top b { font-weight: 500; }
.card__top .tag { margin-left: auto; }
.req { font-size: 15px; color: var(--text-3); }

/* ---------- the drawings: flat facets, punched marks ---------- */

.au-top { fill: var(--au-top); }
.au-lit { fill: var(--au-lit); }
.au-mid { fill: var(--au-mid); }
.au-dark { fill: var(--au-dark); }
.au-spark { fill: var(--au-spark); }
.au-warm { fill: var(--au-warm); }
.au-dusk { fill: var(--au-dusk); }
.au-punch { fill: var(--au-punch); }
.bar__shadow { fill: #08080A; }
.engraved { font: 600 var(--eng, 17px)/1 var(--sans); letter-spacing: .32em; fill: var(--au-ink); }
.num { font: 500 164px/1 var(--sans); letter-spacing: -.02em; }
.num--plate { font-size: 70px; }
.score__lip, .verdict__lip { fill: var(--au-lip); }
.score__cut { fill: var(--au-punch); }
.verdict__edge { fill: var(--au-dark); }
.verdict__floor { fill: #E6B94C; }
/* Before the last strike the place for the verdict is only scribed on the bar. */
.verdict__guide { fill: none; stroke: var(--au-mid); stroke-width: 1.5; stroke-dasharray: 5 5; }
.scribed { font: 600 calc(var(--eng, 17px) * .82)/1 var(--sans); letter-spacing: .32em; fill: var(--au-punch); }

/* A hallmark takes its colours from where it is used. */
.hm-lip { fill: var(--hm-lip, none); }
.hm-body { fill: var(--hm-body, none); stroke: var(--hm-ring, none); stroke-width: 3.5; }
.hm-sign { fill: none; stroke: var(--hm-sign); }
.hm-fill { fill: var(--hm-sign); }
/* On the bar: a passed test is punched in solid, a flagged one is only outlined. */
.hm--pass { --hm-body: var(--au-punch); --hm-lip: var(--au-lip); --hm-sign: var(--au-top); }
.hm--flag { --hm-ring: var(--au-punch); --hm-sign: var(--au-punch); }
/* On graphite: the same marks in gold. */
.stamps svg, .read svg { --hm-body: var(--gold); --hm-sign: var(--gold-ink); overflow: visible; }
.is-flag svg { --hm-body: none; --hm-ring: var(--gold); --hm-sign: var(--gold); }

/* ---------- header: the logo and one link ---------- */

.nav { display: flex; align-items: center; justify-content: space-between; height: 84px; padding: 0 40px; }
.logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 23px; font-weight: 500; letter-spacing: .01em; }
.logo svg { flex: none; }
.nav__get { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 17px; font-weight: 500; transition: color .15s ease-out; }
.nav__get svg { width: 16px; height: 16px; color: var(--gold); transition: translate .15s ease-out; }
.nav__get:hover { color: var(--gold); }
.nav__get:hover svg { translate: 0 2px; }

/* ---------- first screen: one object ---------- */

.hero { display: grid; justify-items: center; padding: 6px var(--gutter) 0; text-align: center; }
h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -.02em; font-weight: 400; text-wrap: balance; }
.lede { margin-top: 14px; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.4; color: var(--text-2); text-wrap: balance; }

/* The bar is as wide as the screen allows, and never so tall that the field leaves the first screen. */
.assay { --bar: min(800px, 56vw); display: grid; justify-items: center; width: 100%; margin-top: 42px; }
@supports (height: 100svh) { .assay { --bar: min(800px, 56vw, max(520px, calc((100svh - 480px) * 1.9))); } }
.stage { position: relative; width: var(--bar); }
.bar { width: 100%; height: auto; overflow: visible; }

/* What each hallmark says, level with its mark and tied to the bar by a short rule. */
.reads { position: absolute; inset: 0; pointer-events: none; }
.read { position: absolute; display: grid; gap: 1px; width: max-content; max-width: calc((100vw - var(--bar)) / 2 - 100px); translate: 0 -50%; }
.read--tl, .read--bl { right: calc(100% + 76px); text-align: right; }
.read--tr, .read--br { left: calc(100% + 76px); text-align: left; }
.read--tl, .read--tr { top: 19%; }
.read--bl, .read--br { top: 59%; }
.read::after { content: ''; position: absolute; top: 50%; width: 46px; height: 1px; background: var(--rule); }
.read--tl::after, .read--bl::after { left: calc(100% + 14px); transform-origin: right; }
.read--tr::after, .read--br::after { right: calc(100% + 14px); transform-origin: left; }
.read svg { display: none; }
.read span { font-size: 16px; line-height: 1.3; color: var(--text-2); }
.read b { font-size: 23px; line-height: 1.25; font-weight: 500; white-space: nowrap; }
/* The small square repeats the mark's state: solid for passed, outlined for flagged. */
.read b::before, .read b::after { content: ''; display: inline-block; width: 9px; height: 9px; border: 2px solid var(--gold); border-radius: 2px; background: var(--gold); translate: 0 -2px; }
.read b::before { margin-right: 10px; }
.read b::after { margin-left: 10px; }
.read--tl b::before, .read--bl b::before, .read--tr b::after, .read--br b::after { display: none; }
.read.is-flag b::before, .read.is-flag b::after { background: none; }

.say { min-height: 28px; margin-top: 18px; font-size: 18px; color: var(--text-2); }
.assay.is-done .say { color: var(--text); }

.ask { display: flex; gap: 12px; width: min(100%, max(var(--bar), 720px)); margin-top: 16px; }
.field { display: flex; align-items: center; flex: 1; gap: 12px; min-width: 0; height: 52px; padding: 0 5px 0 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); text-align: left; white-space: nowrap; }
.field__name { font-size: 18px; font-weight: 500; }
.field__hex { font: 400 14px/1 var(--mono); color: var(--text-2); }
.again { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 172px; height: 40px; margin-left: auto; padding: 0 14px; border: 0; border-left: 1px solid var(--line); border-radius: 0 3px 3px 0; background: none; color: var(--text); font: 500 16px/1 var(--sans); cursor: pointer; transition: color .15s ease-out; }
.again svg { width: 17px; height: 17px; }
.again:hover { color: var(--gold); }
.again[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.again[aria-disabled="true"] svg { display: none; }
.assay > .req { margin-top: 14px; }

/* The run. Without JavaScript the bar is simply shown finished, and there is nothing to replay. */
html:not(.js) .again { display: none; }
.js .assay .hm, .js .assay .score, .js .assay .read, .js .assay .score__lip { opacity: 0; }
.js .assay .hm { transform: scale(1.45); transform-box: fill-box; transform-origin: center; }
.js .assay .hm.is-on { opacity: 1; transform: none; transition: transform .2s cubic-bezier(.6, 0, .9, .4), opacity .12s linear; }
.js .assay .score.is-on { opacity: 1; }
.js .assay.is-scored .score__lip { opacity: 1; transition: opacity .2s ease-out .16s; }
.js .assay .read.is-on { opacity: 1; transition: opacity .35s ease-out .2s; }
.js .assay .read::after { scale: 0 1; }
.js .assay .read.is-on::after { scale: 1 1; transition: scale .3s ease-out .14s; }
/* Each strike pushes the bar down for a moment. */
.bar.is-hit .bar__body { animation: hit .28s .16s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes hit { 30% { translate: 0 4px; } }

/* ---------- section heads ---------- */

h2 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.1; letter-spacing: -.02em; font-weight: 400; text-wrap: balance; }
.head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.head p { max-width: 30em; font-size: 19px; line-height: 1.45; color: var(--text-2); text-wrap: balance; }

/* ---------- what is tested: six small tiles ---------- */

.tests { padding: 168px var(--gutter) 0; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 16px; margin-top: 56px; }
.tile svg { width: 100%; height: auto; }
.tile h3 { margin-top: 20px; font-size: 20px; line-height: 1.25; font-weight: 500; }
.tile p { margin-top: 6px; padding-right: 8px; font-size: 16px; line-height: 1.4; color: var(--text-2); text-wrap: pretty; }
.key { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; margin-top: 52px; font-size: 17px; color: var(--text-2); }
.key li { display: inline-flex; align-items: center; gap: 10px; }
.key svg { width: 20px; height: 20px; color: var(--gold); }
.key__gap { fill: none; stroke: var(--bg); }

/* ---------- where the reputation comes from ---------- */

.sources { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: center; padding: 168px var(--gutter) 0; }
.sources__say p { margin-top: 16px; font-size: 19px; line-height: 1.45; color: var(--text-2); }
.sources__say .signal { max-width: 15em; margin-top: 30px; padding: 2px 0 2px 18px; border-left: 2px solid var(--gold); font-size: 23px; line-height: 1.3; color: var(--text); text-wrap: balance; }
.ledger__rows { display: grid; gap: 8px; padding: 0 12px 12px; }
.ledger__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name read" "what read"; column-gap: 24px; align-items: center; padding: 16px 20px 17px; border-radius: 4px; background: var(--panel-2); }
.ledger__rows b { grid-area: name; font-size: 20px; line-height: 1.3; font-weight: 500; }
.ledger__rows span { grid-area: what; font-size: 16px; line-height: 1.4; color: var(--text-2); }
.ledger__rows em { grid-area: read; font: 400 14px/1 var(--mono); font-style: normal; white-space: nowrap; }

/* ---------- the report ---------- */

.report { display: grid; justify-items: center; padding: 168px var(--gutter) 0; }
.sheet { width: min(100%, 820px); margin-top: 52px; }
.sheet__no { margin-left: auto; font: 400 14px/1 var(--mono); color: var(--text-3); }
.card__top .sheet__no + .tag { margin-left: 4px; }
.sheet__who { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 36px; align-items: center; padding: 16px 28px 30px; }
.plate { width: 100%; height: auto; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.facts__wide { grid-column: 1 / -1; }
.facts dt { font-size: 15px; line-height: 1.3; color: var(--text-3); }
.facts dd { font-size: 18px; line-height: 1.3; }
.facts__wide dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.facts__wide b { font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.facts code { font: 400 15px/1 var(--mono); color: var(--text-2); }
.stamps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px; }
.stamps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "mark name" "mark says"; column-gap: 14px; align-items: center; padding: 13px 16px 14px; border-radius: 4px; background: var(--panel-2); }
.stamps svg { grid-area: mark; width: 34px; height: 34px; }
.stamps span { grid-area: name; font-size: 15px; line-height: 1.3; color: var(--text-2); }
.stamps b { grid-area: says; font-size: 18px; line-height: 1.3; font-weight: 500; }
/* The last line of the report: the place for the verdict is an empty slot that leads to the download. */
.sheet__verdict { display: flex; align-items: center; gap: 16px; padding: 14px 12px 12px 28px; font-size: 18px; color: var(--text-2); }
.slot { display: inline-flex; align-items: center; justify-content: space-between; flex: 1; gap: 10px; height: 52px; padding: 0 18px; border: 1px dashed var(--rule); border-radius: 4px; font-weight: 500; color: var(--gold); transition: border-color .15s ease-out, background-color .15s ease-out; }
.slot svg { width: 16px; height: 16px; }
.slot:hover { border-color: var(--gold); background: var(--panel-2); }

/* ---------- questions: one quiet column ---------- */

.faq { display: grid; justify-items: center; padding: 168px var(--gutter) 0; }
.faq__list { display: grid; gap: 8px; width: min(100%, 760px); margin-top: 44px; }
.qa { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 14px 24px; border-radius: 6px; font-size: 20px; line-height: 1.3; font-weight: 500; list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa__x { position: relative; flex: none; width: 14px; height: 14px; }
.qa__x::before, .qa__x::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: var(--text-2); transition: rotate .2s ease-out, background-color .15s ease-out; }
.qa__x::after { rotate: 90deg; }
.qa[open] .qa__x::after { rotate: 0deg; }
.qa summary:hover .qa__x::before, .qa summary:hover .qa__x::after { background: var(--gold); }
.qa p { padding: 0 56px 26px 24px; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* ---------- closing: the bar beside one line ---------- */

.final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: center; padding: 184px var(--gutter) 0; }
.bar--still { --eng: 24px; justify-self: end; width: min(100%, 500px); }
.final__say { display: grid; justify-items: start; }
.final h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1.04; }
.final .btn { margin-top: 30px; }
.final .req { margin-top: 16px; }

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

.foot { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 28px 48px; align-items: start; margin-top: 168px; padding: 44px var(--gutter) 64px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--text-3); }
.foot .logo { color: var(--text); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 10px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; color: var(--text-2); transition: color .15s ease-out; }
.foot__links a:hover { color: var(--text); }
.foot p { max-width: 34ch; padding-top: 8px; text-wrap: pretty; }
.foot b { display: block; margin-bottom: 4px; font-weight: 500; color: var(--text-2); }

.js [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity .7s ease-out, translate .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------- smaller screens ---------- */

@media (max-width: 1099px) {
  /* No room beside the bar: what the hallmarks say goes under it, each with its own mark. */
  .assay { --bar: min(760px, 100%); }
  .reads { position: static; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 16px 20px; margin-top: 22px; pointer-events: auto; }
  .read, .read--tl, .read--tr, .read--bl, .read--br { position: static; grid-template-columns: 30px auto; grid-template-areas: "mark name" "mark says"; column-gap: 11px; align-items: center; max-width: none; translate: none; text-align: left; }
  .read::after, .read b::before, .read b::after { display: none; }
  .read svg { display: block; grid-area: mark; width: 30px; height: 30px; }
  .read span { grid-area: name; font-size: 15px; }
  .read b { grid-area: says; font-size: 19px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sources { grid-template-columns: minmax(0, 1fr); }
  .sources__say .signal { max-width: none; }
  .final { gap: 40px 48px; }
  .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nav { height: 68px; padding: 0 20px; }
  .hero { padding-top: 10px; }
  .assay { margin-top: 30px; }
  .bar { --eng: 30px; }
  .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 16px 12px; }
  .say { margin-top: 20px; }
  .ask { flex-direction: column; }
  /* The field becomes a small card: the address on top, the replay control under it. */
  .field { flex: none; flex-wrap: wrap; gap: 0 10px; height: auto; padding: 0 16px; }
  .field__name, .field__hex, .field .tag { margin-block: 14px; }
  .field .tag { margin-left: auto; }
  .again { flex: 1 0 100%; height: 46px; margin: 0; border-left: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .btn { width: 100%; }
  .tests, .sources, .report, .faq { padding-top: 112px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin-top: 36px; }
  .tile h3 { margin-top: 14px; font-size: 18px; }
  .tile p { font-size: 15px; }
  .key { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; margin-inline: auto; }
  .ledger__rows li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "what" "read"; row-gap: 2px; padding: 14px 16px 16px; }
  .ledger__rows em { margin-top: 10px; }
  .sheet { margin-top: 36px; }
  .card__top { padding: 0 14px 0 16px; }
  .sheet__no { display: none; }
  .card__top .sheet__no + .tag { margin-left: auto; }
  /* The address on top, then the plate with the three small facts stacked beside it. */
  .sheet__who { grid-template-columns: 136px minmax(0, 1fr); grid-template-areas: "addr addr" "plate chain" "plate date" "plate score"; gap: 8px 22px; align-items: start; padding: 6px 16px 24px; }
  .facts { display: contents; }
  .facts__wide { grid-area: addr; margin-bottom: 12px; }
  .facts div:nth-child(2) { grid-area: chain; }
  .facts div:nth-child(3) { grid-area: date; }
  .facts div:nth-child(4) { grid-area: score; }
  .plate { grid-area: plate; align-self: center; }
  .facts dt { font-size: 14px; }
  .facts dd { font-size: 17px; }
  .facts__wide b { font-size: 26px; }
  .stamps { grid-template-columns: minmax(0, 1fr); padding: 0 8px; }
  .sheet__verdict { flex-wrap: wrap; gap: 10px 14px; padding: 14px 8px 8px 16px; }
  .slot { flex: 1 0 100%; margin-left: -8px; }
  .faq__list { margin-top: 32px; }
  .qa summary { min-height: 64px; padding: 12px 18px; font-size: 19px; }
  .qa p { padding: 0 18px 22px; font-size: 17px; }
  .final { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 112px; text-align: center; }
  .bar--still { justify-self: center; width: min(100%, 320px); }
  .final__say { justify-items: center; width: 100%; }
  .foot { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 112px; padding-top: 36px; padding-bottom: 48px; }
  .foot p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .js .assay .hm.is-on, .js .assay .read.is-on, .js .assay .read.is-on::after, .js .assay.is-scored .score__lip, .qa__x::before, .qa__x::after, .btn, .nav__get svg { transition: none; }
  .bar.is-hit .bar__body { animation: none; }
}

/* ---------- every screen size (added 2026-11-13) ---------- */
@media (min-width: 1600px) { :root { --gutter: max(24px, calc((100vw - min(1200px + (100vw - 1600px) * 0.98, 1740px)) / 2)); } }
@media (min-width: 1600px) {
  h1 { font-size: clamp(66px, 26.4px + 2.475vw, 82.5px); }
  h2 { font-size: clamp(46px, 25.3px + 1.294vw, 55.2px); }
  .lede { font-size: clamp(20px, 14px + 0.375vw, 23px); }
}

/* Big screens: the ingot grows past 800px while it still fits the first screen. */
@media (min-width: 1600px) { .assay { --bar: min(clamp(800px, 42vw, 1040px), max(520px, calc((100vh - 500px) * 1.9))); } }
@supports (height: 100svh) { @media (min-width: 1600px) { .assay { --bar: min(clamp(800px, 42vw, 1040px), max(520px, calc((100svh - 500px) * 1.9))); } } }
/* ---------- end every screen size ---------- */