/* ============================================================
   KUSTOD — dark theme (D154)
   Converted from the Design-Center export "Kustod Site.dc.html".
   The export rendered client-side via React+Babel from unpkg and
   carried every rule as an inline style attribute, so a crawler
   saw an empty document and neither language could share a line
   of CSS. This file is that same design as plain static CSS.
   ============================================================ */

:root {
  --bg:            #0E0D0C;   /* page */
  --bg-alt:        #0B0A09;   /* alternating band */
  --surface:       #131211;   /* cards, panels */
  --surface-blue:  #111312;   /* engine cards */
  --surface-hover: #191716;
  --line:          #232120;   /* hairlines, grid gaps */
  --line-2:        #2A2724;
  --line-3:        #3A362F;   /* ghost button border */
  --line-4:        #6A6459;   /* ghost button hover */

  --ink:           #EDEAE3;
  --ink-2:         #C9C2B5;
  --ink-3:         #B9B2A6;
  --muted:         #9A948A;
  --muted-2:       #7E7869;

  --accent:        #E8A33D;
  --accent-hi:     #F2B457;
  --accent-line:   #4A3A20;
  --accent-wash:   rgba(232,163,61,0.05);

  --blue:          #7FB8D9;
  --blue-line:     #3E4B52;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
::selection { background: var(--accent); color: var(--bg); }

.mono  { font-family: var(--mono); }
.serif { font-family: var(--serif); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--bg);
  font-family: var(--mono); font-size: 13px;
  padding: 10px 18px; border-radius: 2px;
}
.skip-link:focus { left: 12px; top: 12px; }

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

.container { max-width: 1080px; margin: 0 auto; }

/* ── header ─────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 32px;
  background: rgba(14,13,12,0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; align-items: baseline; gap: 10px; }
.wordmark .name {
  font-family: var(--mono); font-size: 15px;
  letter-spacing: 0.22em; font-weight: 500;
}
.wordmark .v { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }

.nav-links {
  display: flex; align-items: center; gap: 28px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
}
.nav-links a { color: var(--muted); transition: color .15s ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-cta {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border: 1px solid var(--line-3);
  border-radius: 2px; color: var(--ink) !important;
  letter-spacing: 0.1em;
  transition: border-color .15s ease, color .15s ease;
}
.nav-cta:hover, .nav-cta:focus-visible {
  border-color: var(--accent); color: var(--accent) !important;
}

/* ── sections ───────────────────────────────────────────── */

section { padding: 96px 32px; border-bottom: 1px solid var(--line); }
section.band { background: var(--bg-alt); }

.eyebrow-row {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px;
}
.eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; color: var(--accent);
}
.eyebrow.blue { color: var(--blue); }
.eyebrow-rule { flex: 1; height: 1px; background: var(--line); }

h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.05; margin: 0 0 56px;
  text-wrap: balance;
}
h2.tight { margin-bottom: 24px; }
h2.mid   { margin-bottom: 48px; }
h2.narrow { max-width: 22ch; }

.lead {
  font-size: 17px; line-height: 1.7; color: var(--muted);
  margin: 0 0 20px; text-wrap: pretty;
}
.lead em { color: var(--ink); font-style: normal; }
.lead strong { color: var(--ink); font-weight: 600; }
.lead.wide { max-width: 64ch; }

/* ── hero ───────────────────────────────────────────────── */

/* Hexagon lattice, not a square grid — D154, Architect's call.
   Served from /hex.svg (same origin, 712 B). A page arguing that an
   identity should not depend on someone else's runtime does not fetch
   its own wallpaper from a CDN. */
.hero {
  position: relative; padding: 120px 32px 96px;
  background-image: url("/hex.svg");
  background-size: 106px 189px;
  background-repeat: repeat;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(232,163,61,0.10), transparent 60%);
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }

/* ── THE WALK, BEHIND THE HEADLINE ─────────────────────────────────────────
   One scene: the corridor of YES / SURE / OK / GREAT that the custodian walks
   the length of without joining. Not decoration for the headline above it —
   that headline, performed.
   The layer is inert: text on top stays selectable, every link reachable.
   🔴 The canvas must keep a bounded box. The engine sizes its own buffer from
   clientWidth, so a canvas with no CSS height feeds itself and grows every
   frame. It has a cap of its own now, but the box belongs here. */
