/* Design tokens — generated from src/lib/theme/tokens.ts. Dark is primary; light is derived. */
:root {
  color-scheme: dark light;
  --bg: #0a1218;
  --surface: #111b24;
  --elevated: #182531;
  --border: #22323f;
  --border-strong: #606f7a;
  --text-1: #f2f8fb;
  --text-2: #9fb4c2;
  --text-3: #7b8e9d;
  --disabled: #5c7386;
  --lime: #a2ff1f;
  --lime-fill: #a2ff1f;
  --sky: #7bd6f5;
  --coral: #e0846e;
  --on-lime: #0a1218;
  --on-sky: #0a1218;
  --lime-8: rgba(162, 255, 31, 0.08);
  --lime-55: rgba(162, 255, 31, 0.55);
  --sky-7: rgba(123, 214, 245, 0.07);
  --sky-12: rgba(123, 214, 245, 0.12);
  --sky-24: rgba(123, 214, 245, 0.24);
  --sky-40: rgba(123, 214, 245, 0.4);
  --sky-65: rgba(123, 214, 245, 0.65);
  --coral-14: rgba(224, 132, 110, 0.14);
  --coral-40: rgba(224, 132, 110, 0.4);
  --neutral-12: rgba(207, 221, 230, 0.12);
  --neutral-46: rgba(207, 221, 230, 0.46);
  --tier-bronze-text: #c58671;
  --tier-silver-text: #cfdde6;
  --tier-gold-text: #a2ff1f;
  --tier-platinum-text: #dcf3fc;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #e4eef4;
    --surface: #f2f8fb;
    --elevated: #fafdfe;
    --border: #cfdde6;
    --border-strong: #7c8992;
    --text-1: #0a1218;
    --text-2: #4a6273;
    --text-3: #5e6d77;
    --disabled: #8ca3b2;
    --lime: #467808;
    --lime-fill: #a2ff1f;
    --sky: #257293;
    --coral: #a95037;
    --on-lime: #0a1218;
    --on-sky: #f2f8fb;
    --lime-8: rgba(70, 120, 8, 0.08);
    --lime-55: rgba(70, 120, 8, 0.55);
    --sky-7: rgba(37, 114, 147, 0.07);
    --sky-12: rgba(37, 114, 147, 0.12);
    --sky-24: rgba(37, 114, 147, 0.24);
    --sky-40: rgba(37, 114, 147, 0.4);
    --sky-65: rgba(37, 114, 147, 0.65);
    --coral-14: rgba(169, 80, 55, 0.14);
    --coral-40: rgba(169, 80, 55, 0.4);
    --neutral-12: rgba(74, 98, 115, 0.12);
    --neutral-46: rgba(74, 98, 115, 0.46);
    --tier-bronze-text: #a95037;
    --tier-silver-text: #4a6273;
    --tier-gold-text: #467808;
    --tier-platinum-text: #257293;
  }
}
/* beyhk.sh — written by scripts/site/render.ts: the :root token block above this comment comes
   from src/lib/theme/tokens.ts, the rest is scripts/site/site.css. Edit those, not web/styles.css. */

@font-face {
  font-family: 'Saira Condensed';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/SairaCondensed-600SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/SairaCondensed-700Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/SairaCondensed-800ExtraBold.woff2') format('woff2');
}

