/* CLNT-4597 · Product (Platform) pages: feature rows, cards, stats and the page-specific mocks. */

.platform-hero { padding-top: var(--space-lg); }
.platform-crumbs { margin-bottom: var(--space-lg); font-size: .78rem; color: var(--color-muted); }
.platform-crumbs a { color: var(--color-ink-soft); }
.platform-crumbs span { margin-inline: .25rem; }
.platform-crumbs [aria-current] { margin: 0; color: var(--color-ink); font-weight: 600; }

/* Feature rows: a short argument on the left, the specifics on the right. */
.platform-feature { display: grid; gap: var(--space-lg); }
.platform-feature h2 { font-size: var(--text-title); letter-spacing: -.025em; }
.platform-feature-copy p { margin-top: var(--space-sm); color: var(--color-ink-soft); line-height: 1.7; max-width: 52ch; }
.platform-feature-copy .text-link { margin-top: var(--space-sm); }
.platform-feature-band { background: var(--color-paper-alt); border-block: 1px solid var(--color-rule); }
.platform-points { margin: 0; display: grid; gap: 0; }
.platform-points > div { padding: .95rem 0; border-top: 1px solid var(--color-rule-strong); }
.platform-points > div:last-child { border-bottom: 1px solid var(--color-rule-strong); }
.platform-points dt { font-weight: 600; font-size: .92rem; }
.platform-points dd { margin: .2rem 0 0; font-size: .86rem; line-height: 1.65; color: var(--color-muted); }
.platform-points a { color: var(--color-accent-text); }

/* Cards: related pages and the overview grid. */
.platform-related { padding-block: var(--space-2xl) var(--space-xl); }
.platform-related h2 { font-size: var(--text-title); margin-bottom: var(--space-lg); }
.platform-cards { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.platform-card { display: grid; gap: .3rem; align-content: start; padding: 1.1rem 1.2rem; border: 1px solid var(--color-rule); border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short), transform var(--dur-short) var(--ease-out); }
.platform-card strong { font: 600 1.3rem/1.2 var(--font-display); }
.platform-card > span:not(.small-label) { font-size: .84rem; line-height: 1.6; color: var(--color-muted); }
.platform-card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.platform-cards-large .platform-card { padding: 1.4rem 1.4rem 1.6rem; }
.platform-cards-large .small-label { color: var(--color-accent-text); }
@media (hover: hover) { .platform-card:hover { border-color: var(--color-ink); transform: translateY(-2px); } }

/* Overview flow: four steps on the dark stage. */
.platform-flow-stage { padding-bottom: 0; }
.platform-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; position: relative; background: var(--color-dark-rule); border: 1px solid var(--color-dark-rule); border-radius: var(--radius-panel); overflow: hidden; }
.platform-flow li { display: grid; gap: .35rem; align-content: start; padding: 1.3rem 1.2rem 1.5rem; background: oklch(25.4% .038 266 / .82); }
.platform-flow .small-label { color: var(--color-accent); }
.platform-flow strong { font: 600 1.35rem/1.2 var(--font-display); color: var(--color-on-dark); }
.platform-flow li > span:last-child { font-size: .84rem; line-height: 1.6; color: var(--color-dark-muted); }

/* Stats (Lex). */
.platform-stats { padding-block: var(--space-xl) 0; }
.platform-stats dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); overflow: hidden; }
.platform-stats dl > div { display: flex; flex-direction: column-reverse; gap: .3rem; padding: 1.2rem; background: var(--color-surface); }
.platform-stats dd { margin: 0; font: 500 clamp(1.8rem, 4vw, 2.8rem)/1 var(--font-display); letter-spacing: -.02em; }
.platform-stats dt { font-size: .78rem; line-height: 1.45; color: var(--color-muted); }

/* Workspace map (Munkaterületek). */
.workspace-map-stage { padding-bottom: 0; }
.workspace-map { position: relative; display: grid; gap: .75rem; }
.workspace-card { padding: 1.2rem 1.2rem 1.3rem; border-radius: 8px; background: var(--color-surface); color: var(--color-ink); box-shadow: 0 20px 50px oklch(15% .03 260 / .35); }
.workspace-card .small-label { color: var(--color-accent-text); }
.workspace-card h2 { margin-top: .2rem; font-size: 1.45rem; letter-spacing: -.02em; }
.workspace-card dl { margin: .9rem 0 0; display: grid; gap: .7rem; }
.workspace-card dt { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.workspace-card dd { margin: .15rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--color-ink-soft); }

