/*
 * Quirk website (/quirk, /quirk/puzzles, /quirk/privacy, /quirk/support).
 * Tokens follow the app: docs/02-experience/design-tokens.json in the Quirk repo (brand/palette.json).
 * Fraunces and Manrope are the app's own fonts (SIL OFL 1.1, see ../fonts/OFL-*.txt).
 * Controlled Oddity: calm neutrals, puzzle colours from the icons, and one violet tile that is a little out of line.
 * The site exists in 41 languages: layout uses logical properties so it mirrors under dir="rtl", and every
 * script the brand fonts do not cover falls back to the system fonts below (no external files).
 */

/* unicode-range is the exact cmap of each subset (Basic Latin, Latin-1, Latin Extended-A, the Vietnamese letters and the
 * usual punctuation; control characters left out), so text in other scripts goes straight to the system fallback instead
 * of a faux or missing glyph. */
@font-face {
  font-family: "Fraunces";
  src: url("/quirk-app/fonts/fraunces.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0148, U+014A-017E, U+01A0-01A1, U+01AF-01B0, U+0218-021B, U+0300-0303, U+1EA0-1EF9, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122;
}

@font-face {
  font-family: "Manrope";
  src: url("/quirk-app/fonts/manrope.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0113, U+0116-012B, U+012E-0131, U+0134-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-017E, U+01A0-01A1, U+01AF-01B0, U+0218-021B, U+02C6-02C7, U+02DA, U+02DC, U+1EA0-1EF9, U+2011, U+2013-2014, U+2018-201A, U+201C-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2060, U+20AC, U+2122, U+2190-2193, U+2212;
}

:root {
  --q-canvas: #F4F1EA;
  --q-canvas-deep: #EAE5DA;
  --q-surface: #FFFFFF;
  --q-surface-muted: #F0ECE4;
  --q-text: #17181C;
  --q-text-2: #555862;
  --q-border: #D8D4CA;
  --q-brand: #A287FF;
  --q-brand-fg: #6A4CE0;
  --q-brand-tint: #ECE6FF;
  --q-on-brand: #17181C;
  --q-ink: #17181C;
  --q-inverse: #F7F5EF;
  --q-grid: rgb(23 24 28 / 0.05);
  --q-glow: rgb(162 135 255 / 0.32);
  --q-header-bg: rgb(244 241 234 / 0.86);
  --q-shadow-raised: 0 6px 18px rgb(43 36 64 / 0.1);
  --q-shadow-float: 0 12px 28px rgb(43 36 64 / 0.16);
  --q-shadow-brand: 0 6px 16px rgb(106 76 224 / 0.38);
  --q-logo-ink: #17181C;
  --q-logo-twist-stroke: #17181C;
  /* System fallback for every script of the 41 languages; the script-specific families only hold their own script. */
  --q-font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Nirmala UI", "Leelawadee UI", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Gurmukhi", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Oriya", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", sans-serif;
  --q-font-display: "Fraunces", Georgia, "Times New Roman", "Noto Serif", serif;
  --q-font-ui: "Manrope", var(--q-font-system);
  --q-radius-card: 22px;
  --q-radius-button: 18px;
  --q-header-h: 68px;
  --q-gutter: clamp(16px, 4vw, 32px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --q-canvas: #121316;
    --q-canvas-deep: #0C0D10;
    --q-surface: #1B1D21;
    --q-surface-muted: #25272D;
    --q-text: #F7F5EF;
    --q-text-2: #BBBCC5;
    --q-border: #303238;
    --q-brand-fg: #B6A1FF;
    --q-brand-tint: #29233F;
    --q-grid: rgb(247 245 239 / 0.04);
    --q-glow: rgb(162 135 255 / 0.2);
    --q-header-bg: rgb(18 19 22 / 0.84);
    --q-shadow-raised: 0 6px 18px rgb(0 0 0 / 0.45);
    --q-shadow-float: 0 12px 28px rgb(0 0 0 / 0.55);
    --q-shadow-brand: 0 6px 16px rgb(0 0 0 / 0.45);
    --q-logo-ink: #F7F5EF;
    --q-logo-twist-stroke: transparent;
  }
}

/* Languages and scripts. Fraunces and Manrope stay first for Latin digits and names; other scripts use the
 * system fonts. CJK gets its own order so kanji and hanzi use the right regional glyphs. Non-Latin pages use
 * a sans fallback for headings instead of a dated system serif; Greek and Cyrillic keep Georgia. */

:lang(zh) {
  --q-font-system: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:lang(zh-Hant) {
  --q-font-system: "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:lang(ja) {
  --q-font-system: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:lang(ko) {
  --q-font-system: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  word-break: keep-all;
}

:lang(ar), :lang(fa), :lang(ur), :lang(pa-Arab), :lang(he),
:lang(bn), :lang(gu), :lang(hi), :lang(kn), :lang(ml), :lang(mr), :lang(or), :lang(pa-Guru), :lang(ta), :lang(te),
:lang(th), :lang(ja), :lang(ko), :lang(zh) {
  --q-font-ui: "Manrope", var(--q-font-system);
  --q-font-display: "Fraunces", var(--q-font-system);
}

/* Scripts and languages added in the second round (data-only languages; the rules wait for their lang attribute).
 * System fonts only, no web fonts. Names checked against Microsoft's Windows 11 font list and per-family pages
 * (learn.microsoft.com/typography/fonts/windows_11_font_list), Apple's "Fonts included with macOS" (support.apple.com/122869)
 * and the Noto families of fonts.google.com/noto (Android, ChromeOS and Linux); see docs/architecture/quirk-app-integration.md.
 * Ebrima, Myanmar Text, Leelawadee UI (Thai, Lao, Khmer), Nirmala UI, Sylfaen and Segoe UI ship with Windows itself; Nyala,
 * Khmer UI, Lao UI and Iskoola Pota are optional Windows font features, so they come after the base fonts. */

/* Ethiopic (Amharic): Ebrima is in Windows itself, Nyala only in the optional Ethiopic font feature, Kefa on Apple. */
:lang(am) {
  --q-font-system: system-ui, -apple-system, "Segoe UI", Ebrima, Nyala, "Kefa III", Kefa, "Noto Sans Ethiopic", Roboto, sans-serif;
}

/* Myanmar (Burmese). */
:lang(my) {
  --q-font-system: system-ui, -apple-system, "Myanmar Text", "Myanmar Sangam MN", "Noto Sans Myanmar", "Segoe UI", Roboto, sans-serif;
}

/* Khmer: Leelawadee UI is in Windows itself, Khmer UI only in the optional Khmer feature. */
:lang(km) {
  --q-font-system: system-ui, -apple-system, "Leelawadee UI", "Khmer UI", "Khmer Sangam MN", "Noto Sans Khmer", "Segoe UI", Roboto, sans-serif;
}

/* Lao: same two Windows fonts (Lao UI is optional). */
:lang(lo) {
  --q-font-system: system-ui, -apple-system, "Leelawadee UI", "Lao UI", "Lao Sangam MN", "Noto Sans Lao", "Segoe UI", Roboto, sans-serif;
}

/* Sinhala: Nirmala UI covers it in Windows itself, Iskoola Pota is optional. */
:lang(si) {
  --q-font-system: system-ui, -apple-system, "Nirmala UI", "Iskoola Pota", "Sinhala Sangam MN", "Noto Sans Sinhala", "Segoe UI", Roboto, sans-serif;
}

/* Georgian: Segoe UI and Sylfaen cover it on Windows, the Apple system font on Apple (no Georgian font in the macOS list). */
:lang(ka) {
  --q-font-system: system-ui, -apple-system, "Segoe UI", Sylfaen, "Noto Sans Georgian", Roboto, sans-serif;
}

/* Armenian: Mshtakan is the Apple font. */
:lang(hy) {
  --q-font-system: system-ui, -apple-system, "Segoe UI", Sylfaen, Mshtakan, "Noto Sans Armenian", Roboto, sans-serif;
}

/* Assamese uses the Bengali script (with ৰ and ৱ): same fonts as Bangla. */
:lang(as) {
  --q-font-system: system-ui, -apple-system, "Nirmala UI", "Bangla Sangam MN", "Kohinoor Bangla", "Noto Sans Bengali", "Segoe UI", Roboto, sans-serif;
}

/* Pashto: Arabic script with its own letters (ټ ډ ړ ږ ښ ڼ ې ۍ). Segoe UI, Tahoma and Arial carry all of them on Windows; Geeza Pro on Apple; Noto Sans Arabic elsewhere. */
:lang(ps) {
  --q-font-system: system-ui, -apple-system, "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", sans-serif;
}

/* Cyrillic: Fraunces and Manrope have no Cyrillic, so these pages already use the system sans for everything but Latin
 * digits and names (like ru and uk). Georgia lacks Kazakh and Mongolian letters (ә ғ қ ң ө ұ ү һ і), so those two use a sans
 * for headings too; Bulgarian and Serbian are covered by Georgia, and lang="bg" lets the system font pick the Bulgarian forms. */
:lang(kk), :lang(mn) {
  --q-font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}

/* Latin languages with letters outside the Fraunces and Manrope subsets (ṣ ṅ ḿ ǹ and tone marks for Yoruba and Igbo, ɓ ɗ ƙ ƴ for
 * Hausa, ə for Azerbaijani, ʻ for Uzbek). The unicode-range would send single letters to another font in the middle of a
 * word, so these pages use one system font for all text. Ebrima (African Latin with stacked marks) follows Segoe UI. */
:lang(yo), :lang(ig), :lang(ha), :lang(az), :lang(uz) {
  --q-font-system: system-ui, -apple-system, "Segoe UI", Ebrima, Roboto, "Noto Sans", sans-serif;
  --q-font-ui: var(--q-font-system);
  --q-font-display: var(--q-font-system);
}

/* Hong Kong Chinese (traditional characters, Hong Kong glyph forms); also matches a tag with a script (zh-Hant-HK). */
:lang(zh-HK), :lang(zh-Hant-HK) {
  --q-font-system: "PingFang HK", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans CJK HK", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:is(:lang(am), :lang(my), :lang(km), :lang(lo), :lang(si), :lang(ka), :lang(hy), :lang(as), :lang(ps), :lang(kk), :lang(mn)) {
  --q-font-ui: "Manrope", var(--q-font-system);
  --q-font-display: "Fraunces", var(--q-font-system);
}

/* Complex scripts: no tracking, and the room each script's marks need (Myanmar and Khmer stack tall marks above and below). */
:is(.q-display, .q-title):is(:lang(am), :lang(my), :lang(km), :lang(lo), :lang(si), :lang(ka), :lang(hy), :lang(as), :lang(ps)),
:is(.q-eyebrow, .q-group-count, .q-ribbon-label, .q-toc-title, .q-store small):is(:lang(am), :lang(my), :lang(km), :lang(lo), :lang(si), :lang(ka), :lang(hy), :lang(as), :lang(ps)) {
  letter-spacing: normal;
}

:is(.q-display, .q-title):is(:lang(am), :lang(ka), :lang(hy), :lang(as), :lang(si), :lang(lo), :lang(ps)) {
  line-height: 1.4;
}

:is(.q-display, .q-title):is(:lang(my), :lang(km)) {
  line-height: 1.65;
}

:is(:lang(my), :lang(km)) :is(p, li, dd, summary, blockquote, figcaption, .q-lead) {
  line-height: 1.85;
}

:is(:lang(si), :lang(lo), :lang(am), :lang(as), :lang(ps)) :is(p, li, dd, summary, blockquote, figcaption, .q-lead) {
  line-height: 1.7;
}

/* Latin pages with tone marks (Yoruba, Igbo, Hausa): the display size needs a little more leading for marks above capitals. */
:is(.q-display, .q-title):is(:lang(yo), :lang(ig), :lang(ha)) {
  line-height: 1.25;
}

/* Cursive and complex scripts: no tracking (it breaks joining and clusters) and room for tall marks. */
:is(.q-display, .q-title):is(:lang(ar), :lang(fa), :lang(ur), :lang(pa-Arab), :lang(bn), :lang(gu), :lang(hi), :lang(kn), :lang(ml), :lang(mr), :lang(or), :lang(pa-Guru), :lang(ta), :lang(te), :lang(th)) {
  letter-spacing: normal;
  line-height: 1.3;
}

:is(.q-display, .q-title):is(:lang(ur), :lang(pa-Arab)) {
  line-height: 1.5;
}

:is(.q-eyebrow, .q-group-count, .q-ribbon-label, .q-toc-title, .q-store small):is(:lang(ar), :lang(fa), :lang(ur), :lang(pa-Arab), :lang(bn), :lang(gu), :lang(hi), :lang(kn), :lang(ml), :lang(mr), :lang(or), :lang(pa-Guru), :lang(ta), :lang(te), :lang(th)) {
  letter-spacing: normal;
}

/* CJK: full-width glyphs need a little more leading and no negative tracking; no synthetic italics. */
:is(.q-display, .q-title):is(:lang(ja), :lang(ko), :lang(zh)) {
  letter-spacing: normal;
  line-height: 1.25;
}

/* Japanese headings: break between phrases, not inside a word (Chrome 119+; other browsers keep normal breaking). */
:is(.q-display, .q-title):lang(ja) {
  word-break: auto-phrase;
}

:is(em, i):is(:lang(ja), :lang(ko), :lang(zh)) {
  font-style: normal;
  font-weight: 700;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--q-header-h) + 16px);
  background: var(--q-canvas);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--q-canvas);
  color: var(--q-text);
  font-family: var(--q-font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
}

p {
  margin: 0;
}

::selection {
  background: var(--q-brand-tint);
  color: var(--q-text);
}

:focus-visible {
  outline: 3px solid var(--q-brand-fg);
  outline-offset: 3px;
  border-radius: 6px;
}

.q-shell {
  width: 100%;
  max-width: calc(1180px + 2 * var(--q-gutter));
  margin: 0 auto;
  padding: 0 var(--q-gutter);
}

.q-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.q-skip {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 100;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  background: var(--q-ink);
  color: var(--q-inverse);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.q-skip:focus {
  transform: none;
}

.q-icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* Logo (official geometry from the brand kit, coloured here). */

.q-logo {
  width: auto;
  height: 30px;
}

.q-logo-ink {
  fill: var(--q-logo-ink);
}

.q-logo-twist {
  fill: #A287FF;
  stroke: var(--q-logo-twist-stroke);
  stroke-width: 1.8;
}

.q-mark {
  width: 100%;
  height: auto;
}

/* Type */

.q-display {
  font-family: var(--q-font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.q-display--page {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

.q-display--final {
  font-size: clamp(2.3rem, 5vw, 4.2rem);
}

.q-title {
  font-family: var(--q-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
  text-wrap: balance;
}

.q-eyebrow {
  margin: 0 0 0.85rem;
  color: var(--q-brand-fg);
  font-family: var(--q-font-ui);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.q-lead {
  max-width: 40rem;
  color: var(--q-text-2);
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.q-lead a,
.q-faq a,
.q-footer-bottom a {
  color: var(--q-brand-fg);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.q-muted {
  color: var(--q-text-2);
}

.q-small {
  margin-top: 1rem;
  font-size: 0.92rem;
}

.q-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

/* Pills, buttons and store buttons */

.q-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  padding-block: 0.45rem;
  padding-inline: 0.7rem 0.95rem;
  border: 1px solid var(--q-border);
  border-radius: 999px;
  background: var(--q-surface);
  color: var(--q-text);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--q-shadow-raised);
}

.q-pill .q-icon {
  color: var(--q-brand-fg);
}

.q-pill--quiet {
  margin: 1.5rem 0 0;
  box-shadow: none;
}

.q-pill-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--q-brand);
  transform: translate(1px, 2px);
}

.q-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: var(--q-radius-button);
  background: var(--q-brand);
  color: var(--q-on-brand);
  font: 750 1rem/1.2 var(--q-font-ui);
  text-decoration: none;
  box-shadow: var(--q-shadow-brand);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.q-button:hover {
  transform: translateY(-2px);
}

.q-button .q-icon {
  width: 1.2em;
  height: 1.2em;
}

.q-button--small {
  min-height: 42px;
  padding: 0 1rem;
  font-size: 0.93rem;
  border-radius: 14px;
}

.q-button--small .q-icon {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
}

.q-button--ghost {
  border: 1.5px solid var(--q-border);
  background: var(--q-surface);
  color: var(--q-text);
  box-shadow: none;
}

.q-button--ghost:hover {
  border-color: var(--q-brand);
}

.q-button--ghost .q-icon {
  color: var(--q-brand-fg);
}

.q-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--q-brand-fg);
  font-weight: 800;
  text-decoration: none;
}

.q-link-arrow .q-icon {
  transition: transform 0.18s ease;
}

.q-link-arrow:hover .q-icon {
  transform: translateX(4px);
}

.q-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.q-stores--center {
  justify-content: center;
}

.q-store {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 60px;
  padding-block: 0.55rem;
  padding-inline: 1.1rem 1.4rem;
  border-radius: var(--q-radius-button);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.15;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.q-store small {
  display: block;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  opacity: 0.82;
}

.q-store-glyph {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.q-store--play {
  background: var(--q-brand);
  color: var(--q-on-brand);
  box-shadow: var(--q-shadow-brand);
}

.q-store--apple {
  background: var(--q-ink);
  color: var(--q-inverse);
}

a.q-store:hover {
  transform: translateY(-2px);
}

.q-badge {
  display: inline-flex;
  line-height: 0;
  border-radius: 8px;
  transition: transform 0.18s ease;
}

/* Official store badges, unaltered: only the height is set (QuirkSiteAssets::BADGE_HEIGHT, 44 px; Google asks for at least 28 px, Apple for 40 px).
   The gap of .q-stores (12 px) is more than the quarter of the height both stores ask for as clear space. The badges are pictures, so the page direction does not mirror them. */
.q-badge img {
  display: block;
  width: auto;
  height: 44px;
}

a.q-badge:hover {
  transform: translateY(-2px);
}

.q-store--soon {
  border: 1.5px dashed var(--q-border);
  color: var(--q-text-2);
  font-size: 0.95rem;
}

.q-store--soon .q-store-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

@media (prefers-color-scheme: dark) {
  .q-store--apple {
    background: var(--q-inverse);
    color: var(--q-ink);
  }
}

/* Header */

.q-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in srgb, var(--q-border) 70%, transparent);
  background: var(--q-header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.q-header-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--q-header-h);
}

.q-header-logo {
  display: inline-flex;
  padding: 0.25rem 0;
  border-radius: 8px;
}

.q-header-logo .q-logo {
  height: 28px;
}

.q-nav {
  display: flex;
  gap: 0.25rem;
  margin-inline-start: auto;
}

.q-nav a {
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  color: var(--q-text-2);
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.q-nav a:hover,
.q-nav a[aria-current="page"] {
  background: var(--q-surface);
  color: var(--q-text);
}

.q-nav a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--q-brand);
}

/* Language menu: a native disclosure next to the call to action. The globe button opens a panel with a
 * search field and the 41 language names in their own language; the current one is tinted and ticked. */

.q-lang {
  position: relative;
  flex-shrink: 0;
}

.q-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0 0.8rem;
  border: 1.5px solid var(--q-border);
  border-radius: 14px;
  background: var(--q-surface);
  color: var(--q-text);
  font: 700 0.93rem/1.2 var(--q-font-ui);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

.q-lang-toggle::-webkit-details-marker {
  display: none;
}

.q-lang-toggle::marker {
  content: "";
}

.q-lang-toggle:hover,
.q-lang[open] > .q-lang-toggle {
  border-color: var(--q-brand);
}

.q-lang-toggle .q-icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--q-brand-fg);
}

.q-lang-current {
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron; symmetric, so it needs no mirroring. */
.q-lang-toggle::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  margin-inline-start: 0.1rem;
  border: solid var(--q-text-2);
  border-width: 0 2px 2px 0;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 0.18s ease;
}

.q-lang[open] > .q-lang-toggle::after {
  transform: translateY(0.12em) rotate(225deg);
}

.q-lang-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(26rem, calc(100vw - 32px));
  max-height: min(70vh, 32rem);
  padding: 0.75rem;
  border: 1px solid var(--q-border);
  border-radius: 18px;
  background: var(--q-surface);
  color: var(--q-text);
  box-shadow: var(--q-shadow-float);
}

