/* ============================================================
   stav.nousoos.com landing (/, /cs/, /en/): what the monitoring
   is and who gets it. Builds on stav.css (tokens, top bar, footer,
   and the status-page parts the preview reuses). No script here.
   ============================================================ */

html { scroll-behavior:smooth; }
[id] { scroll-margin-top:20px; }

.l-link { border-bottom:1px solid currentColor; padding-bottom:1px; transition:opacity 200ms var(--ease); }
.l-link:hover { opacity:.6; }

/* the brand's highlight box: ink on paper, paper on ink */
.hl {
  background:var(--ink); color:var(--inverse-fg);
  padding:0.02em 0.16em 0.1em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ─── buttons (as on nousoos.com) ─── */
.cta {
  display:inline-flex; align-items:center; gap:14px;
  background:var(--ink); color:var(--inverse-fg); border:1px solid var(--ink);
  padding:15px 22px;
  font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; line-height:1.35;
  transition:transform 240ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.cta:hover { transform:translateY(-2px); background:#000; }
.cta__arrow { width:14px; height:1px; background:currentColor; position:relative; flex:none; }
.cta__arrow::after {
  content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);
}
.cta--ghost { background:transparent; color:var(--ink); }
.cta--ghost:hover { background:var(--ink); color:var(--inverse-fg); }
.cta--paper { background:var(--inverse-fg); color:var(--ink); border-color:var(--inverse-fg); }
.cta--paper:hover { background:var(--bg-deep); }

/* ─── top bar: section links + language links ─── */
.l-nav { display:flex; gap:28px; margin-left:auto; }
.l-nav a {
  font-size:13px; letter-spacing:0.01em; color:var(--ink-soft);
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color 160ms var(--ease), border-color 160ms var(--ease);
}
.l-nav a:hover { color:var(--ink); border-bottom-color:var(--ink); }
.langs a {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:34px; padding:0 12px;
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  transition:background-color 160ms var(--ease), color 160ms var(--ease);
}
.langs a + a { border-left:1px solid var(--ink); }
.langs a[aria-current="page"] { background:var(--ink); color:var(--inverse-fg); }
.langs a:not([aria-current]):hover { background:var(--bg-deep); }

/* ─── hero ─── */
.l-hero { padding-top:clamp(28px, 4.4vw, 72px); }
.l-kicker { display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap; padding-bottom:clamp(28px, 4vw, 60px); }
.l-kicker a { border-bottom:1px solid transparent; }
.l-kicker a:hover { border-bottom-color:currentColor; }
.l-hero__h {
  margin:0;
  font-weight:600; font-size:clamp(50px, 9.6vw, 168px); line-height:0.9; letter-spacing:-0.052em;
  text-transform:lowercase; text-wrap:balance;
}
.l-hero__h .hl { display:inline-block; margin-top:0.05em; margin-left:-0.02em; padding:0.01em 0.16em 0.1em; }
.l-hero__grid {
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 112px);
  align-items:end; margin-top:clamp(32px, 4.4vw, 64px);
}
.l-hero__for {
  margin:0; max-width:24ch;
  font-weight:500; font-size:clamp(24px, 2.6vw, 40px); line-height:1.1; letter-spacing:-0.03em; text-wrap:balance;
}
.l-hero__lead { margin:clamp(16px, 2vw, 24px) 0 0; font-size:clamp(17px, 1.4vw, 20px); line-height:1.5; letter-spacing:-0.012em; max-width:46ch; text-wrap:pretty; }
.l-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px, 3vw, 40px); }

/* the counter: one black block, the only number computed from the registry */
.l-count { background:var(--inverse); color:var(--inverse-fg); padding:clamp(24px, 2.8vw, 44px); }
.l-count .label { color:var(--inverse-mute); }
.l-count__line { margin:clamp(18px, 2vw, 28px) 0 0; font-weight:600; letter-spacing:-0.04em; line-height:1; }
.l-count__pre { display:block; font-weight:500; font-size:clamp(22px, 2vw, 30px); letter-spacing:-0.025em; color:var(--inverse-soft); }
.l-count__n { display:block; margin:0.04em 0 0.02em; font-size:clamp(104px, 11.5vw, 192px); line-height:0.84; letter-spacing:-0.06em; }
.l-count__word { display:block; font-size:clamp(30px, 3vw, 48px); line-height:1; }
.l-count__sub { margin:clamp(18px, 2vw, 26px) 0 0; font-size:14px; line-height:1.5; color:var(--inverse-soft); max-width:38ch; }
.l-count__date { display:block; margin:14px 0 0; }

