/* uniconduct.com — the stylesheet for every page of the site.
 *
 * Which rules a page gets is decided by a class on its <body>:
 *
 *   .home      the company home page (/)
 *   .app-home  an app's landing page (/apps/intuition_check/)
 *   .doc       a text page — privacy, how-to, Q&A, support, version history;
 *              each one also carries .doc-<page> for the few rules of its own
 *
 * Two conventions keep this file honest:
 *
 * 1. A rule that belongs to one family is written :where(.doc) p, never
 *    .doc p. :where() adds nothing to specificity, so the scoped rule carries
 *    exactly the weight the same selector had while it lived inside the page,
 *    and the class-based rules layered on top of it (.page-eyebrow, .effective,
 *    .lang-menu a …) keep winning exactly as they did before.
 * 2. A rule with no family prefix is either shared by every page, or named
 *    after something only one family has (.release, .toc, .platform-card) —
 *    in which case it is written inside that family's section.
 *
 * Where two rules carry the same weight, order decides: shared first, then
 * the family, then the single page, then the narrow-screen rules at the end.
 */

/* ============================================================
   Tokens, reset, page
   ============================================================ */

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

:root {
  --bg: #f7f5f2;
  --surface: #ffffff;
  --ink: #0f0e0d;
  --ink-muted: #6b6860;
  --accent: #1a1a2e;
  --accent2: #c8974a;
  --border: rgba(15,14,13,0.1);

  /* How much room an in-page link has to leave above its target. The nav is
     pinned to the top of the window, so without this the first line of the
     target lands underneath it. site.js measures the nav — which takes two or
     three rows on a narrow screen, and more in some languages — and keeps this
     in step; 6rem is the fallback for the one-row nav when the script has not
     run. */
  --nav-clearance: 6rem;
}

html { scroll-behavior: smooth; }

/* Every element that can be the target of a "#" link, named once: whatever
   carries the id is what the browser scrolls to — a <section> on the how-to
   page, a group label in the Q&A, the release entry in the version history. */
[id] { scroll-margin-top: var(--nav-clearance); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Navigation
   ============================================================ */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.55rem 1.75rem;
  padding: 1.25rem 4rem;
  background: rgba(247,245,242,0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}

/* The nav wraps instead of overflowing: when the links no longer fit beside
   the brand and the language picker, they move to a row of their own. */
.nav-links {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
  margin-inline-start: auto;
}

.nav-link {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--ink); }

.nav-version {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--accent2);
  padding-bottom: 1px;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-version:hover { color: var(--accent2); }

/* ============================================================
   Language switcher — generated markup, identical on every page
   ============================================================ */

/* A flex box, so the height of the <details> is the height of its summary.
   Left as a block it would be as tall as a line of body text (1rem × 1.7)
   instead, and centring that taller box next to the nav's other items lifted
   the language name ~2.5px above their baseline. */
.lang-switch { position: relative; display: flex; align-items: center; }
.lang-switch summary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  list-style: none; cursor: pointer;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: color 0.2s;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover, .lang-switch[open] summary { color: var(--ink); }
.lang-chevron { transition: transform 0.2s; }
.lang-switch[open] .lang-chevron { transform: rotate(180deg); }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 0.6rem);
  /* Roomy, but never wider than the window: site.js pulls the menu back
     inside when it hangs over an edge, and that only works if it fits there
     in the first place. min() because a plain min-width would win over
     max-width and keep the overflow on a narrow phone. */
  /* Wide enough that no note wraps: the widest row is German's "Die
     Übersetzung kann Ungenauigkeiten enthalten", which puts the menu's
     max-content width at 323px, and the scrollbar takes 11px more once the
     list overflows. 21.5rem = 344px covers both with a little slack for a
     font that measures differently. A phone still clamps this to the window
     via max-width below, and there a note may wrap again — nothing else
     fits. */
  min-width: min(21.5rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  /* Thirteen languages, and eight of them carry a note under the name, so the
     list is already ~600px tall — on a short window (a phone turned sideways,
     a laptop with a small browser window) its foot falls past the bottom of
     the window. The menu hangs off the fixed nav, so it takes no part in the
     page's own scrolling and whatever is down there cannot be reached at all.
     Hence: never taller than what is left of the window below the nav, and
     scroll inside when it would be.

     --nav-clearance is the nav's measured height (site.js) — the nav wraps to
     two or three rows on a narrow screen and in a language with long words, so
     a fixed number would be wrong exactly where the room is tightest. Its
     stylesheet default is a one-row nav, which is the right guess when the
     script has not run.

     dvh rather than vh: on a phone vh is the tallest the window ever gets, so
     with the URL bar showing, the last entries would sit under it. Only
     overflow-y is set — that makes overflow-x compute to auto rather than
     visible, so an autonym too long for the box still scrolls into view
     instead of being clipped. */
  max-height: calc(100dvh - var(--nav-clearance) - 1rem);
  overflow-y: auto;
  /* Reaching the end of the list must not start scrolling the page behind it. */
  overscroll-behavior: contain;
  margin: 0; padding: 0.35rem; list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15,14,13,0.10);
}
/* macOS keeps the scrollbar hidden until something scrolls ("Show scroll bars:
   When scrolling", the default) and brings it back only for a scroll gesture,
   which a mouse cannot make. With a mouse there was therefore no bar to grab
   and — worse — nothing on screen saying the list goes on past the fold.

   Styling the pseudo-element is what opts the menu out of that overlay bar and
   gives it an ordinary one, present the whole time the list overflows. It has
   to be the pseudo-element and not the standard `scrollbar-width` /
   `scrollbar-color`: WebKit honours those *instead of* the pseudo-elements and
   then keeps the overlay. Measured in WebKit on this page — the bar occupies
   0px of layout width with the standard properties set, 11px without them. */
