/* rererepo.com — shared stylesheet for the static site (site/*.html, site/en/*.html).
   No build step, no JavaScript. Web fonts are self-hosted (fonts.css + fonts/, vendored from
   Google Fonts by scripts/site/fetch-fonts.ts — every page links fonts.css before this file), so
   the strict CSP in site/_headers stays first-party only (style-src / font-src 'self', no
   script-src). Faces: Archivo for Latin display copy (the face bun.sh sets its headlines in),
   Noto Sans JP for everything else — body, Japanese display glyphs, UI. Both are variable
   (wght 100–900), so weights below are free to pick.

   Look (2026-09-12, third pass — modelled on bun.sh): flat and editorial. High-contrast
   near-black on white (inverted for dark), one accent colour used sparingly (a highlighted word,
   markers, links), heavy tightly-set display headings, monospace small-caps kickers, and 1px
   rules that frame the content column and separate sections. No shadows, no gradients, no
   glows, no entrance animations, radii of 4px or none.

   Theme: follows the OS appearance (`color-scheme: light dark`). The light palette is the
   default on :root; the `prefers-color-scheme: dark` block overrides the same tokens and nothing
   else — every colour used by a component rule must be one of these tokens, never a literal.
   There is no manual toggle (no script-src in the CSP).

   Layout tokens: --max (46rem) is the reading measure shared with the legal documents and the
   release notes; --max-wide (72rem) is the landing page's stage for screenshots. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-raise: #f6f6f8;
  --fg: #0a0a0a;
  --fg-soft: #3a3a44;
  --fg-muted: #6b6b78;
  --fg-faint: #9a9aa6;
  --accent: #5b52f5;
  --accent-strong: #4a41e0;
  --accent-bg: rgba(91, 82, 245, 0.08);
  --line: #e4e4ea;
  --line-strong: #0a0a0a;
  --surface: #f6f6f8;
  --warn-fg: #6e4a00;
  --warn-line: #e0b657;
  /* Inverted band: ink and paper are the page's fg/bg by another name, plus the muted steps
     and the accent that read on the swapped background. */
  --ink: #0a0a0a;
  --paper: #ffffff;
  --paper-soft: rgba(255, 255, 255, 0.8);
  --paper-muted: rgba(255, 255, 255, 0.62);
  --paper-line: rgba(255, 255, 255, 0.22);
  --paper-surface: rgba(255, 255, 255, 0.08);
  --accent-on-ink: #a8a2ff;
  --radius: 4px;
  --max: 46rem;
  --max-wide: 72rem;
  --pad-x: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --bg-raise: #141416;
    --fg: #f5f5f7;
    --fg-soft: #c9c9d2;
    --fg-muted: #8c8c98;
    --fg-faint: #62626c;
    --accent: #a8a2ff;
    --accent-strong: #c2bdff;
    --accent-bg: rgba(168, 162, 255, 0.12);
    --line: #262629;
    --line-strong: #f5f5f7;
    --surface: #141416;
    --warn-fg: #f0cf7a;
    --warn-line: #7a5a12;
    --ink: #f5f5f7;
    --paper: #0a0a0a;
    --paper-soft: rgba(10, 10, 10, 0.8);
    --paper-muted: rgba(10, 10, 10, 0.62);
    --paper-line: rgba(10, 10, 10, 0.2);
    --paper-surface: rgba(10, 10, 10, 0.06);
    --accent-on-ink: #5b52f5;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  overflow-x: clip;
}

body {
  min-height: 100%;
  font-family:
    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.75;
  padding: 0 var(--pad-x);
  font-feature-settings: "palt";
  overflow-x: clip;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

code,
kbd,
pre,
.mono {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.05rem 0.4rem;
}

pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  line-height: 1.6;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
}

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

/* Display type: heavy, tight, short line-height. Archivo carries the Latin glyphs and falls
   through to Noto Sans JP for Japanese (Archivo has no CJK), so a mixed headline like
   「散らかった GitHub リポジトリを」 sets "GitHub" in Archivo and the rest in Noto at the same
   weight. Latin display copy (en) can go tighter than Japanese, so the ja page keeps a touch
   more tracking and leading via :lang(). */

.display,
.brand {
  font-family: "Archivo", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

.display {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Japanese breaks between any two characters, so `balance` would split a phrase mid-word; the
   ja markup places <br /> at the comma instead and `pretty` leaves those breaks alone. */
:lang(ja) .display {
  letter-spacing: -0.015em;
  line-height: 1.18;
  text-wrap: pretty;
}

.kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.kicker::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent);
  flex-shrink: 0;
}

