/* ==========================================================================
   Beige Machine — REBRAND (alternative direction, Sept 2026)
   Visual reference: the terminal / ASCII homepage concept (30 Sept 2026).
   Same class names and page structure as the current site; only the look
   changes. Sections: fonts, tokens, base, header, buttons, hero, pillars,
   Beige Mail, footer, inner pages, guides & docs, responsive.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL — licences in assets/fonts) ---------- */

/* Heavy, chamfered display face for the wordmark and page titles
   (a thickened, widened cut of Tektur). Capitals are what the site uses. */
@font-face {
  font-family: "Beige Display";
  src: url("assets/fonts/beige-display.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* Monospace for everything else (a subset of IBM Plex Mono) */
@font-face {
  font-family: "Beige Mono";
  src: url("assets/fonts/beige-mono-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Beige Mono";
  src: url("assets/fonts/beige-mono-700.woff") format("woff");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --bg: #050607;              /* the dark wall */
  --bg-raise: #0b0d10;        /* panels / cards */
  --bg-raise-2: #101318;      /* hover, code */
  --line: #25292d;            /* hairlines, dividers */
  --line-strong: #3d4246;     /* header rule, card edges */

  --cream: #f4e9d8;           /* wordmark, logo */
  --white: #f5f6f4;           /* headings, primary text */
  --text: #d9dcdf;            /* body copy */
  --muted: #a3a9b0;           /* secondary copy */
  --dim: #6f767d;

  --blue: #009dfe;            /* primary button fill, logo stripe */
  --blue-hi: #19b2ff;         /* links, active nav, outlines */
  --blue-deep: #0a6fb3;
  --on-blue: #03101a;         /* text on the blue button */
  --beige: #f7d6a4;           /* pixel icons, small warm accents */
  --warm: #e7b77a;            /* lamp-light glow */
  --brand-beige: #f7d6a4;     /* brand beige = --beige (logo, wordmark, big headings, "Disk") */

  --font-display: "Beige Display", "Arial Black", Impact, sans-serif;
  --font-mono: "Beige Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius: 6px;
  --gutter: 48px;
  --page: min(1600px, calc(100% - 2 * var(--gutter)));
  --content: min(1100px, var(--page));
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

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

/* the product's own pixel icon stays crisp */
.pixel { image-rendering: pixelated; }

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--blue); color: var(--on-blue); }

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

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 20;
  padding: 8px 14px;
  background: var(--blue);
  color: var(--on-blue);
  border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* Plain "I" helper from the old pixel font — harmless here */
.alt-i { font-feature-settings: normal; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 84px;
  padding: 0 max(var(--gutter), calc((100% - 1200px) / 2));
  background: #030508;
  border-bottom: 1px solid var(--line-strong);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.brand__logo { width: 44px; height: auto; margin-top: -6px; }

.brand__name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  line-height: .9;
  letter-spacing: .005em;
  color: var(--brand-beige);
  white-space: nowrap;
}

.brand__tag {
  margin-left: 6px;
  padding-top: 10px;
  font-size: 13.5px;
  color: #c9c8bd;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--white);
  transition: color .15s;
}

.site-nav__link:hover { color: var(--blue-hi); }

.site-nav__link.is-active { color: var(--blue-hi); }
.site-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue-hi);
}

.coffee {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border: 2px solid var(--blue-hi);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--blue-hi);
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

.coffee:hover { background: rgba(25, 178, 255, .1); }

.coffee__icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: -3px; image-rendering: pixelated; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 66px;
  padding: 0 44px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s, background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.btn--primary {
  min-width: 320px;
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
  font-weight: 600;
}

.btn--outline {
  min-width: 288px;
  background: rgba(3, 5, 8, .55);
  border-color: var(--blue-hi);
  color: var(--white);
}

.btn:hover { transform: translateY(-2px); }
.btn--primary:hover { background: var(--blue-hi); border-color: var(--blue-hi); box-shadow: 0 8px 26px rgba(0, 157, 254, .25); }
.btn--outline:hover { background: rgba(25, 178, 255, .1); }
.btn:active { transform: translateY(0); }

