@font-face{font-family:'Bricolage Grotesque';src:url('fonts/BricolageGrotesque-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/BricolageGrotesque-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Figtree';src:url('fonts/Figtree-Variable.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Variable.woff2') format('woff2');font-weight:100 800;font-display:swap}
/* Layout: a site plan as the hero thesis (ring = station, dot = sensor, waves = signal, as in the mark);
   one graphite band tells a detection start to finish; bento, sensor cards, FAQ, demo form, graphite footer.
   Tokens are the Pestnode brand kit (tokens.css), light + dark. */
:root {
  --surface:#F6F8F4; --surface-raised:#FFFFFF; --surface-sunken:#ECF1EA;
  --ink:#1D2622; --ink-muted:#56625C; --line:#D3DCD5; --line-strong:#7C8983;
  --brand:#1B7A4E; --brand-strong:#12603C; --on-brand:#FFFFFF; --mint:#CDEBD8;
  --graphite:#26302C; --on-graphite:#F2F6F3; --on-graphite-muted:#B9C6BF; --brand-on-dark:#4CC38A;
  --sun:#F4B942; --on-sun:#2A1E00;
  --ok-bg:#DDF1E5; --warn:#8A5A00; --warn-bg:#FDF0D2; --alert:#B3261E; --alert-bg:#FBE3E0;
  --info:#1F5FA8; --info-bg:#E1ECF8; --offline:#646E69;
  --logo-ink:#26302C; --logo-grn:#1B7A4E;
  --shadow-card:0 1px 2px rgba(29,38,34,.06),0 4px 12px rgba(29,38,34,.06);
  --shadow-pop:0 8px 28px rgba(29,38,34,.16);

  --font-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --font-sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --gutter:clamp(16px,4vw,40px); --section:clamp(64px,9vw,96px);
  --ease-out:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --surface:#111714; --surface-raised:#18201C; --surface-sunken:#0C110E;
  --ink:#E6EEE9; --ink-muted:#A2B0A8; --line:#2B3731; --line-strong:#647269;
  --brand:#4CC38A; --brand-strong:#7AD7A8; --on-brand:#0B1F15; --mint:#1D4A33;
  --graphite:#35423C; --on-graphite:#F2F6F3; --on-graphite-muted:#A2B0A8;
  --ok-bg:#163527; --warn:#F4C56A; --warn-bg:#3A2E12; --alert:#FF8A7E; --alert-bg:#3D1C19;
  --info:#8DB8F2; --info-bg:#16273D; --offline:#8E9993;
  --logo-ink:#F2F6F3; --logo-grn:#4CC38A;
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
  --shadow-pop:0 8px 28px rgba(0,0,0,.55);
  color-scheme:dark;
} }
:root[data-theme="dark"] {
  --surface:#111714; --surface-raised:#18201C; --surface-sunken:#0C110E;
  --ink:#E6EEE9; --ink-muted:#A2B0A8; --line:#2B3731; --line-strong:#647269;
  --brand:#4CC38A; --brand-strong:#7AD7A8; --on-brand:#0B1F15; --mint:#1D4A33;
  --graphite:#35423C; --on-graphite:#F2F6F3; --on-graphite-muted:#A2B0A8;
  --ok-bg:#163527; --warn:#F4C56A; --warn-bg:#3A2E12; --alert:#FF8A7E; --alert-bg:#3D1C19;
  --info:#8DB8F2; --info-bg:#16273D; --offline:#8E9993;
  --logo-ink:#F2F6F3; --logo-grn:#4CC38A;
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
  --shadow-pop:0 8px 28px rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--surface); color:var(--ink); font:400 1rem/1.6 var(--font-sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--font-display); color:var(--ink); margin:0; text-wrap:balance; }
h2 { font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.1; letter-spacing:-.015em; font-weight:700; }
h3 { font-size:1.125rem; line-height:1.35; font-weight:600; }
p { margin:0; text-wrap:pretty; }
a { color:inherit; }
.mono { font-family:var(--font-mono); font-weight:500; font-variant-numeric:tabular-nums; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap { width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--gutter); }
.ic { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ic-sm { width:16px; height:16px; }
.ic-lg { width:24px; height:24px; color:var(--brand); }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
.skip { position:absolute; left:16px; top:-60px; background:var(--brand); color:var(--on-brand); padding:8px 12px; border-radius:var(--r-md); z-index:20; }
.skip:focus { top:12px; }

/* logo */
.logo { height:32px; width:auto; display:block; }
.lg-ink { fill:var(--logo-ink); } .lg-ink-s { stroke:var(--logo-ink); }
.lg-grn { fill:var(--logo-grn); } .lg-grn-s { stroke:var(--logo-grn); }
.logo-rev .lg-ink { fill:var(--on-graphite); } .logo-rev .lg-ink-s { stroke:var(--on-graphite); }
.logo-rev .lg-grn { fill:var(--brand-on-dark); } .logo-rev .lg-grn-s { stroke:var(--brand-on-dark); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px;
  border-radius:var(--r-md); font:600 1rem/1 var(--font-sans); text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1px solid transparent; transition:background-color .16s var(--ease-out), transform .12s var(--ease-out), border-color .16s; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--brand); color:var(--on-brand); }