/* six areas under the hero, anchors to section 01 */
.l-strip {
  display:grid; grid-template-columns:repeat(6, minmax(0, 1fr));
  margin-top:clamp(48px, 6vw, 96px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.l-strip a {
  display:flex; flex-direction:column; gap:6px; padding:18px 18px 20px;
  border-left:1px solid var(--rule); transition:background-color 180ms var(--ease);
}
.l-strip a:first-child { border-left:0; }
.l-strip a:hover { background:var(--bg-deep); }
.l-strip__n { font-size:11px; font-weight:500; letter-spacing:0.18em; color:var(--ink-soft); }
.l-strip__t { font-weight:600; font-size:clamp(17px, 1.45vw, 21px); line-height:1.1; letter-spacing:-0.025em; }
.l-strip__s { font-size:10.5px; font-weight:500; letter-spacing:0.14em; line-height:1.4; text-transform:uppercase; color:var(--ink-soft); }

/* ─── sections ─── */
.l-sec { padding-top:clamp(96px, 12vw, 184px); }
.l-sec__head {
  display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:24px clamp(24px, 4vw, 64px);
  align-items:end; padding-bottom:clamp(36px, 5vw, 72px);
}
.l-sec__title { display:flex; flex-direction:column; gap:16px; }
.l-sec__num { font-size:13px; font-weight:500; letter-spacing:0.18em; color:var(--ink-soft); }
.l-sec__h {
  margin:0;
  font-weight:600; font-size:clamp(48px, 7.6vw, 132px); line-height:0.88; letter-spacing:-0.05em;
  text-transform:lowercase; text-wrap:balance;
}
.l-sec__lead p { margin:0; font-weight:500; font-size:clamp(20px, 1.8vw, 27px); line-height:1.2; letter-spacing:-0.02em; max-width:28ch; text-wrap:balance; }
.l-sec__lead small { display:block; margin-top:12px; font-size:14px; line-height:1.55; color:var(--ink-soft); max-width:48ch; text-wrap:pretty; }

/* 01: six things we watch */
.l-items { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--ink); }
.l-item { padding:32px 32px 40px 0; border-bottom:1px solid var(--rule); min-width:0; }
.l-item:not(:nth-child(3n+1)) { padding-left:32px; border-left:1px solid var(--rule); }
.l-item__head { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.l-item__n { font-size:12px; font-weight:500; letter-spacing:0.18em; color:var(--ink-soft); }
.l-item__h { margin:0; font-weight:600; font-size:clamp(26px, 2.4vw, 36px); line-height:1; letter-spacing:-0.035em; text-transform:lowercase; }
.l-item__lead { margin:0 0 16px; font-weight:500; font-size:17px; line-height:1.3; letter-spacing:-0.015em; overflow-wrap:anywhere; }
.l-item__list { list-style:none; margin:0 0 20px; padding:0; display:grid; gap:8px; }
.l-item__list li { position:relative; padding-left:22px; font-size:15px; line-height:1.45; }
.l-item__list li::before { content:"—"; position:absolute; left:0; color:var(--ink-soft); }
.l-item__why { margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.l-item__why b { font-weight:600; color:var(--ink); }

/* 02: four steps */
.l-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-top:1px solid var(--ink); }
.l-step { padding:32px 28px 8px 0; min-width:0; }
.l-step + .l-step { padding-left:28px; border-left:1px solid var(--rule); }
.l-step__n { display:block; margin-bottom:28px; font-size:13px; font-weight:500; letter-spacing:0.18em; color:var(--ink-soft); }
.l-step__h { margin:0 0 14px; font-size:clamp(24px, 2.3vw, 36px); font-weight:600; line-height:1; letter-spacing:-0.04em; text-transform:lowercase; text-wrap:balance; }
.l-step p { margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:36ch; overflow-wrap:anywhere; }

/* 03: a client page drawn in HTML, made-up data, same parts as the real one */
.l-prev { margin:0; display:grid; grid-template-columns:minmax(0, 2.3fr) minmax(0, 1fr); gap:clamp(28px, 4vw, 64px); align-items:start; }
.l-prev__frame { border:1px solid var(--ink); background:var(--bg); min-width:0; }
.l-prev__bar { display:flex; align-items:center; gap:16px; padding:10px 16px; border-bottom:1px solid var(--ink); background:var(--bg-deep); }
.l-prev__dots { display:flex; gap:6px; }
.l-prev__dots i { display:block; width:9px; height:9px; box-shadow:inset 0 0 0 1px var(--ink-soft); }
.l-prev__url {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:4px 12px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--rule);
  font-size:12px; letter-spacing:0.02em; color:var(--ink-soft);
}
.l-prev__page { padding:clamp(16px, 2.2vw, 32px) clamp(16px, 2.6vw, 40px) clamp(20px, 2.6vw, 40px); }
.l-prev__top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.l-prev__top .top__brand { font-size:15px; }
.l-prev__langs { display:flex; border:1px solid var(--ink); font-size:10px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; }
.l-prev__langs > * { padding:4px 9px; }
.l-prev__langs b { font-weight:500; background:var(--ink); color:var(--inverse-fg); }
.l-prev__langs span { border-left:1px solid var(--ink); }
.l-prev__name { margin:clamp(28px, 3.6vw, 52px) 0 0; font-weight:600; font-size:clamp(40px, 5.2vw, 84px); line-height:0.86; letter-spacing:-0.05em; text-transform:lowercase; }
.l-prev .verdict { margin-top:clamp(14px, 1.8vw, 22px); font-size:clamp(19px, 1.8vw, 26px); }
.l-prev .hero__meta { margin-top:8px; font-size:13px; }
.l-prev__sechead { margin-top:clamp(28px, 3.4vw, 48px); padding-bottom:14px; }
.l-prev__h2 { flex:1; font-weight:600; font-size:clamp(22px, 2.2vw, 32px); line-height:1; letter-spacing:-0.035em; }
.l-prev .site { padding:clamp(18px, 2vw, 28px) 0; }
.l-prev .site__host { font-size:clamp(22px, 2.2vw, 32px); text-decoration:none; }
.l-prev .bars { height:30px; gap:2px; margin:18px 0 8px; }
.l-prev .bars i:hover { outline:0; }
.l-prev .facts { margin-top:20px; }
.l-prev .fact { padding:2px 14px 0; }
.l-prev .fact:first-child { padding-left:0; }
.l-prev .fact__value { font-size:clamp(19px, 1.7vw, 24px); }
.l-prev .legend { padding-top:16px; gap:8px 22px; }
.l-prev__notes ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.l-prev__notes li { position:relative; padding:18px 0 18px 44px; border-bottom:1px solid var(--rule); font-size:15px; line-height:1.5; color:var(--ink-soft); }
.l-prev__notes b { font-weight:600; color:var(--ink); }
.l-prev__no { position:absolute; left:0; top:21px; font-size:12px; font-weight:500; letter-spacing:0.18em; }

/* 04: who gets it */
.l-who { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--ink); }
.l-who li { padding:30px 28px 34px 0; min-width:0; }
.l-who li + li { padding-left:28px; border-left:1px solid var(--rule); }
.l-who__h { margin:0 0 12px; font-size:clamp(24px, 2.3vw, 34px); font-weight:600; line-height:1.02; letter-spacing:-0.04em; text-transform:lowercase; }
.l-who p { margin:0; font-size:15px; line-height:1.55; color:var(--ink-soft); max-width:36ch; }
.l-price {
  display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:20px clamp(24px, 4vw, 64px); align-items:end;
  margin-top:clamp(40px, 5vw, 72px); padding-top:clamp(28px, 3vw, 44px); border-top:1px solid var(--rule);
}
.l-price__h { margin:0; font-weight:600; font-size:clamp(40px, 5.8vw, 100px); line-height:0.95; letter-spacing:-0.045em; text-transform:lowercase; text-wrap:balance; }
.l-price__h .hl { display:inline-block; }
.l-price__s { margin:0; font-weight:500; font-size:clamp(17px, 1.4vw, 21px); line-height:1.35; letter-spacing:-0.015em; max-width:40ch; }