/* Arrow (→), drawn with a mask so it follows currentColor */
.btn__chevron {
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 6h15.2L10.6 1.4 12 0l7 7-7 7-1.4-1.4L15.2 8H0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 6h15.2L10.6 1.4 12 0l7 7-7 7-1.4-1.4L15.2 8H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* as in the reference, outline buttons carry no arrow */
.btn--outline .btn__chevron { display: none; }

.btn--small {
  min-width: 0;
  width: 220px;
  height: 52px;
  padding: 0 20px;
  gap: 12px;
  font-size: 16px;
}
.btn--small .btn__chevron { width: 16px; height: 12px; }

/* ==========================================================================
   Hero (homepage) — terminal / ASCII artwork
   The glyph field, cube and wordmark are drawn on a canvas by
   assets/js/ascii.js. Until then (or without JS) the plain logo and wordmark
   show over a faint dot grid.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(500px, 33.8vw, 720px);
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(150, 142, 133, .18) 1px, transparent 1.4px) 0 0 / 9px 16px,
    #020304;
  border-bottom: 1px solid var(--line-strong);
}

.ascii-canvas {
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: clamp(40px, 4.6vw, 80px);
  padding: clamp(40px, 4vw, 72px) 24px;
}

.hero__logo {
  width: clamp(180px, 21vw, 380px);
  height: auto;
}

.hero__words { display: flex; flex-direction: column; align-items: flex-start; }

.hero__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(58px, 6.6vw, 126px);
  line-height: .98;
  letter-spacing: .02em;
  color: var(--brand-beige);
  white-space: nowrap;
}

/* once the artwork is drawn, the plain logo/wordmark step aside
   (the heading stays in the page for screen readers and search) */
.hero.is-ascii .hero__logo { opacity: 0; }
.hero.is-ascii-word .hero__title { color: transparent; }
.hero.is-ascii { background: #020304; }

.hero__tagline {
  margin: clamp(18px, 1.6vw, 28px) 0 0;
  font-size: clamp(18px, 1.72vw, 32px);
  line-height: 1.3;
  color: var(--white);
}

.hero__cursor {
  display: inline-block;
  width: .55em;
  height: .95em;
  margin-left: .3em;
  vertical-align: -.1em;
  background: var(--blue-hi);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: clamp(26px, 2.4vw, 44px);
}
.hero__actions .btn { min-width: 0; width: clamp(200px, 13.6vw, 240px); height: clamp(50px, 3.1vw, 56px); padding: 0 20px; font-size: clamp(15px, .95vw, 17px); }

/* inner pages: a quiet glyph field behind the page intro (added by ascii.js) */
main { position: relative; isolation: isolate; }
.ascii-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: -1;
  height: clamp(300px, 30vw, 440px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}

/* ==========================================================================
   Pillars (the three columns under the hero)
   ========================================================================== */
.pillars {
  background: var(--bg);
}

.pillars__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(1140px, var(--page));
  margin: 0 auto;
  padding: 44px 0 56px;
  list-style: none;
}

.pillar {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 4px 40px 8px;
}
.pillar + .pillar { border-left: 1px solid var(--line-strong); }
.pillar:first-child { padding-left: 0; }

.pillar__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.pillar__title {
  margin: 2px 0 10px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}
.pillar__title a:hover { color: var(--blue-hi); }

.pillar__text {
  max-width: 30ch;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================================
   Beige Mail
   ========================================================================== */
.mail {
  width: min(560px, var(--page));
  margin: 40px auto 0;
  padding: 30px 32px 32px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raise);
}

.mail__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
}

.mail__icon { width: 40px; height: 40px; image-rendering: pixelated; }

.mail__form {
  display: flex;
  gap: 14px;
}

.mail__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #07090b;
  color: var(--white);
  font: inherit;
  font-size: 16px;
}

.mail__input::placeholder { color: var(--dim); opacity: 1; }
.mail__input:focus { border-color: var(--blue-hi); outline: none; box-shadow: 0 0 0 3px rgba(25, 178, 255, .18); }

.mail__button {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--on-blue);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s;
}

.mail__button:hover { background: var(--blue-hi); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: var(--page);
  margin: 72px auto 0;
  padding: 24px 0 36px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.site-footer__copy { margin: 0; }

.site-footer__links {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links li {
  display: flex;
  align-items: center;
}

.site-footer__links li::before {
  content: "";
  width: 1px;
  height: 18px;
  margin: 0 22px;
  background: var(--line-strong);
}

.site-footer__links a:hover { color: var(--blue-hi); }

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* ---------- Page intro ---------- */
.page-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 88px var(--gutter) 0;
}

.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: .95;
  letter-spacing: .005em;
  color: var(--brand-beige);
  white-space: nowrap;
}