.lang-menu::-webkit-scrollbar { width: 11px; }
.lang-menu::-webkit-scrollbar-track { background-color: transparent; }
.lang-menu::-webkit-scrollbar-thumb {
  /* background-color, not the background shorthand: the shorthand would reset
     background-clip, and the transparent border plus content-box clip is what
     insets the thumb from the menu's rounded edge. */
  background-color: rgba(15,14,13,0.32);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
.lang-menu::-webkit-scrollbar-thumb:hover { background-color: rgba(15,14,13,0.5); }
/* Firefox has no ::-webkit-scrollbar, and there the standard properties are
   the way to the same result — so they are kept, but only where the pseudo-
   element is unknown, which is exactly where they do not cost the overlay. */
@supports not selector(::-webkit-scrollbar) {
  .lang-menu { scrollbar-width: thin; scrollbar-color: rgba(15,14,13,0.32) transparent; }
}
.lang-menu li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.lang-menu a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.lang-menu a:hover { background: var(--bg); color: var(--ink); }
/* The tick marking the language being read sits before its name. Every row
   reserves the same room for it, empty on the rest, so the names line up in a
   column instead of the current one being indented on its own. It is ::before
   rather than a first flex item, and the box is empty rather than holding a
   see-through tick, so a screen reader is not told "tick" on all thirteen
   rows — the row already carries aria-current, which is what states it. In a
   right-to-left language the leading side flips with the flex direction, so
   the mark follows the text. */
.lang-menu a::before {
  content: "";
  flex: none;
  width: 1em;
  font-size: 0.85rem;
}
.lang-menu a[aria-current]::before { content: "✓"; color: var(--accent2); }
.lang-entry { display: flex; flex-direction: column; gap: 0.1rem; }
.lang-entry > span:first-child { white-space: nowrap; }
.lang-note, .lang-page-note {
  font-size: 0.72rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
.lang-page-note { max-width: 11rem; }

/* ============================================================
   Footer
   ============================================================ */

footer {
  border-top: 1px solid var(--border);
  padding: 2rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* margin: 0 keeps the paragraph clear of the bottom margin the text pages
   give every <p>. */
footer p { font-size: 0.82rem; color: var(--ink-muted); margin: 0; }

.footer-logo {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
  border-bottom: none;
}

.footer-link {
  font-size: 0.82rem; color: var(--ink-muted); text-decoration: none;
  border-bottom: 1px solid var(--accent2);
}

/* ============================================================
   Pieces used by more than one family
   ============================================================ */

/* The margin is the page's business: the text pages set it below the box, the
   how-to above and below, the app landing above only. */
.highlight-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent2);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.8;
}

.highlight-box strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 0.5rem;
}

/* A word that names something on screen — a button, a screen, a setting. */
.ui {
  font-style: normal;
  color: var(--ink);
  font-weight: 400;
}

/* ============================================================
   The two landing pages share their hero and their "coming soon" block;
   sizes and spacing are set per page further down.
   ============================================================ */