/* 05: questions */
.l-faq { border-top:1px solid var(--ink); }
.l-faq__item { border-bottom:1px solid var(--rule); }
.l-faq__item summary {
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0;
  font-size:clamp(19px, 2vw, 28px); font-weight:500; line-height:1.2; letter-spacing:-0.03em;
  transition:color 160ms var(--ease);
}
.l-faq__item summary::-webkit-details-marker { display:none; }
.l-faq__item summary::after { content:"+"; flex:none; font-size:26px; font-weight:400; line-height:1; transition:transform 240ms var(--ease); }
.l-faq__item[open] summary::after { transform:rotate(45deg); }
.l-faq__item summary:hover { color:var(--ink-soft); }
.l-faq__item p { margin:0 0 28px; max-width:68ch; font-size:16px; line-height:1.6; color:var(--ink-soft); }

/* two ways in: existing clients write, everybody else starts with the audit */
.l-end { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:clamp(96px, 12vw, 184px); margin-bottom:clamp(72px, 9vw, 140px); }
.l-end__box { display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:clamp(28px, 4vw, 64px); min-width:0; }
.l-end__box > :last-child { margin-top:auto; padding-top:12px; }
.l-end__h { margin:0; font-weight:600; font-size:clamp(34px, 4.2vw, 68px); line-height:1; letter-spacing:-0.045em; text-transform:lowercase; text-wrap:balance; }
.l-end__h .hl { display:inline-block; margin-top:0.1em; }
.l-end__box p { margin:0; font-size:16px; line-height:1.5; max-width:42ch; color:var(--ink-soft); }
.l-end__box--client { background:var(--inverse); color:var(--inverse-fg); }
.l-end__box--client .label { color:var(--inverse-mute); }
.l-end__box--client p { color:var(--inverse-soft); }
.l-end__box--client .hl { background:var(--inverse-fg); color:var(--ink); }
.l-end__box--new { box-shadow:inset 0 0 0 1px var(--ink); }
.l-end__actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }
.l-end__actions .l-link { font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; padding-bottom:5px; }

