/*
  termiskop.com — landing page styles.
  Implements docs/design/proto/landing-page/. Token VALUES are copied literally from the Termiskop
  token contract so the page reads as the same product; no new token names. This page is standalone
  static CSS — none of the app's Blazor component styles exist here.

  Flagged literals (per the design's redline, deliberately not tokenised): the 1000px content
  measure, the 40/18px gutters, the hero display sizes (38/28px), the 20px step circle, the 620px
  narrow breakpoint, and the #07090b code-block background.
*/

/* Self-hosted so the project's one public page has no third-party dependency. Latin subset of the
   JetBrains Mono VARIABLE font — one 31KB file covers the whole 400-700 range the page uses. */
@font-face{
  font-family:'JetBrains Mono';
  src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:100 800;            /* variable wght axis — not four static faces */
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --surface-bg:#0a0c0e; --surface-bg-1:#0e1114; --surface-bg-2:#14181c;
  --surface-bg-3:#1b2025; --surface-line:#23292f; --surface-line-2:#2e353c;
  --text:#d7dee4; --text-dim:#8b959e; --text-faint:#59626b;
  --accent-raw:#45d68b; --accent:var(--accent-raw);
  --accent-soft:color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-line:color-mix(in oklab, var(--accent) 38%, transparent);
  --warn:#e3b341; --err:#ec5b5f;
  --active:#9d7bf0; --active-soft:color-mix(in oklab, var(--active) 16%, transparent);
  --active-line:color-mix(in oklab, var(--active) 38%, transparent);
  --radius-chip:6px; --radius-control:7px; --radius-block:8px; --radius-modal:12px;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono','Cascadia Code', Menlo, Consolas, monospace;
  /* derived from --warn, not new named tokens (design redline flags these) */
  --warn-soft:color-mix(in oklab, var(--warn) 12%, transparent);
  --warn-line:color-mix(in oklab, var(--warn) 42%, var(--surface-line));
}
:root[data-theme="light"]{
  --surface-bg:#ffffff; --surface-bg-1:#f6f7f8; --surface-bg-2:#edeff1; --surface-bg-3:#e2e5e8;
  --surface-line:#e5e8eb; --surface-line-2:#d0d5da;
  --text:#1c2126; --text-dim:#59626b; --text-faint:#8b939b;
  --warn:#9a6a00; --err:#c43d33;
  --accent:color-mix(in oklab, var(--accent-raw), #0b0f14 20%);
}
/* Dark is the product's default, but honour a visitor whose OS asks for light. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --surface-bg:#ffffff; --surface-bg-1:#f6f7f8; --surface-bg-2:#edeff1; --surface-bg-3:#e2e5e8;
    --surface-line:#e5e8eb; --surface-line-2:#d0d5da;
    --text:#1c2126; --text-dim:#59626b; --text-faint:#8b939b;
    --warn:#9a6a00; --err:#c43d33;
    --accent:color-mix(in oklab, var(--accent-raw), #0b0f14 20%);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--surface-bg); color:var(--text); font-family:var(--mono); font-size:14px;
  line-height:1.6; -webkit-font-smoothing:antialiased; font-feature-settings:'liga' 0,'calt' 0;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
[hidden]{display:none !important;}
/* The UA stylesheet sets `font-family: monospace` ON the element, which beats the font inherited
   from body — so without this every <code> (the minisign key, both terminal commands) silently
   renders in the browser's default mono instead of JetBrains Mono. */
code{font-family:var(--mono);}

.site{min-height:100%;}
.mk{display:grid; place-items:center; border-radius:6px; background:var(--accent-soft);
  color:var(--accent); border:1px solid var(--accent-line);}
.mk svg{width:62%; height:62%; display:block;}
.mk.sm{width:20px; height:20px; border-radius:5px;}

.site-head{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:14px 40px; background:color-mix(in oklab,var(--surface-bg-1) 86%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--surface-line);}
.lockup{display:flex; align-items:center; gap:9px;}
.lockup:hover{text-decoration:none;}
.lockup .mk{width:24px; height:24px;}
.lockup .wm{font-size:16px; font-weight:600; letter-spacing:.01em; text-transform:lowercase; color:var(--text);}
.head-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.ver-pill{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-dim);
  background:var(--surface-bg-2); border:1px solid var(--surface-line);
  border-radius:var(--radius-chip); padding:3px 10px;}
.ver-pill .vp-dot{width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 6px var(--accent-line); flex:0 0 auto;}
.ver-pill.unknown{color:var(--text-faint);}
.ver-pill.unknown .vp-dot{background:var(--text-faint); box-shadow:none;}
.ver-pill b{color:var(--text); font-weight:600;}
.head-link{font-size:12.5px; color:var(--text-dim);}
.head-link:hover{color:var(--accent); text-decoration:none;}