/* Integrations grid. */
.integration-grid { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.integration-card { display: grid; gap: .5rem; align-content: start; padding: 1.3rem; border: 1px solid var(--color-rule); border-radius: var(--radius-panel); background: var(--color-surface); }
.integration-card h2 { font-size: 1.4rem; letter-spacing: -.02em; }
.integration-card p { font-size: .86rem; line-height: 1.65; color: var(--color-ink-soft); }
.integration-card .text-link { justify-self: start; }
.integration-mark { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 7px; background: var(--color-deep); color: var(--color-accent); font: 700 .9rem/1 var(--font-body); }
.integration-word { background: #2b579a; color: #fff; }
.integration-drive { background: oklch(94% .05 150); color: #1e7e34; }
.integration-status { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-text); }

/* Cases mock (Ügykezelés). */
.cases-new { background: var(--color-deep); color: var(--color-on-dark); border-color: var(--color-deep); }
.cases-tools { display: grid; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--color-rule); }
.cases-search { padding: .5rem .7rem; border: 1px solid var(--color-rule-strong); border-radius: 6px; color: var(--color-muted); font-size: .76rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cases-filters { display: flex; gap: .35rem; overflow: hidden; font-size: .7rem; font-weight: 600; }
.cases-filters span { flex: none; padding: .25rem .6rem; border: 1px solid var(--color-rule-strong); border-radius: 999px; color: var(--color-ink-soft); }
.cases-filters .is-active { background: var(--color-deep); border-color: var(--color-deep); color: var(--color-on-dark); }
.cases-list { list-style: none; margin: 0; padding: 0; }
.cases-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--color-rule); }
.cases-list li:last-child { border-bottom: 0; }
.cases-list b { display: block; font-size: .84rem; line-height: 1.35; }
.cases-list li > div > span { font-size: .72rem; color: var(--color-muted); }
.cases-stage { font-size: .66rem; font-weight: 600; padding: .2rem .5rem; border-radius: 4px; background: var(--color-accent-pale); color: var(--color-accent-text); }
.cases-stage-early { background: var(--color-paper-alt); color: var(--color-ink-soft); }
.cases-stage-late { background: oklch(94% .05 150); color: #2e7d32; }
.cases-when { display: none; font-size: .72rem; color: var(--color-muted); }

/* Library mock (Tudástárak). */
.library-folder { width: .85rem; height: .65rem; border-radius: 2px; background: var(--color-accent); opacity: .8; }
.library-list { list-style: none; margin: 0; padding: .4rem 1rem; }
.library-list li { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--color-rule); }
.library-list b { display: block; font-size: .82rem; overflow-wrap: anywhere; }
.library-list li span:not(.library-icon) { font-size: .7rem; color: var(--color-muted); }
.library-icon { width: 1.8rem; height: 1.8rem; font-size: .7rem; }
.library-pdf { background: var(--color-error-pale); color: var(--color-error); font-size: .52rem; }
.library-attach { margin: .6rem 1rem 1rem; padding: .9rem; border: 1px solid var(--color-rule-strong); border-radius: 8px; background: var(--color-paper); }
.library-modes { display: grid; gap: .5rem; margin-top: .6rem; }
.library-modes span { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .6rem; padding: .6rem .7rem; border: 1px solid var(--color-rule); border-radius: 6px; background: var(--color-surface); font-size: .72rem; color: var(--color-muted); }
.library-modes i { grid-row: span 2; width: .85rem; height: .85rem; margin-top: .15rem; border-radius: 50%; border: 1.5px solid var(--color-rule-strong); }
.library-modes b { font-size: .8rem; color: var(--color-ink); }
.library-modes .is-active { border-color: var(--color-ink); }
.library-modes .is-active i { border: 4px solid var(--color-deep); }