.q-lang-search-label {
  padding-inline: 0.2rem;
  color: var(--q-text-2);
  font-size: 0.82rem;
  font-weight: 700;
}

.q-lang-search {
  flex-shrink: 0;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0 0.9rem;
  border: 1.5px solid var(--q-border);
  border-radius: 12px;
  background: var(--q-canvas);
  color: var(--q-text);
  font: 600 0.97rem/1.3 var(--q-font-ui);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Transparent outline keeps a visible focus ring in forced-colors mode. */
.q-lang-search:focus {
  border-color: var(--q-brand-fg);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 4px var(--q-brand-tint);
}

.q-lang-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 2px 0.35rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  text-align: start;
  scrollbar-width: thin;
  scrollbar-color: var(--q-brand) transparent;
}

.q-lang-list li[hidden] {
  display: none;
}

/* Each link carries its own lang; the name sits in a span with its own dir, so every name lines up at the page's start edge
 * (owner, 12 November 2026: all names neatly under each other),
 * and the font variables resolve again per link so CJK names get their regional glyphs. */
.q-lang-list a {
  position: relative;
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  color: var(--q-text);
  font-family: var(--q-font-ui);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: start;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.q-lang-list a:hover {
  background: var(--q-surface-muted);
}

/* Inside the scrolling list the ring is drawn inward so it is never clipped. */
.q-lang-list a:focus-visible {
  outline-offset: -3px;
}

.q-lang-list a[aria-current="true"] {
  padding-inline-end: 2.2rem;
  background: var(--q-brand-tint);
  font-weight: 800;
}

/* Tick drawn with borders, so forced-colors mode keeps it; a check mark is not mirrored. */
.q-lang-list a[aria-current="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 0.95rem;
  width: 0.38em;
  height: 0.72em;
  border: solid var(--q-brand-fg);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-60%) rotate(45deg);
}

