/* ibexo.games — hub and game pages. Brand tokens from docs/brand/brand.md: two grounds, one ink, one accent.
   System typeface, hard headline setting, capsule buttons, 14 px cards. Dark mode is designed, not inverted. */
:root {
  --stone: #f6f7f5;
  --panel: #ffffff;
  --panel-2: #eef3f0;
  --ink: #14181a;
  --ink-2: #45584f;
  --ink-3: #7a8d84;
  --rule: #dae5df;
  --rule-strong: #adbfb6;
  --green: #0e9f6e;
  --green-strong: #0b7f58;
  --green-soft: #e0f1e8;
  --tag-blue: #2f6fd6;
  --tag-yellow: #a9741b;
  --tag-red: #b6563b;
  --shadow: 0 18px 50px rgba(20, 24, 26, 0.10);
  --radius: 14px;
  --pill: 999px;
  --max: 1080px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --stone: #10171a;
    --panel: #161e21;
    --panel-2: #1a2427;
    --ink: #eef2f0;
    --ink-2: #a7bab0;
    --ink-3: #788c83;
    --rule: #25322c;
    --rule-strong: #3b4f45;
    --green: #2ecf9a;
    --green-strong: #5fd3a5;
    --green-soft: #16281f;
    --tag-blue: #4a8ae6;
    --tag-yellow: #c9962a;
    --tag-red: #d2725a;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--green-strong); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 18px; }
h3 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }
.lead { color: var(--ink-2); font-size: 19px; max-width: 62ch; }
.eyebrow { display: block; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 18px; }
.rule-mark { display: block; width: 44px; height: 3px; background: var(--green); border-radius: 2px; margin-bottom: 26px; }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--stone) 82%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: -0.01em; }
.brand svg { height: 26px; width: auto; fill: var(--ink); }
.brand .sep { color: var(--rule-strong); font-weight: 300; }
.brand .game { color: var(--ink-2); font-weight: 500; }
.top .brand-row { display: flex; align-items: center; gap: 12px; }
.top nav { display: flex; gap: 26px; font-size: 15px; color: var(--ink-2); }
.top nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .top nav a:not(.keep) { display: none; } }

/* ---- buttons ---- */
/* Store badges are Apple's and Google's own artwork (ADR-0030): no pill of ours around them, no padding, no
   colour, no border — the link box is the graphic and nothing else. --badge-h is the one number to change; the
   clear space both guidelines require (a quarter of the badge height) is derived from it in .stores. */
.badge { --badge-h: 48px; display: inline-flex; transition: transform 150ms ease, opacity 150ms ease; }
.badge img { display: block; height: var(--badge-h); width: auto; }
.badge:hover { transform: translateY(-1px); opacity: 0.9; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: var(--pill); background: var(--ink); color: var(--stone); font-weight: 500; font-size: 15px; border: 0; cursor: pointer;
  font-family: inherit; transition: transform 150ms ease, opacity 150ms ease;
}
.btn:hover { color: var(--stone); transform: translateY(-1px); opacity: 0.94; }
.btn.green { background: var(--green); color: #fff; }
.btn.green:hover { color: #fff; background: var(--green-strong); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
.btn.ghost:hover { color: var(--ink); border-color: var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
/* The "on the way" chip sits in the badge row, so it takes the corner radius of the badge next to it: the App
   Store badge rounds its corners at 23.8 % of its height (straight top edge starts at x 9.53 of 40), the Play
   badge at 12.5 % (rx 8.86 of 70.87). Measured from the artwork, written as a ratio so both follow --badge-h.
   With no badge beside it the chip keeps our own pill — there is nothing to match (ADR-0030). */
.soon { --badge-h: 48px; display: inline-flex; align-items: center; gap: 10px; min-height: var(--badge-h); padding: 0 20px; border-radius: var(--pill); border: 1px solid var(--rule-strong); color: var(--ink-2); font-size: 15px; }
.soon-apple { border-radius: calc(var(--badge-h) * 0.238); }
.soon-play { border-radius: calc(var(--badge-h) * 0.125); }
.soon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
/* gap = a quarter of the badge height: the minimum clear space Apple and Google both require. */
.stores { --badge-h: 48px; display: flex; flex-wrap: wrap; gap: calc(var(--badge-h) / 4); align-items: center; }
.arrow::after { content: ' →'; }

/* ---- hub hero ---- */
.hub-hero { padding: 88px 0 56px; }
.hub-hero h1 { font-size: clamp(46px, 8vw, 96px); max-width: 14ch; }
.hub-hero .lead { margin-top: 28px; font-size: 20px; }
@media (max-width: 720px) { .hub-hero { padding: 56px 0 32px; } }

/* ---- games wall ---- */
.games { padding-top: 40px; }
.tile { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 40px; }
.tile .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.tile .tag::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--tag, var(--green)); }
.tile[data-tag='green'] { --tag: var(--green); }
.tile[data-tag='blue'] { --tag: var(--tag-blue); }
.tile[data-tag='yellow'] { --tag: var(--tag-yellow); }
.tile[data-tag='red'] { --tag: var(--tag-red); }
.tile h3 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.025em; line-height: 1.05; }
.tile p { margin-top: 14px; color: var(--ink-2); max-width: 46ch; }
.tile .actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.tile .shot { justify-self: center; width: min(250px, 100%); border-radius: 32px; overflow: hidden; border: 1px solid var(--ink); box-shadow: var(--shadow); aspect-ratio: 660 / 1434; background: var(--ink); }
.tile .shot img { width: 100%; height: 100%; object-fit: cover; }
.games .more { margin-top: 22px; color: var(--ink-3); font-size: 15px; max-width: 62ch; }
@media (max-width: 860px) { .tile { grid-template-columns: 1fr; padding: 28px; } .tile .shot { width: min(220px, 70%); } }

