/* Product pages (produkt-leads, produkt-crm and their English twins). Loaded AFTER /site.css and uses only
   its tokens, so colours and dark mode follow site.css. The mocks are HTML, never screenshots. */
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--rule-2);border-radius:999px;font-size:13.5px;color:var(--ink-2);background:var(--cell);text-decoration:none}
.eyebrow b{color:var(--ink);font-weight:600}
.eyebrow img{width:16px;height:16px;border-radius:4px}

/* hero: text left, product mock right */
.phero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);border-bottom:1px solid var(--rule)}
.phero .txt{padding:64px 56px 56px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.phero .crumb{margin-bottom:22px}
.phero h1{margin:20px 0 0;font:600 clamp(38px,4.6vw,62px)/1.01 var(--f);letter-spacing:-.045em;max-width:14ch;text-wrap:balance}
.phero .lede{margin:20px 0 0;font-size:clamp(17px,1.5vw,19px);color:var(--ink-2);max-width:46ch}
.phero .cta{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap}
.phero .fine{margin:14px 0 0;font-size:13.5px;color:var(--ink-3)}
.phero .fine a{color:inherit}
.phero .vis{position:relative;border-left:1px solid var(--rule);background:var(--well);padding:56px 44px;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0}
.phero .vis::before{content:"";position:absolute;inset:auto 0 0 0;height:70%;pointer-events:none;background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--gold) 9%,transparent) 0 1px,transparent 1px 7px),
  linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold) 14%,transparent) 60%,color-mix(in srgb,var(--gold) 20%,transparent))}
.phero .vis>*{position:relative}
.phero .vis .cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:12px;color:var(--ink-3)}

/* product switch under the hero */
.pswitch{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
.pswitch a{display:flex;align-items:center;gap:12px;padding:18px 56px;text-decoration:none;color:var(--ink-2);font-size:14.5px;min-width:0}
.pswitch a+a{border-left:1px solid var(--rule)}
.pswitch a b{color:var(--ink);font-weight:600}
.pswitch a[aria-current]{background:var(--cell);box-shadow:inset 0 -2px 0 var(--gold)}
.pswitch a:hover{color:var(--ink)}
.pswitch img{width:22px;height:22px;border-radius:6px;flex:none}

/* intro statement */
.pstate{padding:72px 56px;border-bottom:1px solid var(--rule)}
.pstate p{margin:0;max-width:34ch;font:600 clamp(26px,3vw,40px)/1.15 var(--f);letter-spacing:-.03em;color:var(--ink-3);text-wrap:balance}
.pstate p b{color:var(--ink);font-weight:600}

/* feature rows */
.fx{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);border-bottom:1px solid var(--rule)}
.fx>.t{padding:56px 56px 52px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.fx .k{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.fx .k i{font:500 11px/1 var(--mono);font-style:normal;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-t)}
.fx h2{margin:16px 0 14px;font:600 clamp(26px,2.6vw,34px)/1.1 var(--f);letter-spacing:-.03em;max-width:20ch;text-wrap:balance;scroll-margin-top:90px}
.fx p{margin:0 0 12px;color:var(--ink-2);max-width:50ch}
.fx p:last-of-type{margin-bottom:0}
.fx .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.fx .chips span{font-size:12.5px;padding:3px 9px;border-radius:6px;border:1px solid var(--rule-2);background:var(--cell);color:var(--ink-2);white-space:nowrap}
.fx>.w{background:var(--well);border-left:1px solid var(--rule);padding:52px 48px;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.fx.flip>.t{order:2}
.fx.flip>.w{order:1;border-left:0;border-right:1px solid var(--rule)}
.fx .w>*{width:100%;max-width:520px}
.excap{display:block;margin-top:10px;font-size:12px;color:var(--ink-3);text-align:center}

/* mock primitives */
.m{font-size:13px;line-height:1.45;color:var(--ink);text-align:left}
.m .hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:14px 16px;border-bottom:1px solid var(--rule);min-width:0}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.m .hd b{font-size:14px}
.m .hd .r{margin-left:auto}
.m .bd{padding:14px 16px}
.m .sub{color:var(--ink-3);font-size:12px}
.m .row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--rule);min-width:0}
.m .row:last-child{border-bottom:0}
.m .row .r{margin-left:auto;flex:none}
.m .row .grow{min-width:0;flex:1}
.m .row small{display:block;color:var(--ink-2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m q{font:italic 400 14px/1.4 var(--serif);color:var(--ink);quotes:"»" "«"}
.m .kv{display:grid;grid-template-columns:104px minmax(0,1fr);gap:7px 12px}
.m .kv span{color:var(--ink-3)} .m .kv b{font-weight:500;min-width:0;overflow-wrap:anywhere}
.m .lbl{font-size:11.5px;color:var(--ink-3);font-weight:500;margin:0 0 8px}
.m .sep{border-top:1px solid var(--rule);margin:12px 0}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.v{background:var(--violet-bg);color:var(--violet)}
.pill.b{background:var(--blue-bg);color:var(--blue)}
.pill.g{background:var(--gold-soft);color:var(--gold-t)}
.pill.n{background:var(--well);color:var(--ink-2)}
.fav{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex:none}
.fav.lg{width:34px;height:34px;border-radius:9px;font-size:14px}
.av{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:9.5px;font-weight:700;background:var(--well);color:var(--ink-2);border:1px solid var(--rule-2);flex:none}
.score{display:inline-block;min-width:26px;text-align:center;padding:2px 7px;border-radius:5px;background:var(--ok-bg);color:var(--ok);font-weight:600}
.score.m{background:var(--gold-soft);color:var(--gold-t)}
.score.lg{font-size:20px;padding:4px 11px}
.ic{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:none;font-weight:700;font-size:12px}
.ic.b{background:var(--blue-bg);color:var(--blue)} .ic.v{background:var(--violet-bg);color:var(--violet)} .ic.o{background:var(--ok-bg);color:var(--ok)} .ic.g{background:var(--gold-soft);color:var(--gold-t)} .ic.r{background:var(--bad-bg);color:var(--bad)} .ic.n{background:var(--well);color:var(--ink-2)}
.ic svg,.ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--rule-2);border-bottom-width:2px;border-radius:5px;background:var(--cell);font:500 11px/1 var(--mono);color:var(--ink)}
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--rule-2);border-radius:8px;background:var(--well)}
.seg span{height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.seg span.on{background:var(--cell);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sw{width:30px;height:18px;border-radius:999px;background:var(--ok);position:relative;flex:none}
.sw::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.meter{height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.meter i{display:block;height:100%;background:var(--ok);border-radius:3px}
.mbtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--rule-2);background:var(--cell);font-weight:600;font-size:12.5px;white-space:nowrap}
.mbtn.p{background:var(--ink);color:var(--bg);border-color:transparent}
.mbtn.g{background:var(--gold);color:var(--gold-ink);border-color:transparent}

/* stacked mock: a back card peeking behind the front card */
.stack{position:relative;padding-bottom:4px}
.stack .back{position:absolute;left:24px;right:-12px;top:-18px;height:60px;opacity:.55;transform:scale(.97);z-index:0}
.stack .front{position:relative;z-index:1}

/* kanban */
.kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kb .col{background:color-mix(in srgb,var(--cell) 60%,var(--well));border:1px solid var(--rule);border-radius:10px;padding:8px;display:grid;gap:7px;align-content:start;min-width:0}
.kb .ch{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);font-weight:500;padding:2px 4px}
.kb .dl{background:var(--cell);border:1px solid var(--rule-2);border-radius:8px;padding:8px 9px;font-size:12px;min-width:0}
.kb .dl b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb .dl span{color:var(--ink-3)}
.kb .dl.drag{transform:rotate(-2deg);box-shadow:var(--shadow);outline:1.5px solid var(--gold)}