@media (min-width: 40rem) {
  .platform-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-stats dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 1rem 1.5rem; }
  .cases-list li { grid-template-columns: minmax(0, 1fr) auto 4rem; padding: .85rem 1.5rem; }
  .cases-when { display: block; text-align: right; }
  .library-list { padding: .4rem 1.5rem; }
  .library-attach { margin: .6rem 1.5rem 1.4rem; }
  .library-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .platform-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: start; }
  .platform-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-cards-large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .platform-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .workspace-map { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .integration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Case knowledge mock (Ügytudás): real tabs, mocked panes. */
.knowledge-mock-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--color-rule); }
.knowledge-mock-tabs { display: flex; gap: .3rem; padding: .2rem; border-radius: 8px; background: var(--color-paper-alt); }
.knowledge-mock-tabs button { min-height: 36px; padding: .35rem .85rem; border: 0; border-radius: 6px; background: transparent; color: var(--color-ink-soft); font: 600 .78rem/1 var(--font-body); cursor: pointer; }
.knowledge-mock-tabs button[aria-selected="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 3px var(--color-shadow); }
.knowledge-mock-tabs button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.knowledge-mock-panel:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.km-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.km-title { font: 600 1.05rem/1.2 var(--font-display); }
.km-title em { font: 700 .58rem/1 var(--font-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .45rem; margin-right: .4rem; border-radius: 4px; background: var(--color-paper-alt); color: var(--color-ink-soft); vertical-align: middle; }
.km-count { font-size: .68rem; font-weight: 600; padding: .25rem .55rem; border: 1px solid var(--color-rule-strong); border-radius: 6px; color: var(--color-ink-soft); }
.km-filters { display: flex; gap: .3rem; overflow: hidden; margin-top: .7rem; font-size: .68rem; font-weight: 600; }
.km-filters span { flex: none; padding: .25rem .55rem; border: 1px solid var(--color-rule-strong); border-radius: 5px; color: var(--color-ink-soft); }
.km-filters .is-active { background: var(--color-deep); border-color: var(--color-deep); color: var(--color-on-dark); }
.km-graph, .km-wiki { display: grid; grid-template-columns: minmax(0, 1fr); }
.km-graph-main, .km-wiki-list, .km-wiki-page { padding: 1rem; min-width: 0; }
.km-svg { display: block; width: 100%; height: auto; margin-top: .5rem; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 6px; }
.km-edges path { stroke: var(--color-rule-strong); stroke-width: 1.2; fill: none; }
.km-node text { font: 500 11px var(--font-body); fill: var(--color-ink-soft); }
.km-node circle { stroke: var(--color-surface); stroke-width: 2; }
.km-q circle { fill: #2563eb; } .km-rule circle { fill: #e0a800; } .km-finding circle { fill: #2e7d32; } .km-evidence circle { fill: #6b7280; } .km-decision circle { fill: #38bdf8; }
.km-selected circle { stroke: var(--color-ink); stroke-width: 3; }
.km-selected text { fill: var(--color-ink); font-weight: 700; }
.km-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .6rem; font-size: .68rem; color: var(--color-ink-soft); }
.km-legend span::before { content: ''; display: inline-block; width: .6rem; height: .6rem; margin-right: .3rem; border-radius: 50%; vertical-align: -1px; }
.km-legend .km-q::before { background: #2563eb; } .km-legend .km-rule::before { background: #e0a800; } .km-legend .km-finding::before { background: #2e7d32; } .km-legend .km-evidence::before { background: #6b7280; } .km-legend .km-decision::before { background: #38bdf8; }
.km-dossier { padding: 1rem; border-top: 1px solid var(--color-rule); background: var(--color-paper); font-size: .78rem; color: var(--color-ink-soft); display: grid; gap: .45rem; align-content: start; }
.km-dossier-title { font: 600 1.05rem/1.25 var(--font-display); color: var(--color-ink); margin-top: .3rem !important; }
.km-dossier ul { margin: 0; padding-left: 1rem; display: grid; gap: .2rem; }
.km-search { display: block; margin-top: .7rem; padding: .45rem .65rem; border: 1px solid var(--color-rule-strong); border-radius: 6px; font-size: .74rem; color: var(--color-muted); }
.km-wiki-list ol { list-style: none; margin: .7rem 0 0; padding: 0; border: 1px solid var(--color-rule); border-radius: 6px; overflow: hidden; }
.km-wiki-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .5rem; padding: .6rem .75rem; border-bottom: 1px solid var(--color-rule); }
.km-wiki-list li:last-child { border-bottom: 0; }
.km-wiki-list li.is-active { background: oklch(94% .03 250); }
.km-wiki-list b { font-size: .8rem; }
.km-wiki-list li span { grid-column: 1; font-size: .7rem; color: var(--color-muted); }
.km-wiki-list li em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: .62rem; font-weight: 600; padding: .2rem .45rem; border: 1px solid var(--color-rule); border-radius: 4px; color: var(--color-ink-soft); }
.km-wiki-page { border-top: 1px solid var(--color-rule); display: grid; gap: .5rem; align-content: start; }
.km-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.km-chips li { padding: .25rem .55rem; border-radius: 5px; background: oklch(94% .03 250); color: #1e40af; font-size: .72rem; font-weight: 600; }
@media (min-width: 40rem) {
  .knowledge-mock-top { padding: .9rem 1.5rem; }
  .km-graph-main, .km-wiki-list, .km-wiki-page { padding: 1.2rem 1.5rem; }
}
@media (min-width: 64rem) {
  .km-graph { grid-template-columns: minmax(0, 1fr) 17rem; }
  .km-dossier { border-top: 0; border-left: 1px solid var(--color-rule); padding: 1.2rem; }
  .km-wiki { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .km-wiki-page { border-top: 0; border-left: 1px solid var(--color-rule); }
}
/* Phones get their own, smaller graph (six nodes, labels under the nodes) instead of a shrunken desktop one. */
.km-svg-mobile { display: none; }
@media (max-width: 39.99rem) {
  .km-svg-desktop { display: none; }
  .km-svg-mobile { display: block; }
  .km-svg-mobile .km-node text { font-size: 12px; }
  .km-legend .km-decision { display: none; }
  /* Chip rows that run off the edge fade out instead of cutting a word in half. */
  :is(.km-filters, .cases-filters) { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
}

/* Micro-motion for the product mocks (CLNT-4597). Each plays once when its stage is revealed
   (motion.js); without JS or with reduced motion (motion.css) everything simply stays in place. */
@keyframes platform-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes platform-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes platform-ring { 0% { box-shadow: 0 0 0 0 oklch(51.9% .07 76 / .45); } 100% { box-shadow: 0 0 0 10px oklch(51.9% .07 76 / 0); } }
.product-stage.is-revealed :is(.cases-list li, .library-list li, .lex-provision > p, .km-wiki-list li) { animation: motion-rise 420ms var(--ease-out) both; }
.product-stage.is-revealed :is(.cases-list li, .library-list li, .km-wiki-list li):nth-child(1) { animation-delay: 250ms; }
.product-stage.is-revealed :is(.cases-list li, .library-list li, .km-wiki-list li):nth-child(2) { animation-delay: 340ms; }
.product-stage.is-revealed :is(.cases-list li, .library-list li, .km-wiki-list li):nth-child(3) { animation-delay: 430ms; }
.product-stage.is-revealed :is(.cases-list li, .library-list li, .km-wiki-list li):nth-child(4) { animation-delay: 520ms; }
.product-stage.is-revealed :is(.cases-list li, .km-wiki-list li):nth-child(5) { animation-delay: 610ms; }
.product-stage.is-revealed .lex-provision > p:nth-of-type(2) { animation-delay: 200ms; }
.product-stage.is-revealed .lex-provision > p:nth-of-type(3) { animation-delay: 300ms; }
.product-stage.is-revealed .lex-provision > p:nth-of-type(4) { animation-delay: 400ms; }
.product-stage.is-revealed .lex-practice { animation: platform-ring 900ms var(--ease-out) 700ms 2; }
.product-stage.is-revealed .lex-practice-note { animation: motion-rise 420ms var(--ease-out) 900ms both; }
.product-stage.is-revealed .library-attach { animation: motion-rise 420ms var(--ease-out) 650ms both; }
.product-stage.is-revealed .library-modes .is-active { animation: platform-ring 900ms var(--ease-out) 1100ms; }
.product-stage.is-revealed .cases-filters .is-active { animation: platform-ring 900ms var(--ease-out) 800ms; }
.km-edges path { stroke-dasharray: 1; }
.product-stage.is-revealed .km-edges path { animation: platform-draw 700ms var(--ease-out) both; }
.product-stage.is-revealed .km-edges path:nth-child(odd) { animation-delay: 250ms; }
.product-stage.is-revealed .km-edges path:nth-child(even) { animation-delay: 400ms; }
.km-node circle { transform-box: fill-box; transform-origin: center; }
.product-stage.is-revealed .km-node circle { animation: platform-pop 360ms var(--ease-out) both; }
.product-stage.is-revealed .km-node:nth-of-type(odd) circle { animation-delay: 150ms; }
.product-stage.is-revealed .km-node:nth-of-type(even) circle { animation-delay: 300ms; }
.product-stage.is-revealed .km-selected circle { animation: platform-pop 420ms var(--ease-out) 700ms both; }
.product-stage.is-revealed .km-dossier { animation: motion-rise 420ms var(--ease-out) 950ms both; }
.knowledge-mock-panel:not([hidden]) { animation: motion-rise 240ms var(--ease-out); }
@media (hover: hover) {
  .integration-card { transition: border-color var(--dur-short), transform var(--dur-short) var(--ease-out); }
  .integration-card:hover { border-color: var(--color-ink); transform: translateY(-2px); }
  .integration-mark { transition: transform var(--dur-short) var(--ease-out); }
  .integration-card:hover .integration-mark { transform: rotate(-4deg) scale(1.06); }
  .platform-points > div { transition: padding-left var(--dur-short) var(--ease-out); }
  .platform-points > div:hover { padding-left: .35rem; }
}

/* Biztonsági központ (CLNT-4602). */
.trust-pillars { padding-block: var(--space-md) var(--space-lg); }
.integration-card h3 { font-size: 1.4rem; letter-spacing: -.02em; }
.integration-card { scroll-margin-top: 6rem; }
.platform-related-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: var(--space-lg); }
.platform-related-head h2 { margin-bottom: 0; }
/* Újdonságok (CLNT-4667): the period count sits under the date like a caption. */
.changelog-count { margin-top: .35rem; color: var(--color-muted); font-size: .875rem; }
.changelog-entries dd .text-link { display: flex; width: max-content; margin-top: .6rem; white-space: nowrap; }
/* Related blog articles (CLNT-4686): a quiet list, so it never competes with the product cards. */
.platform-articles { padding-block: var(--space-2xl) 0; }
.platform-articles h2 { font-size: var(--text-title); }
.platform-article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule); }
.platform-article-list li { border-bottom: 1px solid var(--color-rule); }
.platform-article-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding: 1rem 0; color: var(--color-ink); text-decoration: none; }
.platform-article-list .small-label { grid-column: 1; color: var(--color-accent-text); font-size: .7rem; }
.platform-article-list strong { grid-column: 1; font: 600 1.05rem/1.4 var(--font-body); text-wrap: pretty; }
.platform-article-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out), color var(--dur-short); }
.platform-article-list a:hover strong { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.platform-article-list a:hover .platform-article-arrow, .platform-article-list a:focus-visible .platform-article-arrow { color: var(--color-ink); transform: translateX(3px); }
/* Labels sit on a paper-coloured halo so graph edges never run through the text. */
.km-node text { paint-order: stroke; stroke: var(--color-paper); stroke-width: 5px; stroke-linejoin: round; }
/* Section head: heading left, one-line intro right (overview page). */
.platform-section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.platform-section-head h2 { font-size: var(--text-title); letter-spacing: -.025em; }
.platform-section-head > p { color: var(--color-ink-soft); line-height: 1.7; max-width: 44ch; }
@media (min-width: 64rem) { .platform-section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-2xl); } .platform-section-head > p { justify-self: end; } }
/* Integration cards: status and link line up along the bottom of each row. */
.integration-grid .integration-card { display: flex; flex-direction: column; }
.integration-grid .integration-card .integration-status { margin-top: auto; padding-top: .4rem; }
.integration-grid .integration-card .integration-mark { flex: none; }
.integration-grid .integration-card .text-link { align-self: flex-start; }
.integration-grid .integration-card > .text-link:last-child { margin-top: auto; }
.integration-grid .integration-card > .integration-status ~ .text-link { margin-top: .25rem; }