:root {
  --font-display:
    'Saira Condensed', 'Noto Sans HK', 'PingFang HK', 'Microsoft JhengHei', sans-serif;
  --font-ui:
    -apple-system, 'Noto Sans HK', 'PingFang HK', 'Microsoft JhengHei', 'Segoe UI', sans-serif;
  --chamfer-1: 8px;
  --chamfer-2: 12px;
  --chamfer-3: 16px;
  --gutter: 20px;
  --measure: 1120px;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font: 16px/1.6 var(--font-ui);
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--sky);
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: 0.005em;
  /* A narrow column otherwise leaves one character alone on the last line ("…排 / 名"). */
  text-wrap: balance;
}
h1 {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 800;
  line-height: 1.14;
}
h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
}
h3 {
  font-size: 22px;
  font-weight: 700;
}
p,
li {
  color: var(--text-2);
}
p {
  margin: 0 0 1em;
}
strong {
  color: var(--text-1);
}
.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* Chamfer: top-right and bottom-left corners only, like the app's cards and buttons. */
.chamfer,
.chamfer-1,
.chamfer-2,
.chamfer-3 {
  --c: var(--chamfer-2);
  clip-path: polygon(
    0 0,
    calc(100% - var(--c)) 0,
    100% var(--c),
    100% 100%,
    var(--c) 100%,
    0 calc(100% - var(--c))
  );
}
.chamfer-1 {
  --c: var(--chamfer-1);
}
.chamfer-3 {
  --c: var(--chamfer-3);
}

/* Header */
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--surface);
  padding: 8px 12px;
}
.skip:focus {
  left: 8px;
  z-index: 10;
}
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.site-header .bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 14px var(--gutter) 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-1);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--text-1);
}
.mark {
  display: inline-grid;
  place-items: center;
  width: var(--mark-size);
  height: var(--mark-size);
  background: #111b24; /* ink 800: the mark's own tile in both themes */
  flex: none;
}
.mark img {
  width: 100%;
  height: 100%;
}
.lang-switch {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text-2);
  border: 1px solid var(--border);
  padding: 6px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.lang-switch:hover {
  color: var(--text-1);
  border-color: var(--border-strong);
}
.site-nav {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar {
  display: none;
}
.site-nav a {
  flex: none;
  text-decoration: none;
  color: var(--text-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 12px 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover {
  color: var(--text-1);
}
.site-nav a[aria-current='page'] {
  color: var(--sky);
  border-bottom-color: var(--sky);
}
/* On a phone the tabs scroll sideways. The header's script (layout.ts navScript) scrolls the
   current tab into view and marks which edges hide more tabs; those edges fade out so the
   strip reads as scrollable instead of cut off. */
.site-nav.more-end {
  mask-image: linear-gradient(to right, var(--text-1) calc(100% - 48px), transparent);
}
.site-nav.more-start {
  mask-image: linear-gradient(to left, var(--text-1) calc(100% - 48px), transparent);
}
.site-nav.more-start.more-end {
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--text-1) 48px,
    var(--text-1) calc(100% - 48px),
    transparent
  );
}

/* Layout */
.site-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}
.hero {
  display: grid;
  gap: 32px;
  padding: 48px 0 24px;
  align-items: center;
}
.hero .lede {
  font-size: 19px;
  max-width: 34em;
  text-wrap: balance;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 16px;
}
.hero .eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--sky);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
/* On a phone a row that wraps leaves two buttons of different widths stacked. Stacking them
   in one column as wide as the wider button keeps them even without stretching the lime
   button across the screen (lime is never a large fill). */
@media (max-width: 639px) {
  .cta-row {
    display: grid;
    grid-template-columns: max-content;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--lime-fill);
  color: var(--on-lime);
}
.btn-secondary {
  color: var(--text-1);
  border-color: var(--border-strong);
  background: var(--surface);
}
.btn-secondary:hover {
  border-color: var(--sky);
}
.btn[aria-disabled='true'] {
  color: var(--disabled);
  border-color: var(--border);
  background: var(--surface);
  cursor: default;
}
@media (min-width: 880px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    padding: 72px 0 40px;
  }
}

section.block {
  padding: 40px 0 8px;
  border-top: 1px solid var(--border);
}
section.block > p {
  max-width: 38em;
}
.grid {
  display: grid;
  gap: 16px;
  margin: 8px 0 24px;
}
@media (min-width: 640px) {
  .grid.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px;
}
.card h3 {
  margin-top: 0;
}
.card p:last-child {
  margin-bottom: 0;
}
.card .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 8px;
}
.card.accent {
  border-color: var(--sky-24);
  background: var(--sky-7);
}
.card.warn {
  border-color: var(--coral-40);
  background: var(--coral-14);
}
.card.warn .label {
  color: var(--coral);
}