.wrap{max-width:1000px; margin:0 auto; padding:64px 40px 96px;}

/* hero */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
.hero-eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
  margin-bottom:20px; display:flex; align-items:center; gap:9px;}
.hero-eyebrow .mk{width:34px; height:34px; border-radius:8px; flex:0 0 auto;}
.hero h1{margin:0 0 18px; font-size:38px; line-height:1.18; font-weight:600; letter-spacing:-.015em;
  color:var(--text); text-wrap:balance;}
.hero h1 .em{color:var(--accent);}
.hero p{margin:0; font-size:15px; line-height:1.68; color:var(--text-dim); max-width:44ch;}
.hero p b{color:var(--text); font-weight:500;}

/* mock terminal (product, not illustration) */
.term-win{border:1px solid var(--surface-line-2); border-radius:var(--radius-block); overflow:hidden;
  background:var(--surface-bg-1); box-shadow:0 24px 60px -24px rgba(0,0,0,.7);}
.tw-bar{display:flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  background:var(--surface-bg-1); border-bottom:1px solid var(--surface-line); font-size:12px;}
.tw-bar .mk{width:18px; height:18px; border-radius:5px; flex:0 0 auto;}
.tw-name{font-weight:600; letter-spacing:.01em;}
.tw-crumb{color:var(--text-faint);}
.tw-badge{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:10px;
  letter-spacing:.03em; color:var(--active); background:var(--active-soft);
  border:1px solid var(--active-line); border-radius:5px; padding:1px 7px;}
.tw-badge .d{width:5px; height:5px; border-radius:50%; background:var(--active);
  animation:pulse 1.4s ease-in-out infinite;}
.tw-body{padding:14px 16px 16px; font-size:12.5px; line-height:1.62; background:var(--surface-bg);
  white-space:pre-wrap; overflow-x:auto;}
.tw-body .l{display:block;}
.t-dim{color:var(--text-faint);} .t-accent{color:var(--accent);} .t-act{color:var(--active);} .t-warn{color:var(--warn);}
.tw-cursor{display:inline-block; width:.6em; height:1.02em; background:var(--accent);
  vertical-align:text-bottom; margin-left:2px; animation:blink 1.05s steps(1) infinite;}
@keyframes blink{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
/* An animated caret and a pulsing badge are decoration; stop them when asked to. */
@media (prefers-reduced-motion: reduce){
  .tw-cursor, .tw-badge .d{animation:none;}
  *{transition:none !important;}
}

/* section scaffolding */
.sec{margin-top:76px;}
.sec-eyebrow{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 6px;}
.sec-title{margin:0 0 6px; font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--text);}
.sec-sub{margin:0 0 24px; font-size:13.5px; color:var(--text-dim); max-width:60ch; line-height:1.6;}

/* download composition */
.dl-card{background:var(--surface-bg-1); border:1px solid var(--surface-line);
  border-radius:var(--radius-block); overflow:hidden;}
.dl-head{display:flex; align-items:center; gap:14px; padding:18px 22px;
  border-bottom:1px solid var(--surface-line); flex-wrap:wrap;}
.dl-head .dh-t{font-size:14px; font-weight:600; color:var(--text);}
.dl-head .dh-ver{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim);}
.dl-head .dh-ver .vp-dot{width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 6px var(--accent-line);}
.dl-head .dh-ver.unknown{color:var(--text-faint);}
.dl-head .dh-ver.unknown .vp-dot{background:var(--text-faint); box-shadow:none;}
.dl-primary{padding:22px; display:flex; align-items:center; gap:18px;
  border-bottom:1px solid var(--surface-line); flex-wrap:wrap;}
.dl-primary .dp-copy{flex:1; min-width:200px;}
.dp-label{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); margin-bottom:5px;}
.dp-target{font-size:15px; font-weight:600; color:var(--text);}
.dp-target .arch{color:var(--text-dim); font-weight:500;}
.dp-detected{margin-top:4px; font-size:11.5px; color:var(--text-faint); display:flex;
  align-items:center; gap:6px;}
.dp-detected .mk-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto;}
.btn-dl{display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#06120c;
  border:none; border-radius:var(--radius-control); padding:11px 20px; font:inherit; font-size:13.5px;
  font-weight:600; cursor:pointer; white-space:nowrap;}
