/* Self-hosted fonts (latin + latin-ext, so Polish glyphs ąćęłńóśżź render).
   unicode-range values match the upstream Fontsource subsetting. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/space-grotesk-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/space-grotesk-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/space-grotesk-latin-600-normal.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/manrope-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/manrope-latin-400-normal.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/manrope-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/manrope-latin-700-normal.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/jetbrains-mono-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');
  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;
}

/* ============================================================
   Palette = the SHIPPED Inbox Horizon look (hex, from .hz- and .ta
   scoped CSS in the app), NOT the stale OKLCH token standard.
   ============================================================ */
:root {
  color-scheme: light dark;
  --bg:#f7f8fb; --surface:#fff; --surface-2:#eef1f6;
  --ink:#272d38; --ink-soft:#566071; --ink-muted:#7a8597;
  --hairline:#dfe4ec; --hairline-soft:#eaedf3;
  --accent:#2f5fb0; --accent-strong:#26528f; --accent-ink:#26528f;
  --accent-soft:#eaf0f9; --accent-line:#d3e0f1; --on-accent:#fbfdff;
  --danger:#c8312b; --danger-soft:#fbeceb; --danger-line:#f4d2cf;
  --warn:#9a6b18; --warn-soft:#fdf3e2; --warn-line:#f1e0bf;
  --ok:#1f8a5b; --ok-soft:#e6f4ec; --ok-line:#c4e6d2;
  --r-lg:20px; --row-pad:18px;
  --shadow:0 1px 2px rgba(18,24,40,.04),0 10px 26px -14px rgba(18,24,40,.14);
  --shadow-lg:0 2px 8px rgba(18,24,40,.06),0 40px 80px -28px rgba(38,82,143,.28);
  --font-d:"Space Grotesk","Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ui:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e131f; --surface:#161c2b; --surface-2:#1d2536;
    --ink:#e8ecf4; --ink-soft:#aeb8c9; --ink-muted:#7e8aa0;
    --hairline:#2a3346; --hairline-soft:#222a3a;
    --accent:#6f99e2; --accent-strong:#a9c4f2; --accent-ink:#a9c4f2;
    --accent-soft:#1b2a45; --accent-line:#2d4266; --on-accent:#0c1220;
    --danger:#f18b84; --danger-soft:#361d1c; --danger-line:#59302c;
    --warn:#e0b872; --warn-soft:#33280f; --warn-line:#4d3d1c;
    --ok:#5cc08c; --ok-soft:#12281c; --ok-line:#234634;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 44px -22px rgba(0,0,0,.6);
    --shadow-lg:0 2px 8px rgba(0,0,0,.4),0 50px 90px -30px rgba(111,153,226,.3);
  }
}
html[data-theme="light"] {
  color-scheme: light;
  --bg:#f7f8fb; --surface:#fff; --surface-2:#eef1f6; --ink:#272d38; --ink-soft:#566071; --ink-muted:#7a8597;
  --hairline:#dfe4ec; --hairline-soft:#eaedf3; --accent:#2f5fb0; --accent-strong:#26528f; --accent-ink:#26528f;
  --accent-soft:#eaf0f9; --accent-line:#d3e0f1; --on-accent:#fbfdff; --danger:#c8312b; --danger-soft:#fbeceb; --danger-line:#f4d2cf;
  --warn:#9a6b18; --warn-soft:#fdf3e2; --warn-line:#f1e0bf; --ok:#1f8a5b; --ok-soft:#e6f4ec; --ok-line:#c4e6d2;
  --shadow:0 1px 2px rgba(18,24,40,.04),0 10px 26px -14px rgba(18,24,40,.14);
  --shadow-lg:0 2px 8px rgba(18,24,40,.06),0 40px 80px -28px rgba(38,82,143,.28);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0e131f; --surface:#161c2b; --surface-2:#1d2536; --ink:#e8ecf4; --ink-soft:#aeb8c9; --ink-muted:#7e8aa0;
  --hairline:#2a3346; --hairline-soft:#222a3a; --accent:#6f99e2; --accent-strong:#a9c4f2; --accent-ink:#a9c4f2;
  --accent-soft:#1b2a45; --accent-line:#2d4266; --on-accent:#0c1220; --danger:#f18b84; --danger-soft:#361d1c; --danger-line:#59302c;
  --warn:#e0b872; --warn-soft:#33280f; --warn-line:#4d3d1c; --ok:#5cc08c; --ok-soft:#12281c; --ok-line:#234634;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 44px -22px rgba(0,0,0,.6);
  --shadow-lg:0 2px 8px rgba(0,0,0,.4),0 50px 90px -30px rgba(111,153,226,.3);
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { width:min(74rem, 100% - 2.5rem); margin-inline:auto; }
.mono { font-family:var(--font-m); font-variant-numeric:tabular-nums lining-nums; }

/* top bar */
header.bar { position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); background:color-mix(in oklab,var(--bg) 82%,transparent); border-bottom:1px solid var(--hairline); }
.bar-in { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.8rem; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.mark { width:30px; height:30px; border-radius:9px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); display:grid; place-items:center; }
.bname { font-family:var(--font-d); font-weight:600; font-size:17px; letter-spacing:-0.02em; line-height:1; display:block; }
.btag { font-size:10px; color:var(--ink-muted); font-family:var(--font-m); margin-top:3px; letter-spacing:.02em; display:block; }
.tools { display:flex; align-items:center; gap:10px; }
.seg { display:inline-flex; background:var(--surface-2); border-radius:999px; padding:3px; }
.seg button, .seg a { all:unset; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-muted); padding:6px 13px; border-radius:999px; line-height:1; text-decoration:none; }
.seg button.on, .seg a[aria-current="page"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
.seg button:focus-visible, .seg a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* hero */
.hero { position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; right:-10%; top:-20%; width:62%; height:130%; background:radial-gradient(closest-side,var(--accent-soft),transparent 72%); opacity:.6; pointer-events:none; }
.hero-grid { position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:3rem; align-items:center; padding-block:clamp(2.5rem,6vw,5rem); }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; gap:2.2rem; } }

