/* manifolio.com: the marketing layer on top of site.css. The product and solution pages, the sections they are
   built from (split, tour, code, grid, cards, steps, table, form), the nav menus and the reference density.
   Values are CSS px at 1440, as in site.css. */

/* the reference is drawn at 16 px; the admin's .875 density stays only between 1024 and 1279 */
@media (min-width: 1280px) { html.mk { --k: 1; } }

html.mk .lp-lead { max-width: 38rem; font-size: 1.125rem; line-height: 1.75rem; color: #3D3D3D; }
html.mk .hero-sub { max-width: 40rem; font-size: 1.25rem; line-height: 1.875rem; font-weight: 400; color: rgba(255,255,255,.9); }
html.mk .hero-h1 { max-width: 62rem; }
@media (min-width: 768px) {
  html.mk .hero-screen:not(.mk-hero-screen) { aspect-ratio: 2880 / 1580; }
  html.mk .hero-screen img, html.mk .cta-screen img { display: block; width: 100%; height: auto; }
}
html.mk .hero-frame { margin-bottom: -15rem; }
html.mk .lp-feat { padding-top: 19.5rem; }
.mk-sec .stats { margin-top: 0; }

/* ── nav menus (Product, Solutions) ── */
.nv-dd { position: relative; }
.nv-trig { position: relative; display: inline-flex; align-items: center; gap: .3125rem; height: 2.75rem; font-size: 1rem; line-height: 1.5rem; color: #FFF; transition: color var(--d-hover) var(--ease-out); }
.nv-trig svg { width: 1rem; height: 1rem; opacity: .8; transition: transform 240ms var(--ease-out); }
.lp-links.has-active .nv-trig { color: rgba(255,255,255,.72); }
.lp-links .nv-trig:hover, .lp-links .nv-trig.is-active, .nv-dd.is-open .nv-trig { color: #FFF; }
.nv-dd.is-open .nv-trig svg { transform: rotate(180deg); }
.nv-trig.is-active::after { content: ""; position: absolute; left: calc(50% - .5rem); bottom: .25rem; width: .25rem; height: .25rem; border-radius: 50%; background: var(--orange); }
.nv-panel {
  position: absolute; left: 50%; top: calc(100% + .875rem); z-index: 5; display: grid; gap: .5rem; width: 27rem; padding: .5rem;
  border-radius: 1.25rem; background: #FFF; box-shadow: 0 24px 64px rgba(37,16,7,.20), 0 2px 8px rgba(37,16,7,.08);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -.375rem) scale(.98); transform-origin: 50% 0;
  transition: opacity 180ms var(--ease-in), transform 200ms var(--ease-in), visibility 0s linear 200ms;
}
.nv-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.875rem; height: .875rem; }
.nv-panel.has-lead { grid-template-columns: 15rem minmax(0, 1fr); width: 44rem; }
.nv-dd.is-open .nv-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 220ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s; }
.lp-links .nv-panel a { padding: 0; color: var(--text-1); font-size: inherit; }
.lp-links .nv-panel a::after { display: none; }
.nv-lead { position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 100%; padding: 1.25rem !important; overflow: hidden; border-radius: .875rem; background: var(--maroon-landing); color: #FFF !important; transition: background-color var(--d-hover) var(--ease-out); }
.nv-lead:hover { background: #561A08; }
.nv-lead-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; border-radius: .75rem; background: var(--grad-icon-tile); color: #FFF; }
.nv-lead-ic svg { width: 1.25rem; height: 1.25rem; }
.nv-lead b { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; }
.nv-lead > span:not(.nv-lead-ic):not(.nv-lead-go) { font-size: .875rem; line-height: 1.375rem; color: rgba(255,255,255,.78); }
.nv-lead-go { display: inline-flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--orange-300); }
.nv-lead-go svg { width: 1rem; height: 1rem; transition: transform var(--d-hover) var(--ease-out); }
.nv-lead:hover .nv-lead-go svg { transform: translateX(3px); }
.nv-list { display: grid; gap: .125rem; }
.nv-list a { display: flex; align-items: flex-start; gap: .875rem; padding: .75rem !important; border-radius: .875rem; transition: background-color var(--d-hover) var(--ease-out); }
.nv-list a:hover, .nv-list a:focus-visible { background: var(--row); }
.nv-list a[aria-current] { background: var(--orange-50); }
.nv-ic { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--orange-50); color: var(--orange-700); }
.nv-ic svg { width: 1.25rem; height: 1.25rem; }
.nv-tx { display: flex; flex-direction: column; min-width: 0; padding-top: .0625rem; }
.nv-tx b { font-size: .9375rem; line-height: 1.375rem; font-weight: 600; color: var(--text-1); }
.nv-tx span { font-size: .8125rem; line-height: 1.25rem; color: var(--text-3); }
.lp-nav :focus-visible { outline: 2px solid var(--orange-300); outline-offset: 2px; border-radius: .5rem; }
.nv-panel :focus-visible { outline-color: var(--orange-600); }

/* ── sections ── */
.mk-sec { position: relative; padding: 7.5rem 0; }
.tone-light + .tone-light, .tone-white + .tone-white, .tone-dark + .tone-dark, .tone-cream + .tone-cream { padding-top: 0; }
.mk-plans .bill { display: flex; justify-content: center; margin: -1rem 0 3rem; }
.tone-light { background: var(--panel); }
.tone-white { background: #FFF; }
.tone-cream { background: var(--cream); }
.tone-dark { background: var(--maroon-landing); color: #FFF; }
.tone-dark .lp-h2, .tone-dark .mk-h2 { color: #FFF; }
html.mk .tone-dark .lp-lead, html.mk .tone-dark .mk-lead { color: rgba(255,255,255,.82); }
.tone-dark .eyebrow { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); color: #FFF; }
.mk-head-l { display: flex; flex-direction: column; align-items: flex-start; }
.mk-h2 { margin-top: 1rem; font-size: 3rem; line-height: 3.625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
.mk-head-l .mk-h2:first-child { margin-top: 0; }
.mk-head-l .mk-lead { margin-top: 1.25rem; max-width: 34rem; }
.mk-more-row { display: flex; justify-content: center; margin-top: 2.5rem; }
.mk-more { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-top: 1.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: var(--orange-700); }
.mk-more-row .mk-more { margin-top: 0; }
.mk-more svg { width: 1.125rem; height: 1.125rem; transition: transform var(--d-hover) var(--ease-out); }
.mk-more:hover svg { transform: translateX(3px); }
.tone-dark .mk-more { color: var(--orange-300); }

/* split: text and a real screenshot that runs off the frame */
.mk-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: center; }
.mk-split.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mk-split.is-flip .mk-split-vis { order: -1; }
.mk-split-tx { min-width: 0; }
.mk-split-vis { min-width: 0; }
.mk-points { margin-top: 2rem; }
.mk-points li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.mk-points li:last-child { border-bottom: 1px solid var(--line); }
.mk-pi { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--orange-50); color: var(--orange-700); }
.mk-pi svg { width: 1.25rem; height: 1.25rem; }
.mk-points b { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--text-1); }
.mk-points span, .mk-points a { display: block; margin-top: .125rem; font-size: .9375rem; line-height: 1.5rem; color: var(--text-body-landing); }
.mk-points a { color: var(--orange-700); text-decoration: underline; text-decoration-color: rgba(194,65,12,.35); text-underline-offset: .2em; }
.tone-dark .mk-points li { border-color: rgba(255,255,255,.12); }
.tone-dark .mk-pi { background: rgba(249,115,22,.16); color: var(--orange-300); }
.tone-dark .mk-points b { color: #FFF; }
.tone-dark .mk-points span { color: rgba(255,255,255,.72); }

.mk-frame { position: relative; height: 36rem; padding: 2.5rem 0 0 2.5rem; overflow: hidden; border-radius: var(--r-landing-card); background: var(--grad-product-frame); }
.mk-frame img { display: block; width: 52rem; max-width: none; height: auto; border-radius: .75rem 0 0 0; box-shadow: 0 24px 60px rgba(37,16,7,.32), 0 2px 6px rgba(37,16,7,.12); transform: translate3d(0, var(--iy, 0px), 0); }
.is-flip .mk-frame { background: linear-gradient(180deg, #441406 0%, #6B260F 100%); }

/* product tour */
.mk-tablist { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.mk-tablist [role=tab] {
  display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: #FFF;
  font-size: .9375rem; line-height: 1.375rem; font-weight: 500; color: var(--text-2); white-space: nowrap;
  transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), border-color 240ms var(--ease-out), transform var(--d-press) var(--ease-pop);
}
.mk-tablist [role=tab] svg { width: 1.125rem; height: 1.125rem; color: var(--orange-700); transition: color 240ms var(--ease-out); }
.mk-tablist [role=tab]:hover { border-color: var(--line-strong); }
.mk-tablist [role=tab]:active { transform: scale(.97); }
.mk-tablist [role=tab][aria-selected=true] { border-color: var(--maroon-landing); background: var(--maroon-landing); color: #FFF; }
.mk-tablist [role=tab][aria-selected=true] svg { color: var(--orange-300); }
.mk-tablist [role=tab]:focus-visible { outline: 2px solid var(--orange-600); outline-offset: 2px; }
.mk-tabstage { max-width: 72rem; margin: 2.5rem auto 0; padding: .75rem; border: 1px solid var(--line); border-radius: 1.75rem; background: #FFF; box-shadow: 0 30px 80px rgba(68,20,6,.08); }
.mk-tp { opacity: 0; transform: scale(.985); transform-origin: 50% 0; transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out); }
.mk-tp.is-on { opacity: 1; transform: none; }
.mk-tp-shot { overflow: hidden; aspect-ratio: 2408 / 1600; border-radius: 1.125rem; border: 1px solid var(--line-soft); background: var(--panel); }
.mk-tp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.mk-tp-cap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.125rem .75rem .375rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-body-landing); }
.mk-tp-cap a { display: inline-flex; flex: none; align-items: center; gap: .375rem; min-height: 2.75rem; font-weight: 500; color: var(--orange-700); }
.mk-tp-cap a svg { width: 1rem; height: 1rem; transition: transform var(--d-hover) var(--ease-out); }
.mk-tp-cap a:hover svg { transform: translateX(3px); }

/* code */
.mk-codecard { border-radius: 1.25rem; box-shadow: 0 30px 80px rgba(0,0,0,.30); border-color: rgba(255,255,255,.08); }
.mk-codecard .code-head { height: 3rem; padding: 0 .5rem 0 .875rem; }
.mk-codecard .code-head .code-tab { display: inline-flex; align-items: center; }
.mk-codecard .code-copy { margin-left: auto; }
.mk-codecard .code-body { padding: 1.25rem 1.5rem 1.5rem; }
.mk-codecard pre { font-family: var(--mono); font-size: .875rem; line-height: 1.5rem; }
.tone-light .mk-codecard, .tone-white .mk-codecard { box-shadow: 0 30px 80px rgba(68,20,6,.18); }

/* grid of facts, no cards: icon, title, text on hairlines */
.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; }
.mk-grid li { padding: 2rem 0 .5rem; border-top: 1px solid var(--line); }
.mk-gi { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .875rem; background: var(--orange-50); color: var(--orange-700); }
.mk-gi svg { width: 1.375rem; height: 1.375rem; }
.mk-grid h3 { margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.01em; }
.mk-grid p { margin-top: .5rem; font-size: .9375rem; line-height: 1.5rem; color: var(--text-body-landing); text-wrap: pretty; }
.tone-dark .mk-grid li { border-color: rgba(255,255,255,.14); }
.tone-dark .mk-gi { background: rgba(249,115,22,.16); color: var(--orange-300); }
.tone-dark .mk-grid h3 { color: #FFF; }
.tone-dark .mk-grid p { color: rgba(255,255,255,.72); }

/* link cards */
.mk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.mk-card {
  display: flex; flex-direction: column; min-width: 0; padding: 2rem; border: 1px solid var(--line); border-radius: var(--r-landing-card); background: #FFF;
  transition: border-color 280ms var(--ease-out);
}
.mk-card:hover { border-color: var(--line-strong); }
.mk-card h3 { margin-top: 1.5rem; font-size: 1.375rem; line-height: 1.875rem; font-weight: 600; letter-spacing: -0.01em; }
.mk-card p { flex: 1; margin-top: .5rem; font-size: .9375rem; line-height: 1.5rem; color: var(--text-body-landing); }
.mk-card-go { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1.5rem; font-size: .9375rem; line-height: 1.5rem; font-weight: 500; color: var(--orange-700); }
.mk-card-go svg { width: 1rem; height: 1rem; transition: transform var(--d-hover) var(--ease-out); }
.mk-card:hover .mk-card-go svg { transform: translateX(3px); }

/* steps */
.mk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.mk-steps li { display: flex; flex-direction: column; min-width: 0; padding: 2rem; border-radius: var(--r-landing-card); background: #FFF; border: 1px solid var(--line); }
.mk-step-n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--maroon-landing); color: #FFF; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-steps h3 { margin-top: 1.5rem; font-size: 1.375rem; line-height: 1.875rem; font-weight: 600; letter-spacing: -0.01em; }
.mk-steps p { margin-top: .5rem; font-size: .9375rem; line-height: 1.5rem; color: var(--text-body-landing); }
.mk-step-code { display: block; margin-top: auto; padding: .875rem 1rem; overflow-x: auto; border-radius: .75rem; background: var(--code-bg); font-family: var(--mono); font-size: .8125rem; line-height: 1.375rem; color: #F5E9E2; white-space: pre; scrollbar-width: none; }
.mk-steps p + .mk-step-code, .mk-steps h3 + .mk-step-code { margin-top: 1.5rem; }
.mk-step-code::-webkit-scrollbar { display: none; }

/* comparison table */
.mk-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-landing-card); background: #FFF; scrollbar-width: thin; }
.mk-table table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 1rem; line-height: 1.5rem; }
.mk-table th, .mk-table td { padding: 1rem 1.5rem; text-align: center; vertical-align: middle; }
.mk-table thead th { position: sticky; top: 0; padding-top: 1.5rem; padding-bottom: 1.25rem; background: #FFF; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.mk-table thead th.is-hl { color: var(--orange-700); }
.mk-table tbody th { width: 36%; text-align: left; font-weight: 500; color: var(--text-1); }
.mk-table tbody th span { display: block; font-size: .8125rem; line-height: 1.25rem; font-weight: 400; color: var(--text-4); }
.mk-table td { color: var(--text-2); font-variant-numeric: tabular-nums; }
.mk-table td.is-hl, .mk-table thead th.is-hl { background: #FFF9F3; }
.mk-table tbody tr + tr > * { border-top: 1px solid var(--line-soft); }
.mk-tgroup th { padding-top: 1.75rem !important; padding-bottom: .625rem !important; background: #FFF; font-size: 12px !important; line-height: 16px; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--text-4) !important; }
.mk-yes, .mk-no { display: inline-grid; place-items: center; vertical-align: middle; }
.mk-yes { color: var(--orange-600); }
.mk-no { color: #B5B5B5; }
.mk-yes svg, .mk-no svg { width: 1.125rem; height: 1.125rem; }
.mk-foot-note { max-width: 44rem; margin: 1.5rem auto 0; text-align: center; font-size: .9375rem; line-height: 1.5rem; color: var(--text-3); text-wrap: balance; }

/* faq inside sections */
.mk-l-faq .faq-list { background: transparent; }

/* note: one calm panel with an action */
.mk-l-note { padding: 4rem 0; }
.mk-notebox { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 2rem 2.25rem; border: 1px solid var(--orange-border-soft); border-radius: var(--r-landing-card); background: var(--orange-50); }
.mk-note-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-icon-tile); background: var(--grad-icon-tile); color: #FFF; }
.mk-note-ic svg { width: 1.5rem; height: 1.5rem; }
.mk-note-tx h2 { font-size: 1.375rem; line-height: 1.875rem; font-weight: 600; letter-spacing: -0.01em; }
.mk-note-tx p { margin-top: .25rem; max-width: 46rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-body-landing); }
.mk-note-btn { padding: 0 1.5rem; white-space: nowrap; }

/* live data mock (demo client aurora.coffee) */
.mk-live { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 2rem; border-radius: var(--r-landing-card); background: linear-gradient(160deg, #FFF4E6 0%, #FDE1C2 100%); }
.mk-lc { min-width: 0; padding: 1.125rem 1.25rem; border-radius: 1rem; background: #FFF; box-shadow: 0 1px 2px rgba(124,45,18,.06), 0 12px 28px rgba(124,45,18,.10); }
.mk-lc-now { grid-column: 1 / -1; display: flex; flex-direction: column; }
.mk-lc-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mk-lc-t { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.mk-lc-site { font-size: 12px; line-height: 16px; color: var(--text-4); white-space: nowrap; }
.mk-lc-fig { display: flex; align-items: baseline; gap: .375rem; margin-top: .75rem; }
.mk-lc-fig b { font-size: 3rem; line-height: 3.5rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mk-lc-fig span { font-size: .9375rem; color: var(--text-3); }
.mk-lc-bars { display: flex; align-items: flex-end; gap: 3px; height: 5.5rem; margin-top: .75rem; }
.mk-lc-bars i { flex: 1; height: var(--h); min-height: 3px; border-radius: 3px 3px 1px 1px; background: var(--grad-data); opacity: calc(.35 + var(--i) * .031); }
.mk-lc-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: .875rem; border-top: 1px solid var(--line-soft); }
.mk-lc-top code { min-width: 0; overflow: hidden; font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.mk-lc-top span { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mk-lc ul { margin-top: .625rem; }
.mk-lc-vit li { display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: center; gap: .5rem; height: 2.25rem; font-size: .875rem; }
.mk-lc-vit li + li { border-top: 1px solid var(--line-soft); }
.mk-lc-vit li span:first-child { color: var(--text-3); }
.mk-lc-vit b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-lc-ev li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; padding: .375rem 0; }
.mk-lc-ev code { grid-column: 1; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--text-1); }
.mk-lc-ev b { grid-column: 2; grid-row: 1 / span 2; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-ev-bar { grid-column: 1; grid-row: 2; display: block; height: .375rem; width: var(--w); border-radius: 999px; background: var(--grad-data); }
.mk-live-cap { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .375rem; font-size: 12px; line-height: 16px; color: #7A3A12; }
.mk-live-cap svg { width: .875rem; height: .875rem; }

/* contact form */
.mk-form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding: 2rem; border: 1px solid var(--line); border-radius: var(--r-landing-card); background: #FFF; box-shadow: 0 30px 80px rgba(68,20,6,.06); }
.mk-field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.mk-field.is-wide { grid-column: 1 / -1; }
.mk-field > span { font-size: .9375rem; line-height: 1.375rem; font-weight: 500; color: var(--text-1); }
.mk-field i { margin-left: .375rem; font-style: normal; font-weight: 400; color: var(--text-4); }
.mk-field input, .mk-field textarea {
  width: 100%; min-height: 3rem; padding: 0 1rem; border: 1px solid var(--line-field); border-radius: var(--r-field); background: var(--panel); font: inherit; font-size: 1rem; color: var(--text-1);
  transition: border-color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out);
}
.mk-field textarea { min-height: 9.5rem; padding: .875rem 1rem; resize: vertical; line-height: 1.5rem; }
.mk-field input:focus, .mk-field textarea:focus { outline: none; border-color: var(--orange-600); background: #FFF; box-shadow: 0 0 0 3px rgba(249,115,22,.18); }
.mk-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mk-form-legal { grid-column: 1 / -1; margin-top: -.25rem; font-size: .875rem; line-height: 1.375rem; color: var(--text-3); }
.mk-form-legal a { color: var(--text-1); text-decoration: underline; text-underline-offset: 2px; }
.mk-form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.25rem; }
.mk-send { padding: 0 2rem; transition: opacity var(--d-hover) var(--ease-out); }
.mk-form.is-busy .mk-send { opacity: .7; }
.mk-form-msg { font-size: .9375rem; line-height: 1.375rem; color: var(--text-3); }
.mk-form.is-sent .mk-form-msg { color: var(--green-900); }
.mk-form.is-failed .mk-form-msg { color: var(--red-700); }
.mk-formsplit { align-items: start; }

/* ── page hero (product, solutions, company) ── */
.mk-hero { position: relative; z-index: 2; display: flow-root; padding: 6rem 0 6.5rem; background: var(--maroon-landing); color: #FFF; text-align: center; }
.mk-hero .tx-grid svg { top: -12rem; }
.mk-hero-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.mk-h1 { margin-top: 1.25rem; max-width: 58rem; font-size: 4rem; line-height: 4.75rem; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.mk-hero-in > .mk-h1:first-child { margin-top: 0; }
.mk-hero-lead { max-width: 42rem; margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.875rem; color: rgba(255,255,255,.86); text-wrap: pretty; }
.mk-hero .hero-ctas { margin-top: 2.25rem; }
.mk-hero.has-shot { padding-bottom: 0; }
.mk-hero-frame { margin: 4.5rem auto -13rem; }
.mk-hero-screen { aspect-ratio: auto; }
.mk-hero-screen img { display: block; width: 100%; height: auto; }
.mk-hero.has-shot + .mk-main > .mk-sec:first-child { padding-top: 20.5rem; }
.mkp .lp-cta-primary.btn-primary, .mkp .hero-ctas .btn-white { padding: 0 1.5rem; }

/* footer: one more row of links than the reference */
@media (min-width: 1024px) {
  html.mk .lp-foot { height: 48.5rem; }
  html.mk .foot-copy { top: 28rem; }
  html.mk .foot-mark { top: calc(48.5rem - min(19.3125rem, 21.48vw)); }
}

/* closing band */
.mk-cta { padding: 7.5rem 0; background: var(--cream); text-align: center; }
.mk-cta .lp-wrap { display: flex; flex-direction: column; align-items: center; }
.mk-cta .lp-lead { margin-top: 1.25rem; }
.mk-main { display: block; }
body.mkp { background: var(--panel); }

/* ── between desktop and phone ── */
@media (max-width: 1279.98px) {
  .mk-split { gap: 3.5rem; }
  .mk-h2 { font-size: 2.625rem; line-height: 3.25rem; }
  .mk-h1 { font-size: 3.5rem; line-height: 4.25rem; }
  .mk-frame { height: 32rem; }
  .mk-frame img { width: 46rem; }
  .nv-panel.has-lead { width: 40rem; grid-template-columns: 13.5rem minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .lp-links { gap: 1.75rem; }
}
@media (max-width: 1023.98px) {
  html.mk .lp-lead { font-size: 1.0625rem; line-height: 1.625rem; }
  html.mk .hero-sub { font-size: 1.0625rem; line-height: 1.625rem; }
  html.mk .hero-frame { margin-bottom: -7.5rem; }
  html.mk .lp-feat { padding-top: 10.5rem; }
  .mk-sec { padding: 4.5rem 0; }
  .mk-split, .mk-split.is-flip { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .mk-split.is-flip .mk-split-vis { order: 0; }
  .mk-h2 { font-size: 2.125rem; line-height: 2.5rem; }
  .mk-frame { height: 24rem; padding: 1.5rem 0 0 1.5rem; border-radius: 1.25rem; }
  .mk-frame img { width: 40rem; }
  .mk-tablist { flex-wrap: nowrap; justify-content: flex-start; margin: 0 -1rem; padding: 0 1rem .25rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .mk-tablist::-webkit-scrollbar { display: none; }
  .mk-tablist [role=tab] { flex: none; scroll-snap-align: center; }
  .mk-tabstage { margin-top: 1.5rem; padding: .375rem; border-radius: 1.25rem; }
  .mk-tp-shot { border-radius: 1rem; }
  .mk-tp-cap { flex-direction: column; align-items: flex-start; gap: .25rem; padding: .875rem .5rem .375rem; font-size: .9375rem; }
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
  .mk-steps { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mk-steps li, .mk-card { padding: 1.5rem; }
  .mk-notebox { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1.5rem; }
  .mk-note-btn { grid-column: 1 / -1; justify-self: start; }
  .mk-l-note { padding: 3rem 0; }
  .mk-hero { padding: 4rem 0 4.5rem; }
  .mk-h1 { font-size: 2.5rem; line-height: 2.875rem; }
  .mk-hero-lead { font-size: 1.0625rem; line-height: 1.625rem; }
  .mk-hero-frame { width: calc(100% - 2rem); margin: 3rem auto -6rem; }
  .mk-hero.has-shot + .mk-main > .mk-sec:first-child { padding-top: 10.5rem; }
  .mk-cta { padding: 4.5rem 0; }
  .mk-live { padding: 1.25rem; }
  .mk-codecard pre { font-size: .8125rem; line-height: 1.375rem; }
  .mk-codecard .code-body { padding: 1rem 1.125rem 1.25rem; }
  .mk-table th, .mk-table td { padding: .875rem 1rem; }
  .mk-table thead th { font-size: 1.0625rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .mk-sec { padding: 6rem 0; }
  .mk-h2 { font-size: 2.625rem; line-height: 3.125rem; }
  .mk-h1 { font-size: 3.25rem; line-height: 3.875rem; }
  .mk-frame { height: 30rem; }
  .mk-frame img { width: 50rem; }
}
@media (max-width: 767.98px) {
  html.mk .hero-badge { height: auto; min-height: 2.125rem; padding-block: .375rem; white-space: normal; text-align: left; }
  html.mk .foot-col a { width: auto; white-space: normal; }
  .mk-table table { min-width: 36rem; }
  .mk-table tbody th, .mk-table thead th:first-child { position: sticky; left: 0; z-index: 1; width: 11rem; min-width: 11rem; background: #FFF; box-shadow: 1px 0 0 var(--line-soft); }
  .mk-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-grid li { padding: 1.5rem 0 .25rem; }
  .mk-live { grid-template-columns: minmax(0, 1fr); }
  .mk-lc-vit, .mk-lc-ev { grid-column: 1 / -1; }
  .mk-lc-bars { height: 4.5rem; }
  .mk-form { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .mk-form-foot { flex-direction: column; align-items: stretch; }
  .mk-send { width: 100%; }
  .mk-hero .hero-ctas { flex-direction: column; align-self: stretch; }
  .mk-hero .hero-ctas a { width: 100%; }
  .mk-hero-screen { position: relative; height: 16rem; overflow: hidden; }
  .mk-hero-screen img { position: absolute; left: 0; top: 0; width: 36rem; max-width: none; height: auto; }
  .mk-tp-shot { aspect-ratio: 1 / .92; }
  .mk-tp-shot img { width: 170%; max-width: none; height: auto; object-fit: initial; }
  .mk-hero.has-shot + .mk-main > .mk-sec:first-child { padding-top: 10rem; }
  .mk-more-row { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-panel, .nv-dd.is-open .nv-panel { transition: opacity 120ms linear, visibility 0s; transform: translate(-50%, 0); }
  .mk-tp { transition: opacity 120ms linear; transform: none; }
}

/* ── vocabularul de mișcare comun (pagina de start și paginile din interior) ──
   .mk-mask: titlurile cu data-reveal urcă dintr-o mască (mk.js pune .mk-mask-in în ele).
   .mk-lift: cardul se ridică la hover, umbra apare pe opacitate, o lumină caldă urmărește cursorul (.mk-sheen, din mk.js).
   [data-magnet]: butonul principal se apleacă spre cursor (translate, din mk.js). */
.mk-mask { overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.mk-mask > .mk-mask-in { display: block; }
.mf-js .lp .mk-mask[data-reveal] { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .mf-js .lp .mk-mask[data-reveal]:not(.is-in) > .mk-mask-in { transform: translateY(100%); }
  .mf-js .lp .mk-mask[data-reveal].is-in > .mk-mask-in { transform: none; transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms); }
}

.mk-lift { position: relative; isolation: isolate; --sheen: rgba(249,115,22,.09); }
.mk-lift::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 28px 56px -24px rgba(68,20,6,.26), 0 2px 6px rgba(68,20,6,.04); opacity: 0; pointer-events: none; transition: opacity 360ms var(--ease-out); }
.plan-card.pro.mk-lift { --sheen: rgba(255,255,255,.08); }
.mk-sheen { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 360ms var(--ease-out); }
.mk-sheen i { position: absolute; left: -12rem; top: -12rem; width: 24rem; height: 24rem; border-radius: 50%; background: radial-gradient(closest-side, var(--sheen), transparent); }
.mk-lift > :not(.mk-sheen) { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .mk-lift:hover::before, .mk-lift:hover > .mk-sheen { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mk-lift { transition: translate 420ms cubic-bezier(0.16, 1, 0.3, 1); }
  .mk-lift:hover { translate: 0 -4px; }
  [data-magnet] { transition: translate 600ms cubic-bezier(0.16, 1, 0.3, 1); }
  [data-magnet].is-pulled { transition-duration: 160ms; }
}

/* ── turul: indicatorul care alunecă, rama de browser, progresul ── */
.mk-tabbar { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.mk-tablist { position: relative; }
html.mk .mk-tabs[data-tour] .mk-tablist { flex-wrap: nowrap; gap: .25rem; padding: .3125rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: #FFF; }
html.mk .mk-tabs[data-tour] .mk-tablist [role=tab] { position: relative; z-index: 1; overflow: hidden; border-color: transparent; background: transparent; }
html.mk .mk-tabs[data-tour] .mk-tablist [role=tab][aria-selected=true] { border-color: transparent; background: transparent; color: #FFF; }
.mk-tab-ind { position: absolute; z-index: 0; top: .3125rem; left: 0; height: calc(100% - .625rem); width: var(--w, 0); border-radius: var(--r-pill); background: var(--maroon-landing); transform: translateX(var(--x, 0)); transition: transform 420ms var(--ease-in-out), width 420ms var(--ease-in-out); }
.mk-tabs:not(.is-ready) .mk-tab-ind { display: none; }
html.mk .mk-tabs:not(.is-ready) .mk-tablist [role=tab][aria-selected=true] { background: var(--maroon-landing); }
.mk-tab-prog { position: absolute; left: 1rem; right: 1rem; bottom: .25rem; height: 2px; border-radius: 2px; background: var(--orange-300); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.mk-tabs.is-auto [aria-selected=true] .mk-tab-prog { opacity: .9; animation: hm-prog var(--tour-ms, 6000ms) linear forwards; }
.mk-tabs.is-paused [aria-selected=true] .mk-tab-prog { animation-play-state: paused; }
@keyframes hm-prog { to { transform: scaleX(1); } }
.mk-tour-play { display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; background: #FFF; color: var(--text-2); transition: border-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop); }
.mk-tour-play:hover { border-color: var(--line-strong); }
.mk-tour-play:active { transform: scale(.94); }
.mk-tour-play:focus-visible { outline: 2px solid var(--orange-600); outline-offset: 2px; }
.mk-tour-play .i-play, .mk-tour-play[aria-pressed=true] .i-pause { display: none; }
.mk-tour-play[aria-pressed=true] .i-play { display: block; }
.mk-tour-play svg { width: 1rem; height: 1rem; }
.mk-chrome { display: flex; align-items: center; gap: 1rem; height: 2.5rem; padding: 0 .75rem .75rem; }
.mk-chrome-dots { display: flex; gap: .375rem; }
.mk-chrome-dots i, .hm-dots i { width: .625rem; height: .625rem; border-radius: 50%; background: #E5E1DE; }
.mk-chrome-url { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; height: 1.75rem; margin: 0 auto; padding: 0 .875rem; border-radius: var(--r-pill); background: var(--panel); font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; overflow: hidden; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.mk-chrome-url svg { flex: none; width: .75rem; height: .75rem; color: var(--text-4); }
.mk-tabstage { display: grid; grid-template-columns: minmax(0, 1fr); }
.mk-tabstage > .mk-chrome { grid-area: 1 / 1; }
.mk-tabstage > .mk-tp { grid-area: 2 / 1; }
.mk-tabstage > .mk-tp[hidden] { display: none; }
@media (max-width: 1023.98px) {
  .mk-chrome { padding-bottom: .375rem; }
  .mk-tabbar { justify-content: flex-start; }
  html.mk .mk-tabs[data-tour] .mk-tablist { flex: 1; min-width: 0; margin: 0; padding: .3125rem; overflow-x: auto; }
}

/* Capturile admin-ului: <picture class="shot">; pe telefon vine captura din admin-ul de 390 px (.has-m), întreagă, nu desktopul tăiat */
.shot { display: block; }
@media (max-width: 767.98px) {
  html.mk :is(.hero-screen, .mk-hero-screen, .mk-tp-shot):has(> .has-m) { height: auto; aspect-ratio: auto; }
  html.mk .shot.has-m img { position: static; width: 100%; max-width: 100%; height: auto; object-fit: initial; }
  html.mk .mk-frame:has(.has-m) { height: auto; max-height: 32rem; padding: 1.25rem 1.25rem 0; }
  html.mk .mk-frame .shot.has-m img { border-radius: .875rem .875rem 0 0; }
  html.mk .hm-fan { height: 19rem; }
  html.mk .hm-fan-card { width: 62%; }
  html.mk .hm-fan.is-in .hm-fan-card.f1 { transform: translateX(-100%) rotate(-6deg) translateY(1.75rem); }
  html.mk .hm-fan.is-in .hm-fan-card.f3 { transform: translateX(0%) rotate(6deg) translateY(1.75rem); }
}
.mk-form :is(input, textarea, select) { scroll-margin-top: 7rem; }