/* ── splitser.org ──────────────────────────────────────────────────────────
   Palette lifted straight from the app's renderer/style.css so the site and the
   product read as one thing. Bootstrap 5 supplies the grid and reset; everything
   with a look of its own is here.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0e1418;
  --chrome: #12181d;
  --surface: #141b21;
  --line: #232c33;
  --line-2: #2c3740;
  --text: #e7e3d6;
  --muted: #8b968c;
  --accent: #5fe08a;
  --accent-dim: #3aa863;
  --field: #0b1013;
  --warn: #e0857f;

  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 12px;
  --maxw: 1120px;
  /* Header height. The rail hangs off this, so the two can never drift apart --
     the nav's natural height is set by its CTA button (61.44px), so this must be
     slightly larger for min-height to bind and the two to agree exactly. */
  --nav-h: 62px;
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); }

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

code {
  font-family: var(--mono);
  font-size: .88em;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .08em .38em;
}

.muted { color: var(--muted); }

.skip {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  background: var(--accent); color: #05130a; padding: 8px 14px; border-radius: 8px;
}

/* ── Top nav ───────────────────────────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--nav-h);
  background: rgba(14, 20, 24, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); font-weight: 650; letter-spacing: -.01em; font-size: 17px;
}
.brand:hover { color: var(--text); text-decoration: none; }
/* Shared brand mark with the Split Screen extension -- the icon already carries its own
   rounded corners and transparency, so it needs no radius or background of its own. */