/* bar chart (example figures, labelled on the page) */
.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;height:120px;padding:0 4px}
.bars div{display:flex;gap:3px;align-items:end;height:100%}
.bars i{flex:1;border-radius:3px 3px 0 0;background:var(--ok)}
.bars i+i{background:var(--rule-2)}
.bx{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:6px 4px 0;font-size:11px;color:var(--ink-3);text-align:center}
.leg{display:flex;gap:14px;font-size:11.5px;color:var(--ink-2)}
.leg span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;background:var(--ok)}
.leg span+span::before{background:var(--rule-2)}
.mt{width:100%;border-collapse:collapse;font-size:12.5px}
.mt th{font-weight:500;color:var(--ink-3);font-size:11.5px;text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--rule)}
.mt td{padding:8px 8px 8px 0;border-bottom:1px solid var(--rule)}
.mt tr:last-child td{border-bottom:0}
.mt .n{text-align:right;font-variant-numeric:tabular-nums}

/* workflow nodes */
.wfm{display:grid;gap:0;justify-items:center}
.wfm .nd{width:100%;max-width:340px;padding:11px 13px;display:flex;gap:10px;align-items:center}
.wfm .nd small{display:block;color:var(--ink-2);font-size:12px}
.wfm .nd b{font-size:13.5px}
.wfm .ln{width:1.5px;height:22px;background:var(--rule-2)}
.wfm .ln.run{background:repeating-linear-gradient(180deg,var(--gold) 0 5px,transparent 5px 9px)}
.wfm .trig{outline:1.5px solid var(--gold)}
.wfm .split{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:440px}
.wfm .split .nd{max-width:none}