.btn-primary:hover { background:var(--brand-strong); }
.btn-primary .ic { transition:transform .2s var(--ease-out); }
.btn-primary:hover .ic { transform:translateX(3px); }
.btn-quiet { color:var(--ink); border-color:var(--line); background:var(--surface-raised); }
.btn-quiet:hover { border-color:var(--line-strong); }
.btn-sm { min-height:40px; padding:0 16px; font-size:.9375rem; }
.btn-block { width:100%; }

/* status chips (word + icon + colour, never colour alone) */
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:var(--r-pill);
  font:600 .8125rem/1.2 var(--font-sans); white-space:nowrap; }
.chip-ok { color:var(--brand-strong); background:var(--ok-bg); }
.chip-act { color:var(--warn); background:var(--warn-bg); }
.chip-need { color:var(--alert); background:var(--alert-bg); }
.chip-sched { color:var(--info); background:var(--info-bg); }
.chip-off { color:var(--offline); background:var(--surface-sunken); }

/* nav */
.nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; gap:24px; height:68px; }
.brand { display:block; flex:none; }
.nav-links { display:flex; gap:28px; margin-inline:auto; font-weight:500; font-size:.9375rem; }
.nav-links a, .login { text-decoration:none; color:var(--ink-muted); transition:color .15s; }
.nav-links a:hover, .login:hover { color:var(--ink); }
.nav-end { display:flex; align-items:center; gap:18px; margin-left:auto; }
.nav-links + .nav-end { margin-left:0; }
.lang { display:inline-flex; align-items:center; gap:5px; font:600 .8125rem/1 var(--font-sans); text-decoration:none; color:var(--ink-muted);
  padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-pill); }
.lang:hover { color:var(--ink); border-color:var(--line-strong); }
.login { font-weight:500; font-size:.9375rem; }

/* hero */
.hero { padding-block:clamp(40px,6vw,80px) var(--section); overflow:clip; }
.hero-in { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1 { font-size:clamp(2.4rem,5.2vw,4rem); line-height:1.02; letter-spacing:-.025em; font-weight:700; }
.lede { margin-top:22px; font-size:clamp(1.0625rem,1.5vw,1.25rem); line-height:1.55; color:var(--ink-muted); max-width:34ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.plan { position:relative; margin:0; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-card); padding:18px 18px 16px; }
.plan-cap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.875rem; color:var(--ink-muted); margin-bottom:10px; }
.plan-tag { font:600 .6875rem/1 var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  background:var(--sun); color:var(--on-sun); padding:5px 8px; border-radius:var(--r-sm); }
.plan-svg { display:block; width:100%; height:auto; }
.pl-floor { fill:var(--surface-sunken); }
.pl-outer { fill:none; stroke:var(--line-strong); stroke-width:3; }
.pl-wall { fill:none; stroke:var(--line-strong); stroke-width:2; stroke-linecap:round; }
.pl-dock { fill:var(--surface-raised); stroke:var(--line-strong); stroke-width:1.5; }
.pl-room { font:600 13px var(--font-sans); fill:var(--ink-muted); }
.pl-dock-l { font:500 10px var(--font-mono); fill:var(--ink-muted); text-anchor:middle; }
.stn-ring { fill:var(--surface-raised); stroke-width:3; }
.stn-l { font:500 11px var(--font-mono); fill:var(--ink-muted); }
.stn-ok .stn-ring { stroke:var(--brand); } .stn-ok .stn-dot { fill:var(--brand); }
.stn-sched .stn-ring { stroke:var(--info); } .stn-sched .stn-dot { fill:var(--info); }
.stn-off .stn-ring { stroke:var(--offline); stroke-dasharray:3 3; } .stn-off .stn-dot { fill:var(--offline); }
.stn-act .stn-ring { stroke:var(--warn); } .stn-act .stn-dot { fill:var(--warn); }
.stn-act .stn-l { fill:var(--warn); font-weight:700; }
.stn-halo { fill:var(--warn-bg); }
.stn-wave { fill:none; stroke:var(--warn); stroke-width:2.5; stroke-linecap:round; }
.legend { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }

.note { position:absolute; left:-28px; bottom:-40px; width:min(340px,86%); background:var(--surface-raised); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:16px; display:grid; gap:8px; }
.note-title { font:600 1rem/1.35 var(--font-display); }
.note-meta { font-size:.75rem; color:var(--ink-muted); }
.note-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.875rem;
  padding-top:10px; border-top:1px solid var(--line); }
.note-foot > span:first-child { display:inline-flex; align-items:center; gap:6px; color:var(--ink-muted); }
.note-btn { font-weight:600; color:var(--brand-strong); }

@media (prefers-reduced-motion: no-preference) {
  .stn-wave { animation:signal 2.4s var(--ease-out) infinite; }
  .stn-wave.w2 { animation-delay:.3s; }
  .note { animation:rise .5s var(--ease-out) .35s backwards; }
  .stn { animation:pop .4s var(--ease-out) calc(var(--i) * 40ms) backwards; transform-box:fill-box; transform-origin:center; }
}
@keyframes signal { 0%,100% { opacity:.25; } 35% { opacity:1; } }
@keyframes rise { from { opacity:0; transform:translateY(10px); } }
@keyframes pop { from { opacity:0; transform:scale(.6); } }

/* flow (graphite band) */
.flow { background:var(--graphite); color:var(--on-graphite); padding-block:var(--section); }
.flow h2 { color:var(--on-graphite); max-width:20ch; margin-top:12px; }
.overline { font:600 .75rem/1.3 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--brand-on-dark); }
.tl { list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; position:relative; }
.tl::before { content:""; position:absolute; left:20px; right:20px; top:20px; height:2px;
  background:repeating-linear-gradient(90deg,var(--on-graphite-muted) 0 6px,transparent 6px 12px); opacity:.45; }
.tl-step { position:relative; display:grid; gap:6px; align-content:start; }
.tl-dot { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--graphite);
  border:2px solid var(--brand-on-dark); color:var(--brand-on-dark); margin-bottom:14px; }
.tl-step:first-child .tl-dot { border-color:var(--sun); color:var(--sun); }
.tl-time { font:500 .8125rem/1 var(--font-mono); color:var(--on-graphite-muted); font-variant-numeric:tabular-nums; }
.tl-actor { color:var(--on-graphite); font-size:1.25rem; }
.tl-body { color:var(--on-graphite-muted); font-size:.9375rem; line-height:1.6; }

/* features bento */
.features { padding-block:var(--section); }
.sec-h { max-width:22ch; }
.bento { margin-top:48px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; }
.cell { background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,28px);
  display:flex; flex-direction:column; gap:10px; min-width:0; }
.cell p { color:var(--ink-muted); font-size:.9375rem; max-width:48ch; }
.cell-cal { grid-column:span 4; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start;
  background:var(--mint); border-color:transparent; }
.cell-cal p { color:var(--ink); }
.cell-cal .ic-lg { color:var(--brand-strong); }
.cell-text { display:flex; flex-direction:column; gap:10px; }
.cell-visit { grid-column:span 2; }
.cell-audit { grid-column:span 2; background:var(--sun); border-color:transparent; }
.cell-audit h3, .cell-audit p, .cell-audit .ic-lg { color:var(--on-sun); }
.cell-portal { grid-column:span 2; }
.cell-rec { grid-column:span 2; }

.cal { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; background:var(--surface-raised); border-radius:var(--r-md);
  padding:10px; box-shadow:var(--shadow-card); }
.cal-day { font:600 .75rem/1 var(--font-sans); color:var(--ink-muted); padding:4px 4px 8px; border-bottom:1px solid var(--line); }
.cal ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.job { background:var(--surface-sunken); border-radius:var(--r-sm); padding:6px 7px; display:grid; gap:1px; border-left:3px solid var(--brand); }
/* Words never split mid-word: the layout gives each day enough width instead. */
.job b { font-size:.75rem; line-height:1.25; font-weight:600; }
.job span { font-size:.75rem; line-height:1.25; color:var(--ink-muted); }
.job-hot { background:var(--warn-bg); border-left-color:var(--warn); }