ol.steps {
  list-style: none;
  padding: 0;
  margin: 8px 0 24px;
  counter-reset: step;
  display: grid;
  gap: 12px;
}
ol.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 16px 20px 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
}
ol.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.15;
  color: var(--sky);
  text-align: center;
  padding-top: 2px;
}
ol.steps h3 {
  font-size: 19px;
  margin-bottom: 4px;
}
ol.steps p {
  margin: 0;
}

ul.plain {
  padding-left: 1.2em;
  margin: 0 0 1em;
}
ul.plain li {
  margin-bottom: 0.4em;
}
.facts {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 8px 0 24px;
}
.facts div {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 16px;
}
.facts .num {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-1);
}
.facts span:last-child {
  font-size: 13px;
  color: var(--text-2);
}

table.tiers {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  background: var(--surface);
  border: 1px solid var(--border);
}
table.tiers th,
table.tiers td {
  text-align: left;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
}
table.tiers th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-top: 0;
}
table.tiers td:first-child {
  white-space: nowrap;
}
table.tiers td.num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
}

/* Tier badges, the app's four treatments */
.tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid;
  line-height: 1.3;
  --c: 6px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--c)) 0,
    100% var(--c),
    100% 100%,
    var(--c) 100%,
    0 calc(100% - var(--c))
  );
}
.tier::before {
  content: '';
  width: 8px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.tier-bronze {
  color: var(--tier-bronze-text);
  background: var(--coral-14);
  border-color: var(--coral-40);
}
.tier-silver {
  color: var(--tier-silver-text);
  background: var(--neutral-12);
  border-color: var(--neutral-46);
}
.tier-gold {
  color: var(--tier-gold-text);
  background: var(--lime-8);
  border-color: var(--lime-55);
}
.tier-platinum {
  color: var(--tier-platinum-text);
  background: linear-gradient(135deg, var(--sky-40), var(--sky-7));
  border-color: var(--sky-65);
}

/* Vignettes: CSS-built app moments, illustrative only */
.vg {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px;
  font-size: 14px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.vg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.vg-head .title {
  font-size: 15px;
  color: var(--text-1);
}
.vg-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  margin: 8px 0 0;
}
.ladder {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ladder li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 4px;
  border-top: 1px solid var(--border);
}
.ladder li:first-child {
  border-top: 0;
}
.ladder .rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-2);
  text-align: center;
}
.ladder .who {
  min-width: 0;
}
.ladder .handle {
  color: var(--text-1);
  font-weight: 700;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ladder .meta-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.ladder .rating {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  text-align: right;
}
.ladder .rating small {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
}
.form {
  display: inline-flex;
  gap: 3px;
}
.form i {
  width: 8px;
  height: 8px;
  background: var(--sky);
}
.form i.l {
  background: var(--border-strong);
}

.match {
  display: grid;
  gap: 12px;
}
.match .score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.match .score .num {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-1);
}
.match .score .vs {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.1em;
}
.match .score small {
  display: block;
  color: var(--text-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--border);
  color: var(--text-2);
}
.chip.pending {
  color: var(--sky);
  border-color: var(--sky-24);
  background: var(--sky-7);
}
.chip.met {
  color: var(--text-1);
  border-color: var(--border-strong);
}
.chip.danger {
  color: var(--coral);
  border-color: var(--coral-40);
  background: var(--coral-14);
}
.match .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.match .actions span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid var(--border-strong);
  color: var(--text-1);
}
.match .actions span.reject {
  color: var(--coral);
  border-color: var(--coral-40);
}
.rounds {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.rounds b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  color: var(--text-2);
}