.hero {
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(200,151,74,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(26,26,46,0.06) 0%, transparent 60%),
    var(--bg);
}

.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 1.5rem;
  position: relative; z-index: 1;
}

.hero-title {
  font-family: var(--font-serif);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  position: relative; z-index: 1;
}

.hero-title em { font-style: italic; color: var(--accent2); }

.hero-sub {
  margin-top: 2rem;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--ink-muted);
  position: relative; z-index: 1;
}

.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: rgba(255,255,255,0.6);
}

.section-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent2);
}

.coming { background: var(--accent); color: #f7f5f2; }
.coming .section-label { color: var(--accent2); }

.coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.5rem;
  border: 1px solid rgba(200,151,74,0.4);
  border-radius: 100px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--accent2);
}

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ============================================================
   The company home page — .home
   ============================================================ */

/* The nav is the shared one: same markup, same rules, same wrapping — see
   "Navigation" above and the narrow-screen rules at the end. */

:where(.home) section { padding: 7rem 4rem; }
:where(.home) .section-label { margin-bottom: 3rem; }

:where(.home) .hero {
  min-height: 100vh;
  padding: 0 4rem 5rem;
}
:where(.home) .hero-eyebrow { opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
:where(.home) .hero-title {
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  max-width: 14ch;
  opacity: 0; animation: fadeUp 0.8s 0.4s forwards;
}
:where(.home) .hero-sub {
  max-width: 42ch;
  opacity: 0; animation: fadeUp 0.8s 0.6s forwards;
}

.hero-platform {
  margin-top: 3rem;
  display: flex; gap: 1rem; flex-wrap: wrap;
  position: relative; z-index: 1;
  opacity: 0; animation: fadeUp 0.8s 0.8s forwards;
}

.pill-icon { font-size: 0.95rem; }

.hero-line {
  position: absolute; bottom: 0; inset-inline-start: 4rem;
  width: 1px; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--accent2));
  z-index: 1;
  opacity: 0; animation: fadeIn 1s 1.2s forwards;
}

.coming-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(200,151,74,0.5);
  border-radius: 100px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--accent2);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.coming-cta:hover { background: rgba(200,151,74,0.12); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.about-heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  color: var(--ink);
}

.about-body {
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 1.9;
}

.about-body p + p { margin-top: 1.2rem; }

.platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 4rem;
}

.platform-card {
  background: var(--surface);
  padding: 2.5rem 2rem;
  transition: background 0.3s;
}

.platform-card:hover { background: #fdfcfb; }

/* "Planned" beside a platform the studio has not shipped for yet (the
   iPad and Mac cards, the macOS and iPadOS pills): quieter than the name. */
.platform-status {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  vertical-align: middle;
  margin-left: 0.35rem;
}

.platform-icon {
  font-size: 2rem;
  margin-bottom: 1.2rem;
  display: block;
}

.platform-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.platform-desc {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.7;
}

.coming-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.coming-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.coming-title em { font-style: italic; color: var(--accent2); }

.coming-body {
  font-size: 1rem;
  color: rgba(247,245,242,0.6);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.contact-heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
}

.contact-detail {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-top: 0.4rem;
}

.contact-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

.contact-item:first-child { border-top: 1px solid var(--border); }

.contact-item-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.3rem;
}

.contact-item-value {
  font-size: 1rem;
  color: var(--ink);
}

/* ============================================================
   An app's landing page — .app-home
   ============================================================ */

:where(.app-home) section { padding: 5rem 4rem; }
:where(.app-home) .section-label { margin-bottom: 2rem; }

:where(.app-home) .hero {
  min-height: 70vh;
  padding: 9rem 4rem 5rem;
}
:where(.app-home) .hero-title {
  font-size: clamp(3rem, 7vw, 6rem);
  max-width: 16ch;
}
:where(.app-home) .hero-sub { max-width: 52ch; }

:where(.app-home) .highlight-box { margin-top: 1.5rem; max-width: 70ch; }
:where(.app-home) .coming-badge { margin-top: 1.5rem; }

.hero-pills {
  margin-top: 2.5rem;
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  position: relative; z-index: 1;
}

.section-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.section-body {
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 1.9;
  max-width: 70ch;
}

.section-body p + p { margin-top: 1rem; }
/* A short list inside a section's text (the app page's "Separately from the
   subscription" pair). Logical properties, so the bullets sit on the right on
   the RTL pages. */