.hero { overflow: hidden; isolation: isolate; }
.hero-walk { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-walk canvas {
  display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity 900ms ease;
}
.hero-walk canvas[data-ready="1"] { opacity: .46; }

/* Type over a moving image loses contrast at the worst possible moment.
   🔴 But the scrim protects the TEXT, not half the picture. The first version
   darkened the whole left side — and the left side is where the YES / SURE /
   OK bubbles are, which are the entire point of the scene. The custodian was
   visible walking a corridor; what he was walking through was not.
   The column of type gets a tight ellipse; the rest keeps a light floor. */
.hero-walk-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 120% at 22% 52%, rgba(14,13,12,.93) 0%,
                                          rgba(14,13,12,.72) 34%,
                                          rgba(14,13,12,.18) 68%,
                                          rgba(14,13,12,0) 100%),
    linear-gradient(180deg, rgba(14,13,12,.46) 0%, rgba(14,13,12,.04) 44%, rgba(14,13,12,.52) 100%);
}

.hero-walk-toggle {
  position: absolute; right: 22px; bottom: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(237,234,227,.14);
  background: rgba(14,13,12,.6);
  color: rgba(237,234,227,.5);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; transition: color .16s ease, border-color .16s ease;
}
.hero-walk-toggle:hover { color: rgba(237,234,227,.85); border-color: rgba(237,234,227,.3); }
.hero-walk-toggle .wt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.hero-walk-toggle[aria-pressed="true"] .wt-dot { background: #E8A33D; opacity: 1; }

@media (prefers-reduced-motion: reduce) { .hero-walk canvas { transition: none; } }
@media (max-width: 640px) {
  .hero-walk canvas[data-ready="1"] { opacity: .30; }
  .hero-walk-toggle { right: 14px; bottom: 12px; }
}

/* ── THE WALK, IN A FRAME OF ITS OWN ───────────────────────────────────────
   16:9 and uncropped, because six of the seven scenes are composed rooms with
   their subject above the waistline. The hero shows the one scene that is
   drawn geometry and survives any crop; everything else belongs here. */
.walk-frame {
  margin: 40px 0 0; position: relative;
  border: 1px solid var(--line);
  background: #0c0c0c;
  overflow: hidden;
}
.walk-frame canvas {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  opacity: 0; transition: opacity 700ms ease;
}
.walk-frame canvas[data-ready="1"] { opacity: 1; }

.walk-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.walk-cap {
  font-family: var(--serif); font-size: 18px; color: var(--ink-2);
  text-wrap: balance;
}
.walk-meta { display: inline-flex; align-items: center; gap: 14px; }
.walk-count { font-size: 11px; letter-spacing: .16em; color: var(--muted-2); }
.walk-btn {
  background: none; border: 1px solid var(--line-3); border-radius: 2px;
  color: var(--muted); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; padding: 6px 10px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.walk-btn:hover, .walk-btn:focus-visible { color: var(--accent); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .walk-frame canvas { transition: none; } }
@media (max-width: 640px) {
  .walk-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .walk-cap { font-size: 16px; }
}

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--accent); border: 1px solid var(--accent-line);
  border-radius: 2px; padding: 7px 12px; margin-bottom: 40px;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 0.98; letter-spacing: -0.02em;
  margin: 0 0 28px; max-width: 16ch; text-wrap: balance;
}
.hero-sub {
  font-size: 21px; line-height: 1.55; color: var(--ink-3);
  max-width: 56ch; margin: 0 0 12px; text-wrap: pretty;
}
.hero-micro {
  font-size: 13px; color: var(--muted-2); margin: 0 0 44px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
  padding: 15px 26px; border-radius: 2px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--accent); color: var(--bg) !important; font-weight: 500; border: 1px solid var(--accent); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-ghost { border: 1px solid var(--line-3); color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--line-4); }
.btn-blue { border: 1px solid var(--blue-line); color: var(--blue) !important; padding: 14px 22px; }
.btn-blue:hover, .btn-blue:focus-visible { border-color: var(--blue); }
.btn-plain { color: var(--muted); padding: 14px 4px; }
.btn-plain:hover, .btn-plain:focus-visible { color: var(--ink); }
.btn-lg { font-size: 14px; padding: 17px 34px; margin-top: 8px; }