.switches {
  list-style: none;
  padding: 0;
  margin: 0;
}
.switches li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid var(--border);
  color: var(--text-1);
}
.switches li:first-child {
  border-top: 0;
}
.switches i {
  width: 40px;
  height: 22px;
  border: 1px solid var(--border-strong);
  position: relative;
  flex: none;
}
.switches i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--text-3);
}
.switches i.on {
  border-color: var(--sky);
  background: var(--sky-12);
}
.switches i.on::after {
  left: auto;
  right: 3px;
  background: var(--sky);
}

.recap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.recap div {
  border: 1px solid var(--border);
  padding: 10px 12px;
}
.recap .num {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-1);
}
.recap span:last-child {
  font-size: 12px;
  color: var(--text-3);
}

.bracket {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.bracket div {
  display: grid;
  gap: 8px;
}
.bracket b {
  display: block;
  border: 1px solid var(--border);
  padding: 8px 10px;
  color: var(--text-1);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bracket b.out {
  color: var(--text-3);
  font-weight: 400;
}
.bracket b.win {
  border-color: var(--sky);
}

/* Store cards on the Join page */
.stores {
  display: grid;
  gap: 12px;
  margin: 8px 0 24px;
}
@media (min-width: 560px) {
  .stores {
    grid-template-columns: 1fr 1fr;
  }
}
.store {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-1);
  min-height: 72px;
}
.store .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
}
.store .name {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
  display: block;
}
a.store:hover {
  border-color: var(--sky);
}
.store.soon {
  border-style: dashed;
}
.store.soon .name {
  color: var(--text-2);
}

/* Blog (scripts/site/blog/render.ts). Generated in CI, so it uses the same sheet and tokens. */
.blog-index {
  padding: 40px 0 0;
}
.blog-index > h1 {
  margin-bottom: 16px;
}
.post {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 8px;
  /* A bare URL (a post's reference list) has no break point and would run off a phone. */
  overflow-wrap: break-word;
}
.post header {
  margin-bottom: 24px;
}
.post h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 12px;
}
.post .meta {
  font-size: 13px;
  color: var(--text-3);
}
/* The cover (Ghost feature image), between the header and the body. Covers are 1200×630. */
.post-cover {
  margin: 0 0 32px;
}
.post-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
}
.post figure {
  margin: 24px 0;
}
.post figcaption {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 8px;
}
.post .kg-image-card img {
  width: 100%;
  height: auto;
}
/* Tables in a post. Ghost emits bare tables and the sanitiser strips every style and class,
   so the look lives here. The writing rule is seven columns at most with a header row; the
   wrapper (article.ts) scrolls a wide table sideways on a phone instead of crushing the cells. */
.post .post-table {
  overflow-x: auto;
  margin: 24px 0;
  -webkit-overflow-scrolling: touch;
}
.post table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  background: var(--surface);
  border: 1px solid var(--border);
}
.post th,
.post td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
}
.post th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-1);
  border-top: 0;
}
.post td:first-child {
  white-space: nowrap;
  color: var(--text-1);
}
.post tbody tr:nth-child(even) td {
  background: var(--elevated);
}
/* Below the post's own width the wrapper scrolls, so a header keeps its line instead of
   wrapping into a tall row for columns the reader has not scrolled to yet. */
@media (max-width: 719px) {
  .post th {
    white-space: nowrap;
  }
  /* The headers no longer wrap, so a short header next to long ones would leave its column
     a few characters wide; a floor keeps every cell readable and the wrapper scrolls. */
  .post td {
    min-width: 8em;
  }
}

.post-tags {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding-top: 16px;
}
.post-tags .tags {
  font-size: 13px;
  color: var(--text-3);
}
.post-tags .tags a + a {
  margin-left: 8px;
}

/* Article layout: the post, then a desktop-only sidebar with the app CTA and the contents
   (scripts/site/blog/article.ts). The sidebar CTA is the page's one lime moment. */