.page-lede {
  max-width: 44ch;
  margin: 22px 0 0;
  text-wrap: balance;
  font-size: 22px;
  line-height: 1.45;
  color: var(--white);
}

.breadcrumb {
  width: var(--page);
  margin: 28px auto 0;
  font-size: 14px;
  color: var(--muted);
}

.breadcrumb a { color: var(--blue-hi); }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb span[aria-hidden] { margin: 0 10px; color: var(--dim); }

/* ---------- Product list (Software page) ---------- */
.product-list {
  width: min(1000px, var(--page));
  margin: 64px auto 0;
  display: grid;
  gap: 24px;
}

.product-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 36px;
  padding: 32px 36px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-raise);
  transition: border-color .15s;
}
.product-card:hover { border-color: rgba(25, 178, 255, .55); }

.product-card__icon-link { display: block; }
.product-card__icon { width: 96px; }   /* 3 × the 32px sprite */

.product-card__meta {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--blue-hi);
}

.product-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--brand-beige);
}

.product-card__name a:hover { color: var(--white); }

.product-card__summary {
  max-width: 46ch;
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.product-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Product hero (product pages) ---------- */
.product-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px var(--gutter) 0;
}

.product-hero__icon {
  width: 128px;           /* 4 × the 32px sprite */
  margin-bottom: 30px;
}

.product-hero__meta {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.product-hero .hero__actions { margin-top: 38px; }
.product-hero .btn--outline .btn__chevron { display: none; }

/* ---------- Content sections ---------- */
.section {
  width: var(--content);
  margin: 112px auto 0;
}

.section__title {
  margin: 0 0 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  color: var(--cream);
}

/* feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raise);
}

.feature__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
}

.feature__title::before {        /* small blue pixel square */
  content: "";
  flex: 0 0 8px;
  height: 8px;
  margin-top: .5em;
  background: var(--blue);
}

.feature__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.feature__text code {
  font-family: inherit;
  color: var(--beige);
}

/* numbered steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.step__num {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
}

.step__title {
  margin: 20px 0 8px;
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
}

.step__text {
  max-width: 30ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* download band */
.download-band {
  width: min(1000px, var(--page));
  margin: 112px auto 0;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 60% 140% at 100% 50%, rgba(0, 157, 254, .12), transparent 70%),
    var(--bg-raise);
}

.download-band__icon { width: 64px; flex-shrink: 0; }   /* 2 × sprite */
.download-band__icon--logo { width: 58px; }

.download-band__text { flex: 1 1 auto; }

.download-band__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
}

.download-band__meta {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--blue-hi);
}

/* ---------- Terminal strip: the page closer (glyph field + prompt) ---------- */
.term-strip {
  position: relative;
  isolation: isolate;
  height: clamp(130px, 13vw, 200px);
  margin-top: 96px;
  overflow: hidden;
  background: radial-gradient(circle at 1px 1px, rgba(150, 142, 133, .14) 1px, transparent 1.4px) 0 0 / 9px 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
}
.term-strip:has(.ascii-canvas) { background: none; }
.term-strip__prompt {
  position: absolute;
  left: max(var(--gutter), calc((100% - 1200px) / 2));
  bottom: 22px;
  margin: 0;
  padding: 4px 10px 4px 0;
  background: var(--bg);
  font-size: 14px;
  color: var(--muted);
}
.term-strip__path { color: var(--blue-hi); }
.term-strip__cursor {
  display: inline-block;
  width: .6em; height: 1.05em;
  vertical-align: -.15em;
  background: var(--brand-beige);
  animation: blink 1.1s steps(1) infinite;
}
.term-strip + .mail,
.term-strip ~ .mail { margin-top: 40px; }

/* when a page ends with the strip, the footer tucks right under it */
main:has(> .term-strip:last-child) + .site-footer { margin-top: 0; border-top-color: var(--line-strong); }

/* ---------- Launch placeholders ----------
   Anything wrapped in .todo still needs real information before launch. */
.todo {
  display: inline-block;
  padding: 2px 10px;
  border: 1px dashed var(--blue-hi);
  border-radius: 4px;
  color: var(--blue-hi);
  font-size: .9em;
  line-height: 1.5;
}

/* ---------- Guides ---------- */
.guide-group {
  width: min(1000px, var(--page));
  margin: 72px auto 0;
}

