/* Layout: a working engineering tool's page. Dark like the app itself, one mint "data" colour for anything a run measures. */
:root {
  --bg: #0d0d0e;
  --panel: #151516;
  --raised: #1c1c1d;
  --line: #2a2a2c;
  --line-strong: #444446;
  --fg: #ededee;
  --muted: #9b9ba0;
  --data: #5fe0a6;
  --data-soft: rgba(95, 224, 166, .12);
  --bad: #e6826b;
  --draft: #e3b55c;
  --draft-soft: rgba(227, 181, 92, .12);
  --on-fg: #0d0d0e;
  --f-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fafaf8; --panel: #ffffff; --raised: #f1f1ee; --line: #e2e2de; --line-strong: #c4c4bf;
    --fg: #111112; --muted: #5c5c60; --data: #17845a; --data-soft: rgba(23, 132, 90, .10);
    --bad: #b8492f; --draft: #9a6400; --draft-soft: rgba(154, 100, 0, .10); --on-fg: #fafaf8;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #fafaf8; --panel: #ffffff; --raised: #f1f1ee; --line: #e2e2de; --line-strong: #c4c4bf;
  --fg: #111112; --muted: #5c5c60; --data: #17845a; --data-soft: rgba(23, 132, 90, .10);
  --bad: #b8492f; --draft: #9a6400; --draft-soft: rgba(154, 100, 0, .10); --on-fg: #fafaf8;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 520px) { .wrap { padding-inline: 16px; } }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; line-height: 1.1; }
h3 { font-size: 19px; font-weight: 600; line-height: 1.25; }
p { margin: 0; }
a { color: inherit; }
.mono, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lede { color: var(--muted); font-size: 18px; max-width: 60ch; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }

.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 500 12px var(--f-mono); background: transparent; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.chip[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); }

/* nav */
nav.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
nav.top .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.navlinks { display: flex; gap: 24px; font-size: 14px; color: var(--muted); margin-left: auto; }
.navlinks a { text-decoration: none; white-space: nowrap; }
.navlinks a:hover { color: var(--fg); }
@media (max-width: 760px) { .navlinks { display: none; } nav.top .btn.ghost { display: none; } nav.top .wrap > .btn.primary { margin-left: auto; } }

/* wordmark, after logo proposal 3 */
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.mark .sq { width: 26px; height: 26px; border-radius: 3px; background: var(--fg); overflow: hidden; position: relative; flex: none; }
.mark .sq span { position: absolute; left: -3px; top: 50%; transform: translateY(-50%); font: 700 12px/1 var(--f-display); color: var(--on-fg); letter-spacing: -.02em; white-space: nowrap; }
.mark .word { font: 500 17px/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase; }

.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--f-body); text-decoration: none; padding: 12px 18px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--fg); color: var(--on-fg); }
.btn.primary:hover { opacity: .9; }
.btn.ghost { border-color: var(--line-strong); color: var(--fg); background: transparent; }
.btn.ghost:hover { border-color: var(--fg); }
nav.top .btn { padding: 9px 14px; }

/* hero */
.hero { padding-block: 72px 56px; }
.hero .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero .grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding-block: 48px 40px; } }
.hero h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 600; line-height: 1.02; margin-block: 18px 22px; }
.hero h1 em { font-style: normal; color: var(--data); }
.hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 32px; }
.hero .fine { font-size: 13px; color: var(--muted); }