/* ---- principles ---- */
.principles { background: var(--panel-2); }
.principles .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 40px; }
.principles .item { background: var(--panel); padding: 28px; }
.principles .item .n { font-size: 12.5px; letter-spacing: 0.08em; color: var(--green); font-weight: 600; display: block; margin-bottom: 12px; }
.principles .item p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 640px) { .principles .grid { grid-template-columns: 1fr; } }

/* ---- about ---- */
.about .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: stretch; }
/* The crest: stacked lockup on a card, so the mark has a frame instead of standing alone in the white space. */
.about .crest {
  display: grid; place-content: center; height: 100%; min-height: 260px; padding: 40px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--ink);
}
.about .crest svg { display: block; width: 100%; height: auto; fill: currentColor; }
.about p { color: var(--ink-2); }
.about p + p { margin-top: 16px; }
.about .contact { margin-top: 24px; color: var(--ink); }
.about .contact a { color: var(--green-strong); text-decoration: underline; text-decoration-color: var(--green-soft); text-underline-offset: 3px; }
@media (max-width: 860px) { .about .wrap { grid-template-columns: 1fr; gap: 28px; } .about .crest { max-width: 360px; min-height: 0; padding: 32px; } }

/* ---- game hero ---- */
.hero { padding: 72px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 48px; align-items: center; }
/* The claim stands under the h1, not inside it (the h1 carries only the name, for search). The wrapper takes the
   h1 type so the claim keeps its size relative to it. */
.hero .headline { font-size: clamp(44px, 7vw, 88px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; }
.hero h1 { font-size: 1em; }
.hero .claim { color: var(--green); font-size: 0.66em; margin-top: 0.15em; }
.hero .lead { margin: 26px 0 34px; }
.trial-note { margin-top: 18px; color: var(--ink-3); font-size: 15px; max-width: 52ch; }
.phone { position: relative; justify-self: center; width: min(320px, 100%); aspect-ratio: 660 / 1434; border-radius: 42px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--ink); background: var(--ink); }
.phone img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .phone { width: min(260px, 80%); } }

/* ---- quote ---- */
/* 40 px hero bottom + 40 px here = 80 px above the quote; the same 80 px below it before the next panel (Tobias 2026-09-12). */
.quote { padding: 40px 0 80px; }
.quote blockquote { margin: 0; border-left: 3px solid var(--green); padding: 6px 0 6px 28px; }
.quote blockquote p { font-size: clamp(26px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.quote blockquote footer { margin-top: 12px; color: var(--ink-3); font-size: 15px; }

/* ---- left out ---- */
.leftout { background: var(--panel-2); }
.leftout .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.leftout ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; font-size: clamp(19px, 2.3vw, 24px); font-weight: 500; line-height: 1.9; color: var(--ink-2); letter-spacing: -0.01em; }
.leftout li { break-inside: avoid; text-decoration: line-through; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
@media (max-width: 860px) { .leftout .wrap { grid-template-columns: 1fr; } }

/* ---- features ---- */
.features .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.feature { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; }
.feature .num { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-soft); color: var(--green-strong); font-weight: 600; font-size: 14px; margin-bottom: 18px; }
.feature p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) { .features .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features .grid { grid-template-columns: 1fr; } }