.guide-group__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-strong);
}

.guide-group__icon { width: 64px; flex-shrink: 0; }  /* 2 × sprite */

.guide-group__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--brand-beige);
}

.guide-group__meta {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.guide-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.guide-list:not(:has(.guide-card)) { display: none; }

.guide-card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raise);
  transition: border-color .15s;
}
.guide-card:not(.guide-card--soon):hover { border-color: rgba(25, 178, 255, .55); }

.guide-card__meta { margin: 0 0 8px; font-size: 13px; color: var(--blue-hi); text-transform: uppercase; letter-spacing: .06em; }

.guide-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.guide-card__title a:hover { color: var(--blue-hi); }

.guide-card__summary {
  flex: 1 1 auto;
  margin: 10px 0 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.guide-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  color: var(--blue-hi);
  font-size: 16px;
}

.guide-card__link .btn__chevron { width: 16px; height: 11px; }
.guide-card__link:hover { color: var(--white); }

/* shown only while the shelf is empty */
.guide-shelf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding: 26px 30px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}

.guide-group:has(.guide-card) .guide-shelf { display: none; }

.guide-shelf__text {
  max-width: 52ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.mail.mail--page { margin-top: 88px; }

/* ---------- Long-form text (About, Privacy, articles) ---------- */
.prose {
  width: min(720px, var(--page));
  margin: 64px auto 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}

.prose p { margin: 0 0 22px; }

.prose a:not(.about__release):not(.btn) {
  color: var(--blue-hi);
  text-decoration: underline;
  text-decoration-color: rgba(25, 178, 255, .45);
  text-underline-offset: 4px;
}

.prose a:not(.about__release):not(.btn):hover { color: var(--white); text-decoration-color: currentColor; }

.prose h2 {
  margin: 48px 0 14px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.prose h2::before {           /* blue pixel square, as on feature cards */
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 12px 2px 0;
  background: var(--blue);
}

.prose--legal p { color: var(--muted); }
.prose__updated { font-size: 14px; }

/* ---------- About ---------- */
.about__logo {
  width: 150px;
  margin-bottom: 40px;
}

.page-title--long { white-space: normal; }
.page-title__line { white-space: nowrap; }

.about__release {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 34px 0;
  padding: 22px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-raise);
  transition: border-color .15s;
}

.about__release:hover { border-color: rgba(25, 178, 255, .55); }
.about__release strong { font-weight: 600; color: var(--white); }
.about__release-icon { width: 64px; flex-shrink: 0; }

.about__signoff {
  margin-top: 36px !important;
  color: var(--beige);
}

/* ---------- Contact ---------- */
.contact-card {
  width: min(720px, var(--page));
  margin: 64px auto 0;
  padding: 40px 40px 36px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-raise);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-card__intro {
  max-width: 44ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}

.contact-card__email {
  margin: 26px 0 0;
  padding: 6px 14px;
  border: 1px dashed var(--blue-hi);   /* placeholder look; see LAUNCH TODO */
  border-radius: var(--radius);
  font-size: 20px;
  color: var(--white);
  overflow-wrap: anywhere;
}

.contact-card__btn { margin-top: 28px; }

.contact-card__note {
  max-width: 48ch;
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================================
   Guides articles & Documentation
   ========================================================================== */

/* ---------- Upcoming guide / doc cards ---------- */
.guide-card--soon {
  border-style: dashed;
  background: transparent;
}
.guide-card--soon .guide-card__title { color: var(--muted); }
.guide-card--soon .guide-card__meta { color: var(--dim); }
.guide-card__status {             /* small note at the foot of an upcoming card */
  margin: 0;
  font-size: 14px;
  color: var(--beige);
}

/* a dashed "todo" box used as a block: drafts, screenshot placeholders */
.todo--block {
  display: block;
  margin: 26px 0;
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}
.todo--block strong { font-weight: 600; color: var(--white); }

/* ---------- Article pages (guides, manual) ---------- */
.article-meta {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.prose h3 {
  margin: 34px 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
}

.prose strong { font-weight: 600; color: var(--white); }
.prose em { color: var(--muted); }

.prose ul,
.prose ol { margin: 0 0 22px; padding: 0; list-style: none; }
.prose li { margin: 0 0 10px; }
.prose li > p { margin: 0 0 8px; }

.prose ul > li {                 /* small blue pixel bullet */
  position: relative;
  padding-left: 24px;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .66em;
  width: 7px;
  height: 7px;
  background: var(--blue);
}

.prose ol { counter-reset: step; }
.prose ol > li {                 /* numbered steps, a small .step__num */
  counter-increment: step;
  position: relative;
  padding-left: 48px;
  min-height: 32px;
}
.prose ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
}

.prose code {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-raise-2);
  color: var(--beige);
  font-family: inherit;
  font-size: .9em;
  overflow-wrap: anywhere;
}

.prose hr {
  margin: 44px 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
}

.prose .todo--block { font-size: 15px; }

/* tables */
.table-wrap { margin: 0 0 24px; overflow-x: auto; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.prose th,
.prose td {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
}
.prose th { font-weight: 600; color: var(--white); background: var(--bg-raise-2); }
.prose td { color: var(--muted); }

/* callouts */
.callout {
  margin: 26px 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: var(--bg-raise);
  font-size: 16px;
  line-height: 1.6;
}
.callout p { margin: 0 0 10px; }
.callout p:last-child { margin-bottom: 0; }
.callout--warn { border-left-color: var(--warm); }
.callout__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px !important;
  font-weight: 600;
  color: var(--white);
}
.callout__label::before {
  content: "";
  flex: 0 0 8px;
  height: 8px;
  background: var(--blue);
}
.callout--warn .callout__label::before { background: var(--warm); }

/* checklist squares (manual's "Before Publishing" list) */
.check {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border: 2px solid var(--blue-hi);
  border-radius: 2px;
  vertical-align: -1px;
}
.check--done { background: var(--blue); border-color: var(--blue); }
.prose ul > li.has-check { padding-left: 0; }
.prose ul > li.has-check::before { display: none; }

/* "go deeper" / related bands reuse .download-band */
.download-band--article { margin-top: 72px; }
.download-band--article .btn { width: auto; min-width: 250px; }

/* ---------- Documentation: manual layout ---------- */
.doc-status {
  width: min(1100px, var(--page));
  margin: 44px auto 0;
}
.doc-status.todo--block { margin-top: 44px; margin-bottom: 0; }

.doc-layout {
  width: min(1100px, var(--page));
  margin: 52px auto 0;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.doc-layout .prose { width: auto; margin: 0; max-width: 760px; }
.doc-layout .prose > h2:first-child { margin-top: 0; }
.prose h2 { scroll-margin-top: 24px; }

.doc-toc {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raise);
  font-size: 14px;
  line-height: 1.4;
}
.doc-toc summary {
  cursor: pointer;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc summary::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 9px;
  margin-left: 10px;
  background: var(--blue-hi);
  transform: rotate(90deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 6h15.2L10.6 1.4 12 0l7 7-7 7-1.4-1.4L15.2 8H0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 6h15.2L10.6 1.4 12 0l7 7-7 7-1.4-1.4L15.2 8H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.doc-toc[open] summary::after { transform: rotate(-90deg); }
.doc-toc ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: none; }
.doc-toc li { margin: 0; }
.doc-toc a {
  display: block;
  padding: 5px 0;
  color: var(--muted);
}
.doc-toc a:hover { color: var(--blue-hi); }
.doc-toc .doc-toc__num { display: inline-block; min-width: 2.2em; color: var(--blue-hi); }
.doc-toc .doc-toc__private a { color: var(--beige); }

/* links from a manual section to its step-by-step guide */
.doc-guide-link { margin: -4px 0 22px !important; }

/* the private pre-publishing checklist */
.doc-private {
  margin-top: 56px;
  padding: 6px 24px 10px;
  border: 1px dashed var(--beige);
  border-radius: 10px;
}
.doc-private > h2 { margin-top: 22px; color: var(--beige); }
.doc-private > h2::before { display: none; }

/* ==========================================================================
   Brand marks & terminal details
   ========================================================================== */
/* DiskSnap mark (assets/img/disksnap-mark.svg, 740 × 692) replaces the old sprite */
.ds-mark { height: auto; image-rendering: auto; }
.product-card__icon.ds-mark { width: 104px; }
.product-hero__icon.ds-mark { width: 150px; }
.download-band__icon.ds-mark,
.guide-group__icon.ds-mark,
.about__release-icon.ds-mark { width: 70px; }
.guide-group__icon--px { width: 64px; image-rendering: pixelated; }
.download-band__icon--logo { width: 44px; }

/* the product name's second half in blue, as in the DiskSnap wordmark */
.ds-snap { color: var(--blue); }
.product-card__name a:hover .ds-snap { color: var(--blue-hi); }

/* Beige Machine mark on the About page */
.about__logo { width: 120px; height: auto; }

/* section titles carry a small terminal comment marker */
.section__title::before {
  content: "// ";
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .5em;
  vertical-align: .45em;
  color: var(--blue-hi);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* the header tagline makes way first */
@media (max-width: 1180px) {
  .brand__tag { display: none; }
}

@media (max-width: 1240px) {
  :root { --gutter: 32px; }
  .site-nav { gap: 20px; }
  .site-nav__list { gap: 2px; }
  .site-nav__link { padding: 0 11px; }
  .site-nav__link.is-active::after { left: 11px; right: 11px; }

  .pillar { gap: 24px; padding: 4px 28px 8px; }
  .pillar__icon { width: 52px; height: 52px; }
}

/* tablet: header stacks — brand on top, nav + coffee beneath */
@media (max-width: 1060px) {
  .site-header {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 14px;
  }
  .site-nav { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .site-nav__list { flex-wrap: wrap; justify-content: center; }
  .site-nav__link { height: 46px; }

  .pillars__list { grid-template-columns: 1fr; gap: 0; padding: 20px 0 28px; }
  .pillar { padding: 22px 0; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--line); }
  .pillar__text { max-width: none; }

  .product-card {
    grid-template-columns: auto 1fr;
    gap: 24px 28px;
    padding: 28px;
  }
  .product-card__actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .product-card__actions .btn--small { flex: 1 1 0; width: auto; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .section, .download-band { margin-top: 88px; }

  .guide-list { grid-template-columns: 1fr; }
  .guide-shelf { flex-direction: column; align-items: flex-start; }

  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .doc-status { width: min(760px, var(--page)); }
  .doc-layout .prose { max-width: 760px; width: 100%; margin: 0 auto; }
  .doc-toc { position: static; max-height: none; max-width: 760px; width: 100%; margin: 0 auto; }
  .doc-toc ol { columns: 2; column-gap: 32px; }
  .doc-toc li { break-inside: avoid; }

  .site-footer { flex-direction: column; gap: 12px; text-align: center; }
  .site-footer__links li:first-child::before { display: none; }
}

/* hero lockup stacks: logo above the wordmark */
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; justify-items: center; row-gap: 26px; padding: 44px 20px 52px; }
  .hero__logo { width: clamp(130px, 36vw, 170px); }
  .hero__words { align-items: center; text-align: center; }
  .hero__title { align-items: center; font-size: clamp(44px, 12.6vw, 72px); }
  .hero__tagline { margin-top: 18px; font-size: clamp(15px, 4.4vw, 20px); }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 14px; width: min(340px, 100%); margin-top: 30px; }
  .hero__actions .btn { width: 100%; }
  .btn { min-width: 0; width: 100%; height: 58px; font-size: 18px; padding: 0 24px; }
}

/* phone */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }

  .site-header { padding: 14px 12px 12px; }
  .brand { gap: 12px; }
  .brand__logo { width: 34px; }
  .brand__name { font-size: 22px; }
  .site-nav { gap: 10px; }
  .site-nav__list { gap: 0; flex-wrap: nowrap; }
  .site-nav__link { height: 40px; padding: 0 7px; font-size: 13.5px; }
  .site-nav__link.is-active::after { left: 7px; right: 7px; bottom: 3px; height: 2px; }
  .coffee { height: 42px; padding: 0 14px; font-size: 14px; gap: 8px; border-width: 1px; }
  .coffee__icon { width: 20px; height: 20px; }

  .pillar { gap: 18px; }
  .pillar__icon { width: 44px; height: 44px; }
  .pillar__title { font-size: 18px; margin-top: 0; }
  .pillar__text { font-size: 15px; }

  .mail { margin-top: 28px; padding: 24px 18px; border-radius: 8px; }
  .mail__form { flex-direction: column; gap: 12px; }

  .site-footer { font-size: 13px; }
  .site-footer__links li::before { margin: 0 14px; }

  .page-intro { padding-top: 48px; }
  .page-title { font-size: clamp(34px, 11vw, 52px); }
  .page-lede { font-size: clamp(15px, 4.5vw, 19px); margin-top: 16px; }
  .breadcrumb { margin-top: 18px; font-size: 13px; }

  .product-list { margin-top: 44px; }
  .product-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 18px;
    padding: 26px 20px;
  }
  .product-card__icon { width: 64px; }
  .product-card__name { font-size: 28px; }
  .product-card__summary { font-size: 15px; }
  .product-card__actions { flex-direction: column; width: 100%; }
  .product-card__actions .btn--small { width: 100%; flex: none; }

  .product-hero { padding-top: 32px; }
  .product-hero__icon { width: 96px; margin-bottom: 24px; }
  .product-hero .hero__actions { margin-top: 30px; }

  .section { margin-top: 72px; }
  .section__title { font-size: 28px; margin-bottom: 30px; }
  .feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature { padding: 22px 20px; }
  .steps { grid-template-columns: 1fr; gap: 34px; }

  .download-band {
    margin-top: 72px;
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 26px 20px;
  }
  .download-band .btn { width: 100%; height: 56px; font-size: 17px; padding: 0 24px; }
  .term-strip { margin-top: 64px; }
  .term-strip__prompt { font-size: 12.5px; bottom: 16px; }

  .guide-group { margin-top: 44px; }
  .guide-group__title { font-size: 24px; }
  .guide-shelf { padding: 22px 20px; }
  .guide-shelf__actions, .guide-shelf__actions .btn--small { width: 100%; }
  .mail.mail--page { margin-top: 64px; }

  .page-title--long { font-size: clamp(30px, 10vw, 48px); line-height: 1; }
  .page-title__line { display: block; }
  .page-title--fit { font-size: clamp(24px, 8.2vw, 52px); }
  .about__logo { width: 110px; margin-bottom: 28px; }
  .prose { margin-top: 44px; font-size: 16px; }
  .prose h2 { font-size: 19px; margin-top: 36px; }
  .about__release { flex-direction: column; text-align: center; gap: 14px; padding: 20px; }

  .contact-card { margin-top: 44px; padding: 28px 20px; }
  .contact-card__intro { font-size: 16px; }
  .contact-card__email { font-size: 16px; }
  .contact-card__btn { width: 100%; }

  .doc-status.todo--block { margin-top: 30px; }
  .doc-layout { margin-top: 30px; }
  .doc-toc ol { columns: 1; }
  .prose ol > li { padding-left: 42px; }
  .prose table { font-size: 14px; }
  .prose th, .prose td { padding: 8px 9px; }
  .callout { padding: 16px; font-size: 15px; }
  .doc-private { padding: 4px 16px 8px; }
  .download-band--article { margin-top: 56px; }
  .download-band--article .btn { width: 100%; min-width: 0; }
}