/* ── one-liner band ─────────────────────────────────────── */

.oneliner { padding: 72px 32px; }
.oneliner .container {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: 56px; align-items: center;
}
.oneliner-quote {
  font-family: var(--serif); font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.22; margin: 0; text-wrap: pretty;
}
.oneliner-quote em { color: var(--muted-2); }
.oneliner-quote .hit { color: var(--accent); font-style: normal; }
.oneliner-note {
  font-size: 16px; line-height: 1.7; color: var(--muted);
  margin: 0; text-wrap: pretty;
}

/* ── card grids ─────────────────────────────────────────── */

.grid {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card { background: var(--surface); padding: 32px 26px 36px; }
.card .num { font-family: var(--mono); font-size: 12px; color: var(--accent); display: block; margin-bottom: 22px; }
.card h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.card p  { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

.card-blue { background: var(--surface-blue); padding: 28px 24px; }
.card-blue .file { font-family: var(--mono); font-size: 13px; color: var(--blue); margin-bottom: 12px; }
.card-blue p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

.golden {
  background: var(--surface); padding: 34px 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background .15s ease;
}
.golden:hover, .golden:focus-visible { background: var(--surface-hover); }
.golden .who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted-2); }
.golden .title { font-family: var(--serif); font-size: 34px; line-height: 1.1; }
.golden .desc { font-size: 15px; line-height: 1.6; color: var(--muted); }
.golden .go { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 8px; }

/* ── two-column splits ──────────────────────────────────── */

.split      { display: grid; gap: 64px; align-items: start; }
.split-l    { grid-template-columns: minmax(0,1fr)    minmax(0,1.15fr); }
.split-r    { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.split-even { grid-template-columns: minmax(0,1fr)    minmax(0,1fr); gap: 48px; }
.split-test { grid-template-columns: minmax(0,1fr)    minmax(0,1.2fr); }

.kicker {
  font-family: var(--mono); font-size: 13px; line-height: 1.8;
  color: var(--muted-2); margin: 0;
}

/* ── chat / panels ──────────────────────────────────────── */

.panel { border: 1px solid var(--line-2); border-radius: 3px; background: var(--surface); }
.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--muted-2);
}
.panel-head .live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.panel-body { padding: 26px 24px; display: flex; flex-direction: column; gap: 22px; }
.panel-pad  { padding: 26px 24px; }

.turn { display: flex; flex-direction: column; gap: 8px; }
.turn .who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted-2); }
.turn.kustod .who { color: var(--accent); }
.turn p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-3); }
.turn.kustod p { color: var(--ink); line-height: 1.62; text-wrap: pretty; }
.hr { height: 1px; background: var(--line); }

.wrap-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--muted-2); margin-bottom: 20px;
}
.wrap-lines {
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--mono); font-size: 14px; line-height: 1.55;
}
.wrap-lines div { display: flex; gap: 12px; }
.wrap-lines .arrow { color: var(--accent); }
.wrap-lines span:last-child { color: var(--ink); }
.wrap-foot { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted-2); }

.limits { border-left: 1px solid var(--line); padding-left: 28px; }
.limits .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--muted-2); margin-bottom: 14px;
}
.limits p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.limits p em { color: var(--ink); font-style: normal; }
.limits .kicker { margin: 0; font-size: 13px; line-height: 1.6; }

/* The one ask on the whole page. Deliberately quiet: a free tool that
   starts selling itself loses the credibility that is the actual product. */
.limits .ask {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--muted-2);
}
/* keep the address whole — "ondrej@tia-" / "framework.com" reads as a typo */
.limits .ask a { color: var(--accent); white-space: nowrap; }
.limits .ask a:hover { color: var(--accent-hi); }

/* ── prompt block ───────────────────────────────────────── */

.show-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 24px; margin-bottom: 36px;
}
.show-head h2 { margin: 0; max-width: 20ch; }
.show-head p  { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 38ch; }