.section-body ul { margin-block-start: 0.4rem; padding-inline-start: 1.3rem; }
.section-body p + ul { margin-block-start: 0.4rem; }

.coming .section-heading { color: #f7f5f2; }
.coming .section-body { color: rgba(247,245,242,0.7); }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 3rem;
}

.feature-card {
  background: var(--surface);
  padding: 2.2rem 1.8rem;
}

.feature-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.feature-desc {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.75;
}

.set-list {
  margin-top: 3rem;
  display: flex; flex-direction: column;
  gap: 1.5px;
  background: var(--border);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.set-row { background: var(--surface); padding: 1.6rem 1.8rem; }

.set-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

.set-name { font-family: var(--font-serif); font-size: 1.2rem; }

.set-meta {
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 70ch;
}

/* Every image in the set, wrapping to as many rows as it takes — Zodiac
   ships 13 tiles, so a non-wrapping strip would overflow a phone. */
.set-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.set-thumbs img { width: 52px; height: 52px; border-radius: 10px; display: block; }
/* The "?" cover is never an answer — dashed outline sets it apart. */
.set-thumbs .is-cover { outline: 1px dashed rgba(15,14,13,0.28); outline-offset: 2px; }

.set-price {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent2);
  white-space: nowrap;
}

.store-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  margin-inline-start: 1rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(200,151,74,0.5);
  border-radius: 100px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--accent2);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.store-cta:hover { background: rgba(200,151,74,0.12); }

.links-row {
  display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem;
}
.links-row a {
  font-size: 0.9rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--accent2); padding-bottom: 2px;
}
.links-row a:hover { color: var(--accent2); }

/* ============================================================
   The text pages — .doc
   ============================================================ */

:where(.doc) main {
  max-width: 720px;
  margin: 0 auto;
  padding: 9rem 2rem 6rem;
}

:where(.doc) a { color: var(--ink); border-bottom: 1px solid var(--accent2); text-decoration: none; }
:where(.doc) a:hover { color: var(--accent2); }

.page-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 1rem;
}

:where(.doc) h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.effective {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 3.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

:where(.doc) section { margin-bottom: 2.8rem; }

:where(.doc) h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

:where(.doc) p {
  font-size: 0.97rem;
  color: var(--ink-muted);
  line-height: 1.9;
  margin-bottom: 0.8rem;
}

:where(.doc) p:last-child { margin-bottom: 0; }

:where(.doc) ul, :where(.doc) ol { margin: 0 0 0.8rem 1.2rem; }

:where(.doc) li {
  font-size: 0.97rem;
  color: var(--ink-muted);
  line-height: 1.9;
  margin-bottom: 0.4rem;
}

:where(.doc) ol li { padding-inline-start: 0.3rem; }

:where(.doc) .highlight-box { margin-bottom: 3rem; }

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ---------- How-to — .doc-how-to ---------- */

/* Its sections are the targets of the table of contents; the room they leave
   for the nav comes from [id] at the top of this file. */
:where(.doc-how-to) section { margin-bottom: 3rem; }
:where(.doc-how-to) h2 {
  font-size: 1.5rem;
  margin-bottom: 0.9rem;
}
:where(.doc-how-to) .highlight-box { margin: 1.5rem 0; }

.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent2);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 3rem;
}
.toc strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 0.75rem;
}
.toc ol { margin: 0 0 0 1.1rem; }
.toc li { margin-bottom: 0.35rem; }

/* ---------- Q&A — .doc-qa ---------- */

:where(.doc-qa) h2::before {
  content: "Q.";
  color: var(--accent2);
  font-style: italic;
  margin-inline-end: 0.4rem;
}

.group-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 2.5rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
/* The intro paragraph already draws a bottom rule; the first group label must not add a second one. */
.effective + .group-label { border-top: none; padding-top: 0; }

/* ---------- Version history — .doc-versions ---------- */

/* No dated intro line under the title here, so the title carries the gap. */
:where(.doc-versions) h1 { margin-bottom: 3.5rem; }

/* Timeline of releases */
.release {
  position: relative;
  padding: 0 0 2.6rem 1.75rem;
  border-inline-start: 1px solid var(--border);
}
.release:last-child { border-left-color: transparent; padding-bottom: 0; }

.release::before {
  content: "";
  position: absolute;
  left: -5px; top: 0.35rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent2);
}
.release.latest::before {
  box-shadow: 0 0 0 4px rgba(200,151,74,0.18);
}