.q-lang-empty {
  padding: 0.5rem 0.75rem 0.75rem;
  color: var(--q-text-2);
  font-size: 0.93rem;
  font-weight: 650;
}

.q-lang-empty[hidden] {
  display: none;
}

/* Language suggestion: a calm tinted bar above the header, shown by quirk.js when the browser prefers another language. */

.q-lang-suggest[hidden] {
  display: none;
}

.q-lang-suggest {
  border-bottom: 1px solid color-mix(in srgb, var(--q-brand) 35%, transparent);
  background: var(--q-brand-tint);
  color: var(--q-text);
  font-size: 0.93rem;
  line-height: 1.4;
}

.q-lang-suggest-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  min-height: 48px;
  padding-block: 0.35rem;
}

.q-lang-suggest-link {
  padding-block: 0.35rem;
  font-family: var(--q-font-ui);
  color: var(--q-brand-fg);
  font-weight: 800;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.q-lang-suggest-close {
  min-height: 40px;
  margin-inline: auto -0.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--q-text-2);
  font: 700 0.88rem/1.2 var(--q-font-ui);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.q-lang-suggest-close:hover {
  background: color-mix(in srgb, var(--q-brand) 18%, transparent);
  color: var(--q-text);
}

/* Hero */

.q-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3.5rem, 8vw, 6.5rem);
  background-image:
    linear-gradient(var(--q-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--q-grid) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center top;
}