/* ---- screenshots ---- */
.shots .strip { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 32px 24px 24px; margin: 0 -24px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.shot { flex: none; width: 250px; scroll-snap-align: start; }
.shot .frame { border-radius: 34px; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); box-shadow: var(--shadow); aspect-ratio: 660 / 1434; }
.shot .frame img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { margin-top: 14px; font-size: 15px; color: var(--ink-2); padding: 0 4px; }
.shot figure { margin: 0; }

/* ---- pricing ---- */
.pricing { background: var(--panel-2); }
.trial { display: grid; grid-template-columns: auto 1fr; gap: 24px 40px; align-items: start; margin: 40px 0 28px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--rule); }
.trial h3 { color: var(--green-strong); }
.trial p { color: var(--ink-2); }
@media (max-width: 720px) { .trial { grid-template-columns: 1fr; gap: 10px; } }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.tier .name { color: var(--ink-2); font-size: 16px; }
.tier .price { font-size: 46px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 8px 0 4px; }
.tier .note { color: var(--ink-3); font-size: 15px; }
@media (max-width: 720px) { .tiers { grid-template-columns: 1fr; } }
.footnote { margin-top: 22px; color: var(--ink-3); font-size: 15px; max-width: 72ch; }

/* ---- faq ---- */
.faq .list { margin-top: 32px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 300; color: var(--green); transition: transform 200ms ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .answer { padding: 0 0 24px; color: var(--ink-2); max-width: 72ch; }
.interest { margin-top: 16px; }

/* ---- closing: the store row again for whoever read to the end ---- */
.closing { background: var(--panel-2); }
.closing .lead { margin: 18px 0 32px; }
@media (min-width: 861px) { .line { display: block; } }
.pill { font: inherit; font-size: 15px; font-weight: 500; color: var(--green-strong); background: var(--green-soft); border: 0; border-radius: var(--pill); padding: 10px 18px; cursor: pointer; transition: opacity 150ms ease; }
.pill:hover { opacity: 0.85; }
.pill[disabled] { cursor: default; opacity: 1; background: transparent; padding-left: 0; color: var(--ink-2); font-weight: 400; }

/* ---- footer ---- */
footer.site { padding: 56px 0 40px; color: var(--ink-3); font-size: 14px; border-top: 1px solid var(--rule); }
footer.site .links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 20px; color: var(--ink-2); font-size: 15px; }
footer.site p + p { margin-top: 6px; }
footer.site .listings { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } /* directory badges, own copies (assets/listings) */
footer.site a.listing { display: inline-block; }
footer.site a.listing img { display: block; }
footer.site a.lockup { display: inline-block; margin-bottom: 22px; color: var(--ink-3); }
footer.site a.lockup:hover { color: var(--green-strong); } /* same hover as the header lockup (Issue #92) */
footer.site .lockup { display: block; height: 26px; width: auto; fill: currentColor; }
/* Phones: one link per line instead of a wrap that lands 2+3+1 (Issue #91). 560 px is this sheet's phone
   breakpoint (form rows, press logos); 860 px is already tablet width. Each link is a full-height tap target. */
@media (max-width: 560px) {
  footer.site .links { flex-direction: column; gap: 0; margin: -8px 0 12px; }
  footer.site .links a { padding: 8px 0; }
}

/* ---- sub pages (support, press, legal) ---- */
.page { padding: 56px 0 96px; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(38px, 6vw, 64px); margin-bottom: 10px; }
.page .sub { color: var(--ink-3); margin-bottom: 40px; }
.page h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; margin: 40px 0 10px; }
.page p, .page li { color: var(--ink-2); }
.page p + p { margin-top: 12px; }
.page ul { padding-left: 20px; margin: 10px 0; }
.page .card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; margin: 28px 0; }
.page .card h2 { margin-top: 0; }
.page a.inline { color: var(--green-strong); text-decoration: underline; text-decoration-color: var(--green-soft); text-underline-offset: 3px; }
.mail { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; color: var(--ink); margin: 8px 0 4px; }
.back { display: inline-block; margin-bottom: 24px; color: var(--ink-2); font-size: 15px; }
.back::before { content: '← '; }