.post-layout {
  display: block;
}
.post-aside {
  display: none;
}
@media (min-width: 1024px) {
  .post-layout {
    display: grid;
    grid-template-columns: minmax(0, 720px) 280px;
    justify-content: center;
    gap: 56px;
    align-items: start;
  }
  .post-layout .post {
    margin: 0;
  }
  .post-aside {
    display: grid;
    gap: 24px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin-top: 40px;
  }
}
.post-aside-cta {
  background: var(--elevated);
  border-top: 2px solid var(--sky);
  padding: 20px;
}
.post-aside-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.post-aside-brand .wordmark {
  font-size: 20px;
}
.post-aside-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-1);
  margin: 0 0 8px;
}
.post-aside-body {
  font-size: 14px;
  color: var(--text-2);
  margin: 0 0 16px;
}
.post-aside-actions {
  display: grid;
  gap: 8px;
}
.post-toc {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px 16px 8px;
}
.post-toc h2 {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--text-1);
  margin: 0 0 8px;
}
.post-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-toc a {
  display: block;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--border);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
  text-decoration: none;
}
.post-toc a:hover,
.post-toc a:focus-visible {
  color: var(--sky);
  border-left-color: var(--sky);
}
.post h2[id] {
  scroll-margin-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.post-toc) {
    scroll-behavior: smooth;
  }
}
.post-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-left: 2px solid var(--sky);
  padding: 16px 20px;
  margin: 32px 0;
}
.post-cta-text {
  flex: 1 1 260px;
  margin: 0;
  color: var(--text-2);
}
.post-cta-text strong {
  color: var(--text-1);
}
.post-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-community {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-top: 2px solid var(--sky);
  padding: 28px 20px;
  margin: 40px 0 32px;
  text-align: center;
}
.post-community h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-1);
  margin: 0 0 8px;
}
.post-community p {
  max-width: 46ch;
  margin: 0 auto 20px;
  color: var(--text-2);
}
.post-share {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.post-share-inline {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding-top: 16px;
}
.post-share-inline + .post-tags {
  border-top: 0;
  margin-top: 0;
}
@media (min-width: 1024px) {
  .post-share-inline {
    display: none;
  }
  .post-share-inline + .post-tags {
    border-top: 1px solid var(--border);
    margin-top: 32px;
  }
}
.post-share-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.post-share-links {
  display: flex;
  gap: 4px;
}
.post-share-links a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text-2);
  border: 1px solid transparent;
}
.post-share-links a:hover,
.post-share-links a:focus-visible {
  color: var(--sky);
  border-color: var(--border);
}
.post-related {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding-top: 32px;
}
.post-related > h2 {
  font-size: 24px;
  margin: 0 0 20px;
}
.post-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.post-related-card {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--border);
  background: var(--surface);
}
.post-related-card:hover {
  border-color: var(--sky-40);
}
.post-related-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--elevated);
}
.post-related-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-related-blank {
  display: grid;
  place-items: center;
  height: 100%;
}
.post-related-text {
  padding: 14px 16px 16px;
}
.post-related-tag {
  font-size: 13px;
  color: var(--sky);
  text-decoration: none;
}
.post-related-text h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 4px 0 8px;
}
.post-related-text h3 a {
  color: var(--text-1);
  text-decoration: none;
}
.post-related-text h3 a:hover {
  color: var(--sky);
}
.post-related-text .meta {
  margin: 0;
}
.btn-sky {
  background: var(--sky);
  color: var(--on-sky);
}
.btn-sky:hover {
  border-color: var(--text-1);
}
.post-list {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
  display: grid;
  gap: 16px;
}
.post-list > li {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px;
}
/* A card with a cover: thumbnail above the text on a phone, beside it from tablet up. */
.post-summary.has-cover {
  display: grid;
  gap: 16px;
}
.post-summary-media {
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: var(--elevated);
  border: 1px solid var(--border);
}
.post-summary-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 720px) {
  .post-summary.has-cover {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
}
.post-list h2 {
  font-size: 24px;
  margin: 0 0 6px;
}
.post-list h2 a {
  color: var(--text-1);
  text-decoration: none;
}
.post-list h2 a:hover {
  color: var(--sky);
}
.post-list .meta {
  font-size: 13px;
  color: var(--text-3);
}
.post-list p:last-child {
  margin-bottom: 0;
}
.read-more {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.pagination {
  display: flex;
  gap: 12px;
  margin: 24px 0 0;
}
.pagination a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  text-decoration: none;
}
.pagination a:hover {
  border-color: var(--sky);
}

/* Ghost Koenig cards kept by scripts/site/blog/sanitize.ts */
.link-card {
  border: 1px solid var(--border);
  border-left: 2px solid var(--sky);
  background: var(--surface);
  padding: 12px 16px;
  margin: 16px 0;
}
.link-card a {
  text-decoration: none;
}
.kg-callout-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
  margin: 24px 0;
}
.kg-callout-emoji {
  font-weight: 700;
  color: var(--text-2);
}
.kg-callout-text p:last-child {
  margin-bottom: 0;
}
/* Ghost callout colours: blue/accent is the highlight (e.g. a conclusion), red is a warning
   only (coral never decorates), every other colour stays neutral. */
