/* hero-lab — product pages in the homepage style. Restyles the components the live product pages
   (en/produkt/*.html, css/product.css) are built from, so a page converted by the hero-lab build keeps
   its content and mocks but reads like the homepage prototype and the Accounts Payable draft. */

/* ───────── Sections: white, homepage rhythm, headline over lede ───────── */
section.p-section { padding: 120px 0 128px; background: var(--bg); }
.p-section .sx-head h2 { margin: 0; max-width: none; }
.p-section h2.h-section { text-wrap: balance; }
.p-section .lede { font-size: 18px; line-height: 1.5; color: var(--ink-2); letter-spacing: 0; text-wrap: pretty; }
.p-section .sx-head .lede, .p-section .sx-head .sx-lede { margin: 0; max-width: 820px; }

/* Copy column next to a product mock */
.feature-block { gap: 72px; }
.feature-block > * { min-width: 0; }
.feature-text { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.feature-text > * + * { margin-top: 0 !important; }
.feature-text h2 { margin: 0; }
.feature-text .lede { margin: 0; max-width: none; }
.feature-text > ul { margin: 4px 0 0 !important; gap: 12px !important; font-size: 15.5px !important; }
.feature-text .btn { margin-top: 0 !important; }

/* Check lists: the homepage's round blue tick */
.check-li { gap: 12px; line-height: 1.45; color: var(--ink-2); }
.check-li > svg { display: none; }
.check-li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006EC7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.check-li strong { font-weight: 500; color: var(--ink); }

/* Capability grid: agent-card look */
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0; margin-top: 0 !important; }
.cap-grid:has(> .cap:nth-child(4):last-child), .cap-grid:has(> .cap:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cap-grid:has(> .cap:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-head + .callout + .cap-grid, .callout + .cap-grid { margin-top: 16px !important; }
.cap { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line) !important; border-radius: 10px; background: var(--bg); }
.cap-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cap-title { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.cap-body { margin: 0; max-width: none; font-size: 15px; color: var(--ink-3); line-height: 1.5; }

/* Results strip under the hero (stats moved out of the old hero) */
.pp-stats > div p { margin: 8px 0 0; max-width: 260px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.rs-stats.pp-stats.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-section .stat-row { border-color: var(--line); }

/* Product mocks and data strips: homepage radius, border and shadow */
.mock { border-radius: 10px; box-shadow: 0 30px 70px -32px rgba(28,24,19,.22), inset 0 0 0 1px var(--line); }
.callout, .compliance-cards, .channels { border-radius: 10px; }
.callout { background: var(--bg-soft); border-color: color-mix(in oklab, var(--line), transparent 35%); margin-top: 0 !important; }
.sx-head + .callout { margin-bottom: 16px; }

/* Journey of a document: pinned two-column scroll, four phases of three steps */
.jr { padding: 72px 0 120px; overflow-x: clip; }
.jr-pin { position: relative; height: 260vh; }
.jr-sticky { position: sticky; top: calc(var(--tb-h) + var(--nav-h)); height: calc(100vh - var(--tb-h) - var(--nav-h)); display: flex; align-items: center; }
.jr-sticky > .wrap { width: 100%; }
.jr-sticky .sx-head { margin-bottom: 40px; }
.jr-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 48px; align-items: start; }
.jr .ow-steps li { grid-template-columns: 52px 1fr; }
.jr .ow-steps .n { white-space: nowrap; }
.jr-stage { position: relative; display: grid; }
.jr-panel { grid-area: 1 / 1; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 10px; background: var(--bg-soft);
  border: 1px solid color-mix(in oklab, var(--line), transparent 35%); opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.jr-panel.past { transform: translateY(-24px); }
.jr-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.jr-step { padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 10px; }
.jr-step + .jr-step { border-left: 1px solid var(--line); }
.jr-step .n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--accent); }
.jr-step h3 { margin: 0 0 6px; font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.jr-step ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.jr-step li { display: grid; gap: 3px; padding-top: 14px; border-top: 1px dashed var(--line); }
.jr-step li b { font-size: 15px; font-weight: 500; color: var(--ink); }
.jr-step li span { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
@media (max-height: 820px) and (min-width: 1101px) {
  .jr-sticky .sx-head { gap: 10px; margin-bottom: 20px; }
  .jr-sticky .sx-head h2 { font-size: 44px; }
  .jr-step { padding: 20px 24px 22px; gap: 8px; }
  .jr-step ul { gap: 10px; }
  .jr-step li { padding-top: 10px; }
}

/* Related reading */
.pp-reading .cm-card { min-height: 168px; }

@media (max-width: 1100px) {
  .feature-block, .feature-block.reverse { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-text { order: 0; }
  .cap-grid, .cap-grid:has(> .cap:nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr { padding: 80px 0; }
  .jr-pin { height: auto; }
  .jr-sticky { position: static; height: auto; display: block; }
  .jr-grid { grid-template-columns: 1fr; gap: 24px; }
  .jr-grid .ow-steps { display: none; }
  .jr-stage { display: flex; flex-direction: column; gap: 16px; }
  .jr-panel, .jr-panel.past { opacity: 1; transform: none; pointer-events: auto; }
  .rs-stats.pp-stats.n3 { grid-template-columns: 1fr; }
  .rs-stats.pp-stats.n3 > div, .rs-stats.pp-stats.n3 > div + div { padding: 22px 0; border-left: 0; }
  .rs-stats.pp-stats.n3 > div + div { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  section.p-section { padding: 80px 0; }
  .cap-grid, .cap-grid:has(> .cap:nth-child(8):last-child), .cap-grid:has(> .cap:nth-child(4):last-child), .cap-grid:has(> .cap:nth-child(2):last-child) { grid-template-columns: 1fr; }
  .jr-panel { grid-template-columns: 1fr; }
  .jr-step + .jr-step { border-left: 0; border-top: 1px solid var(--line); }
  .rs-stats.pp-stats { grid-template-columns: 1fr; }
  .rs-stats.pp-stats > div, .rs-stats.pp-stats > div + div { padding: 22px 0; border-left: 0; }
  .rs-stats.pp-stats > div + div { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .jr-panel, .jr-panel.past { transition: opacity .2s; transform: none; } }

/* Beta tag above a hero headline (Procurement) */
.pp-beta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; }

/* Buttons inside capability cards: real buttons, centred at the bottom of the card */
.cap .btn { align-self: center; width: auto; max-width: 280px; margin-top: auto !important; justify-content: center; }
.cap:has(> .btn) .cap-body { margin-bottom: 8px; }