/* ============================================================
   Swiftpoint Hub — the front page: what the Z3 is, and what is here
   for it.

   Design tokens, the reset and the header live in the shared
   layers (tokens.css, base.css, hdr.css) and are loaded before
   this file. Only home-specific layout belongs here.
   ============================================================ */

/* The page container, the same primitive the gallery defines for
   itself: two pages, two sheets, one measurement. */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ============ Header extras ============ */
/* .hdr, .hdr-in, .brand, .hdr-nav, .hdr-link, .hdr-actions and
   .hdr-bmc are owned by css/hdr.css — only the home-specific bits
   are declared here. */

.beta-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--on-accent);
  background: var(--lime);
  border-radius: var(--r-pill);
  padding: 3px 9px 2px;
}

/* ============ Hero ============ */

.home-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 24px 44px;
  animation: riseIn 0.5s var(--ease) backwards;
}
.hero-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
}
.home-hero h1 {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lede {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  color: var(--text-dim);
}
.lede-sub {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}

/* The hero's own answer sheet: six facts about the hardware, visible
   without scrolling past the headline. The pills are claims, not links —
   everything they promise is answered further down the page. */
.hero-beats {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
  max-width: 780px;
}
.hero-beats li {
  margin: 0;
  padding: 6px 12px 5px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.hero-tools {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 14px;
}
.hero-tool {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  background: var(--surface);
  transition: transform 0.12s var(--ease), border-color 0.15s ease, background 0.15s ease;
}
.hero-tool:hover {
  transform: translateY(-2px);
  border-color: var(--lime);
  background: var(--lime-dim);
}
.hero-tool-title {
  margin: 14px 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.hero-tool:hover .hero-tool-title { color: var(--lime-hi); }
.hero-tool-title::before {
  content: '';
  width: 8px; height: 8px;
  flex: none;
  border-radius: 2px;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(198, 245, 66, 0.5);
}
.hero-tool-desc {
  margin: 6px 16px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-faint);
}
.hero-tool-go {
  margin: auto 16px 14px;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  transition: color 0.15s ease;
}
.hero-tool:hover .hero-tool-go { color: var(--lime); }

/* ── Per-tool preview panels ── */
.tool-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  padding: 12px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
}

/* Browse — single gallery card */
.tp-minicard {
  width: 100%; max-width: 224px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.tp-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.tp-game { color: var(--text-faint); font-size: 11px; margin-top: 1px; }
.tp-tags { display: flex; gap: 5px; }
.tp-pill {
  font-size: 10px; font-family: var(--font-mono);
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(79, 216, 196, 0.35);
  color: var(--teal);
}
.tp-pill.tp-pill-alt { border-color: rgba(79, 216, 196, 0.2); opacity: 0.75; }
.tp-stats { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-stats b { color: var(--text); font-family: var(--font-mono); font-weight: 600; }

/* Builder — mini button map (like the editor's Mouse view) */
.tp-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%; max-width: 224px;
}
.tp-mcell {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  padding: 7px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tp-cell-k {
  flex: none;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.04em;
}
.tp-cell-c {
  min-width: 0;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-mcell.tp-l { border-color: rgba(79, 216, 196, 0.4); }
.tp-mcell.tp-l .tp-cell-k { color: var(--teal); }
.tp-mcell.tp-deep { border-color: rgba(255, 159, 69, 0.5); background: rgba(255, 159, 69, 0.07); }
.tp-mcell.tp-deep .tp-cell-k { color: var(--orange); }
.tp-mcell.tp-tilt { border-color: rgba(198, 245, 66, 0.35); }
.tp-mcell.tp-tilt .tp-cell-k { color: var(--lime); }

/* OLED — animated 64×32 canvas + frame strip */
.tp-oled { flex-direction: column; gap: 8px; }
.tp-oled canvas {
  width: 100%; max-width: 152px; height: auto;
  image-rendering: pixelated;
  background: var(--oled-canvas);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tp-frame-strip { display: flex; gap: 4px; }
.tp-frame-strip i {
  width: 20px; height: 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.tp-frame-strip i.on {
  border-color: var(--lime);
  box-shadow: 0 0 6px rgba(198, 245, 66, 0.45);
}

/* Checker report mock */
.tp-report {
  width: 100%; max-width: 226px;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim);
}
.tp-line { display: flex; align-items: center; gap: 6px; }
.tp-line b { color: var(--text); font-weight: 600; }
.tp-report-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px dashed var(--line-strong);
  margin-top: 4px; padding-top: 5px;
}
.tp-ok { display: flex; align-items: center; gap: 6px; color: var(--lime); font-weight: 600; }
.tp-errz { color: var(--text-dim); }
.tl-dot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.td-teal { background: var(--teal); }
.td-orange { background: var(--orange); }
.td-lime { background: var(--lime); }
.hero-stats {
  margin: 34px 0 0;
  padding-top: 24px;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 64px;
}
.hero-stats dt {
  order: 2;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero-stats dd {
  order: 1;
  margin: 0 0 3px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

/* ============ Front page sections ============ */

/* The section index. A page this long needs a way in: six anchors, one
   per question, in the order the page asks them. */
.lp-index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  font-size: 13px;
}
.lp-index-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: 10px;
}
.lp-index a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lp-index a:hover {
  color: var(--lime-hi);
  border-color: var(--lime);
  background: var(--lime-dim);
  text-decoration: none;
}
.lp-index a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.lp-section {
  padding: 40px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
  scroll-margin-top: 76px;
}
.lp-section:first-of-type { border-top: 0; margin-top: 0; padding-top: 28px; }

/* The number that says where you are. Monospaced, faint, one word. */
.lp-kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* A run of four to six cards under a section head. */
.lp-sub {
  margin: 34px 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.lp-prose {
  max-width: 68ch;
}
.lp-prose p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 14px 0 0;
}
.lp-prose a,
.lp-more a { color: var(--lime-hi); text-decoration: none; }
.lp-prose a:hover,
.lp-more a:hover { text-decoration: underline; }
.lp-prose code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}
.hero-cta .btn { text-decoration: none; }

/* The spec sheet, as a table of facts. Twelve rows is a list; a grid of
   label/value pairs is a datasheet, and it is the fastest way to answer
   "can it do X" without a paragraph. */
.lp-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin: 28px 0 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lp-specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  background: var(--surface);
}
.lp-specs dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.lp-specs dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  text-align: right;
}

/* A row of facts that is not a table: the extras the mouse reports besides
   button presses, the Z2→Z3 deltas. Pills, because none of them needs a
   value you have to compare against another. */
.lp-chips {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lp-chips li {
  margin: 0;
  padding: 7px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-dim);
}
.lp-chips li b {
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}
.lp-chips--wide li {
  font-family: var(--font-mono);
  font-size: 11.5px;
}

/* Deep Click, drawn without drawing a mouse: one press, three stages, a
   tick where the haptics fire. The bar is the argument; the numbers under
   it are the part you can change. */
.lp-force {
  margin-top: 22px;
  padding: 16px 20px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.lp-force-scale {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
}
.lp-force-bar {
  position: relative;
  display: flex;
  height: 72px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.lp-force-z {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 0 15px;
  border-right: 1px solid var(--line);
}
.lp-force-z:last-of-type { border-right: 0; }
.lp-force-z b {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.lp-force-z i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.lp-force-z--1 { flex: 35 1 0%; background: var(--teal-dim); }
.lp-force-z--2 { flex: 35 1 0%; background: var(--orange-dim); }
.lp-force-z--3 { flex: 30 1 0%; background: var(--lime-dim); }
.lp-force-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(198, 245, 66, 0.55);
}
.lp-force-tick::after {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--lime);
}
.lp-force-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 18px;
  margin-top: 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}
.lp-force-h {
  display: inline-block;
  width: 2px;
  height: 10px;
  margin-right: 5px;
  vertical-align: -1px;
  background: var(--lime);
  box-shadow: 0 0 8px rgba(198, 245, 66, 0.5);
}

.lp-note {
  margin: 18px 0 0;
  max-width: 72ch;
  padding: 12px 16px;
  border-left: 2px solid var(--teal);
  background: var(--teal-dim);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.lp-note b { color: var(--text); font-weight: 600; }

/* What the mouse is: the hardware, one card per capability. */
.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.lp-feature {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.lp-feature--wide { grid-column: 1 / -1; }
.lp-feature h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.lp-feature p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--text-dim);
}
.lp-feature code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* A worked example, as a table. Three columns, monospaced cells: this is
   the shape a binding actually has, and seeing the shape is the point. */
.lp-table {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.lp-tr {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 20px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
}
.lp-tr:last-child { border-bottom: 0; }
.lp-tr--head {
  background: var(--bg-raise);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.lp-tr--head + .lp-tr { box-shadow: inset 0 1px 0 var(--line); }
.lp-tr span:first-child { color: var(--text); }

/* Two snippets, one protocol. The tab bar is a radio group, not a
   script: the Python block is the default, so a reader with no
   JavaScript still gets a working example, and the arrow keys move
   between the two the way a tab list is expected to. */
.lp-code {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--code-bg);
  overflow: hidden;
}
.lp-code-in {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.lp-code-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 10px 0;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
}
.lp-code-tab {
  padding: 6px 14px 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.lp-code-tab:hover { color: var(--text-dim); }
#lp-x1-py:checked ~ .lp-code-tabs .lp-code-tab[for='lp-x1-py'],
#lp-x1-js:checked ~ .lp-code-tabs .lp-code-tab[for='lp-x1-js'] {
  color: var(--lime-hi);
  background: var(--code-bg);
  border-color: var(--line);
}
#lp-x1-py:focus-visible ~ .lp-code-tabs .lp-code-tab[for='lp-x1-py'],
#lp-x1-js:focus-visible ~ .lp-code-tabs .lp-code-tab[for='lp-x1-js'] {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}
.lp-code-body {
  display: none;
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-dim);
  tab-size: 4;
}
#lp-x1-py:checked ~ .lp-code-body[data-lang='python'],
#lp-x1-js:checked ~ .lp-code-body[data-lang='js'] {
  display: block;
}
.lp-code-body code {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

/* The X1 API, as a conversation. The whole point of the section is that
   the interface is one line in and one line out, so it is shown as one —
   and the buttons send real command strings, so the shape is the lesson. */
.lp-term {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--code-bg);
  overflow: hidden;
}
.lp-term-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}
.lp-term-title {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}
.lp-term-state { margin-left: auto; }
.lp-term-out {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  min-height: 156px;
  max-height: 232px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
}
.lp-term-line {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-dim);
}
.lp-term-line--sys { color: var(--text-faint); }
.lp-term-line--cmd { color: var(--text); }
.lp-term-line--cmd::before { content: '\203A '; color: var(--lime); }
.lp-term-line--ok { color: var(--lime); }
.lp-term-line--err { color: var(--red); }
.lp-term-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 16px;
}
.lp-term-key {
  margin: 0;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.lp-term-key:hover {
  color: var(--lime-hi);
  border-color: var(--lime);
  background: var(--lime-dim);
}
.lp-term-key:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Use cases: one card per job, three bindings each. The bindings are the
   payload — a sentence about what the mouse is for is only useful next to
   the three lines that make it true. */
.lp-uses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.lp-uses--slim { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lp-use {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.lp-use h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.lp-use p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.lp-binds {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.lp-binds li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-dim);
}
.lp-binds li span {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--lime-hi);
}
.lp-binds li b {
  text-align: right;
  font-weight: 500;
  color: var(--text-dim);
}

/* Start here: one card per situation, in reading order. */
.lp-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
}
.lp-steps li {
  counter-increment: step;
  margin: 0;
  padding: 18px 20px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
}
.lp-steps li::before {
  content: counter(step);
  position: absolute;
  top: 18px;
  left: 20px;
  width: 20px;
  height: 20px;
  margin-left: 0;
  border-radius: 6px;
  background: var(--lime-dim);
  border: 1px solid var(--lime-glow);
  color: var(--lime-hi);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.lp-steps h3 {
  margin: 0 0 8px 30px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.lp-steps p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.lp-steps a { color: var(--lime-hi); text-decoration: none; }
.lp-steps a:hover { text-decoration: underline; }

/* What a profile is: the four words the guides keep using. */
.lp-defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px 32px;
  margin: 24px 0 0;
}
.lp-defs dt {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lime-hi);
  margin-bottom: 5px;
}
.lp-defs dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--text-dim);
}