.kg-callout-card-blue,
.kg-callout-card-accent {
  background: var(--sky-12);
  border-color: var(--sky-40);
  border-left: 3px solid var(--sky);
}
.kg-callout-card-blue .kg-callout-emoji,
.kg-callout-card-accent .kg-callout-emoji {
  color: var(--sky);
}
.kg-callout-card-red {
  background: var(--coral-14);
  border-color: var(--coral-40);
  border-left: 2px solid var(--coral);
}
/* Toggle cards, rendered as details/summary by the sanitiser: FAQ dropdowns, no script. */
.kg-toggle-card {
  border: 1px solid var(--border);
  background: var(--surface);
  margin: 12px 0;
}
.kg-toggle-card[open] {
  border-color: var(--sky-40);
  background: var(--sky-7);
}
.kg-toggle-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.kg-toggle-heading::-webkit-details-marker {
  display: none;
}
/* A chevron: down when closed, up when open. */
.kg-toggle-heading::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--sky);
  border-bottom: 2px solid var(--sky);
  transform: rotate(45deg);
}
.kg-toggle-card[open] > .kg-toggle-heading::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.kg-toggle-heading:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: -2px;
}
.kg-toggle-heading-text {
  margin: 0;
  font-size: 1rem;
}
.kg-toggle-content {
  padding: 0 18px 18px;
  color: var(--text-2);
}
.kg-toggle-content p:last-child {
  margin-bottom: 0;
}
.kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.kg-btn:hover {
  border-color: var(--sky);
}
.kg-btn-accent {
  background: var(--sky);
  border-color: var(--sky);
  color: var(--on-sky);
}
.kg-btn-accent:hover {
  border-color: var(--text-1);
}
.kg-button-card {
  margin: 24px 0;
}
.kg-align-center {
  text-align: center;
}
.kg-store-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.kg-store-cta-text {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-weight: 700;
}
.kg-bookmark-card {
  margin: 24px 0;
}
.kg-bookmark-container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
  color: var(--text-1);
  text-decoration: none;
}
.kg-bookmark-title {
  font-weight: 700;
  color: var(--text-1);
}
.kg-bookmark-description {
  font-size: 14px;
  color: var(--text-2);
}
.kg-bookmark-metadata {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
}
.kg-bookmark-icon {
  width: 16px;
  height: 16px;
}
.kg-bookmark-thumbnail img {
  width: 120px;
  height: auto;
}
.kg-gallery-card {
  margin: 24px 0;
}
.kg-gallery-container {
  display: grid;
  gap: 8px;
}
.kg-gallery-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.kg-gallery-image img {
  width: 100%;
  height: auto;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.site-footer .cols {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 32px var(--gutter) 8px;
  display: grid;
  gap: 24px;
}
@media (min-width: 720px) {
  .site-footer .cols {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
.site-footer nav {
  display: grid;
  gap: 8px;
  align-content: start;
}
.site-footer nav a {
  text-decoration: none;
  color: var(--text-2);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.site-footer nav a:hover {
  color: var(--text-1);
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.foot-brand .wordmark {
  font-size: 20px;
}
.site-footer .disclaimer,
.site-footer .copyright {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: 13px;
  color: var(--text-3);
}
.site-footer .copyright {
  padding-bottom: 32px;
}

/* Legal pages (privacy, terms, data-deletion, 404): hand-written, share this sheet */
main.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px var(--gutter) 80px;
}
main.legal h1 {
  font-size: clamp(30px, 5vw, 40px);
}
main.legal h2 {
  font-size: 22px;
  margin: 32px 0 8px;
}
main.legal h3 {
  font-size: 17px;
  margin: 20px 0 4px;
}
.line {
  width: 44px;
  height: 2px;
  background: var(--sky);
}
.meta {
  font-size: 13px;
  color: var(--text-3);
}
.lang {
  display: flex;
  gap: 12px;
  margin: 16px 0 24px;
  font-size: 14px;
}
.lang a {
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
section[lang] {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.notice {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 16px;
  margin: 16px 0;
}
nav.pages {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  margin-top: 40px;
}
nav.pages a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.code {
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 16px;
  display: inline-block;
  color: var(--text-1);
}

/* Cookie prompt (scripts/site/consent.js). Accept and Reject carry equal weight, and neither is
   lime: the page's one lime moment stays its own. */
.cookie-settings {
  font: inherit;
  color: var(--text-2);
  background: none;
  border: 0;
  padding: 0;
  min-height: 32px;
  text-align: left;
  cursor: pointer;
}
.cookie-settings:hover {
  color: var(--text-1);
}
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  border-top: 1px solid var(--sky-40);
  background: var(--elevated);
}
.consent-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 16px var(--gutter) 20px;
  display: grid;
  gap: 12px;
}
.consent h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
}
.consent p {
  margin: 0;
  max-width: 48em;
  color: var(--text-2);
}
.consent a {
  color: var(--sky);
}
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.consent-actions .btn {
  flex: 1 1 140px;
  max-width: 220px;
  cursor: pointer;
}
@media (min-width: 720px) {
  .consent-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .consent-inner h2,
  .consent-inner p {
    grid-column: 1;
  }
  .consent-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-wrap: nowrap;
  }
  .consent-actions .btn {
    flex: 0 0 140px;
  }
}

/* Closed beta form (/beta/): web/beta.js posts it. The submit button is the page's one lime moment. */
.beta-form {
  display: grid;
  gap: 20px;
  max-width: 34em;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.beta-form[hidden] {
  display: none;
}
.beta-form .field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.beta-form .field > span,
.beta-form legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: 8px;
}
.beta-form small {
  font-size: 13px;
  color: var(--text-3);
}
.beta-form input[type='email'],
.beta-form input[type='text'] {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text-1);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 0;
}
.beta-form input:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 1px;
}
.beta-form input:user-invalid {
  border-color: var(--coral);
}
.beta-form .choices {
  display: grid;
  gap: 8px;
}
.beta-form .choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}
.beta-form .choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--sky);
}
.beta-form .agree {
  color: var(--text-2);
  font-size: 15px;
}
.beta-form .trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.beta-form .btn {
  justify-self: start;
  cursor: pointer;
}
.beta-form .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.form-error {
  margin: 0;
  padding: 12px 16px;
  color: var(--text-1);
  background: var(--coral-14);
  border-left: 3px solid var(--coral);
}
.beta-done {
  max-width: 34em;
  border-left: 3px solid var(--sky);
}
.beta-done:focus {
  outline: none;
}
.beta-done h3 {
  margin-top: 0;
}

/* Help Center (help.beyhk.sh) — scripts/site/help/help.css, appended to the main site's
   tokens and base styles by scripts/site/help/render.ts. Sky is the working accent here; no
   page of the Help Center has a lime moment, and coral appears only on a warning callout. */

.help-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--text-2);
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid var(--border-strong);
}

/* Home */
.help-hero {
  padding: 48px 0 32px;
  max-width: 720px;
}
.help-hero h1 {
  font-size: clamp(36px, 6vw, 56px);
}
.lede {
  font-size: 19px;
  max-width: 34em;
}
.help-search {
  margin-top: 24px;
}
.help-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.help-search input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  font: inherit;
  font-size: 17px;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  appearance: none;
}
.help-search input::placeholder {
  color: var(--text-3);
}
.help-search input:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}
.help-results {
  margin-top: 12px;
}
.help-none {
  margin: 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.help-topics {
  padding: 32px 0 8px;
  border-top: 1px solid var(--border);
}
.help-topic h3 a {
  color: var(--text-1);
  text-decoration: none;
}
.help-topic h3 a:hover {
  color: var(--sky);
}
.help-links {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.help-links li {
  margin: 0;
  border-top: 1px solid var(--border);
}
.help-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  text-decoration: none;
}
.help-links a:hover {
  text-decoration: underline;
}
.help-more {
  margin: 12px 0 0;
  font-size: 14px;
}
.help-empty {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Topic, article and contact pages share one reading column. */
.help-page {
  max-width: 720px;
  padding: 24px 0 8px;
  overflow-wrap: break-word;
}
.help-page h1 {
  font-size: clamp(32px, 5vw, 48px);
}
.help-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 0;
  margin: 0 0 24px;
  font-size: 14px;
}
.help-crumbs li {
  margin: 0;
  color: var(--text-3);
}
.help-crumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--text-3);
}
.help-crumbs a {
  color: var(--text-2);
}