.q-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(transparent, var(--q-canvas));
  pointer-events: none;
}

.q-hero > .q-shell {
  position: relative;
  z-index: 1;
}

.q-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.q-hero-copy .q-lead {
  margin-top: 1.5rem;
}

.q-twist-word {
  position: relative;
  display: inline-block;
}

.q-twist-word::after {
  content: "";
  position: absolute;
  inset-inline-end: -0.42em;
  bottom: 0.08em;
  width: 0.3em;
  height: 0.3em;
  border-radius: 0.07em;
  background: var(--q-brand);
  box-shadow: inset 0 0 0 0.025em var(--q-logo-twist-stroke);
  transform: translate(0.05em, 0.06em);
}

.q-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--q-text-2);
  font-size: 0.95rem;
  font-weight: 700;
}

.q-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.q-facts .q-icon {
  color: var(--q-brand-fg);
}

.q-hero-stage {
  position: relative;
  min-height: 600px;
}

.q-hero-glow {
  position: absolute;
  inset: 8% 4% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--q-glow), transparent);
  filter: blur(8px);
}

.q-phone {
  margin: 0;
  padding: 7px;
  border-radius: 38px;
  background: #17181C;
  box-shadow: var(--q-shadow-float), inset 0 0 0 1.5px #3A3D45;
}

.q-phone img {
  width: 100%;
  border-radius: 31px;
}

.q-hero-stage .q-phone {
  position: absolute;
}

.q-phone--front {
  z-index: 2;
  top: 2%;
  inset-inline-end: 6%;
  width: min(300px, 58%);
  transform: rotate(4deg);
}

.q-phone--back {
  z-index: 1;
  top: 13%;
  inset-inline-start: 2%;
  width: min(260px, 50%);
  transform: rotate(-7deg);
}

.q-float {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 66px;
  aspect-ratio: 1;
  filter: drop-shadow(0 10px 12px rgb(43 36 64 / 0.28));
  animation: q-bob 7s ease-in-out infinite alternate;
}

.q-float img {
  width: 100%;
}

.q-float--1 { top: 0; inset-inline-start: 18%; animation-delay: -1s; }
.q-float--2 { top: 42%; inset-inline-start: -2%; width: 58px; animation-delay: -3s; }
.q-float--3 { bottom: 6%; inset-inline-start: 26%; animation-delay: -5s; }
.q-float--4 { top: 30%; inset-inline-end: -2%; width: 60px; animation-delay: -2s; }
.q-float--5 { bottom: 0; inset-inline-end: 14%; width: 54px; animation-delay: -4s; }