.release-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

/* The id of a release sits on the .release entry, not on this line, so the
   room for the nav is left there — by [id] at the top of this file. */
.release-version {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1;
}

.release-date {
  font-size: 0.82rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.tag-new {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent2);
  border: 1px solid var(--accent2);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  align-self: center;
}

/* The gap between releases is the entry's own padding, so the list adds none. */
.release > ul { margin-bottom: 0; }

:where(.doc-versions) li strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   Narrow screens
   ============================================================ */

/* Below this width the nav no longer fits on one line in every language, so
   the links take a row of their own under the brand and the language picker —
   on every page, and with nothing hidden or pushed off screen. */
@media (max-width: 900px) {
  .nav-links {
    order: 2; flex: 1 0 100%; margin-inline-start: 0; column-gap: 1.25rem;
  }
  .nav-link, .nav-version { white-space: nowrap; }
}

@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }

  /* On phones the nav can take two or three rows, so it flows with the page
     (still pinned while scrolling) instead of covering the content. The home
     page keeps its nav fixed: its hero is a full viewport tall with the words
     at the bottom, so the rows the nav takes cover nothing. */
  :where(.app-home, .doc) nav { position: sticky; left: auto; right: auto; }

  :where(.home) .hero,
  :where(.home) section,
  :where(.home) footer { padding-inline-start: 1.5rem; padding-inline-end: 1.5rem; }
  :where(.home) .hero { padding-bottom: 4rem; }
  :where(.home) .about-grid,
  :where(.home) .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  :where(.home) .platforms-grid { grid-template-columns: 1fr; }
  :where(.home) .hero-line { inset-inline-start: 1.5rem; }

  :where(.app-home) .hero,
  :where(.app-home) section,
  :where(.app-home) footer { padding-inline-start: 1.5rem; padding-inline-end: 1.5rem; }
  :where(.app-home) .hero { min-height: 0; padding-top: 2rem; padding-bottom: 3rem; }
  :where(.app-home) .features-grid { grid-template-columns: 1fr; }
  :where(.app-home) .set-row { padding: 1.3rem 1.4rem; gap: 1rem; }
  :where(.app-home) .set-thumbs img { width: 44px; height: 44px; }

  :where(.doc) main { padding: 2.25rem 1.5rem 4rem; }
  :where(.doc) footer { padding: 1.5rem; }
}

@media (max-width: 560px) {
  .nav-links { column-gap: 1.1rem; }
}

/* ============================================================
   Scripts without an italic, and scripts that cannot be tracked
   ============================================================ */

/* The Devanagari, Arabic and Hebrew faces have no italic, and neither has
   the Thai sans (fonts.css). A browser that slants an upright face on its own
   produces a defect, not an italic, so style synthesis is off on these pages:
   the gold accent words stay upright, in colour only, and a Latin word inside
   them (Apple, Check.) keeps DM Serif Display's real italic. Weight synthesis
   stays on, as on every other page. */
:lang(hi), :lang(th), :lang(ar), :lang(he) { font-synthesis: weight; }

/* In running text an <em> would now look like the words around it; it gets
   the treatment of .ui instead — full ink, one weight up. The gold accent
   words of the headlines are not running text and are excluded: this
   selector has the same specificity as `.hero-title em` and comes later, so
   without the :not() it turned the home page's gold «Apple.» black. */
em:is(:lang(hi), :lang(th), :lang(ar), :lang(he)):not(.hero-title em, .coming-title em) {
  color: var(--ink);
  font-weight: 400;
}

/* Letter-spacing pulls joined Arabic letters apart, breaks the headline
   bar of Devanagari and lifts Thai vowel and tone marks off their consonants,
   so the tracked labels, the nav and the hero title are set solid on those
   pages. The language is tested on the element itself, not on an ancestor,
   so the Latin brand lettering marked lang="en" (the «Intuition Check.»
   titles) keeps the English tracking and gold italic. */
:is(.nav-link, .nav-version, .lang-switch summary,
  .highlight-box strong, .hero-eyebrow, .hero-title, .pill, .section-label,
  .coming-badge, .coming-cta, .contact-item-label, .set-price, .store-cta,
  .page-eyebrow, .toc strong, .group-label, .release-date, .tag-new, .platform-status):is(:lang(ar), :lang(hi), :lang(th)) {
  letter-spacing: normal;
}