/* films recorded in the app */
.film { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0d0d0e; }
.film figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.film figcaption b { color: var(--fg); font-weight: 500; }
.player { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .player { grid-template-columns: 1fr; } }
.tabs { display: grid; gap: 8px; }
.tab { text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; color: var(--muted); cursor: pointer; display: grid; gap: 4px; font: inherit; }
.tab b { color: var(--fg); font: 600 17px/1.25 var(--f-display); }
.tab span { font-size: 14px; }
.tab .len { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tab[aria-selected="true"] { border-color: var(--fg); background: var(--panel); }
.tab:hover { border-color: var(--line-strong); }
@media (max-width: 860px) { .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tab span { display: none; } }
@media (max-width: 480px) { .tabs { grid-template-columns: 1fr; } }
section { padding-block: 88px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { section { padding-block: 60px; } }
.sec-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }

/* loop */
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.loop > div { padding: 24px 22px 26px; border-right: 1px solid var(--line); display: grid; gap: 10px; align-content: start; background: var(--panel); }
.loop > div:last-child { border-right: 0; }
.loop .step { font: 500 12px var(--f-mono); color: var(--data); }
.loop p { color: var(--muted); font-size: 15px; }
.loop .io { font: 400 12px/1.5 var(--f-mono); color: var(--muted); border-top: 1px dashed var(--line-strong); padding-top: 10px; margin-top: 4px; }
.loopback { display: flex; align-items: center; gap: 14px; margin-top: 18px; color: var(--muted); font-size: 15px; }
.loopback svg { flex: none; }
.loopback b { color: var(--fg); font-weight: 600; }
@media (max-width: 860px) { .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loop > div:nth-child(2) { border-right: 0; } .loop > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 480px) { .loop { grid-template-columns: 1fr; } .loop > div { border-right: 0; border-bottom: 1px solid var(--line); } .loop > div:last-child { border-bottom: 0; } }

/* questions */
.qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.qs div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); align-items: baseline; }
.qs .t { font: 500 13px var(--f-mono); color: var(--data); }
.qs .q { font-size: 17px; }
@media (max-width: 760px) { .qs { grid-template-columns: 1fr; } }