@keyframes q-bob {
  from { transform: translateY(-6px) rotate(-3deg); }
  to { transform: translateY(8px) rotate(3deg); }
}

.q-hero-mark {
  position: absolute;
  z-index: 3;
  inset-inline-end: 40%;
  bottom: 9%;
  width: 70px;
  padding: 12px;
  border-radius: 20px;
  background: var(--q-surface);
  box-shadow: var(--q-shadow-float);
}

.q-hero--compact {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

.q-hero--compact .q-lead {
  margin-top: 1.1rem;
}

.q-crumbs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  color: var(--q-text-2);
  font-size: 0.92rem;
  font-weight: 700;
}

.q-crumbs a {
  color: var(--q-brand-fg);
  text-decoration: none;
}

.q-crumbs a:hover {
  text-decoration: underline;
}

/* Ribbon of puzzle types */

.q-ribbon {
  overflow: hidden;
  border-block: 1px solid var(--q-border);
  background: var(--q-surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.q-ribbon-track {
  display: flex;
  width: max-content;
  animation: q-scroll 80s linear infinite;
}

.q-ribbon:hover .q-ribbon-track {
  animation-play-state: paused;
}

.q-ribbon-list {
  display: flex;
  gap: 2.25rem;
  margin: 0;
  padding-block: 1rem;
  padding-inline: 0 2.25rem;
  list-style: none;
}

.q-ribbon-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 750;
  font-size: 0.98rem;
  white-space: nowrap;
}

@keyframes q-scroll {
  to { transform: translateX(-50%); }
}

/* Tiles: the app's painted puzzle icons carry their own shape, so they sit directly on the page. */

.q-tile {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  aspect-ratio: 1;
}

.q-tile img {
  width: 100%;
}

.q-tile--large {
  width: 64px;
}

/* Sections */

.q-section {
  padding: clamp(4rem, 9vw, 7.5rem) 0;
}

.q-trailer,
.q-trailer-frame {
  display: block;
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(23, 24, 28, 0.16);
}

.q-trailer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A media play glyph never mirrors, so the trailer button stays physical (centred) in both directions. */
.q-trailer-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: rgba(23, 24, 28, 0.82);
  transition: transform 0.18s ease;
}

.q-trailer-play::after {
  content: "";
  position: absolute;
  left: 33px;
  top: 25px;
  border-style: solid;
  border-width: 17px 0 17px 28px;
  border-color: transparent transparent transparent #fff;
}

.q-trailer:hover .q-trailer-play {
  transform: scale(1.08);
}

.q-trailer-note {
  margin: 0.75rem auto 0;
  max-width: 960px;
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.7;
}

.q-section--tight {
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.q-section--deep {
  background: var(--q-canvas-deep);
}

.q-section--paper {
  border-block: 1px solid var(--q-border);
  background: var(--q-surface);
}

.q-section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.q-section-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: none;
}

.q-section-head--row .q-title {
  margin-bottom: 0;
}

.q-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.q-split--reverse .q-split-visual {
  order: -1;
}

.q-split-visual {
  position: relative;
}

/* Steps */

.q-steps {
  display: grid;
  gap: 1.5rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.q-steps li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.q-step-tile {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--q-ink);
  color: var(--q-inverse);
  font-family: var(--q-font-display);
  font-size: 1.4rem;
  font-weight: 700;
}

.q-step-tile--twist {
  background: var(--q-brand);
  color: var(--q-on-brand);
  transform: translate(4px, 4px);
}

@media (prefers-color-scheme: dark) {
  .q-step-tile {
    background: var(--q-inverse);
    color: var(--q-ink);
  }

  .q-step-tile--twist {
    background: var(--q-brand);
  }
}

.q-steps h3,
.q-card h3 {
  margin-bottom: 0.35rem;
  font-family: var(--q-font-display);
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.2;
}

.q-steps p,
.q-card p {
  color: var(--q-text-2);
}

.q-steps strong,
.q-card strong,
.q-checks strong {
  color: var(--q-text);
  font-weight: 800;
}

.q-phone--tilt {
  max-width: 320px;
  margin: 0 auto;
  transform: rotate(-3deg);
}

/* One certain move: three real boards under "Fair by design" */

.q-move {
  margin-top: clamp(3rem, 7vw, 5rem);
}

.q-move-head {
  max-width: 40rem;
  margin-bottom: 1.75rem;
}

.q-move-head h3 {
  margin-bottom: 0.35rem;
  font-family: var(--q-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.q-move-head p,
.q-move-steps p {
  color: var(--q-text-2);
}

.q-move-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: q-move;
}

.q-move-steps li {
  display: grid;
  gap: 1rem;
  align-content: start;
  counter-increment: q-move;
}

.q-move-steps img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--q-radius-card);
  box-shadow: var(--q-shadow-raised);
}

.q-move-steps h4 {
  margin: 0 0 0.25rem;
  font-family: var(--q-font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.q-move-steps h4::before {
  content: counter(q-move) ". ";
  color: var(--q-brand-fg);
}

.q-sticker {
  position: absolute;
  inset-inline-start: max(0px, calc(50% - 250px));
  bottom: 14%;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.1rem;
  border-radius: 18px;
  background: var(--q-surface);
  color: var(--q-text);
  font-weight: 750;
  box-shadow: var(--q-shadow-float);
  transform: rotate(-2deg);
}

.q-sticker .q-icon {
  padding: 4px;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--q-brand-tint);
  color: var(--q-brand-fg);
}

/* Groups */

.q-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-group {
  display: grid;
  gap: 0.2rem;
  height: 100%;
  padding: 1.25rem 1.3rem 1.35rem;
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-card);
  background: var(--q-surface);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.q-group:hover {
  border-color: var(--q-brand);
  box-shadow: var(--q-shadow-float);
  transform: translateY(-3px);
}

.q-group-stack {
  display: flex;
  margin-bottom: 0.85rem;
}

.q-group-stack .q-tile {
  width: 54px;
  filter: drop-shadow(0 2px 3px rgb(23 24 28 / 0.3));
}

.q-group-stack .q-tile + .q-tile {
  margin-inline-start: -8px;
}

.q-group-stack .q-tile:nth-child(2) {
  transform: translateY(3px);
}

.q-group-name {
  font-family: var(--q-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.q-group-count {
  color: var(--q-brand-fg);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.q-group-blurb {
  margin-top: 0.35rem;
  color: var(--q-text-2);
  font-size: 0.97rem;
}

/* Cards and bento */

.q-card {
  position: relative;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-card);
  background: var(--q-surface);
  box-shadow: var(--q-shadow-raised);
}

.q-card-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  margin-bottom: 1rem;
  border-radius: 13px;
  background: var(--q-brand-tint);
  color: var(--q-brand-fg);
}

.q-card-icon .q-icon {
  width: 25px;
  height: 25px;
}

.q-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.q-card--feature {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.5rem;
  min-height: 330px;
  overflow: hidden;
  padding-bottom: 0;
}

.q-card--feature .q-card-copy {
  padding-bottom: clamp(1.3rem, 2.6vw, 2rem);
}

.q-card--feature h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.q-card--daily {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--q-brand-tint), transparent 60%),
    var(--q-surface);
}