/* Company pages (CLNT-4653): Szakmai béta, Rólunk, Kapcsolat, Támogatás on the product-page design. */
.company-jump { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.25rem; padding-block: var(--space-lg) 0; }
.company-jump .small-label { margin-right: .25rem; }
.company-jump a { font-size: .86rem; color: var(--color-ink-soft); text-decoration: underline; text-decoration-color: var(--color-rule-strong); text-underline-offset: 3px; }
.company-section { scroll-margin-top: 5rem; }
.company-prose p { color: var(--color-ink-soft); line-height: 1.7; max-width: 58ch; }
.company-prose p + p { margin-top: var(--space-sm); }
.company-contact-grid { padding-top: var(--space-sm); }
.company-phone { margin-top: var(--space-md); font-size: .86rem; color: var(--color-ink-soft); max-width: 70ch; }
.company-steps-stage { padding-bottom: 0; }
@media (hover: hover) { .company-jump a:hover { color: var(--color-ink); } }
/* GYIK (CLNT-4653): grouped disclosure lists. */
.gyik { display: grid; gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); }
.gyik-group { display: grid; gap: var(--space-md); scroll-margin-top: 5rem; }
.gyik-group h2 { font-size: var(--text-title); letter-spacing: -.025em; }
@media (min-width: 64rem) { .gyik-group { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--space-2xl); align-items: start; } }

