/* DDBOT public checker, in THE HOUND's sticker world (the same system as the review desk): cream paper, ink 3px
   outlines, hard offset shadows on what you can touch, Anton for stamps and headings, JetBrains Mono for everything
   else (both from Google Fonts). Green, red and amber mean LEGIT, LARP and COPY only. Mobile first; no inline styles
   (the CSP forbids them). */
:root {
  --orange: #FF7A00; --ink: #141414; --cream: #F4EBDD; --green: #1FB45A; --red: #D8282F; --amber: #FFB000;
  --paper: #FBF5EC; --ink-2: #3a3530; --ink-3: #6b625a; --amber-tint: #FBDDA0; --orange-tint: #FFD9B3; --red-tint: #F6C9C6; --green-tint: #C6EBD3;
  --brown: #9A5B2E; --steel: #6E747C; --tan: #C9A27E;
  --line: 3px solid var(--ink); --thin: 2px solid var(--ink); --pop: 4px 4px 0 var(--ink);
  --display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--cream); color: var(--ink); }
body { font: 14px/1.5 var(--mono); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; }
img { max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { user-select: none; -webkit-user-select: none; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--ink); color: var(--cream); }
* { scrollbar-color: var(--tan) transparent; scrollbar-width: thin; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--ink); color: var(--cream); border-radius: 10px; font-weight: 700; }
.skip:focus { top: 10px; }
.muted { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- buttons and chips (CSS translate for press feedback keeps Motion's transform free) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 400 17px/1 var(--display); letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; text-decoration: none; transition: translate .14s ease-out, box-shadow .14s ease-out, background-color .14s, opacity .14s; }
.btn:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--ink); }
.btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); transition-duration: .06s; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: progress; translate: none; box-shadow: 3px 3px 0 var(--ink); }
.btn.primary { background: var(--ink); color: var(--cream); }
.btn.primary:hover { background: #2a2622; }
.btn.lg { min-height: 54px; padding: 0 22px; font-size: 22px; }
.btn.sm { min-height: 40px; padding: 0 12px; font-size: 15px; box-shadow: 2px 2px 0 var(--ink); }
.btn img { width: 18px; height: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: var(--thin); border-radius: 10px; background: var(--paper);
  font: 700 12px/1 var(--mono); text-decoration: none; cursor: pointer; transition: background-color .14s, translate .14s; }
.chip:hover { background: var(--orange-tint); translate: 0 -1px; }
.chip:active { translate: 0 1px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.chip img { width: 16px; height: 16px; }

/* ---- frame ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 6px clamp(12px, 3vw, 28px); background: var(--cream); border-bottom: var(--line); }
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { display: block; height: 40px; width: auto; }
.foot { padding: 26px clamp(16px, 3vw, 28px) 34px; border-top: var(--line); background: var(--paper); text-align: center; color: var(--ink-2); font-size: 12.5px; }
.foot-line { margin: 0 0 8px; }
.foot-line a { font-weight: 700; }
.foot-ca { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.foot-ca code { max-width: 100%; overflow-wrap: anywhere; padding: 6px 8px; background: var(--cream); border: var(--thin); border-radius: 8px; font-size: 12px; }
.sec-title { margin: 0 0 14px; font: 400 30px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }

/* ---- home: what it is, the box, the four answers, a real example; nothing else above the fold ---- */
.hero { max-width: 1240px; margin: clamp(12px, 3vw, 28px) auto 0; padding: 0 clamp(12px, 3vw, 28px); display: grid; gap: 18px; }
.hero-copy { position: relative; min-width: 0; padding: 20px 14px 18px; background-color: var(--orange); background-image: radial-gradient(rgba(20, 20, 20, .09) 1.4px, transparent 1.6px);
  background-size: 16px 16px; border: var(--line); border-radius: 22px; box-shadow: 8px 8px 0 var(--ink); }
.hero-title { margin: 0; font: 400 clamp(34px, 8.6vw, 60px)/1 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.hero-title span { display: block; margin-top: .14em; font-size: .6em; color: var(--cream); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }
.hero-sub { margin: 12px 0 16px; max-width: 60ch; font-size: 13.5px; line-height: 1.45; font-weight: 700; }

.check { display: grid; gap: 8px; }
.check-label { font: 400 17px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.check-row { display: grid; gap: 10px; }
/* The box and the button share one fixed height on every screen; the label is centred on its capitals (text-box trims
   Anton's tall ascender where supported; elsewhere the line box is centred). */
.check input { width: 100%; height: var(--check-h); min-height: 0; padding: 0 14px; background: var(--paper); border: var(--line); border-radius: 12px; font: 600 16px/1.3 var(--mono); box-shadow: inset 0 2px 0 rgba(20, 20, 20, .06); text-overflow: ellipsis; }
.check input::placeholder { color: var(--ink-3); font-weight: 400; }
.check input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--ink); }
.check { --check-h: 56px; }
.check .btn.lg { display: grid; place-items: center; height: var(--check-h); min-height: 0; min-width: 132px; padding: 0 22px; font-size: 24px; line-height: 1; align-self: start; }
.btn-label { display: block; line-height: 1; text-box: trim-both cap alphabetic; }
.check-under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.check-err { margin: 0; font-weight: 800; color: var(--ink); }
.check-err:not(:empty) { flex: 1 1 220px; padding: 8px 12px; background: var(--cream); border: var(--thin); border-radius: 10px; }
.chip.try::before { content: "▸"; font-size: 11px; }
.check.compact { margin-top: 14px; }
.check.compact .check-label { font-size: 14px; }

.legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
/* Each verdict reads at a glance: its card is tinted, its hound sits on a tile in the verdict's colour (CAN'T TELL:
   plain striped paper, no verdict colour), and the stamp word is large. */
.lg { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 6px 6px 8px; background: var(--paper); border: var(--thin); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink); text-align: center; }
.lg-tile { display: grid; place-items: end center; width: 100%; padding-top: 6px; border: var(--thin); border-radius: 10px; background: var(--paper); }
.lg-LEGIT { background: var(--green-tint); } .lg-LEGIT .lg-tile { background: var(--green); }
.lg-COPY { background: var(--amber-tint); } .lg-COPY .lg-tile { background: var(--amber); }
.lg-LARP { background: var(--red-tint); } .lg-LARP .lg-tile { background: var(--red); }
.lg-CANT_TELL .lg-tile { background: repeating-linear-gradient(-45deg, #ece2d3 0 6px, #ddd0bd 6px 12px); border-style: dashed; }
.lg-hound { display: block; width: 52px; height: auto; aspect-ratio: 96 / 88; object-fit: contain; transform-origin: 40% 80%; transition: translate .16s ease-out; }
.lg:hover .lg-hound { translate: 0 -3px; }
.lg .st { padding: 4px 5px 3px; font-size: 13.5px; letter-spacing: .02em; }
.lg-means { font-size: 10.5px; line-height: 1.3; font-weight: 700; color: var(--ink-2); }
.hero-tag { margin: 12px 0 0; color: var(--ink); font-size: 12.5px; font-weight: 700; }

.example { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px; background: var(--paper); border: var(--line); border-radius: 18px; box-shadow: var(--pop); }
.ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.ex-head b { font: 400 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.ex-head time { font-size: 11.5px; color: var(--ink-3); }
.ex-card { display: block; border-radius: 12px; }
.ex-line { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.ex-tk { font: 400 20px/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.ex-why { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-2); }
.ex-more { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; font-weight: 800; text-decoration: none; border-bottom: 3px solid var(--orange); }

.recent { max-width: 1240px; margin: 34px auto 0; padding: 0 clamp(12px, 3vw, 28px); }
.how-box { max-width: 1240px; margin: 34px auto 44px; padding: 0 clamp(12px, 3vw, 28px); }
.how-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: how; }
.how-list li { position: relative; padding: 14px 16px 14px 56px; background: var(--paper); border: var(--thin); border-radius: 14px; font-size: 13px; counter-increment: how; }
.how-list li::before { content: counter(how); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border: var(--thin); border-radius: 50%;
  background: var(--orange); font: 400 17px/1 var(--display); }
.how-list b { font-weight: 800; }
.recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 12px; background: var(--paper); border: var(--thin);
  border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; transition: translate .14s, box-shadow .14s, background-color .14s; }
.rc:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--ink); background: #fff8ee; }
.rc-img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; background: var(--cream); }
.rc-none { display: block; background: repeating-linear-gradient(-45deg, #ece2d3 0 6px, #e5dac9 6px 12px); }
.rc-main { min-width: 0; display: grid; }
.rc-tk { font: 400 20px/1.1 var(--display); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-why { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-side { display: grid; justify-items: end; gap: 4px; }
.rc-side time { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.rc-x { font: 600 10px/1 var(--mono, ui-monospace, monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border: 1px solid currentColor; border-radius: 4px; padding: 2px 4px; }
.empty-line { margin: 0; padding: 14px 16px; border: 2px dashed rgba(20, 20, 20, .3); border-radius: 12px; color: var(--ink-2); }

/* ---- stamps ---- */
.st { display: inline-flex; align-items: center; padding: 4px 8px 3px; border: var(--thin); border-radius: 8px; font: 400 15px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.st-LEGIT, .stamp.st-LEGIT { background: var(--green); }
.st-LARP, .stamp.st-LARP { background: var(--red); color: var(--cream); }
.st-COPY, .stamp.st-COPY { background: var(--amber); }
.st-CANT_TELL, .st-NO_SITE { background: var(--amber-tint); border-style: dashed; }
.stamp { display: inline-block; padding: 8px 18px 5px; border: 4px solid var(--ink); border-radius: 14px; font: 400 clamp(40px, 10vw, 64px)/1 var(--display); letter-spacing: .03em;
  text-transform: uppercase; rotate: -4deg; box-shadow: 5px 5px 0 var(--ink); transform-origin: 50% 60%; max-width: calc(100% - 12px); overflow-wrap: anywhere; }
.stamp.st-CANT_TELL, .stamp.st-NO_SITE { background: var(--amber-tint); border-style: dashed; }

/* ---- result ---- */
.result { max-width: 1120px; margin: 0 auto; padding: 14px clamp(12px, 3vw, 28px) 48px; display: grid; gap: 16px; }
.crumbs { display: flex; }
.back { display: inline-flex; align-items: center; min-height: 40px; font-weight: 800; text-decoration: none; border-bottom: 3px solid var(--orange); }
.box { background: var(--paper); border: var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--pop); min-width: 0; }
.box h2 { margin: 0 0 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.box h2 .aside { margin-left: auto; font: 700 11px/1.3 var(--mono); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.box h2 .aside a { color: var(--ink); }
.coin-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.coin-img { width: 64px; height: 64px; flex: none; border-radius: 50%; border: var(--line); object-fit: cover; background: var(--cream); }
.coin-none { display: block; background: repeating-linear-gradient(-45deg, #ece2d3 0 8px, #e5dac9 8px 16px); }
.coin-id { min-width: 0; }
.coin-tk { margin: 0; font: 400 clamp(34px, 8vw, 46px)/1 var(--display); letter-spacing: .01em; overflow-wrap: anywhere; }
.coin-sub { margin: 4px 0 0; color: var(--ink-3); font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.coin-sub img { width: 16px; height: 16px; border-radius: 50%; }
.ca { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 6px 6px 10px; background: var(--cream); border: var(--thin); border-radius: 10px; }
.ca code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.stat { padding: 8px 10px; background: var(--cream); border: 2px solid rgba(20, 20, 20, .15); border-radius: 10px; min-width: 0; }
.stat dt { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.stat dd { margin: 2px 0 0; font: 800 18px/1.25 var(--mono); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat dd small { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.stat.bad { border-color: var(--red); background: var(--red-tint); }
.stat.good dd { color: #11703a; }
.stat.wait dd { color: var(--ink-3); font-weight: 600; }
.links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.verdict { position: relative; overflow: hidden; }
.v-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.v-reason { margin: 14px 0 10px; font-size: 16px; font-weight: 800; }
.ev { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ev li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.dot { flex: none; width: 12px; height: 12px; border-radius: 50%; translate: 0 1px; }
.dot.bad { background: var(--red); border: 2px solid var(--ink); }
.dot.good { background: var(--green); border: 2px solid var(--ink); }
.dot.info { border: 3px solid var(--steel); }
.src { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.src-badge { padding: 4px 8px 3px; border: var(--thin); border-radius: 8px; font: 800 11px/1 var(--mono); letter-spacing: .08em; background: var(--cream); }
.src-badge.ai { background: var(--ink); color: var(--cream); }
.v-grid { display: grid; gap: 16px; }
.card-img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 675; border: var(--line); border-radius: 12px; background: var(--ink); box-shadow: var(--pop); }
.card-wait { display: grid; place-items: center; aspect-ratio: 1200 / 675; border: 2px dashed rgba(20, 20, 20, .3); border-radius: 12px; color: var(--ink-3); font-size: 12px; text-align: center; padding: 10px; }
.share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tag-line { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-2); }
.tag-line a { font-weight: 800; }
.recheck { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(20, 20, 20, .2); font-size: 12.5px; color: var(--ink-2); }
.recheck .err { width: 100%; margin: 0; font-weight: 800; color: var(--ink); }

/* progress while sniffing */
.sniff-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font: 400 26px/1 var(--display); text-transform: uppercase; }
.sniff-head small { font: 700 12px/1 var(--mono); color: var(--ink-3); text-transform: none; font-variant-numeric: tabular-nums; }
.sweep { position: relative; height: 8px; margin: 0 0 14px; border: var(--thin); border-radius: 6px; background: var(--cream); overflow: hidden; }
.sweep i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--orange); border-right: 2px solid var(--ink); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.steps li { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 4px 10px; border-radius: 10px; background: var(--cream); font-size: 13px; color: var(--ink-3); font-weight: 700; }
.steps li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-3); }
.steps li.running { color: var(--ink); background: var(--orange-tint); }
.steps li.running::before { border-color: var(--ink); border-style: dashed; }
.steps li.done { color: var(--ink); }
.steps li.done::before { background: var(--ink); border-color: var(--ink); }
.steps li.failed, .steps li.skipped { font-weight: 400; }
.steps li.failed::before, .steps li.skipped::before { border-style: dotted; }
.steps li span { margin-left: auto; font-weight: 400; font-size: 11.5px; }

.parts { display: grid; gap: 16px; }
.unavail { margin: 0; padding: 10px 12px; border: 2px dashed rgba(20, 20, 20, .3); border-radius: 10px; color: var(--ink-3); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.hint { margin: 8px 0 0; color: var(--ink-3); font-size: 12px; }
.shot-frame { margin: 0; }
.stat.na dd.stat-note { font: 600 11.5px/1.35 var(--mono); color: var(--ink-3); white-space: normal; }
.shot { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; object-fit: cover; object-position: top; border: var(--thin); border-radius: 10px; background: var(--cream); }
.site-meta { margin: 10px 0 0; overflow-wrap: anywhere; }
.trail { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.trail li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 8px 10px; background: var(--cream); border-radius: 10px; }
.trail .what { font-weight: 800; overflow-wrap: anywhere; }
.trail .res { grid-column: 2; color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.no-site { margin: 0; padding: 10px 12px; background: var(--cream); border: var(--thin); border-radius: 10px; }
.copy-line { margin: 0 0 10px; padding: 8px 10px; background: var(--cream); border-radius: 10px; font-weight: 700; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); padding: 0 6px 6px; white-space: nowrap; }
.tbl td { padding: 7px 6px; border-top: 1px solid rgba(20, 20, 20, .12); vertical-align: top; }
.tbl tr.likely td { background: var(--amber-tint); font-weight: 700; }
.bar { display: inline-block; height: 8px; margin-right: 6px; background: var(--ink); border-radius: 4px; vertical-align: middle; }
.addr { font-size: 12px; text-decoration: none; border-bottom: 1.5px dotted var(--ink-3); }
.bubble { width: 100%; height: auto; display: block; border: var(--thin); border-radius: 12px; background: var(--cream); }
.bubble-line { margin: 10px 0 0; font-weight: 800; font-size: 15px; }
.lost { max-width: 640px; margin: 40px auto; }

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 60; translate: -50% 0; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; background: var(--ink); color: var(--cream);
  border-radius: 12px; font-weight: 700; box-shadow: 4px 4px 0 var(--orange); opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.on { opacity: 1; }

@media (min-width: 640px) {
  .check-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-copy { padding: 26px 24px 22px; }
  .hero-sub { font-size: 14.5px; }
  .legend { gap: 10px; }
  .check { --check-h: 58px; }
  .lg { padding: 8px 8px 10px; }
  .lg-hound { width: 72px; }
  .lg .st { font-size: 19px; padding: 4px 9px 3px; }
  .lg-means { font-size: 11.5px; }
  .hero-tag { font-size: 13.5px; }
  .how-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .box { padding: 18px 20px; }
  .brand img { height: 48px; }
}
@media (min-width: 900px) {
  .hero.has-example { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 30px; }
  .hero-copy { padding: 28px 30px 24px; }
  .hero-title { font-size: clamp(38px, 4.2vw, 60px); }
  .example { margin-top: 6px; }
  .recent-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .v-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .parts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .parts .wide { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .rc, .lg-hound { transition: none; }
}