.kicker { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
h1 { font-family:var(--font-d); font-weight:600; letter-spacing:-0.03em; font-size:clamp(2.2rem,5vw,3.5rem); line-height:1.02; text-wrap:balance; margin:.9rem 0 0; }
h1 .u { color:var(--accent-ink); }
.lede { margin:1.1rem 0 0; max-width:32rem; font-size:1.1rem; color:var(--ink-muted); }

form.signup { margin-top:1.7rem; max-width:30rem; }
.field { display:flex; gap:.55rem; }
@media (max-width:440px){ .field{ flex-direction:column; } }
.field input { flex:1; min-width:0; font:inherit; font-size:1rem; color:var(--ink); background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:.85rem 1rem; }
.field input::placeholder { color:var(--ink-muted); }
.field input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.cta { font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; background:var(--accent); color:var(--on-accent); border:0; border-radius:12px; padding:.85rem 1.4rem; box-shadow:var(--shadow); transition:background .14s, transform .12s; }
.cta:hover { background:var(--accent-strong); transform:translateY(-1px); }
.cta:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.micro { margin:.7rem 0 0; font-size:.82rem; color:var(--ink-muted); }
.micro a { color:var(--accent-ink); text-underline-offset:2px; }
.trust { margin-top:1.3rem; display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; font-size:.82rem; color:var(--ink-muted); }
.trust span { display:inline-flex; align-items:center; gap:.4rem; }
.trust .ok { color:var(--ok); font-weight:700; }

/* ===== product panel — mirrors real .hz-list / .hz-row ===== */
.panel { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.p-top { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--hairline); background:color-mix(in oklab,var(--surface-2) 60%,var(--surface)); }
.p-sync { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-muted); font-weight:600; }
.p-live { width:7px; height:7px; border-radius:999px; background:var(--ok); box-shadow:0 0 0 3px color-mix(in oklab,var(--ok) 22%,transparent); }
.p-dots { display:flex; gap:5px; } .p-dots i{ width:9px;height:9px;border-radius:999px;background:var(--hairline);display:block; }

.p-alert { display:flex; align-items:center; gap:12px; margin:14px; padding:12px 14px; border-radius:14px; background:var(--danger-soft); border:1px solid var(--danger-line); }
.p-alert .abar { width:4px; align-self:stretch; border-radius:999px; background:var(--danger); flex:none; }
.p-alert .ah { font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--danger); letter-spacing:-0.01em; display:block; }
.p-alert .as { font-size:12px; color:var(--ink-soft); display:block; margin-top:2px; }

.p-group { padding:2px 14px 8px; }
.p-gh { display:flex; align-items:center; gap:9px; padding:8px 4px 2px; }
.p-gtitle { font-family:var(--font-d); font-size:15px; font-weight:600; letter-spacing:-0.01em; margin:0; }
.p-gcount { font-family:var(--font-d); font-size:12px; font-weight:600; color:var(--ink-muted); }
.p-gsub { font-size:12px; color:var(--ink-muted); margin:2px 4px 10px; }
.p-list { border:1px solid var(--hairline); border-radius:16px; background:var(--surface); overflow:hidden; }