/* The newest profiles, server-rendered: real links, no JavaScript. */
.lp-newest,
.lp-guides {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}
.lp-newest li,
.lp-guides li {
  margin: 0;
  /* The grid stretches the <li>, but the link inside it is a block that
     only takes its own content height — so a card with a description
     stood taller than one without and the row came out as a staircase.
     The list item is the flex row, the link is the one that grows. */
  display: flex;
}
.lp-empty {
  color: var(--text-faint);
  font-size: 13.5px;
}
.lp-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lp-item:hover { border-color: var(--lime); background: var(--lime-dim); text-decoration: none; }
.lp-item-t {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
/* One line per card. A title that wraps is the single largest source of
   height difference in a row of these, and a truncated title is still a
   title you can open; the badge keeps its size either way. */
.lp-item-n {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-item:hover .lp-item-t { color: var(--lime-hi); }
.lp-item-m {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--text-faint);
}
/* Bottom-aligned, so the descriptions of a row line up with each other
   instead of each one starting wherever its title ended. */
.lp-item-d {
  margin-top: auto;
  padding-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.lp-item-badge {
  flex: none;
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  vertical-align: 2px;
}
.lp-more { margin: 18px 0 0; font-size: 13.5px; }

/* What happens to your files. */
.lp-trust {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  max-width: 78ch;
}
.lp-trust li {
  position: relative;
  padding: 0 0 14px 26px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
}
.lp-trust li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--lime);
  border-radius: 3px;
}
.lp-trust strong { color: var(--text); font-weight: 600; }
.lp-trust a { color: var(--lime-hi); text-decoration: none; }
.lp-trust a:hover { text-decoration: underline; }
.lp-trust code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Footer is the shared .ftr in js/chrome.js + css/hdr.css */

/* Upload modal, forms, toasts and the notification bell are the shared
   components in css/ui.css (markup is unchanged). */

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

@media (max-width: 1024px) {
  .hero-tools { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .home-hero { padding: 48px 16px 32px; }
  .hero-stats { gap: 16px 36px; }
  .hero-tools { grid-template-columns: 1fr; }
  .hero-beats { gap: 6px; }
  .lp-section { padding-top: 28px; margin-top: 28px; }
  .lp-prose p { font-size: 15px; }
  .lp-newest,
  .lp-guides,
  .lp-uses { grid-template-columns: 1fr; }
  .lp-specs { grid-template-columns: 1fr; }
  .lp-specs > div { padding: 10px 14px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .lp-index { gap: 6px; }
  .lp-index-k { flex: 1 1 100%; margin: 0 0 4px; }
  .lp-tr {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 10px 14px;
  }
  .lp-tr--head { display: none; }
  .lp-force { padding: 14px 12px 12px; }
  .lp-force-z { padding: 0 9px; }
  .lp-force-z b { font-size: 12.5px; }
  .lp-term-out { font-size: 11.5px; }
  .lp-steps { grid-template-columns: 1fr; }
}