.sig { margin-top:auto; padding-top:8px; border-top:1px dashed var(--line); display:grid; gap:4px; }
.sig > svg { width:100%; max-width:220px; height:44px; }
.sig path { fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sig span { display:inline-flex; align-items:center; gap:6px; font:500 .75rem/1 var(--font-mono); color:var(--brand-strong); }
@media (prefers-reduced-motion: no-preference) {
  .sig path { stroke-dasharray:420; stroke-dashoffset:0; transition:stroke-dashoffset 1.2s var(--ease-out); }
  .cell-visit:hover .sig path { animation:draw 1.2s var(--ease-out); }
}
@keyframes draw { from { stroke-dashoffset:420; } }

.files { list-style:none; margin:auto 0 0; padding:10px 0 0; display:grid; gap:6px; }
.files li { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.55); color:var(--on-sun); border-radius:var(--r-sm);
  padding:6px 10px; font-size:.75rem; min-width:0; }
.files li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* sensors */
.sensors { padding-block:var(--section); border-top:1px solid var(--line); }
.sensors-in { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(32px,6vw,80px); align-items:center; }
.sensors-copy { display:grid; gap:18px; }
.sensors-copy p { color:var(--ink-muted); font-size:1.0625rem; max-width:46ch; }
.with-ic { display:flex; gap:12px; align-items:flex-start; }
.with-ic .ic { color:var(--brand); margin-top:4px; }
.small { font-size:.875rem !important; border-left:3px solid var(--sun); padding-left:12px; }
.sensor-stack { display:grid; gap:16px; }
.sensor { background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:18px 20px; display:grid; gap:6px; max-width:440px; }
.sensor:nth-child(2) { margin-left:clamp(0px,6vw,72px); }
.sensor:nth-child(3) { margin-left:clamp(0px,3vw,36px); }
.sensor header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sensor header .mono { font-size:.8125rem; color:var(--ink-muted); }
.sensor-loc { display:flex; align-items:center; gap:6px; color:var(--ink-muted); font-size:.875rem; }
.sensor dl { margin:8px 0 0; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 18px;
  font:500 .8125rem/1.2 var(--font-mono); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.sensor dd { margin:0; display:inline-flex; align-items:center; gap:6px; }
.sensor-off { box-shadow:none; background:transparent; border-style:dashed; }

/* faq */
.faq { padding-block:var(--section); background:var(--surface-sunken); }
.faq-in { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(24px,5vw,64px); align-items:start; }
.qa-list { display:grid; gap:10px; }
.qa { background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-lg); }
.qa summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; font:600 1.0625rem/1.35 var(--font-display); }
.qa summary::-webkit-details-marker { display:none; }
.qa-chev { color:var(--ink-muted); transition:transform .2s var(--ease-out); }
.qa[open] .qa-chev { transform:rotate(180deg); }
.qa p { padding:0 20px 20px; color:var(--ink-muted); max-width:62ch; }

/* contact */
.contact { padding-block:var(--section); }
.contact-in { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,6vw,80px); align-items:start; }
.contact-copy { display:grid; gap:16px; }
.contact-copy > p { color:var(--ink-muted); font-size:1.0625rem; max-width:40ch; }
.mail { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:.9375rem; }
.mail-addr { color:var(--ink); user-select:all; }
.copy { display:inline-flex; align-items:center; gap:6px; font:600 .8125rem/1 var(--font-sans); color:var(--brand-strong);
  background:var(--ok-bg); border:0; border-radius:var(--r-pill); padding:7px 12px; cursor:pointer; }
.copy:active { transform:scale(.97); }
.form { background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-card);
  padding:clamp(20px,3vw,32px); display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:grid; gap:6px; min-width:0; }
.field:nth-child(1), .field:nth-child(3) { grid-column:span 1; }
.field label { font:600 .875rem/1.3 var(--font-sans); }
.field input, .field select { width:100%; min-height:46px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font:400 1rem var(--font-sans); padding:0 12px; }
.field input:focus, .field select:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.field input[aria-invalid="true"] { border-color:var(--alert); }
.form .btn-block, .form-msg { grid-column:1 / -1; }
.form-msg { font-size:.875rem; color:var(--ink-muted); }
.form-msg.is-err { color:var(--alert); }
.form-msg.is-info { color:var(--info); }