@media (max-width: 380px) {
  .site-nav__link { padding: 0 5px; font-size: 12px; }
  .site-nav__link.is-active::after { left: 5px; right: 5px; }
  .coffee { font-size: 13px; }
  .site-footer { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .hero__cursor, .term-strip__cursor { animation: none; }
}

/* ==========================================================================
   Guide article footer: related guides + previous / all / next
   (added in the Guides pass, 30 Sept 2026 — reuses the guide-card look)
   ========================================================================== */
.guide-foot {
  width: min(720px, var(--page));
  margin: 64px auto 0;
}

.guide-related {
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}
.guide-related__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.guide-related__title::before {
  content: "";
  flex: 0 0 9px;
  height: 9px;
  background: var(--blue);
}
.guide-related__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-related__item {
  position: relative;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raise);
  transition: border-color .15s;
}
.guide-related__item:hover { border-color: rgba(25, 178, 255, .55); }
.guide-related__item a {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
}
.guide-related__item a::after {       /* whole card is the link target */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.guide-related__item a:hover { color: var(--blue-hi); }
.guide-related__item a:focus-visible { outline: none; }
.guide-related__item:has(a:focus-visible) { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
.guide-related__item span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.guide-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}
.guide-pager__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s;
}
.guide-pager__link:hover { border-color: rgba(25, 178, 255, .55); }
.guide-pager__link--next { text-align: right; }
.guide-pager__dir {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.guide-pager__link--prev .guide-pager__dir::before { content: "\2190\00a0"; }
.guide-pager__link--next .guide-pager__dir::after { content: "\00a0\2192"; }
.guide-pager__title {
  font-size: 15px;
  line-height: 1.45;
  color: var(--white);
  overflow-wrap: anywhere;
}
.guide-pager__link:hover .guide-pager__title { color: var(--blue-hi); }
.guide-pager__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--blue-hi);
  border-radius: var(--radius);
  color: var(--blue-hi);
  font-size: 15px;
  white-space: nowrap;
}
.guide-pager__all:hover { background: var(--blue-hi); color: var(--on-blue); }
.guide-pager__all .btn__chevron { width: 16px; height: 11px; }
.btn__chevron--back { transform: scaleX(-1); }