/* destinations grid */
.dest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dest div{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--cell);border:1px solid var(--rule-2);border-radius:10px;font-weight:600;font-size:13.5px;min-width:0}
.dest div small{margin-left:auto;font-weight:500;color:var(--ink-3);font-size:11.5px;white-space:nowrap}
.dest div.hi{grid-column:1/-1;outline:1.5px solid var(--gold);box-shadow:var(--shadow)}
.dest svg,.dest img{width:22px;height:22px;flex:none;border-radius:5px}

/* how the two products connect */
.chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--rule);counter-reset:ch}
.chain>div{padding:32px 28px 36px;border-right:1px solid var(--rule);min-width:0;position:relative}
.chain>div:last-child{border-right:0}
.chain>div::after{content:"";position:absolute;right:-7px;top:44px;width:12px;height:12px;border-top:1.5px solid var(--rule-2);border-right:1.5px solid var(--rule-2);transform:rotate(45deg);background:var(--bg);z-index:1}
.chain>div:last-child::after{display:none}
.chain .who{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:5px}
.chain .who.l{background:var(--blue-bg);color:var(--blue)} .chain .who.c{background:var(--gold-soft);color:var(--gold-t)}
.chain h4{margin:14px 0 6px;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.chain p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.chainfoot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:22px 56px;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--ink-2)}
.chainfoot a.more{color:var(--ink);font-weight:600;text-decoration-color:var(--gold);text-underline-offset:3px}

/* pricing pointer */
.ppt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--rule)}
.ppt>div{padding:52px 56px;min-width:0}
.ppt>div+div{border-left:1px solid var(--rule);background:var(--well)}
.ppt h2{margin:0 0 14px;font:600 clamp(26px,2.6vw,34px)/1.1 var(--f);letter-spacing:-.03em;max-width:20ch}
.ppt p{margin:0 0 14px;color:var(--ink-2);max-width:50ch}
.ppt .plans{display:grid;gap:10px}
.ppt .pl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:18px 20px;background:var(--cell);border:1px solid var(--rule-2);border-radius:12px}
.ppt .pl.hi{outline:1.5px solid var(--gold);box-shadow:var(--shadow)}
.ppt .pl b{font-size:16px}
.ppt .pl .amt{font:600 26px/1 var(--f);letter-spacing:-.03em;white-space:nowrap}
.ppt .pl small{grid-column:1/-1;color:var(--ink-2);font-size:13.5px}
.ppt .go{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}

.faq details p a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.ftr a:hover{color:var(--ink)}

/* the logo tile switches to its dark variant, same rule as .logo img in site.css */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) img.mk{content:url(/logo-mark-dark.png)}}
:root[data-theme="dark"] img.mk{content:url(/logo-mark-dark.png)}

@media (max-width:1100px) and (min-width:901px){
  .chain{grid-template-columns:repeat(3,minmax(0,1fr))} .chain>div:nth-child(3){border-right:0} .chain>div:nth-child(n+4){border-top:1px solid var(--rule)} .chain>div:nth-child(3)::after{display:none}
}
@media (max-width:900px){
  .phero{grid-template-columns:1fr} .phero .txt{padding:40px 16px 36px} .phero .vis{border-left:0;border-top:1px solid var(--rule);padding:32px 16px 44px}
  .pswitch a{padding:14px 16px;font-size:13.5px;flex-direction:column;align-items:flex-start;gap:6px}
  .pstate{padding:44px 16px}
  .fx{grid-template-columns:1fr} .fx>.t{padding:36px 16px 28px} .fx>.w,.fx.flip>.w{order:2;border:0;border-top:1px solid var(--rule);padding:28px 16px}
  .fx.flip>.t{order:1}
  .chain{grid-template-columns:1fr} .chain>div{border-right:0;border-top:1px solid var(--rule);padding:24px 16px} .chain>div:first-child{border-top:0} .chain>div::after{display:none}
  .chainfoot{padding:20px 16px}
  .ppt{grid-template-columns:1fr} .ppt>div{padding:36px 16px} .ppt>div+div{border-left:0;border-top:1px solid var(--rule)}
  .stack .back{display:none}
  .m .kv{grid-template-columns:92px minmax(0,1fr)}
  .kb{grid-template-columns:repeat(2,minmax(0,1fr))} .kb .col:nth-child(3){display:none}
  .dest{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
}
@media (max-width:900px){.chainfoot a.more{display:inline-block;padding:11px 0;margin:-11px 0}}
/* mobile polish (2026-10-08): Pilot-mode row stacks its label so the number never runs under Call; 44px link targets; fine print >=14px */
@media (max-width:600px){
  .m .row.pmrow{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .m .row.pmrow>.pill{grid-column:1/-1;justify-self:start}
  .phero .fine,.ppt .pl small{font-size:14px}
}