/* footer */
.foot { background:var(--graphite); color:var(--on-graphite); padding-block:64px 32px; }
.foot-in { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; }
.foot-brand { display:grid; gap:14px; align-content:start; }
.foot-brand p { color:var(--on-graphite-muted); font-size:.9375rem; }
.foot-cols { display:flex; gap:64px; }
.foot-cols div { display:grid; gap:10px; align-content:start; }
.foot h3 { color:var(--on-graphite); font:600 .75rem/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.foot-cols a { color:var(--on-graphite-muted); text-decoration:none; font-size:.9375rem; }
.foot-cols a:hover { color:var(--on-graphite); }
.foot-legal { grid-column:1 / -1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px;
  border-top:1px solid rgba(242,246,243,.14); color:var(--on-graphite-muted); font-size:.8125rem; }
.foot-legal span { display:inline-flex; align-items:center; gap:6px; }

/* responsive */
@media (max-width: 1024px) {
  .nav-links { display:none; }
  .hero-in, .sensors-in, .contact-in, .faq-in { grid-template-columns:minmax(0,1fr); }
  .plan { margin-bottom:40px; }
  .cell-cal { grid-column:span 6; }
  .cell-visit, .cell-audit, .cell-portal, .cell-rec { grid-column:span 3; }
  .sensor-stack { order:2; }
}
@media (max-width: 720px) {
  .login { display:none; }
  .nav-end { gap:10px; }
  .note { position:relative; left:auto; bottom:auto; width:auto; margin:14px 0 0; box-shadow:var(--shadow-card); }
  .plan { margin-bottom:0; padding:14px; }
  .tl { grid-template-columns:minmax(0,1fr); gap:28px; margin-top:40px; }
  .tl::before { left:20px; right:auto; top:20px; bottom:20px; width:2px; height:auto;
    background:repeating-linear-gradient(180deg,var(--on-graphite-muted) 0 6px,transparent 6px 12px); }
  .tl-step { grid-template-columns:42px minmax(0,1fr); column-gap:16px; }
  .tl-dot { grid-row:span 3; margin:0; }
  .bento { grid-template-columns:minmax(0,1fr); gap:14px; }
  .cell-cal, .cell-visit, .cell-audit, .cell-portal, .cell-rec { grid-column:auto; }
  /* Phone: one row per day, jobs side by side, so each pill gets the width it needs. */
  .cal { grid-template-columns:minmax(0,1fr); gap:0; }
  .cal-col { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:start; gap:8px; padding-block:8px; border-bottom:1px solid var(--line); }
  .cal-col:last-child { border-bottom:0; }
  .cal-day { border-bottom:0; padding:6px 0 0; }
  .cal ul { margin:0; display:flex; flex-wrap:wrap; gap:6px; }
  .sensor:nth-child(n) { margin-left:0; }
  .form { grid-template-columns:minmax(0,1fr); }
  .foot-in { grid-template-columns:minmax(0,1fr); }
  .foot-cols { gap:40px; }
}
@media (max-width: 480px) {
  .logo { height:26px; }
  .lang .ic { display:none; }
  .lang { padding:7px 9px; }
  .btn-sm { padding:0 12px; font-size:.875rem; }
  .hero-cta .btn { width:100%; }
}

/* form clause (RODO art. 13 short notice) */
.form-clause { grid-column:1 / -1; font-size:.8125rem; line-height:1.5; color:var(--ink-muted); }
.form-clause a { color:var(--brand-strong); font-weight:600; }

/* legal page */
.legal { padding-block:clamp(40px,6vw,72px) var(--section); }
.legal-in { max-width:760px; display:grid; gap:16px; }
.legal h1 { font-size:clamp(2rem,4vw,2.75rem); line-height:1.1; letter-spacing:-.02em; font-weight:700; }
.legal-ver { font:500 .8125rem/1 var(--font-mono); color:var(--ink-muted); }
.legal-intro { font-size:1.125rem; color:var(--ink-muted); max-width:62ch; }
.legal section { display:grid; gap:12px; padding-top:28px; margin-top:12px; border-top:1px solid var(--line); }
.legal h2 { font-size:1.375rem; line-height:1.25; }
.legal h3 { font-size:1rem; margin-top:6px; }
.legal p, .legal li, .legal dd { color:var(--ink); max-width:66ch; }
.legal ul { margin:0; padding-left:1.25em; display:grid; gap:6px; }
.legal dl { margin:0; display:grid; grid-template-columns:minmax(0,160px) minmax(0,1fr); gap:8px 20px;
  background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; }
.legal dt { font-weight:600; color:var(--ink-muted); font-size:.875rem; padding-top:2px; }
.legal dd { margin:0; }
.back { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-weight:600; font-size:.875rem;
  color:var(--brand-strong); text-decoration:none; }
.back-ic { transform:rotate(180deg); }
mark.todo { background:var(--sun); color:var(--on-sun); padding:1px 5px; border-radius:4px; font-weight:600; }
.foot-slim { padding-block:40px 28px; }
@media (max-width: 720px) {
  .legal dl { grid-template-columns:minmax(0,1fr); gap:2px; }
  .legal dd { margin-bottom:10px; }
}

/* TEN-22 spam trap: off-screen, never shown to people or screen readers */
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form { position:relative; }
.form-msg.is-ok { color:var(--brand-strong); font-weight:600; }
.form button[disabled] { opacity:.6; cursor:progress; }