/* footer additions */
.l-foot__links { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:8px; font-size:14px; }
.l-foot__links a { border-bottom:1px solid transparent; transition:border-color 200ms var(--ease); }
.l-foot__links a:hover { border-bottom-color:var(--inverse-fg); }

/* focus on black blocks */
.l-count :focus-visible, .l-end__box--client :focus-visible { outline-color:var(--inverse-fg); }

/* ─── responsive ─── */
@media (max-width:1100px) {
  .l-steps { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .l-step:nth-child(3) { padding-left:0; border-left:0; }
  .l-step:nth-child(n+3) { border-top:1px solid var(--rule); margin-top:24px; }
  .l-prev { grid-template-columns:1fr; }
}
@media (max-width:980px) {
  .l-nav { display:none; }
  .l-hero__grid { grid-template-columns:1fr; align-items:start; }
  .l-strip { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .l-strip a:nth-child(4) { border-left:0; }
  .l-strip a:nth-child(n+4) { border-top:1px solid var(--rule); }
  .l-items { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .l-item:not(:nth-child(3n+1)) { padding-left:0; border-left:0; }
  .l-item:nth-child(2n) { padding-left:28px; border-left:1px solid var(--rule); }
  .l-item { padding-right:28px; }
  .l-sec__head, .l-price { grid-template-columns:1fr; align-items:start; }
  .l-who { grid-template-columns:1fr; }
  .l-who li + li { padding-left:0; border-left:0; border-top:1px solid var(--rule); }
  .l-who li { padding:24px 0 26px; }
  .l-end { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .l-kicker__right { display:none; }
  .l-strip { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .l-strip a { padding:14px 14px 16px; }
  .l-strip a:nth-child(4) { border-left:1px solid var(--rule); }
  .l-strip a:nth-child(odd) { border-left:0; }
  .l-strip a:nth-child(n+3) { border-top:1px solid var(--rule); }
  .l-items, .l-steps { grid-template-columns:1fr; }
  .l-item, .l-item:nth-child(2n) { padding:26px 0 30px; border-left:0; }
  .l-step, .l-step + .l-step { padding:26px 0 24px; border-left:0; margin-top:0; }
  .l-step + .l-step { border-top:1px solid var(--rule); }
  .l-step__n { margin-bottom:16px; }
  .cta { width:100%; justify-content:space-between; text-align:left; }
  .l-end__actions { width:100%; }
  .l-prev .bars { gap:1px; height:26px; }
  .l-prev .fact { padding:0 10px; }
  .l-prev .fact:nth-child(odd) { padding-left:0; }
  .l-prev__notes li { padding-left:36px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}
@media print {
  .l-nav, .l-ctas, .l-end { display:none; }
  .l-count { background:none; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
}