/* Article rows: a topic's list and the search results. */
.help-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  border: 1px solid var(--border);
  background: var(--surface);
}
.help-list li {
  margin: 0;
}
.help-list li + li {
  border-top: 1px solid var(--border);
}
.help-list a {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  min-height: 44px;
  text-decoration: none;
}
.help-list a:hover {
  background: var(--elevated);
}
.help-row-title {
  font-weight: 600;
  color: var(--text-1);
}
.help-row-summary {
  font-size: 14px;
  color: var(--text-2);
}
.help-row-topic {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky);
}

/* Article */
.help-article header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.help-article .meta {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
}
.help-body h2 {
  font-size: 26px;
  margin-top: 36px;
}
.help-body h3 {
  font-size: 20px;
  margin-top: 28px;
}
.help-body ul,
.help-body ol {
  padding-left: 1.4em;
  margin: 0 0 1em;
}
.help-body li {
  margin-bottom: 0.5em;
}
.help-body li > ul,
.help-body li > ol,
.help-body li > p,
.help-body li > figure,
.help-body li > aside {
  margin-top: 0.5em;
}
.help-body ol > li::marker {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--sky);
}
.help-body strong {
  color: var(--text-1);
}
.help-body code {
  font-size: 0.92em;
  padding: 1px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.help-body figure {
  margin: 20px 0;
}
.help-body img {
  height: auto;
  max-height: 560px;
  border: 1px solid var(--border);
}
.help-callout {
  margin: 20px 0;
  padding: 14px 16px;
  border: 1px solid var(--sky-24);
  border-left: 3px solid var(--sky);
  background: var(--sky-7);
}
.help-callout.warn {
  border-color: var(--coral-40);
  border-left-color: var(--coral);
  background: var(--coral-14);
}
.help-callout > :last-child {
  margin-bottom: 0;
}
.help-related {
  margin-top: 40px;
}
.help-related h2 {
  font-size: 22px;
}

/* The closing "still stuck" strip and the contact cards. */
.help-still {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.help-still h2 {
  font-size: 22px;
  margin-bottom: 4px;
}
.help-still p {
  margin: 0;
}
.help-contact {
  margin-top: 24px;
}
.help-mail {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.help-404 [lang='en'] {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.help-404 h2 {
  font-size: 24px;
}