/* Header ------------------------------------------------------------------ */

.site-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}

/* Brand sits at the header's full control height (2.25rem, same as the two buttons) so the
   wordmark reads as a title, not a nav item. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fg);
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.site-nav a {
  color: var(--fg-soft);
}

.site-nav a:hover {
  color: var(--fg);
}

/* Only one thing in the header is a button: the download. The language switch is a quiet
   text link (globe glyph + label, muted, no box) so the two do not read as siblings. It keeps
   a fixed width so "English" and "日本語" occupy the same space and the header does not shift
   when switching languages. */
.lang-switch,
.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  line-height: 1;
  white-space: nowrap;
}

.lang-switch {
  gap: 0.4rem;
  width: 6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg-muted) !important;
}

.lang-switch svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.lang-switch:hover {
  text-decoration: none;
  color: var(--fg) !important;
}

.nav-button {
  gap: 0.5rem;
  padding: 0 1.1rem;
  border-radius: var(--radius);
  background: var(--fg);
  color: var(--bg) !important;
  font-size: 0.875rem;
  font-weight: 700;
}

.nav-button svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.nav-button:hover {
  text-decoration: none;
  background: var(--fg-soft);
}

/* Landing page ------------------------------------------------------------ */

main {
  max-width: var(--max);
  margin: 0 auto;
}

/* Every page (body.framed) widens header, main and footer to the same stage and frames the
   column with two vertical rules, bun.sh style. The landing page adds its section rhythm on
   top; documents keep a reading measure inside the frame (see "Documents" below). */

body.framed .site-header,
body.framed .site-footer,
body.framed main {
  max-width: var(--max-wide);
}

body.framed {
  --gutter: clamp(1.25rem, 0.5rem + 2.5vw, 3.5rem);
}

body.landing {
  --section-gap: clamp(4rem, 3rem + 4vw, 7rem);
  --block-gap: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}

body.framed main {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

body.framed .site-header {
  border-bottom: 0;
}

.landing section {
  position: relative;
  border-top: 0;
  padding: var(--section-gap) var(--gutter);
}

/* Section rules run across the whole viewport, not just the column. */
.landing section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--line);
  pointer-events: none;
}

.landing section h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  margin-bottom: 1.75rem;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: var(--block-gap);
}

.landing .section-head h2 {
  margin-bottom: 0;
}

/* Hero */

.landing .hero {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.landing .hero::before {
  border-top: 1px solid var(--line);
}

/* Headline, one-line lead, download and the perks on the left; the mascot centred in the right
   column, bottom-aligned so it stands on the screenshot band (bun.sh puts its illustration there). */
.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem 3rem;
  align-items: end;
  min-width: 0;
  max-width: 100%;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  min-width: 0;
}

.hero-mascot {
  justify-self: center;
  width: 100%;
  max-width: 25rem;
  min-width: 0;
}

/* Raster mascot (portrait, alpha WebP): sized by height so it lines up with the copy column
   instead of dictating the hero's height, and centred in its column rather than hugging the
   right edge (2026-09-13 — the right-aligned version sat too far out, on phones especially). */
.hero-mascot .mascot-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 24rem;
  margin: 0 auto;
}

/* Perks: three short facts under the download call, each with a small accent check. */
.perks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0;
  margin-top: -0.25rem;
  font-size: 0.85rem;
  color: var(--fg-muted);
}

.perks li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.perks li::before {
  content: "";
  width: 0.35rem;
  height: 0.65rem;
  margin-top: -0.2rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.hero h1 {
  font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5rem);
  max-width: 22ch;
}

.hero-text .lead {
  font-size: 1rem;
  color: var(--fg-muted);
  max-width: 34rem;
}

.hero h1 .hi {
  font-style: normal;
  color: var(--accent);
}

.hero h1 .nowrap {
  white-space: nowrap;
}

.hero h1 .broom {
  display: inline-block;
}

.lead {
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  color: var(--fg-soft);
  max-width: 36rem;
  text-wrap: pretty;
  line-height: 1.6;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 0.25rem;
  max-width: 100%;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}

.button svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.button:hover,
.button:focus-visible {
  text-decoration: none;
  background: var(--fg-soft);
}

.brew {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--fg-muted);
  max-width: 100%;
}