/* ---- feedback form ---- */
.form { display: grid; gap: 18px; }
.form label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.form .hint { display: block; font-size: 13px; color: var(--ink-3); margin-top: 6px; font-weight: 400; }
/* Required marker: green star in the label plus the legend above the form (Issue #93). --green in both schemes. */
.req { color: var(--green); font-weight: 600; }
.form label .req { margin-left: 3px; }
.page .req-note { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--stone); border: 1px solid var(--rule-strong);
  border-radius: 10px; padding: 12px 14px; outline-offset: 2px;
}
.form textarea { min-height: 160px; resize: vertical; }
/* Own chevron for the selects: the native one sits flush at the right edge; ours keeps the same 14 px distance
   as the text on the left (Wunsch Tobias 2026-09-12). Stroke colour = --ink, light and dark. */
.form select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2314181a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
@media (prefers-color-scheme: dark) {
  .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23eef2f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--green); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form .kinds { display: flex; gap: 10px; flex-wrap: wrap; }
.form .kinds label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--rule-strong); border-radius: var(--pill); cursor: pointer; margin: 0; font-weight: 500; }
.form .kinds input { width: auto; margin: 0; accent-color: var(--green); }
.form .kinds label:has(input:checked) { border-color: var(--green); background: var(--green-soft); color: var(--green-strong); }
.form .actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form .status { font-size: 15px; color: var(--ink-2); }
.form .status.ok { color: var(--green-strong); }
.form .status.err { color: var(--tag-red); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .privacy { font-size: 13px; color: var(--ink-3); max-width: 62ch; }

/* ---- press ---- */
.facts { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-size: 16px; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts th { width: 34%; font-weight: 500; color: var(--ink); padding-right: 16px; }
.facts td { color: var(--ink-2); }
/* `.page ul.files`, not `.files`: the generic `.page ul` (0-1-1) indents every list by 20 px and would win over a
   plain class (0-1-0). The file list has no bullets, so it runs the full content width (Issue #90). */
.page ul.files { list-style: none; padding-left: 0; margin: 12px 0 0; }
.files li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.files li a { color: var(--green-strong); font-weight: 500; white-space: nowrap; }
.files li span { color: var(--ink-2); text-align: right; }
.logos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.logos div { border-radius: var(--radius); padding: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); }
.logos .light { background: #f6f7f5; }
.logos .dark { background: #10171a; }
.logos img { height: 44px; width: auto; }
@media (max-width: 560px) { .logos { grid-template-columns: 1fr; } }

/* protected e-mail address: a button until the first click, then a normal mailto link (main.js).
   Inline, so the button and the revealed address sit on the baseline of the sentence around them. */
/* The button and the revealed address share one fixed box height (--mail-h): revealing must not make the line
   grow or shrink, otherwise everything below jumps (Entscheid Tobias 2026-09-23). Measured before the fix: the
   paragraph went from 43.25 px to 26.34 px on the home page. Both states are inline-block, same height, same
   vertical-align — that keeps the line box identical by construction instead of by matching font metrics. */
.mailhide { --mail-h: 43px; display: inline; }
.mailhide noscript { color: var(--ink-2); }
.mailhide .reveal { height: var(--mail-h); padding: 0 18px; line-height: 1; margin-left: 6px; vertical-align: middle; }
.mailhide .mailshown {
  display: inline-block; height: var(--mail-h); line-height: var(--mail-h); vertical-align: middle;
  margin-left: 6px; color: var(--green-strong); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--green-soft); text-underline-offset: 3px;
}
/* support page: the address is its own block there, not part of a sentence */
.mailhide.big { --mail-h: 50px; }
.mailhide.big .reveal { font-size: 17px; padding: 0 22px; margin-left: 0; }
/* no margin here: it would beat the shared height on specificity and bring the jump back */
.mailhide.big .mailshown { margin: 0; font-size: 22px; color: var(--ink); text-decoration: none; }
.mailhide + .hint { display: block; font-size: 13px; color: var(--ink-3); margin-top: 10px; }

/* 404 */
.notfound .grid404 {
  display: grid; grid-template-columns: repeat(3, 1fr); width: 186px; margin-bottom: 36px;
  border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--panel);
}
.notfound .cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--rule);
}
.notfound .cell.filled { color: var(--green); background: var(--green-soft); }
.notfound .tracetitle { margin-top: 34px; color: var(--ink); font-weight: 500; }
.notfound .trace { list-style: none; padding: 0; margin: 10px 0 34px; }
.notfound .trace li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid var(--rule); }
.notfound .trace li::before { content: '·'; position: absolute; left: 8px; color: var(--green); font-weight: 700; }
.notfound .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }