/* metiche — the landing page at metiche.xyz.
 *
 * Standalone on purpose: it does not load app.css, because the board is a
 * 13px operations surface and this is a 16px reading surface. It does speak
 * the same language — the token names, the palette and the severity system
 * below are the ones in static/app.css, kept deliberately in sync.
 *
 * The palette is the icon: an eye drawn as two graph strokes crossing.
 *
 *   coral   #FB345D   one agent's path
 *   indigo  #3018AA   the other agent's path
 *   violet  #5317FB   where they overlap — every conflict is violet
 *   cyan    #01E3FC   the spark: a side with nobody opposite yet
 *   navy    #180655   the ground
 *   white   #FCFCFB   the ink
 *
 * Mostly navy and white. Colour is earned by meaning, never used for
 * decoration: if something on this page is coral, it is one side of a
 * collision; if it is violet, two paths have crossed.
 */

:root {
  --coral:  #FB345D;
  --indigo: #3018AA;
  --violet: #5317FB;
  --cyan:   #01E3FC;
  --navy:   #180655;
  --white:  #FCFCFB;

  /* --- dark, the default (same as the board) ------------------------- */
  --bg:        #07021a;
  --bg-2:      #0b0526;
  --panel:     #120a33;
  --panel-2:   #1a1042;
  --line:      #2a1d5e;
  --line-soft: #1e1449;

  --ink:   #FCFCFB;
  --ink-2: #c3b8e8;
  --ink-3: #8a7dba;

  /* true indigo and true violet are too dark to sit as text or thin strokes
     on a navy ground, so each has an "ink" variant. */
  --indigo-ink: #9282ff;
  --violet-ink: #a57cff;
  --coral-ink:  #ff6f8b;
  --cyan-ink:   #01E3FC;

  --indigo-bg: #1c1259;
  --coral-bg:  #3a0f22;
  --violet-bg: #241058;
  --cyan-bg:   #062b38;
  --quiet-bg:  #150e38;

  --accent: #9282ff;
  --live:   #9282ff;

  --sev-low:        #8073b8;
  --sev-low-bg:     #170e3c;
  --sev-low-line:   #2e2266;
  --sev-medium-line:#0d5f7a;
  --sev-high-line:  #7d1f38;
  --sev-critical-line: #7c4cff;

  --wash-high:     #260d18;
  --wash-critical: #160a38;
  --wash-medium:   #07202c;

  --code-bg: #08031e;

  /* The mark's own two strokes. True indigo is too dark to read against the
     navy ground, so the dark theme carries a lifted variant and the light
     theme uses the icon's literal colour. */
  --mark-indigo: #4d31dd;
  --mark-violet: #8355ff;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --r: 8px;
  --maxw: 1080px;
  --shadow: 0 1px 2px #00000055;
}

/* --- light: same hues, inverted ground, darkened brights for contrast --- */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f6f4fc;
    --bg-2:      #ece9f8;
    --panel:     #FCFCFB;
    --panel-2:   #f2effc;
    --line:      #d6d0ee;
    --line-soft: #e4e0f4;

    --ink:   #180655;
    --ink-2: #443878;
    --ink-3: #6b6199;

    --indigo-ink: #3018AA;
    --violet-ink: #4a12e0;
    --coral-ink:  #c40d38;
    --cyan-ink:   #05697b;

    --indigo-bg: #e8e4fb;
    --coral-bg:  #ffe8ed;
    --violet-bg: #ece4ff;
    --cyan-bg:   #e0f8fc;
    --quiet-bg:  #f0edfa;

    --accent: #3018AA;
    --live:   #3018AA;

    --sev-low:        #635891;
    --sev-low-bg:     #f0edfa;
    --sev-low-line:   #dcd6f0;
    --sev-medium-line:#96dce8;
    --sev-high-line:  #f8a8ba;
    --sev-critical-line: #3a0fb8;

    --wash-high:     #fff5f7;
    --wash-critical: #f7f3ff;
    --wash-medium:   #f0fbfd;

    --code-bg: #130450;

    --mark-indigo: #3018AA;
    --mark-violet: #5317FB;

    --shadow: 0 1px 2px #18065514;
  }
}

* { box-sizing: border-box; }

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