/* why */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; gap: 36px; } }
.why ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.why li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; color: var(--muted); }
.why li b { color: var(--fg); font-weight: 600; display: block; }
.why li::before { content: ""; width: 8px; height: 8px; margin-top: 9px; background: var(--data); border-radius: 1px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px; display: grid; gap: 16px; min-width: 0; }
.card .verdict { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pill { font: 500 12px var(--f-mono); padding: 4px 9px; border-radius: 4px; border: 1px solid currentColor; }
.pill.bad { color: var(--bad); }
.bars { display: grid; gap: 9px; font: 400 12px var(--f-mono); }
.bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 46px; gap: 10px; align-items: center; color: var(--muted); }
.bar .track { height: 8px; background: var(--raised); border-radius: 2px; position: relative; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--line-strong); border-radius: 2px; }
.bar.hot .fill { background: var(--bad); }
.bar.hot { color: var(--fg); }
.bar .need { position: absolute; top: -4px; bottom: -4px; width: 1.5px; background: var(--fg); left: 83.3%; }
.bar .num { text-align: right; }
.explain { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.explain b { color: var(--fg); font-weight: 500; }
.illus { font: 400 11px var(--f-mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

/* validation */
.vtable { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 680px; }
.tablebox { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.vtable th { text-align: left; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--line); }
.vtable td { padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vtable tr:last-child td { border-bottom: 0; }
.vtable .src { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.vtable .num { white-space: nowrap; }
.vtable .ours { color: var(--data); }
.vtable tr.scale td { background: var(--raised); }
.vnote { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 22px; font-size: 14px; color: var(--muted); }

/* features */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; }
.feats div { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.feats p { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .feats { grid-template-columns: 1fr; } }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
.plan { border: 1px solid var(--line); border-radius: 10px; padding: 26px 24px; display: grid; gap: 16px; align-content: start; background: var(--panel); }
.plan.lead { border-color: var(--fg); }
.plan .price { font: 600 34px/1 var(--f-display); }
.plan .price small { font: 400 14px var(--f-body); color: var(--muted); }
.plan .was { font: 400 13px var(--f-mono); color: var(--muted); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--muted); }
.plan li::before { content: "– "; color: var(--line-strong); }
.plan .btn { justify-content: center; }
.seats { font: 500 12px var(--f-mono); color: var(--data); }

/* faq */
.faq { display: grid; gap: 0; max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 18px; }
.faq summary { cursor: pointer; font: 600 18px/1.35 var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin-top: 10px; max-width: 68ch; }

.final { text-align: left; }
.final .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; }
.final h2 { font-size: clamp(32px, 5vw, 52px); max-width: 16ch; }

footer { border-top: 1px solid var(--line); padding-block: 36px 48px; font-size: 13px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; }
footer .links { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--fg); }

/* v2: hero demo with cues */
.hero2 { padding-block: 56px 48px; }
.hero2 .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
@media (max-width: 960px) { .hero2 .wrap { grid-template-columns: 1fr; gap: 32px; } }
.hero2 h1 { font-size: clamp(32px, 3.6vw, 46px); font-weight: 600; line-height: 1.05; margin-block: 16px 20px; }
.hero2 .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero2 .fine { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 46ch; }
.demo { margin: 0; display: grid; gap: 12px; min-width: 0; }
.demo-frame { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0d0d0e; }
.demo-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.demo-open { position: absolute; right: 10px; bottom: 10px; font: 500 12px var(--f-mono); color: #ededee; background: rgba(13,13,14,.82); border: 1px solid #2e2e30; border-radius: 6px; padding: 6px 10px; text-decoration: none; }
.demo-open:hover { border-color: #ededee; }
.cues { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .cues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cues li { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; cursor: pointer; background: var(--panel); transition: border-color .2s, background .2s; min-width: 0; }
.cues li.on { border-color: var(--data); background: var(--data-soft); }
.cue-k { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cue-v { font-size: 14px; }
.cue-v b { font: 600 22px/1 var(--f-display); margin-right: 2px; }
.cue-v em { font-style: normal; color: var(--data); }
.demo figcaption { font-size: 13px; color: var(--muted); }
/* v2: project steps */
.steps { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.steps li { display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.steps .n { font: 500 12px var(--f-mono); color: var(--data); }
.steps b { font: 600 18px/1.25 var(--f-display); }
.steps span:last-child { color: var(--muted); font-size: 15px; }
/* v2: improve */
.improve-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 960px) { .improve-grid { grid-template-columns: 1fr; } }
.compare { display: grid; gap: 12px; min-width: 0; }
.compare-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ctable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.ctable th { text-align: left; font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ctable td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ctable tr:last-child td { border-bottom: 0; }
.ctable td.num { white-space: nowrap; text-align: right; }
.ctable th:not(:first-child) { text-align: right; }
.ctable .good { color: var(--data); }
.ctable .bad { color: var(--bad); }
.ctable tr.rec td { background: var(--data-soft); }
.ctable .tag { display: inline-block; margin-left: 8px; font: 500 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--data); border: 1px solid var(--data); border-radius: 4px; padding: 1px 6px; vertical-align: 2px; }
.compare .note { font-size: 14px; color: var(--muted); }
/* v2: validation summary + phone cards */
.proof { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }
.proof li { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.proof b { font: 600 17px var(--f-display); }
.proof span { color: var(--muted); font-size: 15px; }
@media (max-width: 640px) {
  .vbox { overflow: visible; border: 0; background: transparent; }
  .vtable { min-width: 0; }
  .vtable thead { display: none; }
  .vtable, .vtable tbody, .vtable tr, .vtable td { display: block; width: 100%; }
  .vtable tr { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: var(--panel); padding: 6px 0; }
  .vtable td { border: 0; padding: 6px 14px; }
  .vtable td.num { display: flex; justify-content: space-between; gap: 12px; white-space: normal; }
  .vtable td.num::before { content: attr(data-k); color: var(--muted); font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
}
/* v2: pricing */
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
@media (max-width: 760px) { .plans.two { grid-template-columns: 1fr; } }
.soon { font: 500 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }

.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: start; }
.rules li { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.rules .k { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--data); }
.rules b { font: 600 20px/1.2 var(--f-display); }
.rules li > span:last-child { color: var(--muted); font-size: 15px; }

/* In-page films start when they come into view: no player chrome. A thin
   line shows how far the film has run; a click pauses or resumes. */
video[data-inview] { cursor: pointer; }
.film { position: relative; }
.film .film-progress { position: absolute; left: 0; height: 2px; width: 0; background: var(--data, #5fe0a6); opacity: .85; pointer-events: none; transition: width .25s linear; }
.film.is-paused::before { content: 'Paused · click to play'; position: absolute; z-index: 2; top: 10px; right: 10px; padding: 3px 8px; border-radius: 4px; font: 500 11px/1.4 var(--mono, ui-monospace, monospace); color: #ededee; background: rgba(13,13,14,.82); border: 1px solid #2e2e30; pointer-events: none; }

/* The films open on black before their title fades in. The still (an eventful
   frame) stays over the film until the title is up, at the start and on every
   loop, so scrolling to a film never shows a black box. */
.film-still { position: absolute; z-index: 1; object-fit: cover; pointer-events: none; opacity: 1; transition: opacity .35s ease; }
.film-still.is-hidden { opacity: 0; }

/* v3: multi-page site */
.why-example { margin-top: 56px; display: grid; gap: 18px; }
.go-link { font: 500 13px var(--f-mono); color: var(--data); text-decoration: none; justify-self: start; }
.go-link:hover { text-decoration: underline; }
.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 860px) { .twocol { grid-template-columns: 1fr; } }
.twocol h3 { margin-bottom: 14px; }
.navlinks a[aria-current="page"] { color: var(--fg); }
.menu-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--fg); width: 40px; height: 36px; cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle svg { width: 18px; height: 18px; }
@media (max-width: 1120px) {
  .navlinks { display: none; }
  nav.top .btn.ghost { display: none; }
  .menu-toggle { display: inline-flex; margin-left: 0; }
  nav.top .wrap { gap: 10px; }
  nav.top .wrap > .btn.primary { margin-left: auto; padding: 8px 12px; }
  .mark .word { letter-spacing: .12em; font-size: 15px; }
  nav.top.open .navlinks { display: grid; position: absolute; top: 60px; left: 0; right: 0; gap: 0; padding: 8px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 16px; }
  nav.top.open .navlinks a { padding: 12px 0; border-bottom: 1px solid var(--line); }
}
h1.ph { font-size: clamp(30px, 4.2vw, 46px); font-weight: 600; line-height: 1.08; }
.page-first { border-top: 0; padding-top: 56px; }
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 860px) { .benefits { grid-template-columns: 1fr; gap: 20px; } }
.benefits div { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--data); }
.benefits h3 { font-size: 21px; }
.benefits p { color: var(--muted); }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } }
.door { display: grid; gap: 10px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-decoration: none; transition: border-color .2s; }
.door:hover { border-color: var(--fg); }
.door h3 { font-size: 22px; }
.door p { color: var(--muted); }
.door .go { font: 500 13px var(--f-mono); color: var(--data); }
.proofline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }
.proofline p { color: var(--muted); max-width: 70ch; }
.proofline b { color: var(--fg); font-weight: 600; }
.optional { margin-top: 20px; padding: 14px 18px; border-left: 2px solid var(--data); background: var(--data-soft); border-radius: 0 8px 8px 0; color: var(--fg); max-width: 760px; }

/* Logo (Machsizer): inline SVG drawn with the theme's own colours. */
.mark .logo { display: block; height: 26px; width: auto; }
footer .mark .logo { height: 26px; }
@media (max-width: 1120px) { .mark .logo { height: 22px; } }

/* Guide pages (takt-time.html) */
.guide-body { max-width: 760px; }
.guide-body h2 { font-size: clamp(26px, 3vw, 34px); margin: 56px 0 16px; }
.guide-body p { color: var(--muted); line-height: 1.75; margin: 0 0 16px; }
.guide-body p a { color: var(--fg); }
.guide-body .formula { font-family: var(--f-mono); color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 14px 18px; }
.guide-body .tablebox { margin: 8px 0 20px; overflow-x: auto; }
.takt-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.takt-calc label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.takt-calc input { font: 16px var(--f-mono); color: var(--fg); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 4px; padding: 10px 12px; }
.takt-calc output { grid-column: 1 / -1; font-family: var(--f-mono); color: var(--muted); padding-top: 4px; }
.takt-calc output b { color: var(--data); font-size: 22px; margin-right: 6px; }
@media (max-width: 600px) { .takt-calc { grid-template-columns: 1fr; } }
.guide-body ol.connect-steps { color: var(--muted); line-height: 1.75; margin: 0 0 20px; padding-left: 1.4em; }
.guide-body ol.connect-steps li { margin: 0 0 8px; padding-left: .3em; }
.guide-body ol.connect-steps b { color: var(--fg); font-weight: 600; }
.guide-body code { font: 14px var(--f-mono); color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
.guide-body .formula code, .ctable code { border: 0; background: none; padding: 0; }
.guide-body .ctable th:nth-child(2) { text-align: left; }