.brew pre {
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  display: flex;
  gap: 0.6rem;
}

.brew pre::before {
  content: "$";
  color: var(--accent);
  font-weight: 700;
}

.brew pre code {
  color: var(--fg);
  font-size: 1em;
}

/* Screenshots — figures carry the window capture as-is (screencapture -o: the window only, no
   shadow, alpha only in the rounded corners). The page adds nothing around them. */

.shot {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.shot img {
  width: 100%;
  height: auto;
}

.shot-hero {
  margin: 1rem calc(-1 * var(--gutter)) 0;
  width: auto;
  padding: var(--gutter) var(--gutter) 0;
  border-top: 1px solid var(--line);
  background: var(--bg-raise);
}

.shot figcaption {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-top: 0.8rem;
}

.shot-hero figcaption {
  padding-bottom: 1rem;
}

/* Features: the three cleanup capabilities each take the whole stage — a copy row (headline and
   sentence on the left, the three keyword tags on the right) over a full-width screenshot (two
   side by side for the first). Hairlines separate the articles. */

.features {
  display: grid;
  gap: 0;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding: var(--block-gap) 0;
  border-top: 1px solid var(--line);
}

.feature:first-child {
  padding-top: 0;
  border-top: 0;
}

.feature:last-child {
  padding-bottom: 0;
}

.feature .feature-copy {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1rem 3rem;
  align-items: end;
}

.feature .feature-copy .eyebrow {
  grid-column: 1 / -1;
}

.feature .feature-copy h3,
.feature .feature-copy p {
  grid-column: 1;
}

.feature .feature-copy .tags {
  grid-column: 2;
  grid-row: 2 / span 2;
  margin: 0;
}

.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Extras: the two companions (launcher, create) are rows that alternate — copy left and
   screenshot right, then flipped — and stay smaller than the three above (no tags). */

.extras {
  display: grid;
  gap: var(--block-gap);
}

.extra {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: center;
}

.extra:nth-child(even) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.extra:nth-child(even) .feature-copy {
  order: 2;
}

.extra h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
}

.extra p {
  color: var(--fg-soft);
  text-wrap: pretty;
}

.eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.feature h3 {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem);
}

.feature p {
  color: var(--fg-soft);
  text-wrap: pretty;
  max-width: 36rem;
  font-size: 1.05rem;
}

/* Numbered keyword list (01 / 02 / 03) in place of pills. */
.tags {
  list-style: none;
  padding: 0;
  margin-top: 0.25rem;
  counter-reset: tag;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  max-width: 30rem;
}

.tags li {
  counter-increment: tag;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--fg);
}

.tags li::before {
  content: counter(tag, decimal-leading-zero);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  color: var(--accent);
}

.shot-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  width: 100%;
}

/* Cell grids (trust): hairlines between cells come from the 1px gap over a line-coloured
   background, so they stay correct however many columns the auto-fit produces. */

.grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
}

.card {
  background: var(--bg);
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.card .card-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--fg);
}

.card .card-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.card h3 {
  margin: 0.3rem 0 0;
  color: var(--fg);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card p {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--fg-soft);
}

.card p a {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  color: var(--fg);
}

/* A measured figure inside a card heading. */
.card h3 .stat {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.notice {
  border: 1px solid var(--warn-line);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: var(--fg-soft);
  font-size: 0.92rem;
  margin-top: 2rem;
}

.notice strong {
  color: var(--fg);
}

.notice a {
  color: var(--fg);
  text-decoration: underline;
}

/* Pricing: the copy on the left, a bordered card with the price on the right. The sponsor ask
   lives in the card, under a hairline, as the "instead of paying" line. */

.pricing {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3rem 4rem;
  align-items: center;
}

.pricing-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.pricing-copy .section-head {
  margin-bottom: 1.5rem;
}

.pricing-copy p {
  color: var(--fg-soft);
  max-width: 36rem;
  font-size: 1.05rem;
  text-wrap: pretty;
}

/* The AS IS / no-warranty line lives here, small and quiet, under the pricing copy. */
.pricing-copy .fine {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--fg-muted);
}

.pricing-copy .fine strong {
  color: var(--fg-soft);
  font-weight: 600;
}

.pricing-copy p a,
.price-card a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
}

.price-card {
  border: 1px solid var(--line);
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

.price-amount {
  font-size: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);
  line-height: 1;
  color: var(--fg);
}

