/* ===========================================================================
   Kanvixo — About and Features page design
   Same language as the workflow landing: built on the --kx-* tokens so both
   pages follow the admin brand theme and the Auto/Light/Dark control.
   =========================================================================== */

.public-site{
  --mk-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --mk-panel: color-mix(in srgb, var(--kx-surface-2) 55%, var(--kx-surface));
  --mk-board: color-mix(in srgb, var(--kx-surface-2) 80%, var(--kx-surface));
  --mk-dot: color-mix(in srgb, var(--kx-muted) 40%, transparent);
}
html[data-theme="dark"] .public-site{
  --mk-panel: color-mix(in srgb, var(--kx-surface-2) 60%, var(--kx-surface));
  --mk-board: color-mix(in srgb, #000 30%, var(--kx-surface));
  --mk-dot: color-mix(in srgb, var(--kx-muted) 55%, transparent);
}

.mk{ color: var(--kx-ink); }
.mk *{ box-sizing: border-box; }
.mk-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 5.5%; }
.mk-eyebrow{
  font-family: var(--mk-mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--kx-blue);
}

/* ---------- shared hero ---------- */
.mk-hero{ position: relative; padding: 86px 0 54px; isolation: isolate; overflow: hidden; }
.mk-hero:before{
  content: ""; position: absolute; z-index: -1;
  inset: -22% auto auto 50%; width: 660px; max-width: 70%; aspect-ratio: 1;
  border-radius: 50%; transform: translateX(-50%); opacity: .5;
  background: radial-gradient(circle, color-mix(in srgb, var(--kx-violet) 24%, transparent), transparent 68%);
}
html[data-theme="dark"] .mk-hero:before{ opacity: .35; }
.mk-hero h1{
  max-width: 17ch; margin: 18px 0 0;
  font: 500 clamp(38px, 5vw, 68px)/1.02 var(--brand-heading); letter-spacing: -.045em;
}
.mk-hero .mk-lede{
  max-width: 62ch; margin: 22px 0 0;
  font-size: 18px; line-height: 1.62; color: var(--kx-muted);
}
.mk-hero-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* ---------- the stated mission, given room ---------- */
.mk-statement{
  padding: 64px 0; border-top: 1px solid var(--kx-line); border-bottom: 1px solid var(--kx-line);
  background: var(--kx-surface);
}
.mk-statement .mk-wrap{ display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 40px; align-items: start; }
.mk-statement h2{
  margin: 0; font: 500 clamp(26px, 3.2vw, 40px)/1.16 var(--brand-heading);
  letter-spacing: -.035em; max-width: 22ch;
}
.mk-statement p{ margin: 18px 0 0; max-width: 60ch; color: var(--kx-muted); font-size: 16.5px; line-height: 1.65; }

/* ---------- section scaffolding ---------- */
.mk-section{ padding: 84px 0; }
.mk-section.is-tint{ background: var(--kx-surface); border-top: 1px solid var(--kx-line); border-bottom: 1px solid var(--kx-line); }
.mk-head{ max-width: 720px; margin-bottom: 42px; }
.mk-head h2{
  margin: 10px 0 0; font: 500 clamp(28px, 3.6vw, 46px)/1.06 var(--brand-heading);
  letter-spacing: -.04em;
}
.mk-head p{ margin: 16px 0 0; color: var(--kx-muted); font-size: 16.5px; line-height: 1.62; }

/* ---------- values: numbered rows, no card grid ---------- */
.mk-values{ display: grid; }
.mk-value{
  display: grid; grid-template-columns: 62px minmax(0,1fr) minmax(0,1.35fr);
  gap: 30px; align-items: start;
  padding: 30px 0; border-top: 1px solid var(--kx-line);
}
.mk-value:last-child{ border-bottom: 1px solid var(--kx-line); }
.mk-value .mk-n{ font-family: var(--mk-mono); font-size: 12.5px; color: var(--kx-muted); padding-top: 5px; }
.mk-value h3{ margin: 0; font: 500 22px/1.25 var(--brand-heading); letter-spacing: -.02em; }
.mk-value p{ margin: 0; color: var(--kx-muted); font-size: 16px; line-height: 1.65; }

/* ---------- roles ---------- */
.mk-roles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mk-role{
  position: relative; padding: 28px 26px 26px;
  border: 1px solid var(--kx-line); border-radius: 18px; background: var(--kx-surface);
  overflow: hidden;
}
.mk-role:before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.mk-role:nth-child(1):before{ background: var(--kx-violet); }
.mk-role:nth-child(2):before{ background: var(--kx-blue); }
.mk-role:nth-child(3):before{ background: var(--kx-coral); }
.mk-role .mk-role-label{
  font-family: var(--mk-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kx-muted);
}
.mk-role h3{ margin: 14px 0 10px; font: 500 20px/1.25 var(--brand-heading); letter-spacing: -.02em; }
.mk-role p{ margin: 0; color: var(--kx-muted); font-size: 15px; line-height: 1.62; }