/* Client portal mock (Ügykezelés, CLNT-4653). */
.client-portal .wrap + .wrap { margin-top: var(--space-xl); }
.client-mock-body { display: grid; gap: 0; }
.client-mock-col { padding: 1rem; display: grid; gap: .6rem; align-content: start; }
.client-mock-col + .client-mock-col { border-top: 1px solid var(--color-rule); }
.client-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.client-tasks li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--color-rule); }
.client-tasks b { display: block; font-size: .82rem; }
.client-tasks li span:not(.client-check) { font-size: .7rem; color: var(--color-muted); }
.client-check { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; border-radius: 4px; border: 1.5px solid var(--color-rule-strong); }
.client-check.is-done { background: #2e7d32; border-color: #2e7d32; }
.client-mock-form label { display: grid; gap: .25rem; font-size: .76rem; color: var(--color-ink-soft); }
.client-mock-form i { font-style: normal; padding: .45rem .6rem; border: 1px solid var(--color-rule-strong); border-radius: 6px; color: var(--color-ink); background: var(--color-surface); }
.client-submit { justify-self: start; margin-top: .3rem; padding: .4rem .9rem; border-radius: 6px; background: var(--color-deep); color: var(--color-on-dark); font-size: .74rem; font-weight: 600; }
.product-stage.is-revealed .client-tasks li { animation: motion-rise 420ms var(--ease-out) both; }
.product-stage.is-revealed .client-tasks li:nth-child(2) { animation-delay: 150ms; }
.product-stage.is-revealed .client-tasks li:nth-child(3) { animation-delay: 300ms; }
@media (min-width: 40rem) {
  .client-mock-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .client-mock-col { padding: 1.2rem 1.5rem; }
  .client-mock-col + .client-mock-col { border-top: 0; border-left: 1px solid var(--color-rule); background: var(--color-paper); }
}
/* Company pages carry 2–3 sentences per section: lighter rhythm than the product feature rows. */
.company-section.section { padding-block: clamp(2rem, 4.5vw, 3.75rem); }

/* Megoldások (CLNT-4692): nine areas read best as three rows of three; the shared-tools list links out. */
@media (min-width: 64rem) { .platform-cards-large.solution-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.platform-points dt a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.solution-general { color: var(--color-ink-soft); }

/* Hero graph (Megoldások): a quiet backdrop for heroes without a product visual. A soft warm shade behind
   the copy, and a sparse knowledge-graph constellation pinned to the gap between the heading column
   (1.35fr) and the lead column (1fr) of .hero-copy-split, so it never crosses the text. It draws in once. */
.has-hero-lines .hero-copy { position: relative; isolation: isolate; }
.hero-shade { position: absolute; inset: -3rem -2rem; z-index: -1; width: calc(100% + 4rem); height: calc(100% + 6rem); pointer-events: none; }
.hero-graph { display: none; }
.hero-graph-edges { fill: none; stroke: var(--color-rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-graph-nodes circle { fill: var(--color-paper); stroke: var(--color-rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-graph-nodes .is-gold { fill: var(--color-accent); stroke: none; }
@media (min-width: 64rem) {
  .has-hero-lines .hero-copy { --hero-gap: clamp(2rem, 5vw, 5rem); }
  .hero-graph { display: block; position: absolute; z-index: -1; top: 0; bottom: 0; width: min(200px, 16vw); height: 100%; pointer-events: none;
    /* right edge 1rem before the lead column starts */
    left: calc((100% - var(--hero-gap)) * 1.35 / 2.35 + var(--hero-gap) - 1rem - min(200px, 16vw)); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-graph-edges path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: hero-graph-draw 1.4s var(--ease-out) forwards; animation-delay: calc(var(--i) * 120ms); }
  .hero-graph-nodes circle { animation: hero-graph-fade .5s var(--ease-out) both; animation-delay: calc(.2s + var(--i) * 110ms); }
}
@keyframes hero-graph-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-graph-fade { from { opacity: 0; } }