.q-phone--peek {
  align-self: end;
  width: min(230px, 100%);
  margin: 0 auto -38%;
  transform: rotate(5deg);
}

.q-card--share .q-phone--peek {
  transform: rotate(-4deg);
}

/* Gallery */

.q-gallery {
  display: flex;
  gap: 1.4rem;
  margin: 0;
  padding: 1rem max(var(--q-gutter), calc((100vw - 1180px) / 2)) 2.5rem;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--q-gutter), calc((100vw - 1180px) / 2));
  scrollbar-width: thin;
  scrollbar-color: var(--q-brand) transparent;
}

.q-gallery li {
  flex: 0 0 clamp(190px, 22vw, 250px);
  scroll-snap-align: start;
}

.q-gallery li:nth-child(even) {
  transform: translateY(1.75rem);
}

.q-gallery:focus-visible {
  outline-offset: -3px;
}

/* Comfort */

.q-comfort {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-comfort li {
  display: grid;
  gap: 0.15rem;
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--q-border);
  border-radius: 18px;
  background: var(--q-surface);
}

.q-comfort .q-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 0.65rem;
  color: var(--q-brand-fg);
}

.q-comfort strong {
  font-size: 1.05rem;
  font-weight: 800;
}

.q-comfort span {
  color: var(--q-text-2);
  font-size: 0.96rem;
}

/* Free to play */

.q-checks {
  display: grid;
  gap: 0.9rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.q-checks li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: var(--q-text-2);
}

.q-checks .q-icon {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 9px;
  background: var(--q-brand);
  color: var(--q-on-brand);
  stroke-width: 4;
}

.q-board {
  max-width: 400px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--q-border);
  border-radius: 28px;
  background: var(--q-surface);
  box-shadow: var(--q-shadow-float);
  transform: rotate(-1.5deg);
}

.q-board-label {
  margin-bottom: 1rem;
  font-family: var(--q-font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

.q-board-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-board-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--q-brand-tint);
  color: var(--q-brand-fg);
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.q-board-cell--twist {
  background: var(--q-brand);
  color: var(--q-on-brand);
  box-shadow: inset 0 0 0 1.5px var(--q-logo-twist-stroke);
  transform: translate(5px, 5px);
}

.q-board-foot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
  color: var(--q-text-2);
  font-weight: 750;
}

.q-board-foot .q-icon {
  color: var(--q-brand-fg);
}

/* Privacy in short */

.q-cards-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* FAQ */

.q-faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.q-faq {
  display: grid;
  gap: 0.75rem;
}

.q-faq details {
  border: 1px solid var(--q-border);
  border-radius: 18px;
  background: var(--q-surface);
  transition: border-color 0.2s ease;
}

.q-faq details[open] {
  border-color: var(--q-brand);
}

.q-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-size: 1.06rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.q-faq summary::-webkit-details-marker {
  display: none;
}

.q-faq summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 9px;
  background: var(--q-brand-tint);
  color: var(--q-brand-fg);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s ease;
}

.q-faq details[open] summary::after {
  content: "\2212";
  transform: translate(3px, 3px);
}

.q-faq details p {
  padding: 0 1.25rem 1.25rem;
  color: var(--q-text-2);
}

.q-faq strong {
  color: var(--q-text);
}

/* Final call to action: always ink, like the dark brand pattern. */

.q-final {
  --q-logo-ink: #F7F5EF;
  --q-logo-twist-stroke: transparent;
  --q-border: #303238;
  --q-text-2: #BBBCC5;
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 10vw, 8rem) 0;
  background: #121316 url("/quirk-app/images/tile-grid-dark.svg") center / 256px 256px repeat;
  color: #F7F5EF;
  text-align: center;
}

.q-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 45%, rgb(18 19 22 / 0.35), #121316 78%);
}

.q-final-inner {
  position: relative;
  display: grid;
  justify-items: center;
}

.q-final-mark {
  width: 84px;
  margin-bottom: 1.75rem;
}

.q-final .q-lead {
  margin: 1.2rem auto 0;
}

.q-final .q-store--apple {
  background: #F7F5EF;
  color: #17181C;
}

.q-final .q-store--soon {
  color: #BBBCC5;
}

.q-final--slim {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

/* Footer */

.q-footer {
  border-top: 1px solid var(--q-border);
  background: var(--q-canvas);
  color: var(--q-text-2);
  font-size: 0.96rem;
}

.q-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 0 2rem;
}

.q-footer-logo {
  display: inline-flex;
  margin-bottom: 0.75rem;
  border-radius: 8px;
}

.q-footer-logo .q-logo {
  height: 26px;
}

/* 44px tap targets; the negative margin lines the first glyph up with the logo above it. */
.q-social {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-block: 0.85rem 0;
  margin-inline: -11px 0;
  padding: 0;
  list-style: none;
}

.q-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--q-text-2);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.q-social a:hover {
  background: var(--q-surface-muted);
  color: var(--q-brand-fg);
}

.q-social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.q-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.55rem 2.5rem;
  align-content: start;
}

.q-footer-nav a {
  color: var(--q-text);
  font-weight: 700;
  text-decoration: none;
}

.q-footer-nav a:hover {
  color: var(--q-brand-fg);
  text-decoration: underline;
}

.q-footer-legal {
  margin: 0;
  padding: 0 0 1.5rem;
  color: var(--q-text-2);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* The trademark lines are English (dir="ltr") but sit on the reading side of right-to-left pages. */
[dir="rtl"] .q-footer-legal {
  text-align: right;
}

.q-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--q-border);
  font-size: 0.9rem;
}

/* Puzzles page */

.q-search {
  margin-top: 2rem;
}

.q-search[hidden] {
  display: none;
}