.price-note {
  color: var(--fg-soft);
  font-size: 0.95rem;
}

.price-card .sponsor {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 0.92rem;
  color: var(--fg-soft);
  text-wrap: pretty;
}

/* Inverted band (#install): the page's ink and paper swap places inside this section. The
   section re-points the same tokens every component rule already uses, so the button, the
   `$` command box and the muted copy invert without their own overrides. */

.landing .invert {
  --bg: var(--ink);
  --bg-raise: var(--ink);
  --fg: var(--paper);
  --fg-soft: var(--paper-soft);
  --fg-muted: var(--paper-muted);
  --line: var(--paper-line);
  --surface: var(--paper-surface);
  --accent: var(--accent-on-ink);
  color: var(--fg);
  isolation: isolate;
  /* Roomier than the other sections: the band is a pause, not another row of content. */
  padding-top: clamp(5.5rem, 4rem + 5vw, 9rem);
  padding-bottom: clamp(5.5rem, 4rem + 5vw, 9rem);
}

/* The band bleeds edge to edge (bun.sh has no container here) while the copy stays on the
   column's gutter: the section keeps its padding, and its ::before — which already spans
   100vw for the hairline — becomes the full-height background instead. */
.landing .invert::before {
  bottom: 0;
  border-top: 0;
  background: var(--bg);
  z-index: -1;
}

.invert-row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 3rem 6rem;
  align-items: center;
}

/* The label sits above the command so the box has the full column. */
.invert .brew {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.invert-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  min-width: 0;
}

.landing .invert h2 {
  margin-bottom: 0;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.2rem);
}

.invert .lead {
  color: var(--fg-muted);
}

.invert .cta {
  margin-top: 0;
  min-width: 0;
  gap: 1.25rem;
}

.invert .sub {
  font-size: 0.85rem;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.invert .sub code {
  color: var(--fg);
}

/* Support — quiet: a small bold heading and one line on the left, the two channels on the
   right, less vertical room than the other sections. */

.landing .quiet {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem 4rem;
  align-items: start;
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.landing .quiet h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.5;
  margin-bottom: 0.35rem;
  color: var(--fg);
}

.quiet-head p {
  font-size: 0.9rem;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.support-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  margin-top: -0.6rem;
  font-size: 0.9rem;
}

.support-list li {
  color: var(--fg-muted);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.support-list strong {
  color: var(--fg-soft);
  font-weight: 600;
}

.support-list a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line);
}

.support-list a:hover {
  text-decoration-color: var(--line-strong);
}

/* Legacy generic section styling (legal docs / releases reuse these) */

section {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}

section h2 {
  font-size: 1.35rem;
  margin-bottom: 0.9rem;
}

section h3 {
  font-size: 1.05rem;
  margin: 1.25rem 0 0.4rem;
  color: var(--fg-soft);
}

section p,
section li {
  color: var(--fg-soft);
}

section ul,
section ol {
  padding-inline-start: 1.4rem;
  display: grid;
  gap: 0.35rem;
}

@media (max-width: 52rem) {
  .shot-duo,
  .feature .feature-copy,
  .extra,
  .extra:nth-child(even),
  .pricing,
  .invert-row,
  .landing .quiet,
  .hero-copy {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The mascot shrinks and sits centred under the copy. */
  .hero-mascot {
    max-width: 12rem;
    margin-top: -1rem;
  }

  .hero-mascot .mascot-img {
    max-height: 15rem;
  }

  .extra:nth-child(even) .feature-copy {
    order: 0;
  }

  .feature,
  .extra {
    gap: 1.75rem;
  }

  .feature .feature-copy .eyebrow,
  .feature .feature-copy h3,
  .feature .feature-copy p,
  .feature .feature-copy .tags {
    grid-column: auto;
    grid-row: auto;
  }

  .feature .feature-copy .tags {
    margin-top: 0.5rem;
  }
}

@media (max-width: 30rem) {
  .site-nav {
    gap: 0.75rem;
    font-size: 0.85rem;
  }

  .lang-switch,
  .nav-button {
    height: 2rem;
    font-size: 0.8rem;
  }

  .nav-button {
    padding: 0 0.8rem;
  }

  .lang-switch {
    width: auto;
  }

  .brand {
    gap: 0.5rem;
    font-size: 1.15rem;
  }

  .brand img {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .perks {
    gap: 0.4rem 1.1rem;
  }

  .price-card {
    padding: 1.5rem 1.25rem 1.25rem;
  }
}

/* Japanese display copy: never break inside a phrase — the markup's <br /> and the spaces
   around Latin words are the only break points. Segments are kept short enough for 320px. */
:lang(ja) .hero h1,
:lang(ja) .feature h3,
:lang(ja) .extra h3,
:lang(ja) .invert h2 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Documents (legal texts, release notes, OSS list) ------------------------
   Same frame as the landing page: a heading band across the stage (kicker, display h1, mono
   meta) with a viewport-wide hairline under it. The body uses the whole stage rather than a
   fixed reading measure: every section is a two-column row — its heading (article number,
   version + date) in a narrow left column, the text filling the right — separated by hairlines,
   so the frame is full at any width and the line length still stays readable. */

.doc {
  padding: 0 var(--gutter) var(--gutter);
}

.doc-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(3rem, 2rem + 3vw, 5rem) 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
  margin: 0 calc(-1 * var(--gutter)) clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Hairlines under the header and under the band, viewport-wide like the landing sections. */
.doc-head::before,
.doc-head::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--line);
  pointer-events: none;
}