body.lp {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.lp a { color: inherit; text-decoration: none; }
.lp p { margin: 0 0 14px; }
.lp h1, .lp h2, .lp h3 { margin: 0; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.lp strong { font-weight: 650; color: var(--ink); }
.lp em { font-style: normal; color: var(--coral-ink); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: 22px; padding-right: 22px; }
@media (max-width: 480px) { .wrap { padding-left: 16px; padding-right: 16px; } }

/* Grid children default to min-width:auto, which lets one wide code block or
   one long unbroken path shove a whole column past the viewport. Nothing on
   this page is allowed to do that; the code blocks scroll inside themselves. */
.hero .wrap > *, .queue > *, .steps > *, .two-up > *, .collide > *, .honest > *,
.rules > *, .mini-lanes > *, .viewlist > *, .join-grid > *, .jsteps > *,
.contrast > *, .tools > * { min-width: 0; }

.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- nav */

.lp-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.lp-nav .wrap { display: flex; align-items: center; gap: 18px; height: 58px; }
.brandbar { display: flex; align-items: center; gap: 9px; margin-right: auto; }
.brandbar img { width: 26px; height: 26px; display: block; }
.brandbar .word {
  font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: -0.6px; color: var(--ink);
}
.brandbar .word .dot { color: var(--coral); }
.lp-nav .links { display: flex; gap: 4px; }
.lp-nav .links a {
  padding: 6px 11px; border-radius: 6px; font-size: 13.5px; color: var(--ink-3); font-weight: 500;
}
.lp-nav .links a:hover { color: var(--ink); background: var(--panel-2); }
.lp-nav .links a, .lp-nav .btn { white-space: nowrap; }
/* Five links, the wordmark and the call to action need ~960px; below that the
 * links wrapped two words to a line and squeezed the button onto two lines. */
@media (max-width: 960px) { .lp-nav .links { display: none; } }
@media (max-width: 960px), (pointer: coarse) {
  .brandbar { min-height: 44px; }
  .lp-nav .btn.small { min-height: 40px; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14.5px; font-weight: 600;
  padding: 10px 18px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.btn:hover { border-color: var(--accent); }
.btn.primary {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
}
.btn.primary:hover { background: var(--violet); border-color: var(--violet); }
.btn .arw { opacity: .7; font-family: var(--mono); }
.btn.small { font-size: 13px; padding: 8px 14px; }
@media (max-width: 480px) {
  /* thumb-width calls to action, stacked */
  .cta-row .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
}

/* ---------------------------------------------------------------- hero */

.hero { position: relative; padding: clamp(34px, 7vw, 78px) 0 clamp(40px, 7vw, 74px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 5vw, 56px); align-items: center; }
@media (max-width: 880px) {
  /* Copy first on a phone. The mark is the hook, but the headline is the
     ten-second payload and it should not be below the fold. */
  .hero .wrap { grid-template-columns: 1fr; gap: 30px; }
  .mark { max-width: 320px; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px 4px 10px;
  background: var(--panel);
}
.eyebrow .sq { width: 7px; height: 7px; border-radius: 2px; background: var(--coral); flex: none; }
/* at phone width the tracked caps wrapped the pill onto two lines */
@media (max-width: 480px) { .eyebrow { font-size: 10.5px; letter-spacing: .06em; margin-bottom: 14px; } }

.headline { font-size: clamp(30px, 5.2vw, 48px); line-height: 1.03; letter-spacing: -0.035em; }
.headline .b { display: block; }
.headline .b2 { color: var(--ink-3); }

.lede { margin-top: 20px; font-size: clamp(15.5px, 2vw, 18px); color: var(--ink-2); max-width: 34em; }
.lede b { color: var(--ink); font-weight: 600; }
/* what it is, under what it does */
.def { margin-top: 12px; font-size: clamp(14px, 1.6vw, 15.5px); color: var(--ink-3); max-width: 38em; }
.def b { color: var(--ink-2); font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* Below 960px the header's "Live demo" link is gone and the header keeps only
 * "Get your team on it" — so in the hero the demo goes first, and both calls
 * to action are on the first screen exactly once. Wider, the order is as
 * written: join first. */
@media (max-width: 960px) { .hero .cta-row .btn.demo { order: -1; } }

.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; font-size: 12.5px; color: var(--ink-3); }
.facts span { display: inline-flex; align-items: center; gap: 7px; }
.facts .d { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); opacity: .6; flex: none; }

/* ---------------------------------------------------------------- the mark */

.hero-art { display: grid; place-items: center; }
.mark { width: 100%; max-width: 400px; height: auto; aspect-ratio: 1 / 1; display: block; }
/* Below the copy on a phone the full-width mark was a 330px interstitial
 * between the calls to action and the first section. Smaller, same drawing. */
@media (max-width: 480px) { .hero .mark { max-width: 200px; } }

.mark .stroke-a { stroke: var(--coral); }
.mark .stroke-b { stroke: var(--mark-indigo); }
.mark .cross { stroke: var(--mark-violet); }
.mark .iris-a { fill: var(--coral); }
.mark .iris-b { fill: var(--mark-violet); }
.mark .pupil { fill: var(--navy); }
.mark .glint { fill: var(--white); }
.mark .spark { stroke: var(--cyan); }

/* Default state is the FINISHED state, so a reduced-motion viewer and a
 * no-CSS-animation client both see the mark, not an empty box. Motion is
 * added only where it is welcome. */
.mark .path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mark .cross, .mark .iris, .mark .sparks { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .mark .path { stroke-dashoffset: 1; animation: draw 1.6s cubic-bezier(.34,.02,.2,1) forwards; }
  .mark .cross  { opacity: 0; animation: fade .5s ease-out 1.25s forwards; }
  .mark .iris   { opacity: 0; transform-origin: 100px 100px; animation: iris .6s cubic-bezier(.2,1.3,.4,1) 1.45s forwards; }
  .mark .sparks { opacity: 0; animation: fade .5s ease-out 1.9s forwards, pulse 3.4s ease-in-out 2.4s infinite; }
}
@keyframes draw  { to { stroke-dashoffset: 0; } }
@keyframes fade  { to { opacity: 1; } }
@keyframes iris  { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.mark-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  margin-top: 6px; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono);
}
.mark-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.mark-legend .a i { background: var(--coral); }
.mark-legend .b i { background: var(--mark-indigo); }
.mark-legend .c i { background: var(--mark-violet); }

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(38px, 6vw, 72px) 0; border-top: 1px solid var(--line-soft); }
.section.alt { background: var(--bg-2); }

.sec-head { max-width: 46em; margin-bottom: clamp(22px, 3vw, 34px); }
.sec-eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}
.sec-head h2 { font-size: clamp(23px, 3.6vw, 33px); }
.sec-head .sub { margin-top: 12px; font-size: clamp(14.5px, 1.7vw, 16.5px); color: var(--ink-2); }

/* ---------------------------------------------------------------- problem */

.queue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 800px) { .queue { grid-template-columns: 1fr; } }
.beat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 17px 18px; box-shadow: var(--shadow);
}
.beat .n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px;
}
.beat h3 { font-size: 16px; margin-bottom: 7px; }
.beat p { font-size: 14px; color: var(--ink-2); margin: 0; }