.q-search-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 34rem;
  min-height: 58px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--q-border);
  border-radius: 999px;
  background: var(--q-surface);
  box-shadow: var(--q-shadow-raised);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.q-search-field:focus-within {
  border-color: var(--q-brand-fg);
  box-shadow: 0 0 0 4px var(--q-brand-tint);
}

.q-search-field .q-icon {
  color: var(--q-text-2);
}

.q-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--q-text);
  font: 600 1.06rem/1.4 var(--q-font-ui);
  outline: none;
}

.q-search-field input::placeholder {
  color: var(--q-text-2);
  opacity: 0.85;
}

.q-search-status {
  min-height: 1.5em;
  margin-top: 0.65rem;
  padding-inline-start: 1.3rem;
  color: var(--q-text-2);
  font-size: 0.92rem;
  font-weight: 650;
}

.q-chips {
  position: sticky;
  top: var(--q-header-h);
  z-index: 40;
  border-block: 1px solid var(--q-border);
  background: var(--q-header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.q-chips ul {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.q-chips ul::-webkit-scrollbar {
  display: none;
}

.q-chips a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--q-border);
  border-radius: 999px;
  background: var(--q-surface);
  font-size: 0.9rem;
  font-weight: 750;
  white-space: nowrap;
  text-decoration: none;
}

.q-chips a:hover {
  border-color: var(--q-brand);
}

.q-chips span {
  color: var(--q-brand-fg);
  font-weight: 800;
}

.q-chips li[hidden] {
  display: none;
}

.q-catalog {
  padding-top: 1rem;
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.q-catalog-group {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  scroll-margin-top: calc(var(--q-header-h) + 64px);
}

.q-catalog-group[hidden] {
  display: none;
}

.q-catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
}

.q-catalog-head p {
  color: var(--q-text-2);
}

.q-catalog-head strong {
  color: var(--q-text);
}

/* The app's group ribbon, in ink. */
.q-ribbon-label {
  display: inline-block;
  padding: 0.5rem 1.6rem 0.45rem;
  background: var(--q-ink);
  color: #F2E6B8;
  font-family: var(--q-font-ui);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}

@media (prefers-color-scheme: dark) {
  .q-ribbon-label {
    background: #2E3A33;
  }
}

.q-catalog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-puzzle {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--q-border);
  border-radius: 18px;
  background: var(--q-surface);
  scroll-margin-top: calc(var(--q-header-h) + 80px);
}

.q-puzzle[hidden] {
  display: none;
}

.q-puzzle:target {
  border-color: var(--q-brand);
  box-shadow: 0 0 0 4px var(--q-brand-tint);
}

.q-puzzle h2,
.q-puzzle h3 {
  margin: 0.1rem 0 0.25rem;
  font-family: var(--q-font-display);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.2;
}

.q-puzzle h2 a,
.q-puzzle h3 a {
  color: inherit;
  text-underline-offset: 3px;
}