.guide-foot + .download-band--article { margin-top: 56px; }

@media (max-width: 640px) {
  .guide-foot { margin-top: 48px; }
  .guide-related__item { padding: 14px 16px; }
  .guide-pager { grid-template-columns: 1fr 1fr; }
  .guide-pager__all { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .guide-pager__link { padding: 12px 14px; }
}

/* ==========================================================================
   Troubleshooting entries (docs/disksnap/troubleshooting) — Problem / Likely
   cause / What to do / Important, as labelled rows inside a card
   ========================================================================== */
.ts-entry {
  margin: 0 0 22px;
  padding: 20px 24px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raise);
  scroll-margin-top: 24px;
}
.ts-entry > h3 { margin: 0 0 14px; }
.ts-entry .callout { margin: 0 0 16px; background: var(--bg); }
.prose dl.ts { margin: 0; }
.prose dl.ts dt {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.prose dl.ts dd { margin: 0 0 16px; }
.prose dl.ts dd > ol,
.prose dl.ts dd > ul,
.prose dl.ts dd > .table-wrap { margin: 6px 0 0; }
.prose dl.ts dt.ts-important { color: var(--warm); }
.prose h2 + .ts-entry { margin-top: 18px; }

@media (max-width: 640px) {
  .ts-entry { padding: 16px 16px 4px; }
}

/* long single-word titles (e.g. TROUBLESHOOTING) shrink with the window above phone width */
@media (min-width: 641px) {
  .page-title--wide { font-size: min(72px, 7.2vw); }
}

/* Offline content pass: additions retain the established palette and typography. */
.preview-status{padding:9px 20px;text-align:center;background:#101b23;color:#f7d6a4;border-bottom:1px solid #294454;font:12px/1.5 monospace;letter-spacing:.025em}
.preview-note{font-size:.85rem;color:#b9c3cb}
a[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.doc-shot{margin:28px 0;max-width:100%}.doc-shot img{display:block;width:100%;height:auto;border:1px solid #34434c}.doc-shot figcaption{font-size:.8rem;line-height:1.7;color:#b9c3cb;margin-top:10px}
.ad-preview{border:1px dashed #435260;padding:20px;margin:32px 0;text-align:center;color:#b9c3cb;font-size:.85rem;background:#0b1116}
.prose .guide-list{padding:0;list-style:none}.prose .guide-card{list-style:none}
@media(max-width:900px){.site-nav__list{flex-wrap:wrap}.site-header{flex-wrap:wrap}.page-title--long{overflow-wrap:anywhere}.prose{min-width:0}.preview-status{font-size:11px}}
@media print{.site-header,.site-footer,.term-strip,.ad-preview{display:none}.doc-shot{break-inside:avoid}.doc-toc{position:static}}

.trademark-note{max-width:900px;margin:20px auto;padding:0 24px;color:#aeb7bd;font-size:12px;line-height:1.6}

/* Release information must remain readable on small screens. */
.prose pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;}
.release-checksum{overflow-wrap:anywhere;word-break:break-word;}

/* Compact blog archive. */
.prose .blog-list { list-style:none; padding:0; margin:0; }
.prose .blog-entry { margin:0; padding:1.5rem 0; border-top:1px solid var(--border, #29333b); }
.prose .blog-entry:last-child { border-bottom:1px solid var(--border, #29333b); }
.prose .blog-entry::before { content:none; }
.prose .blog-entry__meta { margin:0 0 .55rem; font-size:.8rem; opacity:.75; }
.prose .blog-entry__title { margin:0 0 .6rem; padding:0; font-size:1.2rem; }
.prose .blog-entry__title::before { content:none; }
.prose .blog-entry__title a { color:inherit; }
.prose .blog-entry__title a:hover { color:#00aaff; }
.prose .blog-entry > p:last-child { margin:0; }