.btn-dl:hover{filter:brightness(1.1); text-decoration:none;}
.btn-dl:active{filter:brightness(1.04) saturate(1.05); transform:translateY(.5px);}
.btn-dl:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
:root[data-theme="light"] .btn-dl{color:#fff;}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .btn-dl{color:#fff;} }
.btn-dl svg{flex:0 0 auto;}

/* all-platforms list */
.dl-all{padding:8px 12px 12px;}
.dl-all-h{display:flex; align-items:center; gap:8px; padding:10px 10px 8px; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);}

/* collapsible disclosures — open on desktop, tap-to-toggle on narrow */
.clp > summary{list-style:none; cursor:default;}
.clp > summary::-webkit-details-marker{display:none;}
.clp > summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-control);}
.clp-hint{display:none; margin-left:auto; align-items:center; gap:7px; font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim);}
.clp-hint .clp-chev{transition:transform .2s ease;}
.clp[open] .clp-hint .clp-chev{transform:rotate(180deg);}
.clp-hint .clp-shut{display:none;}
.clp[open] .clp-hint .clp-open{display:none;}
.clp[open] .clp-hint .clp-shut{display:inline;}

.pf-row{display:flex; align-items:center; gap:14px; padding:11px 10px;
  border-radius:var(--radius-control); border:1px solid transparent;}
.pf-row + .pf-row{margin-top:2px;}
.pf-row:hover{background:var(--surface-bg-2);}
.pf-row.detected{background:var(--accent-soft); border-color:var(--accent-line);}
.pf-chip{flex:0 0 auto; display:grid; place-items:center; min-width:52px; height:34px; padding:0 10px;
  font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--text-dim);
  background:var(--surface-bg-3); border:1px solid var(--surface-line-2); border-radius:var(--radius-chip);}
.pf-row.detected .pf-chip{color:var(--accent); background:transparent; border-color:var(--accent-line);}
.pf-id{flex:1; min-width:0;}
.pf-name{font-size:13px; color:var(--text); font-weight:500;}
.pf-row.detected .pf-name{color:var(--accent);}
.pf-meta{font-size:11.5px; color:var(--text-faint); margin-top:1px; display:flex; align-items:center;
  gap:7px; flex-wrap:wrap;}
.pf-meta .sz{color:var(--text-dim);}
.pf-tag{font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:4px; padding:1px 6px;}
.pf-get{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; background:transparent;
  border:1px solid var(--surface-line-2); color:var(--text-dim); border-radius:var(--radius-control);
  padding:6px 13px; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap;}
.pf-get:hover{border-color:var(--accent-line); color:var(--accent); text-decoration:none;}
.pf-get:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.pf-get svg{flex:0 0 auto;}

.dl-foot{padding:12px 22px; border-top:1px solid var(--surface-line); font-size:11.5px;
  color:var(--text-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.dl-foot b{color:var(--text-dim); font-weight:500;}

/* first-launch guidance — amber (--warn, never --err), per-platform, right under the download */
.fl{margin-top:20px; border:1px solid var(--warn-line); border-radius:var(--radius-block);
  background:var(--warn-soft); overflow:hidden;}
.fl + .fl{margin-top:12px;}   /* only reachable in the no-JS path, where all three render */
.fl-head{display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--warn-line);}
.fl-ico{flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px;
  border-radius:var(--radius-chip); color:var(--warn);
  background:color-mix(in oklab,var(--warn) 15%,transparent); border:1px solid var(--warn-line);}
.fl-title{font-size:13.5px; font-weight:600; color:var(--text);}
.fl-title .os{color:var(--warn);}
.fl-once{margin-left:auto; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--warn); background:color-mix(in oklab,var(--warn) 13%,transparent);
  border:1px solid var(--warn-line); border-radius:4px; padding:2px 7px; white-space:nowrap;}
.fl-body{padding:16px 18px 18px;}
.fl-lead{font-size:12.5px; color:var(--text-dim); line-height:1.6; margin:0 0 14px;}
.fl-lead b{color:var(--text);}
.fl-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; counter-reset:s;}
/* The step text is a run of prose with <b> in it, so the <li> must NOT be a flex container: flex
   would promote every <b> and every bare text run to its own flex item, and the sentence would
   shatter into columns (survivable on desktop, unreadable on a phone). Counter is positioned out
   of flow instead, leaving the text to wrap as ordinary inline content. */
.fl-steps li{position:relative; padding-left:31px; min-height:20px; font-size:12.5px;
  color:var(--text-dim); line-height:1.55;}
.fl-steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:1px;
  width:20px; height:20px; display:grid; place-items:center; font-size:10.5px; font-weight:700;
  color:var(--warn); background:color-mix(in oklab,var(--warn) 14%,transparent);
  border:1px solid var(--warn-line); border-radius:50%;}