.doc-head::before {
  top: 0;
}

.doc-head::after {
  bottom: 0;
}

.doc h1 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  max-width: 24ch;
}

.doc .meta {
  color: var(--fg-muted);
  font-size: 0.9rem;
  max-width: var(--max);
  text-wrap: pretty;
}

.doc .meta + .meta {
  margin-top: -0.25rem;
}

.doc .meta a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
}

/* Section rows: heading left, body right. `--doc-side` is the heading column. */
.doc {
  --doc-side: clamp(11rem, 8rem + 8vw, 16rem);
  --doc-gap: clamp(1.5rem, 1rem + 2vw, 4rem);
}

.doc section,
.release {
  display: grid;
  grid-template-columns: var(--doc-side) minmax(0, 1fr);
  column-gap: var(--doc-gap);
  row-gap: 0;
  align-items: start;
}

.doc section > h2,
.release > h2 {
  grid-column: 1;
  grid-row: 1 / span 40;
  margin: 0;
}

.doc section > :not(h2),
.release > :not(h2) {
  grid-column: 2;
  min-width: 0;
}

.doc section {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0 1.75rem;
}

.doc-head + section {
  border-top: 0;
}

.doc section h2 {
  font-family: "Archivo", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--fg);
  text-wrap: pretty;
}

.doc section > :not(h2) + :not(h2) {
  margin-top: 0.75rem;
}

.doc section p,
.doc section li {
  text-wrap: pretty;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  margin: 0.5rem 0 0.75rem;
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  color: var(--fg-soft);
}

.doc th {
  color: var(--fg);
  background: var(--surface);
  white-space: nowrap;
}

/* Release notes ----------------------------------------------------------- */

.release {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0 1.75rem;
}

.doc-head + .release {
  border-top: 0;
}

/* Version on one line, date under it, both in the heading column. */
.release h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  font-family: "Archivo", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  line-height: 1.2;
}

.release time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.release > :not(h2) + :not(h2) {
  margin-top: 0.75rem;
}

.release p,
.release li {
  color: var(--fg-soft);
  text-wrap: pretty;
}

.release ul,
.release ol {
  padding-inline-start: 1.4rem;
  display: grid;
  gap: 0.35rem;
}

/* Narrow: heading over body again (this block sits after the row rules it overrides). */
@media (max-width: 52rem) {
  .doc section,
  .release {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc section > h2,
  .release > h2 {
    grid-row: auto;
    margin-bottom: 0.75rem;
  }

  .doc section > :not(h2),
  .release > :not(h2) {
    grid-column: 1;
  }
}

/* OSS attribution list ---------------------------------------------------- */

.oss-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.oss-list details {
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0.25rem;
}

.oss-list summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
}

.oss-list summary::-webkit-details-marker {
  display: none;
}

.oss-list summary .name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.oss-list summary .version {
  font-weight: 400;
  color: var(--fg-muted);
}

.oss-list summary .license {
  flex-shrink: 0;
  font-size: 0.78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 0.6rem;
  color: var(--fg-muted);
}

.oss-list pre {
  margin-top: 0.6rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.8rem;
  color: var(--fg-muted);
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  max-width: var(--max);
  margin: 3rem auto 0;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
}

body.framed .site-footer {
  margin-top: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.site-footer a {
  color: var(--fg-muted);
}