.brand-mark { flex: 0 0 auto; display: block; width: 26px; height: 26px; }
.navlink { color: var(--muted); font-size: 14.5px; }
.navlink:hover { color: var(--text); text-decoration: none; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn { border-radius: 9px; font-weight: 550; font-size: 15px; padding: .6rem 1.15rem; border: 1px solid transparent; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.btn-accent { background: var(--accent); color: #05130a; border-color: var(--accent); }
.btn-accent:hover { background: #74e89b; border-color: #74e89b; color: #05130a; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface); border-color: var(--accent); color: var(--text); }
.btn-sm { font-size: 14px; padding: .42rem .85rem; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding: 84px 0 20px; text-align: center; }
.hero-short { padding: 76px 0 56px; }

.eyebrow {
  color: var(--accent); font-family: var(--mono); font-size: 12.5px;
  letter-spacing: .11em; text-transform: uppercase; margin-bottom: 18px;
}
.display-title {
  font-size: clamp(2.35rem, 6vw, 4rem);
  line-height: 1.06; font-weight: 700; letter-spacing: -.032em; margin: 0 0 22px;
}
.lede {
  font-size: clamp(1.03rem, 1.9vw, 1.2rem);
  color: var(--muted); max-width: 660px; margin: 0 auto 30px;
}
.lede strong { color: var(--text); font-weight: 600; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  color: var(--muted); font-size: 13.5px; margin: 18px 0 0;
}
.preview-pill {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #e0c15f; background: rgba(224, 193, 95, .1);
  border: 1px solid rgba(224, 193, 95, .28); border-radius: 20px; padding: 3px 10px;
}


/* ── Hero demo video ───────────────────────────────────────────────────────
   The real capture. Motion-sensitive visitors get the static .mock instead --
   the swap lives in the prefers-reduced-motion block at the end of this rule. */
.demo { margin: 60px auto 0; max-width: 1120px; }
.demo-frame {
  position: relative;
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(95, 224, 138, .06);
  background: var(--chrome); line-height: 0;
}
.demo-vid { display: block; width: 100%; height: auto; }
.demo-toggle {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(11, 16, 19, .82); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 7px;
  font-size: 11.5px; font-family: var(--mono); padding: 4px 10px;
  line-height: 1.4; cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.demo-frame:hover .demo-toggle, .demo-toggle:focus-visible { opacity: 1; }
.demo-cap {
  color: var(--muted); font-size: 13px; text-align: center;
  margin-top: 14px; max-width: 640px; margin-inline: auto;
}

/* one visual at a time: video by default, illustration when motion is unwelcome */
.mock { display: none; }
@media (prefers-reduced-motion: reduce) {
  .demo { display: none; }
  .mock { display: block; }
}

/* ── The app-chrome illustration ───────────────────────────────────────── */
.mock { margin: 60px auto 0; max-width: 980px; }
.mock-frame {
  background: var(--chrome);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(95, 224, 138, .06);
  text-align: left;
}
.mock-titlebar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: var(--chrome); border-bottom: 1px solid var(--line);
}
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot-r { background: #e05f5f; } .dot-y { background: #e0c15f; } .dot-g { background: var(--accent); }
.mock-title { margin-left: 8px; color: var(--muted); font-size: 12px; }

.mock-grid { display: flex; height: 340px; }
.mock-pane { display: flex; flex-direction: column; flex: 1 1 0; min-width: 90px; }

/* top-level set bar: numbered pills, one per set */
.mock-sets {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.mock-set {
  width: 19px; height: 19px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-family: var(--mono);
  color: var(--muted); background: var(--chrome); border: 1px solid var(--line);
}
.mock-set.on { color: #05130a; background: var(--accent); border-color: var(--accent); font-weight: 650; }
.mock-sadd {
  width: 19px; height: 19px; border-radius: 6px; padding: 0;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); font-size: 12px; line-height: 1; cursor: default;
}
.mock-sets-note {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--line-2);
}

/* per-pane tab strip */
.mock-tabs {
  display: flex; align-items: flex-end; gap: 3px; min-width: 0;
  padding: 5px 6px 0; background: var(--chrome); border-bottom: 1px solid var(--line);
}
.mock-tab {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  max-width: 46%; padding: 5px 9px; border-radius: 7px 7px 0 0;
  font-size: 11px; color: var(--muted); background: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-tab.on { background: var(--field); color: var(--text); }
.mock-tfav {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; background: var(--line-2);
}
.mock-tfav.g { background: var(--accent-dim); }
.mock-tadd {
  flex: 0 0 auto; width: 18px; height: 18px; margin-bottom: 3px;
  background: transparent; border: 0; border-radius: 5px;
  color: var(--muted); font-size: 13px; line-height: 1; padding: 0; cursor: default;
}

.mock-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 9px; background: var(--chrome); border-bottom: 1px solid var(--line);
}
.mock-nav {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font-size: 13px; line-height: 1; padding: 0; cursor: default;
}
.mock-key { color: var(--accent); }
.mock-fav { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 3px; background: var(--line-2); margin: 0 2px; }
.mock-fav-2 { background: var(--accent-dim); }
.mock-addr {
  flex: 1 1 auto; min-width: 0; height: 25px; line-height: 24px;
  background: var(--field); border: 1px solid var(--line); border-radius: 7px;
  padding: 0 10px; font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mock-gutter {
  flex: 0 0 6px; background: var(--line); cursor: col-resize; position: relative;
}
.mock-gutter:hover, .mock-gutter:active, .mock-gutter:focus-visible { background: var(--accent); outline: none; }
.mock-gutter::after { content: ""; position: absolute; inset: 0 -5px; }

.mock-page { flex: 1 1 auto; background: #f4f2ec; padding: 18px 20px; overflow: hidden; }
.sk { background: #d8d4ca; border-radius: 4px; height: 9px; margin-bottom: 9px; }
.sk-title { height: 15px; width: 45%; background: #b9b4a8; margin-bottom: 16px; }
.sk-line { width: 100%; }
.sk-90 { width: 90%; } .sk-80 { width: 80%; } .sk-70 { width: 70%; }
.sk-60 { width: 60%; } .sk-50 { width: 50%; } .sk-40 { width: 40%; }
.sk-block {
  background: #e6e3db; border: 1px solid #d8d4ca; border-radius: 7px;
  padding: 12px; margin: 14px 0;
}
.sk-code { background: #c9c5ba; height: 7px; }
.sk-block .sk-code:last-child { margin-bottom: 0; }
.sk-chart {
  display: flex; align-items: flex-end; gap: 7px;
  height: 116px; margin: 16px 0 18px;
}
.sk-chart span { flex: 1 1 0; background: #c9c5ba; border-radius: 3px 3px 0 0; }
.sk-chart span:nth-child(2n) { background: #b9b4a8; }

.mock-status {
  display: flex; align-items: center; justify-content: space-between;
  height: 26px; padding: 0 12px;
  background: var(--chrome); border-top: 1px solid var(--line);
  font-size: 11px; color: var(--muted);
}
.mock-hover { font-family: var(--mono); }
.mock-brand::before { content: "● "; color: var(--accent); }

.mock-cap {
  color: var(--muted); font-size: 13px; text-align: center;
  margin-top: 14px; max-width: 620px; margin-inline: auto;
}

/* ── Bands / section furniture ─────────────────────────────────────────── */
.band { padding: 84px 0; border-top: 1px solid var(--line); }
.hero + .band { border-top: 0; }
.band-alt { background: #0c1216; }

.section-title {
  font-size: clamp(1.6rem, 3.1vw, 2.25rem);
  font-weight: 680; letter-spacing: -.025em; text-align: center;
  margin: 0 auto 14px; max-width: 780px;
}
.section-lede {
  color: var(--muted); text-align: center; max-width: 700px;
  margin: 0 auto 48px; font-size: 1.03rem;
}
.section-title.text-start, .section-lede.text-start { text-align: left !important; }

/* ── Why-not-the-extension rows ────────────────────────────────────────── */
.vs-list { display: flex; flex-direction: column; gap: 18px; }
.vs-row {
  display: flex; gap: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px;
}
.vs-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--muted);
  font-family: var(--mono); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.vs-body { flex: 1 1 auto; min-width: 0; }
.vs-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.12rem; font-weight: 620; margin: 2px 0 18px; letter-spacing: -.015em;
}
.vs-icon { font-size: 1.05rem; }
.vs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vs-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--warn); margin-bottom: 7px;
}
.vs-label-good { color: var(--accent); }
.vs-cols p { margin: 0; color: var(--muted); font-size: .96rem; }
.vs-ours p { color: var(--text); }
.vs-limit { border-left: 2px solid rgba(224, 133, 127, .35); padding-left: 16px; }
.vs-ours { border-left: 2px solid rgba(95, 224, 138, .4); padding-left: 16px; }

/* ── Feature grid ──────────────────────────────────────────────────────── */
.feature-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.feature {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  transition: border-color .16s ease, transform .16s ease;
}
.feature:hover { border-color: var(--line-2); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .feature:hover { transform: none; } }
.feature-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(95, 224, 138, .1); border: 1px solid rgba(95, 224, 138, .22);
  color: var(--accent); font-size: 16px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
}
.feature h3 { font-size: 1.04rem; font-weight: 620; margin: 0 0 9px; letter-spacing: -.012em; }
.feature p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ── Shortcuts ─────────────────────────────────────────────────────────── */
.keylist { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.keylist li {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 14px; border-radius: 9px;
}
.keylist li:nth-child(odd) { background: var(--surface); }
.keys { flex: 0 0 132px; display: flex; align-items: center; gap: 4px; }
kbd {
  display: inline-block; min-width: 26px; text-align: center;
  background: var(--field); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 6px;
  color: var(--text); font-family: var(--mono); font-size: 11.5px;
  padding: 3px 7px; line-height: 1.3;
}
.kplus { color: var(--muted); font-size: 11px; margin: 0 1px; }
.keylabel { color: var(--muted); font-size: .95rem; }

/* ── Vault ─────────────────────────────────────────────────────────────── */
.crypto-chip {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--field); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 11px 15px; margin-top: 24px;
}
.crypto-label { color: var(--muted); font-size: 13px; }
.crypto-arrow { color: var(--accent); }
.crypto-val { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checklist li {
  position: relative; padding-left: 30px;
  color: var(--muted); font-size: .97rem;
}
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--accent); font-size: 14px;
}
.checklist strong { color: var(--text); }
.checklist em { color: var(--text); font-style: italic; }

.sec-grid {
  display: grid; gap: 16px; margin-top: 52px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.sec-card {
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.sec-card h3 { font-size: .98rem; font-weight: 620; margin: 0 0 9px; }
.sec-card p { color: var(--muted); font-size: .91rem; margin: 0; }

/* ── Runtime table ─────────────────────────────────────────────────────── */
.runtime {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  max-width: 880px; margin: 0 auto;
}
.runtime-row { display: flex; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.runtime-row:last-child { border-bottom: 0; }
.runtime-row:nth-child(odd) { background: var(--surface); }
.runtime-k {
  flex: 0 0 130px; color: var(--accent);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase; padding-top: 3px;
}
.runtime-v { flex: 1 1 auto; color: var(--muted); font-size: .95rem; min-width: 0; word-break: break-word; }

/* ── Download: steps, callout, platforms, roadmap ──────────────────────── */
.steps { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; }
.step {
  display: flex; gap: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 26px;
}
.step-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(95, 224, 138, .12); border: 1px solid rgba(95, 224, 138, .3);
  color: var(--accent); font-family: var(--mono); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.step-b { flex: 1 1 auto; min-width: 0; }
.step-b h3 { font-size: 1.02rem; font-weight: 620; margin: 3px 0 13px; }

.code {
  background: var(--field); border: 1px solid var(--line);
  border-radius: 9px; padding: 14px 16px; margin: 0 0 10px;
  overflow-x: auto;
}
.code code {
  background: none; border: 0; padding: 0;
  font-family: var(--mono); font-size: 13px; color: var(--accent); line-height: 1.75;
}

.callout {
  max-width: 760px; margin: 26px auto 0;
  background: rgba(224, 193, 95, .05);
  border: 1px solid rgba(224, 193, 95, .22);
  border-left: 3px solid #e0c15f;
  border-radius: 10px; padding: 20px 24px;
}
.callout-h { font-weight: 620; font-size: .97rem; margin-bottom: 9px; }
.callout p { color: var(--muted); font-size: .93rem; }
.callout strong { color: var(--text); }

.plat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.plat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.plat-verified { border-color: rgba(95, 224, 138, .3); }
.plat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.plat-top h3 { font-size: 1.12rem; font-weight: 650; margin: 0; }
.pill {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.pill-verified { background: rgba(95, 224, 138, .13); color: var(--accent); border: 1px solid rgba(95, 224, 138, .3); }
.pill-untested { background: rgba(139, 150, 140, .1); color: var(--muted); border: 1px solid var(--line-2); }
.plat-status { color: var(--text); font-size: .95rem; margin: 0 0 6px; }
.plat-detail { color: var(--muted); font-size: .9rem; margin: 0 0 16px; }
.plat-min { border-top: 1px solid var(--line); padding-top: 13px; }
.plat-min-k {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.plat-min-v { color: var(--muted); font-size: .88rem; }

.road-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.road {
  display: flex; gap: 16px;
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.road-x {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--line-2); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.road h3 { font-size: .99rem; font-weight: 620; margin: 1px 0 8px; }
.road p { color: var(--muted); font-size: .91rem; margin: 0; }

/* ── Closer ────────────────────────────────────────────────────────────── */
.closer {
  text-align: center; max-width: 620px; margin: 72px auto 0;
  padding-top: 56px; border-top: 1px solid var(--line);
}
.closer h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 680; letter-spacing: -.022em; margin-bottom: 14px; }
.closer p { color: var(--muted); margin-bottom: 26px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.sitefoot { border-top: 1px solid var(--line); padding: 52px 0 30px; background: #0c1216; }
.foot-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 13px;
}
.footlink { display: block; color: var(--muted); font-size: .92rem; padding: 3px 0; }
.footlink:hover { color: var(--accent); text-decoration: none; }
.foot-base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 38px; padding-top: 22px;
}

/* ── Narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .vs-cols { grid-template-columns: 1fr; gap: 18px; }
  .mock-grid { height: 300px; }
}
@media (max-width: 620px) {
  .hero { padding: 56px 0 12px; }
  .band { padding: 60px 0; }
  .vs-row, .step { padding: 20px; gap: 14px; }
  .mock-grid { height: 260px; }
  .mock-gutter { flex-basis: 8px; }
  .keys { flex-basis: 118px; }
  .runtime-row { flex-direction: column; gap: 6px; }
  .runtime-k { flex-basis: auto; }
  .closer { margin-top: 48px; padding-top: 40px; }
}

/* ── /story: origin + build timeline ───────────────────────────────────── */
.story-prose { max-width: 700px; margin: 0 auto; }
.story-prose p { color: var(--muted); margin-bottom: 20px; }
.story-prose p:last-child { margin-bottom: 0; }
.story-prose strong, .story-prose em { color: var(--text); }

.tl-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-bottom: 52px;
}
.tl-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 26px; min-width: 132px;
}
.tl-stat-n {
  font-family: var(--mono); font-size: 1.35rem; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl-stat-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}

.tl-day { max-width: 780px; margin: 0 auto 40px; }
.tl-date {
  font-size: .95rem; font-weight: 620; color: var(--text);
  padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-item {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 4px; position: relative;
}
.tl-item + .tl-item { border-top: 1px solid rgba(35, 44, 51, .55); }
.tl-time {
  flex: 0 0 42px; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.tl-dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); align-self: center;
}
.tl-docs .tl-dot { background: var(--line-2); }
.tl-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.tl-subject { color: var(--text); font-size: .95rem; }
.tl-docs .tl-subject { color: var(--muted); }
.tl-sha {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
}
a.tl-sha:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

.tl-source {
  text-align: center; color: var(--line-2); font-size: 12px;
  font-family: var(--mono); margin: 8px 0 0;
}

@media (max-width: 620px) {
  .tl-item { gap: 10px; }
  .tl-time { flex-basis: 38px; }
  .tl-stat { padding: 14px 18px; min-width: 108px; }
}

/* ── Suggestion CTA ────────────────────────────────────────────────────── */
.suggest {
  display: flex; gap: 22px; align-items: flex-start;
  max-width: 780px; margin: 68px auto 0;
  background: linear-gradient(180deg, rgba(95, 224, 138, .05), rgba(95, 224, 138, .02));
  border: 1px solid rgba(95, 224, 138, .22);
  border-radius: var(--radius); padding: 30px 32px;
}
.suggest-mark {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(95, 224, 138, .12); border: 1px solid rgba(95, 224, 138, .3);
  color: var(--accent); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.suggest-body { flex: 1 1 auto; min-width: 0; }
.suggest-body h2 {
  font-size: 1.28rem; font-weight: 660; letter-spacing: -.02em; margin: 2px 0 10px;
}
.suggest-body p { color: var(--muted); font-size: .96rem; margin: 0 0 20px; }
.suggest-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.suggest-note {
  color: var(--line-2); font-size: 12.5px; margin: 16px 0 0 !important;
}

@media (max-width: 620px) {
  .suggest { flex-direction: column; gap: 16px; padding: 24px; margin-top: 48px; }
}

/* ── Contact form ──────────────────────────────────────────────────────────
   The honeypot must be genuinely invisible to people but still fillable by a bot,
   so it is moved off-canvas rather than display:none -- some bots skip hidden inputs. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform { max-width: 680px; margin: 0 auto; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cfield { display: block; margin-bottom: 18px; }
.cfield-l {
  display: block; margin-bottom: 7px;
  font-size: 13px; color: var(--text); font-weight: 550;
}
.cfield-l em { color: var(--muted); font-style: normal; font-weight: 400; font-size: 12px; }
.cinput {
  display: block; width: 100%;
  background: var(--field); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; font: inherit; font-size: .95rem; outline: none;
}
.cinput:focus { border-color: var(--accent); }
.cinput-area { resize: vertical; min-height: 150px; line-height: 1.6; }

.cform-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px;
}
.cform-note { color: var(--muted); font-size: 12.5px; margin: 0; flex: 1 1 220px; }
.cform-note.is-bad { color: var(--warn); }

.cform-done {
  max-width: 680px; margin: 0 auto; text-align: center;
  background: var(--surface); border: 1px solid rgba(95, 224, 138, .3);
  border-radius: var(--radius); padding: 44px 32px;
}
.cform-tick {
  width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(95, 224, 138, .13); border: 1px solid rgba(95, 224, 138, .35);
  color: var(--accent); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.cform-done h2 { font-size: 1.3rem; font-weight: 650; margin-bottom: 10px; }
.cform-done p { color: var(--muted); margin-bottom: 24px; }

.cform-alt {
  max-width: 680px; margin: 30px auto 0; padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: .92rem; text-align: center;
}

@media (max-width: 620px) {
  .cform-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── Download list ─────────────────────────────────────────────────────── */
.dl-group { max-width: 820px; margin: 0 auto 40px; }
.dl-os {
  font-size: 1.05rem; font-weight: 650; color: var(--text);
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.dl-list { display: flex; flex-direction: column; gap: 12px; }
.dl {
  display: flex; align-items: center; gap: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
}
.dl-tested { border-color: rgba(95, 224, 138, .28); }
.dl-main { flex: 1 1 auto; min-width: 0; }
.dl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.dl-head h3 { font-size: 1rem; font-weight: 620; margin: 0; }
.dl-arch {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 7px;
}
.dl-note { color: var(--muted); font-size: .9rem; margin: 0; }
.dl-cmd { margin: 12px 0 0 !important; padding: 10px 13px !important; }
.dl-cmd code { font-size: 12px; }
.dl-get {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.dl-get .btn { font-family: var(--mono); font-size: 13px; min-width: 104px; text-align: center; }
.dl-size { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.unsigned-grid {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.unsigned {
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.unsigned h3 { font-size: 1rem; font-weight: 620; margin: 0 0 10px; }
.unsigned p { color: var(--muted); font-size: .92rem; margin: 0; }
.unsigned strong, .unsigned em { color: var(--text); }

@media (max-width: 620px) {
  .dl { flex-direction: column; align-items: stretch; gap: 16px; }
  .dl-get { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ── Pinstrip (Pixboard rail) ──────────────────────────────────────────────
   A 46px column pinned to the left edge. Deliberately outside the reading
   column: the whole argument for this format is that it never enters the
   content. Hidden below 1100px, where there is no room to do that honestly. */
px-pin {
  display: block;
  position: fixed; top: var(--nav-h); left: 0; bottom: 0; width: 46px; z-index: 90;
  background: #0b1013; border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
px-pin::-webkit-scrollbar { display: none; }
.pxpin-col { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 34px 0 14px; }
/* Ours, not the component's -- px-pin renders no "Paid" label and replaces its own
   innerHTML on every render, so a child would be wiped. It is docked into the same fixed
   gutter as a sibling, and .pxpin-col below reserves room for it. */
.rail-label {
  position: fixed; top: var(--nav-h); left: 0; z-index: 91;
  width: 46px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--line-2);
  background: #0b1013;
  cursor: help; user-select: none;
}
.rail-label:hover { color: var(--muted); text-decoration: none; }
.pxpin-cell { display: block; width: 40px; height: 40px; border-radius: 4px; overflow: hidden; }
.pxpin-cell img { display: block; width: 40px; height: 40px; object-fit: cover; }
.pxpin-cell:hover { outline: 1px solid var(--accent); outline-offset: 1px; }
.pxpin-mark { display: block; margin-top: 10px; opacity: .4; }
.pxpin-mark:hover { opacity: .9; }
.pxpin-mark img { display: block; width: 24px; height: 24px; }

/* hover card */
/* The component styles this card INLINE (white background, dark text) and positions it
   itself on document.body. Inline beats a stylesheet, so the look needs !important --
   and ONLY the look. Its position, z-index, opacity, visibility and transition are the
   component's show/hide machinery: override those and the flyout stops working, not just
   stops matching. Width is left alone too -- it sets max-width:320px. */
/* 0.1.7 reads these, so the card themes without an !important fight and without touching
   its show/hide machinery. The old overrides are gone. */
:root {
  --pxr-card-bg: var(--chrome);
  --pxr-card-fg: var(--text);
  --pxr-card-border: 1px solid var(--line-2);
  --pxr-card-radius: 12px;
  --pxr-card-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.pxpin-card { text-decoration: none; }
.pxpin-card:hover { border-color: var(--accent); text-decoration: none; }
/* An invisible bridge across the 8px gap between the rail and the card, so travelling
   between them never passes over dead space. */
.pxpin-card::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px;
}
.pxpin-card .pf-media,
.pxpin-card .pf-text { pointer-events: none; }  /* clicks belong to the card itself */
.pxpin-card[hidden] { display: none; }
.pf-media { line-height: 0; background: var(--field); }
.pf-media img, .pf-media video { display: block; width: 100%; height: auto; }
.pf-text { padding: 13px 15px 15px; }
.pf-text h4 { font-size: .95rem; font-weight: 620; margin: 0 0 6px; color: var(--text); }
.pf-text p { font-size: .85rem; color: var(--muted); margin: 0; line-height: 1.5; }
.pf-host {
  display: block; margin-top: 9px;
  font-family: var(--mono); font-size: 10.5px; color: var(--line-2);
}

/* Make room for the column without disturbing the centred layout.
   Shown from 700px up: at 46px the rail costs about 7% of a 700px viewport, and the
   300px hover card still has room to sit beside it. Below that it is hidden -- a
   phone has no width to spare and the card would cover the page it describes. */
@media (min-width: 700px) {
  body.has-rail { padding-left: 46px; }
  /* the header sits above the rail and spans the full width, so pull it back out of
     the body inset -- without adding the inset back as padding, or its centred
     container would sit 46px right of true centre */
  body.has-rail .topnav { margin-left: -46px; }
}
@media (max-width: 699px) {
  px-pin, .pxpin-card, .rail-label { display: none; }
}
/* the card must not overhang a narrow viewport */
@media (min-width: 700px) and (max-width: 900px) {
  .pxpin-card { width: min(300px, calc(100vw - 74px)); }
}

/* ── Screenshots ───────────────────────────────────────────────────────── */
.fx-h2 { font-size: 1.3rem; font-weight: 660; letter-spacing: -.02em; margin: 0 0 16px; }
.shot { margin: 0 0 22px; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.shot figcaption {
  color: var(--muted); font-size: .9rem; text-align: center;
  margin: 14px auto 0; max-width: 620px;
}
.shot figcaption strong { color: var(--text); }
.shot-wide { max-width: 1000px; margin-inline: auto; margin-bottom: 46px; }
.shot-grid {
  display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.shot-grid .shot figcaption { font-size: .86rem; }

/* ── Checksum dialog ───────────────────────────────────────────────────────
   Replaces a link to the raw text/plain file, which the browser renders with its
   own colours -- unreadable against a dark page. Native <dialog> so Esc, focus
   trapping and the backdrop come for free. */
.dl-sum-btn, .linklike {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.dl-sum-btn { margin-top: 10px; display: inline-block; }
.dl-sum-btn:hover, .linklike:hover { color: var(--accent); }
.linklike { font-family: inherit; font-size: inherit; color: var(--accent); }

.sum-modal {
  width: min(680px, calc(100vw - 32px)); padding: 0; border: 0;
  background: var(--chrome); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.sum-modal::backdrop { background: rgba(4, 8, 10, .72); backdrop-filter: blur(3px); }
.sum-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--line);
}
.sum-head h2 { font-size: 1.02rem; font-weight: 640; margin: 0; }
.sum-x {
  background: transparent; border: 0; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.sum-x:hover { color: var(--text); }
.sum-note { color: var(--muted); font-size: .84rem; margin: 0; padding: 14px 22px 4px; }
.sum-list { list-style: none; margin: 0; padding: 8px 22px 4px; }
.sum-row { padding: 11px 0; border-bottom: 1px solid rgba(35, 44, 51, .6); }
.sum-row:last-child { border-bottom: 0; }
.sum-row.is-target { background: rgba(95, 224, 138, .07); border-radius: 8px; padding-inline: 10px; }
.sum-file { font-size: .84rem; color: var(--text); margin-bottom: 6px; }
.sum-line { display: flex; align-items: center; gap: 10px; }
.sum-hash {
  flex: 1 1 auto; min-width: 0; word-break: break-all;
  background: var(--field); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 9px; font-size: 10.5px; color: var(--muted); line-height: 1.55;
}
.sum-copy {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--line-2);
  color: var(--muted); border-radius: 7px; padding: 6px 11px;
  font-size: 11.5px; cursor: pointer;
}
.sum-copy:hover { border-color: var(--accent); color: var(--text); }
.sum-copy.done { border-color: var(--accent); color: var(--accent); }
.sum-foot {
  color: var(--muted); font-size: .84rem; margin: 0;
  padding: 14px 22px 20px; border-top: 1px solid var(--line);
}
@media (max-width: 620px) {
  .sum-line { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ── Changelog ─────────────────────────────────────────────────────────── */
.cl { max-width: 820px; margin: 0 auto; }
.cl-rel { display: grid; grid-template-columns: 170px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--line); }
.cl-rel:first-child { border-top: 0; padding-top: 0; }
.cl-ver { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.cl-ver h2 { font-size: 1.1rem; font-weight: 660; margin: 0; font-family: var(--mono); }
.cl-date { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.cl-tag { font-size: 11px; font-family: var(--mono); color: var(--line-2); }
.cl-tag:hover { color: var(--accent); }
.cl-current .cl-ver h2 { color: var(--accent); }
.cl-grp {
  font-size: 11px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
/* .cl-note may now sit between the group heading and its list, which breaks a bare
   `.cl-grp + .cl-items` adjacency -- so match both paths. */
.cl-grp + .cl-items,
.cl-note + .cl-items { margin-bottom: 18px; }
/* A prose paragraph inside a changelog entry -- the framing sentence above a group's
   bullets, e.g. 0.1.13's "nothing was exploited in the wild".
   Deliberately NOT dimmer than the bullets: this is the sentence that tells a reader how
   alarmed to be about the list underneath, so it has to be at least as readable as the
   list. It is set apart by a rule down the left instead, which marks it as framing rather
   than as one more change. */
.cl-note {
  margin: 0 0 .7rem;
  padding-left: 10px;
  border-left: 2px solid var(--line-2);
  color: var(--text);
  font-size: .94rem;
  line-height: 1.6;
  max-width: 68ch;
}
.cl-grp + .cl-note { margin-top: -.15rem; }

.cl-items { list-style: none; margin: 0 0 4px; padding: 0; }
.cl-items li {
  position: relative; padding-left: 18px; margin-bottom: 9px;
  color: var(--muted); font-size: .94rem; line-height: 1.6;
}
.cl-items li::before { content: "·"; position: absolute; left: 4px; color: var(--line-2); }
.cl-items strong { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
  .cl-rel { grid-template-columns: 1fr; gap: 12px; }
  .cl-ver { flex-direction: row; align-items: center; gap: 10px; }
}

/* ── Donate ────────────────────────────────────────────────────────────── */
.donate {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 8px 15px; border-radius: 9px;
  border: 1px solid var(--line-2); color: var(--text);
  font-size: 13.5px; font-weight: 550;
}
.donate:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.donate-heart { color: var(--accent); font-size: 15px; line-height: 1; }
.donate-note { color: var(--line-2); font-size: 11.5px; margin: 8px 0 0; }
/* the rail's label is a link now, not just a caption */
a.rail-label { text-decoration: none; }
a.rail-label:hover { color: var(--accent); }

/* ── A withdrawn build ─────────────────────────────────────────────────────
   Uses the warning colour rather than the accent green: this is the one notice on the
   site that must not read as an announcement. Bordered and filled so it cannot be
   mistaken for body copy by someone scanning for the download button. */
.withdrawn {
  border: 1px solid rgba(224, 133, 127, .45);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  background: rgba(224, 133, 127, .07);
  padding: 20px 22px;
  max-width: 76ch;
}
.withdrawn p { margin: 0 0 .7rem; color: var(--text); font-size: .96rem; line-height: 1.6; }
.withdrawn p:last-child { margin-bottom: 0; }
.withdrawn-h {
  font-weight: 650; color: var(--warn) !important;
  display: flex; align-items: baseline; gap: 9px;
}
.withdrawn-sub { color: var(--muted) !important; font-size: .9rem !important; }

/* A withdrawn release in the changelog. Warning colour, not accent -- and the entry is
   dimmed so the eye skips past it while scanning for the one to install. */
.pill-pulled {
  background: rgba(224, 133, 127, .12) !important;
  border-color: rgba(224, 133, 127, .45) !important;
  color: var(--warn) !important;
}
.cl-pulled .cl-ver h2 { color: var(--warn); text-decoration: line-through; text-decoration-thickness: 1px; }
.cl-pulled .cl-body { opacity: .62; }

/* Secondary troubleshooting note under a build (the AppImage/FUSE case). Set apart from
   the main note so it reads as "if this goes wrong", not as another thing to do first. */
.dl-note-alt {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: .88rem;
}

/* "Run by us -- with a caveat": ran, but not in the state it ships in. Amber, not green:
   it must not read as a clean pass at a glance, which is the only way most people read a
   pill at all. */
.pill-caveat {
  background: rgba(224, 193, 95, .12);
  border-color: rgba(224, 193, 95, .42);
  color: #e0c15f;
}

/* A platform the current release has no build for, offered from an earlier one. Amber like
   pill-caveat rather than red: nothing is wrong with the build on offer, it is just not
   current, and dressing that as a fault would be its own kind of dishonesty. */
.pill-behind {
  background: rgba(224, 193, 95, .12);
  border-color: rgba(224, 193, 95, .42);
  color: #e0c15f;
  margin-left: 10px;
  vertical-align: middle;
}
.dl-group-behind .dl-os { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.dl-group-behind .dl { border-style: dashed; }
.dl-behind-why {
  max-width: 68ch;
  margin: 0 0 18px;
  padding-left: 13px;
  border-left: 2px solid rgba(224, 193, 95, .42);
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

/* ── Blog ──────────────────────────────────────────────────────────────────
   Reuses .story-prose for the body, so a post reads exactly like the story page and
   there is one set of prose rules to keep consistent, not two. */
.post-list { max-width: 720px; margin-inline: auto; display: grid; gap: 28px; }
.post-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 22px 24px;
}
.post-card-link { color: var(--text); text-decoration: none; }
.post-card-link:hover { color: var(--accent); text-decoration: none; }
.post-card h2 { font-size: 1.35rem; letter-spacing: -.02em; margin: 0 0 6px; }
.post-card-date { color: var(--muted); font-family: var(--mono); font-size: 12px; margin: 0 0 10px; }
.post-card-dek { color: var(--muted); font-size: .96rem; line-height: 1.6; margin: 0 0 14px; }
.post-card-more { font-size: .92rem; }
.post-title { font-size: clamp(2rem, 4.5vw, 3rem); }
.post-back { color: var(--accent); }

.post-body { max-width: 720px; margin-inline: auto; }
.post-body h2 { font-size: 1.4rem; letter-spacing: -.02em; margin: 34px 0 12px; }
.post-body pre.code { margin: 16px 0; padding: 14px 16px; overflow-x: auto; }
.post-body ul { color: var(--muted); line-height: 1.7; }
.post-body li { margin-bottom: 8px; }
.post-stats { list-style: none; padding: 0; }
.post-stats li { padding-left: 0; }
.post-stats strong { color: var(--text); font-family: var(--mono); }

/* Measurements table -- scrolls on its own rather than pushing the page wide. */
.post-table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: .94rem; display: block; overflow-x: auto; }
.post-table th, .post-table td { padding: 8px 14px 8px 0; text-align: left; border-bottom: 1px solid var(--line); }
.post-table th { color: var(--muted); font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.post-table td { color: var(--muted); }
.post-table strong { color: var(--text); }

/* The "I have not tested this" note -- set apart so it cannot read as a finding. */
.post-open {
  margin-top: 28px; padding: 16px 18px;
  border-left: 3px solid var(--line-2); background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted); font-size: .95rem;
}
/* An inline "measured at one moment" qualifier -- quieter than the figure it qualifies,
   so the number still reads first but the caveat travels with it. */
.post-note { color: var(--line-2); font-size: .86em; }