/* The thesis of the section, not an alert. It previously wore the
   high-severity treatment — a coral wash and a coral left bar — which read as
   an error modal and, worse, spent the one colour reserved for "something
   needs you" on a sentence nobody needs to act on. Emphasis here is
   typographic: more size, more space, a hairline above, no box. */
.pullquote {
  margin: 32px 0 0; padding: 26px 0 2px;
  border: 0; border-top: 1px solid var(--line);
  background: none; border-radius: 0;
  font-size: clamp(18px, 2.7vw, 25px); line-height: 1.32;
  letter-spacing: -0.012em; color: var(--ink); font-weight: 600;
  max-width: 62ch;
}
.pullquote .after { display: block; margin-top: 12px; font-size: 15px; line-height: 1.55; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }

/* ---------------------------------------------------------------- steps */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 18px 20px; box-shadow: var(--shadow);
}
.step .num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; margin-bottom: 12px;
  background: var(--indigo-bg); color: var(--indigo-ink); border: 1px solid var(--line);
}
.step h3 { font-size: 16.5px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--ink-2); }
.step p:last-child { margin-bottom: 0; }
.step code, .inline-code {
  font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- code */

.code {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow);
}
.code .code-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 13px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); background: #ffffff08;
}
.code .code-head { flex-wrap: wrap; row-gap: 0; }
.code .code-head .fn { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.code pre {
  margin: 0; padding: 13px 15px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: #cdc2f0;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 480px) { .code pre { font-size: 11.5px; } }
.code .k  { color: #9282ff; }            /* key */
.code .s  { color: #7fe8d0; }            /* string */
.code .c  { color: #7b6fab; }            /* comment */
.code .hi { color: #ff8fa5; }            /* the line that matters */
.code .ok { color: #7fe8d0; }

/* a tool response as the agent actually reads it */
.resp {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--code-bg);
}
.resp .rh {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-bottom: 1px solid var(--line); background: #ffffff08;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.resp .rb { padding: 11px 13px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: #cdc2f0; overflow-x: auto; }
@media (max-width: 480px) { .resp .rb { font-size: 11.5px; } }
.resp .rb .row { white-space: pre-wrap; word-break: break-word; }
.resp .sev { font-weight: 700; }
.resp .sev.high     { color: #ff8fa5; }
.resp .sev.critical { color: #b18cff; }
.resp .sev.medium   { color: var(--cyan); }
.resp .sev.alert    { color: var(--cyan); }
.resp .dim  { color: #7b6fab; }
.resp .act  { color: #9fe8c8; }
.resp .you  { color: #ff8fa5; }
.resp .them { color: #9282ff; }

/* ---------------------------------------------------------------- collisions */

.collide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 900px) { .collide { grid-template-columns: 1fr; } }
.collide .wide { grid-column: 1 / -1; }

.cc {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 17px 18px 18px; box-shadow: var(--shadow);
  border-top: 3px solid var(--line);
}
.cc.k-path     { border-top-color: var(--coral); }
.cc.k-contract { border-top-color: var(--cyan); background: linear-gradient(180deg, var(--wash-medium), var(--panel) 42%); }
.cc.k-decision { border-top-color: var(--violet); }
.cc.k-dup      { border-top-color: var(--indigo-ink); }

.cc .kind {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 4px; margin-bottom: 12px; font-weight: 600;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-3);
}
.cc.k-path     .kind { color: var(--coral-ink);  border-color: var(--sev-high-line);     background: var(--coral-bg); }
.cc.k-contract .kind { color: var(--cyan-ink);   border-color: var(--sev-medium-line);   background: var(--cyan-bg); }
.cc.k-decision .kind { color: var(--violet-ink); border-color: var(--sev-critical-line); background: var(--violet-bg); }
.cc.k-dup      .kind { color: var(--indigo-ink); border-color: var(--line);              background: var(--indigo-bg); }

.cc h3 { font-size: clamp(17px, 2.3vw, 20px); margin-bottom: 9px; }
.cc .scene { font-size: 14.5px; color: var(--ink-2); }
.cc .scene b { color: var(--ink); font-weight: 600; }
.cc > .resp { margin-top: auto; }
.cc .why {
  margin-top: 12px; font-size: 13px; color: var(--ink-3);
  border-left: 2px solid var(--line); padding-left: 11px;
}
.cc .why > p { margin: 0; }
/* The note behind each card is a <details>: a 40px toggle on a phone, where
 * four cards of it were ~3000px of scrolling. */
.cc .why > summary {
  display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer;
  list-style: none; font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.cc .why > summary::-webkit-details-marker { display: none; }
.cc .why > summary::before { content: "+"; font-family: var(--mono); color: var(--ink-3); width: 1ch; }
.cc .why[open] > summary::before { content: "−"; }
.cc .why[open] > summary { margin-bottom: 2px; }
/* Two columns of cards: the note is simply there, as it always was — no
 * toggle. Browsers that cannot style ::details-content keep the toggle. */
@media (min-width: 901px) {
  @supports selector(::details-content) {
    .cc .why > summary { display: none; }
    .cc .why::details-content { content-visibility: visible; height: auto; }
  }
}

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
@media (max-width: 760px) { .two-up { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- coming next
 *
 * Anything not built yet carries .soon-badge and, on a card, .soon. Muted, not
 * faded: the copy stays at --ink-2 so it reads, but the border goes dashed and
 * the accent colour drains out, so it never looks like the live card. */

.soon-badge {
  display: inline-flex; align-items: center; flex: none;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; line-height: 1.6; white-space: nowrap;
  padding: 0 6px; border-radius: 3px;
  color: var(--ink-2); background: var(--quiet-bg); border: 1px dashed var(--ink-3);
  vertical-align: 1px;
}
.live-badge {
  display: inline-flex; align-items: center; flex: none;
  font-size: 9.5px; letter-spacing: .1em; font-weight: 700; line-height: 1.6; white-space: nowrap;
  padding: 0 6px; border-radius: 3px;
  color: var(--ink); background: var(--panel); border: 1px solid currentColor;
}

#what .soon-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 34px 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-3);
}
.collide-soon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.collide-soon > * { min-width: 0; }
@media (max-width: 900px) { .collide-soon { grid-template-columns: 1fr; } }

.cc.soon {
  background: transparent; box-shadow: none;
  border: 1px dashed var(--line); border-top: 3px dashed var(--line);
}
.cc.soon .kind {
  flex-wrap: wrap; color: var(--ink-3); background: transparent; border-color: var(--line);
}
.cc.soon h3 { color: var(--ink-2); font-size: clamp(16px, 2vw, 17px); }
.cc.soon .scene { font-size: 14px; margin-bottom: 0; }

.rules li.soon { background: var(--bg-2); color: var(--ink-3); }
.rules li.soon b { color: var(--ink-2); }
.rules li.soon .g { color: var(--ink-3); }

.viewlist div.soon { background: transparent; border-style: dashed; color: var(--ink-3); }
.viewlist div.soon b { color: var(--ink-2); }

/* ---------------------------------------------------------------- honest */

.honest { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(18px, 4vw, 40px); align-items: start; }
@media (max-width: 880px) { .honest { grid-template-columns: 1fr; } }
.honest p { font-size: clamp(15px, 1.9vw, 17px); color: var(--ink-2); }
.honest p.big { font-size: clamp(18px, 2.6vw, 24px); line-height: 1.3; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }

.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rules li { background: var(--panel); padding: 11px 14px; font-size: 13.5px; color: var(--ink-2); display: flex; gap: 10px; }
.rules li b { color: var(--ink); font-weight: 600; }
.rules li .g { color: var(--accent); font-family: var(--mono); flex: none; }

.contrast { display: grid; gap: 10px; margin-top: 18px; }
.contrast div { padding: 11px 14px; border-radius: 6px; font-size: 13.5px; border: 1px solid var(--line); }
.contrast .noise { background: var(--quiet-bg); color: var(--ink-3); }
.contrast .signal { background: var(--indigo-bg); color: var(--ink); border-color: var(--accent); }
.contrast .lab { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 4px; color: var(--ink-3); }
.contrast .signal .lab { color: var(--accent); }

/* ---------------------------------------------------------------- mini board */

.mini { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); }
.mini-head {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.mini-head .word { font-family: var(--mono); font-weight: 700; color: var(--ink); letter-spacing: -.4px; }
.mini-head .word .dot { color: var(--coral); }
.mini-head .cur { margin-left: auto; display: flex; gap: 7px; font-family: var(--mono); font-size: 11px; }
.mini-head .cur b { font-weight: 600; color: var(--ink-3); }
.mini-head .cur .seq { color: var(--coral-ink); }
.mini-head .cur .rev { color: var(--indigo-ink); }

.mini-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 11px; }
@media (max-width: 820px) { .mini-lanes { grid-template-columns: 1fr; } }
.ml { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 7px; overflow: hidden; }
.ml-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.ml-head .av {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  background: var(--indigo-bg); color: var(--indigo-ink);
}
.ml-head .nm { font-size: 13px; font-weight: 600; }
.ml-head .lb { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.ml-body { padding: 9px 10px 11px; }
.ml-body.sev-high     { background: var(--wash-high);     box-shadow: inset 3px 0 0 var(--coral); }
.ml-body.sev-alert    { background: var(--wash-medium);   box-shadow: inset 3px 0 0 var(--cyan); }
.ml-body.calm         { box-shadow: inset 3px 0 0 var(--live); }
.ml-status { font-size: 13px; font-weight: 550; color: var(--ink); margin-bottom: 7px; }
.ml-body.idle .ml-status { color: var(--ink-3); font-weight: 400; font-style: italic; }
.ml-path {
  display: flex; gap: 7px; align-items: center; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-2); border-left: 2px solid var(--line); padding: 0 0 0 6px; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-path .m { color: var(--ink-3); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.ml-path.hot { border-left-color: var(--coral); color: var(--coral-ink); }
.tag {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  padding: 1px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 650;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
}
.tag .gl { font-family: var(--mono); font-size: 9.5px; }
.tag.high  { color: var(--coral-ink); border-color: var(--sev-high-line);   background: var(--coral-bg); }
.tag.alert { color: #04222b; border-color: var(--cyan); background: var(--cyan); }
.tag.good  { color: var(--indigo-ink); border-color: var(--line); background: var(--indigo-bg); }

.caption { margin-top: 11px; font-size: 12.5px; color: var(--ink-3); }

.viewlist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 20px; }
@media (max-width: 700px) { .viewlist { grid-template-columns: 1fr; } }
.viewlist div { border: 1px solid var(--line); border-radius: 6px; padding: 11px 13px; background: var(--panel); font-size: 13.5px; color: var(--ink-2); }
.viewlist b { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink); margin-bottom: 3px; font-weight: 600; }

/* ---------------------------------------------------------------- join */

.join-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 40px); align-items: start; }
@media (max-width: 900px) { .join-grid { grid-template-columns: 1fr; } }

.jsteps { list-style: none; counter-reset: j; margin: 0; padding: 0; display: grid; gap: 16px; }
.jstep { counter-increment: j; position: relative; padding-left: 40px; }
.jstep::before {
  content: counter(j); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  background: var(--indigo-bg); color: var(--indigo-ink); border: 1px solid var(--line);
}
.jstep h3 { font-size: 16px; margin-bottom: 5px; }
.jstep p { font-size: 14px; color: var(--ink-2); margin-bottom: 0; }
/* three paragraphs with no gap read as one wall of text */
.jstep p + p, .jstep .code + p { margin-top: 12px; }
.jstep .code { margin-top: 11px; }
/* The install line is the one thing on this page a phone reader has to see
 * whole. Scrolled sideways it showed "…metiche.xyz/instal" and stopped, so it
 * wraps instead; copying it still yields one line. */
.jstep .code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .jstep { padding-left: 0; }
  .jstep::before { position: static; margin-bottom: 10px; }
}
.jstep .manual { margin-top: 4px; }
.jstep .manual a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  color: var(--accent); font-size: 14px; font-weight: 550;
}
.jstep .manual a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the copy button on the install line — code-block colours, not page colours,
 * because the block is dark in both themes */
.code .code-head .copy {
  margin-left: auto; min-height: 26px; padding: 2px 11px; cursor: pointer;
  font: inherit; font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: #cdc2f0; background: transparent; border: 1px solid #ffffff2e; border-radius: 5px;
}
.code .code-head .copy:hover { color: #fff; border-color: #9282ff; }
@media (max-width: 960px), (pointer: coarse) {
  .code.install .code-head { padding-top: 4px; padding-bottom: 4px; }
  .code .code-head .copy { min-height: 40px; min-width: 72px; }
}

.jstep h3 { padding-top: 3px; }
.jstep code {
  font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--ink);
}
/* the pasted-code placeholder: an example of the prompt, not a thing to copy */
.jstep .code.placeholder pre { color: #cdc2f0; font-style: italic; }

.codeform {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; box-shadow: var(--shadow);
}
.codeform h3 { font-size: 16px; margin-bottom: 6px; }
.codeform p { font-size: 13.5px; color: var(--ink-3); }
.codeform .manual { margin-top: 8px; }
.codeform .manual a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  color: var(--accent); font-size: 14px; font-weight: 550;
}
.codeform .manual a:hover { text-decoration: underline; text-underline-offset: 3px; }
.codeform .fine { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

/* the tools, by group — never by count, because the count moves */
.tools-lead { font-size: 14px; color: var(--ink-2); margin: 0; }
.toolgroups { margin: 12px 0 0; display: grid; gap: 7px; }
.toolgroups > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
@media (max-width: 480px) { .toolgroups > div { grid-template-columns: 1fr; } }
.toolgroups dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.toolgroups dd { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.toolgroups code {
  font-family: var(--mono); font-size: 11.5px; padding: 2px 7px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--ink-2);
  overflow-wrap: anywhere;
}
.toolgroups code.hot { color: var(--ink); border-color: var(--accent); background: var(--indigo-bg); font-weight: 600; }
.tools-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- footer */

.lp-foot { border-top: 1px solid var(--line-soft); padding: 30px 0 44px; background: var(--bg-2); }
.lp-foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.lp-foot .brandbar { margin-right: auto; }
.lp-foot .said { font-size: 12.5px; color: var(--ink-3); max-width: 46em; }
.lp-foot .links { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 13px; color: var(--ink-3); }
.lp-foot .links a { display: inline-flex; align-items: center; min-height: 40px; }
.lp-foot .links a:hover { color: var(--ink); }

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

/* Parked above the page rather than 9999px to its left, so it never reads as
 * horizontal overflow; it drops into view on focus. */
.skip {
  position: absolute; left: 12px; top: -200px;
  background: var(--panel); color: var(--ink); padding: 10px 14px; border-radius: 6px; z-index: 100;
  border: 1px solid var(--accent);
}
.skip:focus { top: 12px; }

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