.code-wrap { border: 1px solid var(--line-2); border-radius: 3px; background: var(--surface); overflow: hidden; }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line);
}
.code-head .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted-2); }
.copy-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--bg); background: var(--accent); border: none;
  border-radius: 2px; padding: 8px 16px; cursor: pointer;
  transition: background .15s ease;
}
.copy-btn:hover { background: var(--accent-hi); }
.code {
  margin: 0; padding: 28px 24px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.8;
  color: var(--ink-2); white-space: pre-wrap; overflow-x: auto;
}
.code .ph { color: var(--muted-2); }

/* ── 7-day test ─────────────────────────────────────────── */

.metric {
  border: 1px solid var(--accent-line); border-radius: 3px;
  padding: 22px 20px; background: var(--accent-wash);
}
.metric .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--accent); margin-bottom: 10px;
}
.metric p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }

.days {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  counter-reset: day;
}
.days li {
  background: var(--surface); padding: 18px 22px;
  display: flex; gap: 18px; align-items: baseline;
  counter-increment: day;
}
.days li::before {
  content: "0" counter(day);
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  min-width: 20px; flex: none;
}
.days li span { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* ── final CTA + footer ─────────────────────────────────── */

.final {
  position: relative; padding: 120px 32px; text-align: center;
  border-bottom: none;
  background-image: radial-gradient(80% 100% at 50% 100%, rgba(232,163,61,0.12), transparent 65%);
}
.final .container {
  max-width: 760px; display: flex; flex-direction: column;
  align-items: center; gap: 22px;
}
.final h2 {
  font-size: clamp(36px, 6vw, 76px); line-height: 1.02; margin: 0;
}
.final p { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 46ch; }
.final .micro {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--muted-2); margin: 6px 0 0;
}

.site-foot { border-top: 1px solid var(--line); padding: 36px 32px; }
.site-foot .container {
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 12px; color: var(--muted-2);
}
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--accent); }

/* ── responsive ─────────────────────────────────────────────
   The DC export had NO media queries: every two-column grid
   stayed two-column at 360px. Most of this page's traffic
   arrives from a phone, so these are not polish.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .oneliner .container,
  .split-l, .split-r, .split-even, .split-test {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .limits { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
  .show-head { display: block; }
  .show-head p { margin-top: 16px; max-width: none; }
}

@media (max-width: 720px) {
  section, .hero, .final { padding-left: 20px; padding-right: 20px; }
  .hero  { padding-top: 72px; padding-bottom: 64px; }
  section { padding-top: 64px; padding-bottom: 64px; }
  .final { padding-top: 88px; padding-bottom: 88px; }
  .site-head { padding: 14px 20px; gap: 12px; }
  .nav-links { gap: 16px; font-size: 11px; }
  .nav-links .hide-sm { display: none; }
  .nav-cta { padding: 7px 12px; }
  h2 { margin-bottom: 36px; }
  .hero-sub { font-size: 18px; }
  .code { font-size: 12.5px; padding: 22px 18px; }
  .btn { padding: 14px 20px; font-size: 12px; }
  .golden .title { font-size: 28px; }
  .site-foot .container { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   §08 — DVEŘE DO CUSTODIANS  (D155)
   Sekce 08 se jmenuje „kde končí zdarma" a až do D155 za tou
   hranicí nebylo nic než mailto. Tahle karta je ty dveře.
   Váha je schválně střední: uvnitř sekce nepřehlédnutelná,
   na úrovni stránky NEKONKURUJE hlavnímu „GET THE FREE PACK".
   ============================================================ */
.door-card {
  margin-top: 24px;
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  padding: 22px 22px 20px;
}
.door-card .dl {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
}
.door-card h3 {
  margin: 0 0 12px;
  font-size: 21px; font-weight: 500; line-height: 1.25;
  letter-spacing: -.015em; color: var(--ink);
}
.door-card > p {
  margin: 0 0 18px;
  color: var(--ink-3); font-size: 14.5px; line-height: 1.62;
}
.door-card .micro {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--accent-line);
  color: var(--muted-2); font-size: 12.5px; line-height: 1.55;
}
@media (max-width: 720px) {
  .door-card { padding: 18px 16px 16px; }
  .door-card h3 { font-size: 18px; }
  .door-card h3 br { display: none; }
}