.row { display:grid; grid-template-columns:3px 40px 1fr auto; align-items:center; gap:0 14px; padding:14px 16px; position:relative; transition:background .5s, box-shadow .5s, transform .5s; }
.row + .row { border-top:1px solid var(--hairline-soft); }
.row .bar { width:3px; align-self:stretch; border-radius:999px; margin:2px 0; }
.sev-urgent .bar{ background:var(--danger); } .sev-attn .bar{ background:var(--warn); } .sev-calm .bar{ background:var(--ink-muted); opacity:.4; }
.av { width:40px; height:40px; border-radius:999px; background:var(--surface-2); border:1px solid var(--hairline); color:var(--ink-soft); display:grid; place-items:center; font-family:var(--font-d); font-weight:600; font-size:13px; }
.maincol { min-width:0; }
.l1 { display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:nowrap; }
.nm { font-size:14.5px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap; flex:none; }
.co { font-size:12.5px; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tag { flex:none; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid var(--hairline); color:var(--ink-soft); background:var(--surface-2); }
.unread { flex:none; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--accent-ink); }
.unread i { width:6px; height:6px; border-radius:999px; background:var(--accent); }
.preview { display:block; font-size:12.5px; color:var(--ink-soft); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:42ch; }
.right { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.cap { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; }
.cap .dot { width:7px; height:7px; border-radius:999px; background:currentColor; }
.sev-urgent .cap{ color:var(--danger); } .sev-attn .cap{ color:var(--warn); } .sev-calm .cap{ color:var(--ink-muted); }
.dur { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-d); font-size:13px; font-weight:600; color:var(--ink-soft); }
.dur svg { opacity:.8; }

.row.crossing { box-shadow: inset 0 0 0 1px var(--accent); background:var(--accent-soft); }
@media (prefers-reduced-motion: no-preference){ .row.lift{ animation:lift .8s cubic-bezier(.2,.7,.2,1) both; } }
@keyframes lift { 0%{ transform:translateY(8px); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }
@media (prefers-reduced-motion: no-preference){ .p-live, .a-pulse{ animation:pulse 2s ease-in-out infinite; } }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 color-mix(in oklab, currentColor 40%, transparent);} 50%{ box-shadow:0 0 0 5px transparent;} }

/* ===== sections ===== */
section.block { padding-block:clamp(3rem,7vw,5rem); border-top:1px solid var(--hairline); }
.block h2 { font-family:var(--font-d); font-weight:600; letter-spacing:-0.025em; font-size:clamp(1.7rem,3.4vw,2.3rem); margin:.55rem 0 0; text-wrap:balance; max-width:22ch; }
.block .sub { margin:.7rem 0 0; color:var(--ink-muted); max-width:46ch; }

/* "Co dalej?" showcase — mirrors real .hz-next card */
.next-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:2.6rem; align-items:center; margin-top:1rem; }
@media (max-width:920px){ .next-grid{ grid-template-columns:1fr; gap:1.6rem; } }
.hz-next { border-radius:26px; background:var(--accent-soft); border:1px solid var(--accent-line); padding:22px; box-shadow:var(--shadow); }
.hz-nexth { display:flex; align-items:center; gap:9px; color:var(--accent-ink); font-family:var(--font-d); font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase; }
.hz-sugs { margin-top:16px; display:flex; flex-direction:column; gap:11px; }
.hz-sug { display:flex; align-items:flex-start; gap:13px; background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:14px 16px; font-size:14px; line-height:1.5; }
.hz-sugn { width:23px; height:23px; border-radius:999px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-family:var(--font-d); font-weight:600; font-size:12px; flex:none; margin-top:1px; }
.hz-sugtx { flex:1; min-width:0; color:var(--ink); }
.hz-suguse { flex:none; align-self:center; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--accent-ink); background:var(--surface-2); border:1px solid var(--accent-line); border-radius:9px; padding:6px 12px; }
.hz-suguse:hover { background:var(--accent-soft); }
.hz-sugnote { display:flex; align-items:center; gap:7px; margin-top:14px; font-size:12px; color:var(--accent-ink); opacity:.85; }
.hz-sugnote-tx { flex:1; }

.steps { margin-top:2.2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
.step { background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:1.4rem; box-shadow:var(--shadow); }
.step .n { font-family:var(--font-m); font-size:.8rem; font-weight:700; color:var(--accent-ink); }
.step h4 { font-family:var(--font-d); font-weight:600; font-size:1.1rem; margin:.7rem 0 .35rem; letter-spacing:-0.01em; }
.step p { margin:0; font-size:.92rem; color:var(--ink-muted); }

.closing { text-align:center; }
.closing form.signup { margin-inline:auto; }
.closing .field { justify-content:center; }
.closing h2, .closing .sub { margin-inline:auto; }

footer.foot { border-top:1px solid var(--hairline); padding-block:2rem; }
.foot-in { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; font-size:.85rem; color:var(--ink-muted); }
.foot-links { display:flex; gap:1.2rem; } .foot-links a{ text-decoration:none; } .foot-links a:hover{ color:var(--ink); }
.note { font-size:.72rem; color:var(--ink-muted); }