.q-button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.q-puzzle p {
  color: var(--q-text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.q-empty {
  padding: 3rem 1rem;
  color: var(--q-text-2);
  font-size: 1.05rem;
  font-weight: 650;
  text-align: center;
}

.q-empty[hidden] {
  display: none;
}

/* Privacy and support */

.q-guide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-guide-card {
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid var(--q-border);
  border-radius: 18px;
  background: var(--q-surface);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.q-guide-card:hover {
  border-color: var(--q-brand);
  box-shadow: var(--q-shadow-raised);
  transform: translateY(-2px);
}

.q-guide-card .q-card-icon {
  width: 40px;
  margin-bottom: 0.6rem;
}

.q-guide-card .q-card-icon .q-icon {
  width: 22px;
  height: 22px;
}

.q-guide-card strong {
  font-family: var(--q-font-display);
  font-size: 1.18rem;
  font-weight: 700;
}

.q-guide-card span {
  color: var(--q-text-2);
  font-size: 0.95rem;
}

.q-doc {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.q-toc {
  position: sticky;
  top: calc(var(--q-header-h) + 24px);
  max-height: calc(100vh - var(--q-header-h) - 48px);
  overflow-y: auto;
}

.q-toc-title {
  margin-bottom: 0.75rem;
  color: var(--q-brand-fg);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.q-toc ol {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-toc a {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  color: var(--q-text-2);
  font-size: 0.93rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.q-toc a:hover,
.q-toc a[aria-current="true"] {
  background: var(--q-canvas);
  color: var(--q-text);
}

.q-toc a[aria-current="true"] {
  box-shadow: inset 3px 0 0 var(--q-brand);
}

.q-prose {
  max-width: 44rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

.q-prose > :first-child {
  margin-top: 0;
}

/* The note above a translated legal text: calm, in the page's own palette, and clearly not part of the document itself. */
.q-prose .q-doc-notice {
  margin: 0 0 2rem;
  padding-block: 0.85rem;
  padding-inline: 1.1rem 1rem;
  border: 1px solid var(--q-border);
  border-inline-start: 4px solid var(--q-brand);
  border-radius: 14px;
  background: var(--q-brand-tint);
  color: var(--q-text);
  font-size: 0.95rem;
  line-height: 1.55;
}

.q-prose .q-doc-notice a {
  color: var(--q-brand-fg);
  font-weight: 700;
  text-underline-offset: 0.15em;
}

.q-prose h2 {
  margin: 3rem 0 0.9rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--q-border);
  font-family: var(--q-font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  scroll-margin-top: calc(var(--q-header-h) + 16px);
}

.q-prose h2:first-child,
.q-prose p:first-child + h2 {
  margin-top: 0;
}

.q-prose h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 800;
}

.q-prose p,
.q-prose ul,
.q-prose ol {
  margin: 0 0 1.1rem;
  color: var(--q-text-2);
}

.q-prose ul,
.q-prose ol {
  display: grid;
  gap: 0.35rem;
  padding-inline-start: 1.35rem;
}

.q-prose li::marker {
  color: var(--q-brand-fg);
}

.q-prose strong {
  color: var(--q-text);
  font-weight: 800;
  background: linear-gradient(transparent 60%, var(--q-brand-tint) 60%);
}

.q-prose a {
  color: var(--q-brand-fg);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.q-prose code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--q-surface-muted);
  font-size: 0.92em;
}

/* "How to play": the worked example from the Outpost-generated page, set apart as a callout. */
.q-howto .example {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.15rem 0.1rem;
  border-inline-start: 4px solid var(--q-brand);
  border-start-start-radius: 0;
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
  border-end-start-radius: 0;
  background: var(--q-surface-muted);
}

.q-puzzle p.q-puzzle-more {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.q-puzzle-more a {
  color: var(--q-brand-fg);
  font-weight: 700;
  text-underline-offset: 3px;
}

.q-contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--q-border);
  border-radius: 28px;
  background:
    radial-gradient(90% 120% at 0% 0%, var(--q-brand-tint), transparent 55%),
    var(--q-surface);
  box-shadow: var(--q-shadow-raised);
}

.q-contact-mark {
  width: 76px;
}

.q-contact-copy .q-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 0.6rem;
}

.q-contact-copy p:last-child {
  max-width: 34rem;
  color: var(--q-text-2);
}

.q-contact-actions {
  display: grid;
  gap: 0.7rem;
}

.q-contact-actions .q-button span {
  overflow-wrap: anywhere;
}

/* 404 */

.q-missing-inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.q-missing-mark {
  width: 96px;
  margin-bottom: 2rem;
}

.q-missing .q-lead {
  margin-inline: auto;
}

/* Right-to-left: only what logical properties cannot express. Direction icons need the partial to output
 * q-icon--{name}; the individual scale property composes with the hover nudge in .q-link-arrow, so the arrow
 * moves towards the inline end in both directions without a separate rule. */

[dir="rtl"] .q-icon--arrow,
[dir="rtl"] .q-icon--back {
  scale: -1 1;
}

[dir="rtl"] .q-twist-word::after {
  transform: translate(-0.05em, 0.06em);
}

[dir="rtl"] .q-phone--front {
  transform: rotate(-4deg);
}

[dir="rtl"] .q-phone--back {
  transform: rotate(7deg);
}

/* The ribbon track starts at the right edge in RTL, so it scrolls the other way to stay seamless. */
[dir="rtl"] .q-ribbon-track {
  animation-name: q-scroll-rtl;
}

@keyframes q-scroll-rtl {
  to { transform: translateX(50%); }
}

[dir="rtl"] .q-card--daily {
  background:
    radial-gradient(120% 90% at 0% 0%, var(--q-brand-tint), transparent 60%),
    var(--q-surface);
}

[dir="rtl"] .q-contact {
  background:
    radial-gradient(90% 120% at 100% 0%, var(--q-brand-tint), transparent 55%),
    var(--q-surface);
}

[dir="rtl"] .q-toc a[aria-current="true"] {
  box-shadow: inset -3px 0 0 var(--q-brand);
}

/* Responsive */

@media (max-width: 1023px) {
  .q-hero-grid,
  .q-split,
  .q-faq-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .q-split--reverse .q-split-visual {
    order: 0;
  }

  .q-hero-stage {
    min-height: 540px;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
  }

  .q-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .q-doc {
    grid-template-columns: minmax(0, 1fr);
  }

  .q-toc {
    position: static;
    max-height: none;
    padding: 1.25rem;
    border: 1px solid var(--q-border);
    border-radius: 18px;
    background: var(--q-canvas);
  }

  .q-toc ol {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .q-contact {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Translated navigation needs the room: the language button shows only the globe (its label names the language). */
  .q-lang-toggle {
    padding: 0 0.7rem;
  }

  .q-lang-current {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 719px) {
  /* On phones the two-row header scrolls away; only the group chips stay at the top. */
  :root {
    --q-header-h: 0px;
  }

  .q-move-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .q-move-steps li {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
  }

  .q-move-steps img {
    border-radius: 14px;
  }

  .q-header {
    position: relative;
  }

  .q-header-bar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.35rem 0.5rem;
    padding-top: 0.6rem;
    padding-bottom: 0.5rem;
  }

  .q-lang {
    position: static;
    grid-column: 2;
    grid-row: 1;
  }

  .q-header-cta {
    grid-column: 3;
    grid-row: 1;
  }

  /* On phones the panel spans the header width just below the first row, so it never leaves the screen. */
  .q-lang-panel {
    top: calc(0.6rem + 48px);
    inset-inline: var(--q-gutter);
    width: auto;
  }

  .q-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    margin: 0 -0.6rem;
  }

  .q-nav a {
    padding: 0.4rem 0.6rem;
  }

  .q-hero-stage {
    min-height: 430px;
  }

  .q-phone {
    padding: 5px;
    border-radius: 28px;
  }

  .q-phone img {
    border-radius: 23px;
  }

  .q-phone--front {
    width: 54%;
    inset-inline-end: 4%;
  }

  .q-phone--back {
    width: 46%;
  }

  .q-float {
    width: 52px;
  }

  .q-float--2,
  .q-float--4 {
    width: 46px;
  }

  .q-hero-mark {
    width: 56px;
    padding: 9px;
    border-radius: 16px;
  }

  .q-stores {
    flex-direction: column;
  }

  .q-store {
    justify-content: center;
  }

  .q-badge {
    align-self: flex-start;
  }

  .q-stores--center .q-badge {
    align-self: center;
  }

  .q-bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .q-card--feature {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .q-phone--peek {
    width: 62%;
    margin-bottom: -48%;
  }

  .q-sticker {
    inset-inline-start: 0;
    bottom: 8%;
    font-size: 0.92rem;
  }

  .q-catalog-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .q-footer-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .q-gallery li:nth-child(even) {
    transform: none;
  }
}

@media (max-width: 479px) {
  .q-lang-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .q-ribbon {
    overflow-x: auto;
  }

  .q-ribbon-list[aria-hidden="true"] {
    display: none;
  }
}

@media (forced-colors: active) {
  .q-card,
  .q-group,
  .q-puzzle,
  .q-button,
  .q-store {
    border: 1px solid CanvasText;
  }

  .q-badge:focus-visible {
    outline: 2px solid Highlight;
  }
}

@media print {
  .q-header,
  .q-footer,
  .q-final,
  .q-toc,
  .q-chips,
  .q-search,
  .q-lang-suggest {
    display: none !important;
  }

  .q-section--paper {
    border: 0;
  }
}

.q-howto-board {
  margin: 0 auto 2rem;
  max-width: 270px;
  text-align: center;
}
.q-howto-board img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
}
.q-howto-board figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.8;
}
.q-howto-count {
  margin: 0 0 1rem;
  font-weight: 700;
}

/* Press kit (/press): facts as a two-column list, file links and a screenshot grid; logical properties for RTL. */
.q-press-facts {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-card);
}

.q-press-facts dt {
  font-weight: 700;
}

.q-press-facts dd {
  margin: 0;
}

.q-press-files {
  padding-inline-start: 1.25rem;
}

.q-press-shots {
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
}

.q-press-shots img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--q-radius-card);
  box-shadow: var(--q-shadow-raised);
}

@media (max-width: 30rem) {
  .q-press-facts {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .q-press-facts dd {
    margin-block-end: 0.6rem;
  }
}