.fl-steps li b{color:var(--text); font-weight:600;}
.fl-or{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin:14px 0 8px;}

/* copyable command */
.cmd{position:relative; display:flex; align-items:center; gap:10px; background:#07090b;
  border:1px solid var(--surface-line); border-radius:var(--radius-control); padding:9px 12px;}
:root[data-theme="light"] .cmd{background:#1b2026;}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .cmd{background:#1b2026;} }
.cmd code{flex:1; min-width:0; font-size:12px; color:#c7d0d8; overflow-x:auto; white-space:nowrap;}
.cmd code .p{color:var(--text-faint);}
.cp{flex:0 0 auto; font:inherit; font-size:10.5px; color:var(--text-dim); background:var(--surface-bg-3);
  border:1px solid var(--surface-line-2); border-radius:var(--radius-chip); padding:3px 9px; cursor:pointer;}
.cp:hover{color:var(--accent); border-color:var(--accent-line);}
.cp:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* verify */
.vf-details{background:var(--surface-bg-1); border:1px solid var(--surface-line);
  border-radius:var(--radius-block); padding:22px;}
.vf-details > .sec-sub{margin-top:16px;}
.vf-sum{display:flex; align-items:flex-start; gap:12px;}
.vf-sum-h{display:flex; flex-direction:column; gap:6px;}
.vf-sum .sec-eyebrow,.vf-sum .sec-title{margin:0;}
.vf-card{background:transparent; border:none; border-radius:0; padding:0;}
/* minmax(0,1fr), not 1fr: the verify command is a long `white-space:nowrap` string, and a bare 1fr
   track refuses to shrink below its content's min-content width — the right column would blow out
   and crush the left one to a few characters wide. The command scrolls inside .cmd instead. */
.vf-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; align-items:start;}
.vf-lead{font-size:12.5px; color:var(--text-dim); line-height:1.62; margin:0 0 14px;}
.vf-lead b{color:var(--text);}
.vf-k{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:0 0 7px;}
.vf-key{display:flex; align-items:flex-start; gap:10px; background:#07090b;
  border:1px solid var(--surface-line); border-radius:var(--radius-control); padding:11px 13px;}
:root[data-theme="light"] .vf-key{background:#1b2026;}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .vf-key{background:#1b2026;} }
.vf-key code{flex:1; min-width:0; font-size:12px; color:#c7d0d8; word-break:break-all; line-height:1.6;}
.vf-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.vf-steps li{font-size:12px; color:var(--text-dim); line-height:1.55;}
.vf-steps .cmd{margin-top:7px;}
.vf-steps code.ok{color:var(--accent);}

/* footer */
.site-foot{border-top:1px solid var(--surface-line); margin-top:20px;}
.foot-in{max-width:1000px; margin:0 auto; padding:28px 40px 44px; display:flex; align-items:center;
  gap:16px; flex-wrap:wrap;}
.foot-in .lockup .wm{font-size:14px;}
.foot-meta{margin-left:auto; display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap;
  font-size:11.5px; color:var(--text-faint);}
.foot-meta .dot{opacity:.5;}
.foot-meta a{color:var(--text-dim);}
.foot-meta a:hover{color:var(--accent);}

/* ───────── narrow-viewport design pass ─────────
   The prototype used a container query because it rendered inside a resizable demo frame. The real
   page has no such wrapper, so this is a plain viewport media query at the same 620px breakpoint. */
@media (max-width: 620px){
  .site-head{padding:12px 18px; gap:9px;}
  .head-right .head-link{display:none;}
  .wrap{padding:34px 18px 64px;}
  .hero{grid-template-columns:1fr; gap:30px;}
  .hero h1{font-size:28px; margin-bottom:14px;}
  .hero p{max-width:none;}
  .hero-media{order:-1;}
  .term-win{box-shadow:0 14px 34px -18px rgba(0,0,0,.7);}
  .sec{margin-top:52px;}
  .sec-title{font-size:19px;}
  .dl-primary{flex-direction:column; align-items:stretch; gap:14px;}
  .btn-dl{justify-content:center; padding:13px 20px; font-size:14px;}
  .pf-row{flex-wrap:wrap; gap:10px 12px;}
  .pf-get{width:100%; justify-content:center; order:3; padding:9px 13px;}
  .vf-grid{grid-template-columns:1fr; gap:22px;}
  .clp > summary{cursor:pointer;}
  .clp-hint{display:inline-flex;}
  .clp .dl-all-h{padding:12px 10px;}
  .vf-details{padding:16px;}
  .vf-sum{align-items:center;}
  .foot-in{padding:24px 18px 40px;}
  .foot-meta{margin-left:0; width:100%;}
}