/* ---------- journey strip: research -> flow -> interface ---------- */
.mk-journey{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--kx-line); border-radius: 20px; overflow: hidden;
  background: var(--mk-board);
  background-image: radial-gradient(var(--mk-dot) 1px, transparent 1px); background-size: 16px 16px;
}
.mk-leg{ padding: 28px 26px 30px; border-right: 1px solid var(--kx-line); position: relative; }
.mk-leg:last-child{ border-right: 0; }
.mk-leg .mk-n{
  display: inline-block; margin-bottom: 16px;
  font-family: var(--mk-mono); font-size: 11px; letter-spacing: .14em; color: var(--kx-muted);
}
.mk-leg h3{ margin: 0 0 8px; font: 500 19px/1.25 var(--brand-heading); letter-spacing: -.02em; }
.mk-leg p{ margin: 0 0 20px; color: var(--kx-muted); font-size: 14.5px; line-height: 1.6; }
.mk-leg-art{
  border: 1px solid var(--kx-line); border-radius: 12px; background: var(--kx-surface);
  padding: 14px; min-height: 128px; display: flex; flex-direction: column; gap: 8px;
}

/* small pieces of product art reused across both pages */
.mk-line{ height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--kx-ink) 12%, transparent); display: block; }
.mk-line.is-strong{ height: 9px; background: color-mix(in srgb, var(--kx-ink) 26%, transparent); }
.mk-line.is-accent{ background: color-mix(in srgb, var(--kx-violet) 55%, transparent); }
.mk-tagline{
  display: inline-block; align-self: flex-start; margin-top: auto;
  padding: 4px 9px; border-radius: 999px;
  font-family: var(--mk-mono); font-size: 10.5px;
  border: 1px solid var(--kx-line); color: var(--kx-muted);
}
.mk-node{
  border: 1.4px solid color-mix(in srgb, var(--kx-muted) 50%, transparent);
  border-radius: 8px; padding: 8px 11px; font-size: 12px; color: var(--kx-ink);
  background: var(--kx-surface);
}
.mk-node.is-hot{
  border-color: var(--kx-coral); color: var(--kx-coral);
  background: color-mix(in srgb, var(--kx-coral) 12%, var(--kx-surface));
}
.mk-frame{
  border: 1.4px solid var(--kx-violet); border-radius: 9px;
  background: color-mix(in srgb, var(--kx-violet) 7%, var(--kx-surface));
  padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.mk-cta-block{ margin-top: auto; height: 22px; border-radius: 6px; background: var(--kx-violet); opacity: .85; }

/* ---------- features: alternating capability rows ---------- */
.mk-cap{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: 56px; align-items: center;
  padding: 54px 0; border-top: 1px solid var(--kx-line);
}
.mk-cap:last-of-type{ border-bottom: 1px solid var(--kx-line); }
.mk-cap:nth-of-type(even) .mk-cap-copy{ order: 2; }
.mk-cap-copy .mk-cap-tag{
  font-family: var(--mk-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kx-blue);
}
.mk-cap-copy h3{ margin: 14px 0 12px; font: 500 clamp(22px,2.4vw,30px)/1.14 var(--brand-heading); letter-spacing: -.03em; }
.mk-cap-copy p{ margin: 0; color: var(--kx-muted); font-size: 16px; line-height: 1.66; max-width: 46ch; }
.mk-cap-copy ul{ list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.mk-cap-copy li{ position: relative; padding-left: 22px; font-size: 15px; color: var(--kx-ink); }
.mk-cap-copy li:before{
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px;
  border: 1.6px solid var(--kx-violet); border-radius: 3px;
}

/* the panel beside each capability */
.mk-panel{
  border: 1px solid var(--kx-line); border-radius: 18px; overflow: hidden;
  background: var(--kx-surface); box-shadow: 0 26px 60px -44px var(--kx-shadow);
}
.mk-panel-bar{
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-bottom: 1px solid var(--kx-line);
  background: var(--mk-panel);
  font-family: var(--mk-mono); font-size: 10.5px; color: var(--kx-muted);
}
.mk-panel-bar i{ width: 8px; height: 8px; border-radius: 50%; background: var(--kx-line); display: block; }
.mk-panel-bar b{ font-weight: 400; margin-left: 4px; color: var(--kx-ink); }
.mk-panel-bar em{ margin-left: auto; font-style: normal; }
.mk-panel-body{
  padding: 22px; min-height: 258px;
  background-color: var(--mk-board);
  background-image: radial-gradient(var(--mk-dot) 1px, transparent 1px); background-size: 16px 16px;
  display: flex; align-items: center; justify-content: center;
}

.mk-art-frames{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.mk-art-frames .mk-frame{ height: 150px; }
.mk-art-flow{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mk-arrow{ position: relative; width: 22px; height: 1.4px; background: color-mix(in srgb, var(--kx-muted) 55%, transparent); }
.mk-arrow:after{
  content: ""; position: absolute; right: 0; top: -3px;
  border-left: 6px solid color-mix(in srgb, var(--kx-muted) 70%, transparent);
  border-top: 3.4px solid transparent; border-bottom: 3.4px solid transparent;
}
.mk-art-rows{ width: 100%; display: grid; gap: 9px; }
.mk-art-row{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--kx-line); border-radius: 10px;
  background: var(--kx-surface); font-size: 12.5px;
}
.mk-art-row .mk-avatar{ width: 20px; height: 20px; border-radius: 50%; display: block; flex: 0 0 auto; }
.mk-art-row .mk-state{
  margin-left: auto; padding: 3px 9px; border-radius: 999px;
  font-family: var(--mk-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
}
.mk-state.is-ok{ background: color-mix(in srgb, #12996f 18%, transparent); color: #0f7d5c; }
.mk-state.is-wait{ background: color-mix(in srgb, #d98324 20%, transparent); color: #a5620f; }
.mk-state.is-rev{ background: color-mix(in srgb, var(--kx-violet) 20%, transparent); color: var(--kx-violet); }
html[data-theme="dark"] .mk-state.is-ok{ color: #3ecf8e; }
html[data-theme="dark"] .mk-state.is-wait{ color: #ffb257; }

.mk-art-code{
  margin: 0; width: 100%; padding: 14px; overflow-x: auto; white-space: pre;
  border: 1px solid var(--kx-line); border-radius: 12px;
  background: color-mix(in srgb, var(--kx-ink) 5%, var(--kx-surface));
  font-family: var(--mk-mono); font-size: 11.5px; line-height: 1.8; color: var(--kx-ink);
}
.mk-art-code .k{ color: var(--kx-blue); } .mk-art-code .v{ color: var(--kx-coral); } .mk-art-code .c{ color: var(--kx-muted); }

.mk-art-tree{ width: 100%; display: grid; gap: 5px; }
.mk-tree-row{ display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 7px; font-size: 12.5px; }
.mk-tree-row.is-sel{ background: color-mix(in srgb, var(--kx-violet) 18%, transparent); font-weight: 600; }
.mk-tree-row .mk-ic{ width: 13px; height: 13px; border: 1.3px solid currentColor; border-radius: 3px; opacity: .5; flex: 0 0 auto; }
.mk-tree-row.ind{ padding-left: 24px; } .mk-tree-row.ind2{ padding-left: 40px; }

.mk-art-grid{ width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mk-tile{
  border: 1px solid var(--kx-line); border-radius: 11px; overflow: hidden; background: var(--kx-surface);
}
.mk-tile span{ display: block; height: 62px; }
.mk-tile b{ display: block; padding: 8px 10px; font-size: 11.5px; font-weight: 600; }

/* ---------- "stop opening" strip ---------- */
.mk-replace{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
.mk-replace div{
  padding: 20px 18px; border: 1px dashed color-mix(in srgb, var(--kx-muted) 45%, transparent);
  border-radius: 14px; background: color-mix(in srgb, var(--kx-surface) 60%, transparent);
}
.mk-replace b{ display: block; font-size: 15px; margin-bottom: 5px; }
.mk-replace small{ color: var(--kx-muted); font-size: 13px; line-height: 1.55; display: block; }

/* ---------- closing ---------- */
.mk-close{
  padding: 78px 0; border-top: 1px solid var(--kx-line);
  background: var(--kx-surface);
}
.mk-close .mk-wrap{ display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.mk-close h2{
  margin: 0; max-width: 22ch;
  font: 500 clamp(26px, 3.4vw, 42px)/1.08 var(--brand-heading); letter-spacing: -.04em;
}
.mk-close p{ margin: 12px 0 0; color: var(--kx-muted); max-width: 46ch; font-size: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px){
  .mk-statement .mk-wrap{ grid-template-columns: 1fr; gap: 18px; }
  .mk-cap{ grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
  .mk-cap:nth-of-type(even) .mk-cap-copy{ order: 0; }
  .mk-roles{ grid-template-columns: 1fr; }
  .mk-replace{ grid-template-columns: 1fr 1fr; }
  .mk-journey{ grid-template-columns: 1fr; }
  .mk-leg{ border-right: 0; border-bottom: 1px solid var(--kx-line); }
  .mk-leg:last-child{ border-bottom: 0; }
}
@media (max-width: 640px){
  .mk-wrap{ padding: 0 18px; }
  .mk-hero{ padding: 52px 0 34px; }
  .mk-section{ padding: 54px 0; }
  .mk-value{ grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .mk-value .mk-n{ padding-top: 0; }
  .mk-replace{ grid-template-columns: 1fr; }
  .mk-art-frames, .mk-art-grid{ grid-template-columns: 1fr; }
  .mk-art-flow{ flex-direction: column; }
  .mk-arrow{ width: 1.4px; height: 18px; }
  .mk-arrow:after{
    right: -3px; top: auto; bottom: 0;
    border-left: 3.4px solid transparent; border-right: 3.4px solid transparent;
    border-top: 6px solid color-mix(in srgb, var(--kx-muted) 70%, transparent); border-bottom: 0;
  }
  .mk-panel-body{ padding: 16px; min-height: 200px; }
}