/* ===========================================================================
   Uncrypt — public site
   ---------------------------------------------------------------------------
   Deep technical dark. The page is built like an instrument, not a poster:
   structure comes from hairlines and spacing, never from a card around every
   block, and the one accent is spent only where something is genuinely live —
   a running flow, a verified state, a focus ring.

   No gradients anywhere. Depth is flat surfaces separated by three weights of
   hairline. The only blur in the file is the neon filter on the flow diagram,
   which is the thing it is there to draw.

   Loaded ONLY when signed out (includes/layout.php). ui.css carries the shell
   and the tokens; this file dresses the public pages.
   =========================================================================== */

/* --- self-hosted faces ---------------------------------------------------
   CSP is script-src/style-src 'self' and font-src 'self', so an external
   font host would be blocked outright. Latin subsets only: 64KB for the set.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-400-700.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

.mode-marketing {
  --mk-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mk-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mk-max: 1180px;

  background: var(--u-ground, #05070a);
  color: var(--u-ink, #e9f0ec);
  font-family: var(--mk-sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mode-marketing .wrap { max-width: var(--mk-max); margin: 0 auto; padding: 0 28px; }

/* --- type scale ---------------------------------------------------------- */
.mode-marketing h1, .mode-marketing h2, .mode-marketing h3 {
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
}
/* Sized for the hero's LEFT column, not the full page width — the proof card
   takes 400px on the right, so a scale tuned to the viewport overflowed and
   broke "Train your people." across two lines. */
.mk-h1 { font-size: clamp(2.5rem, 4.9vw, 4.3rem); }
@media (max-width: 980px) { .mk-h1 { font-size: clamp(2.5rem, 7vw, 4.3rem); } }
.mk-h2 { font-size: clamp(1.95rem, 3.6vw, 3rem); letter-spacing: -0.026em; }
.mk-h3 { font-size: 1.1rem; letter-spacing: -0.012em; line-height: 1.3; }

.mk-eyebrow {
  font-family: var(--mk-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--u-live, #3ce38b);
  margin: 0 0 1.1rem;
}
.mk-lede {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.62;
  color: var(--u-ink-2, #9aa8a2);
  max-width: 40ch;
  margin: 0;
}
.mk-sub {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--u-ink-2, #9aa8a2);
  max-width: 62ch;
  margin: .9rem 0 0;
}
.mode-marketing code, .mode-marketing .mono { font-family: var(--mk-mono); font-size: .9em; }
.mode-marketing .fine { font-size: .82rem; color: var(--u-ink-3, #6b7873); line-height: 1.55; }
.mode-marketing .muted { color: var(--u-ink-3, #6b7873); }
.mode-marketing a { color: var(--u-live, #3ce38b); }

/* --- shell in marketing mode --------------------------------------------- */
.mode-marketing .site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(5, 7, 10, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--u-line, rgba(198,222,214,.085));
}
.mode-marketing .head-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px; gap: 20px;
}
.mode-marketing .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--u-ink); }
.mode-marketing .brand-text {
  font-family: var(--mk-mono); font-weight: 500;
  font-size: .84rem; letter-spacing: .26em; color: var(--u-ink);
}
.mode-marketing .site-nav { display: flex; align-items: center; gap: 22px; }
/* ui.css dresses .auth-chip as a FILLED pill for the signed-in shell — on the
   dark public site that rendered as white-on-white. Out here it is a quiet
   text link standing next to the real call to action. Its base rules use
   !important, so these have to as well. */
.mode-marketing .auth-chip {
  margin-left: 0;
  background: transparent !important;
  color: var(--u-ink-2) !important;
  border: 0; border-radius: 0;
  padding: 0 !important;
  text-decoration: none; font-size: .9rem; font-weight: 500;
}
.mode-marketing .auth-chip:hover {
  background: transparent !important;
  color: var(--u-ink) !important;
}
.mode-marketing .btn-demo {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  border-radius: 999px; background: var(--u-ink); color: #04070a;
  font-size: .89rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .16s ease, transform .16s ease;
}
.mode-marketing .btn-demo:hover { background: #fff; transform: translateY(-1px); }

.mode-marketing .site-foot {
  border-top: 1px solid var(--u-line);
  margin-top: 0;
  padding: 34px 0;
}
.mode-marketing .foot-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.mode-marketing .foot-brand { display: flex; align-items: center; gap: 10px; }
.mode-marketing .foot-name {
  font-family: var(--mk-mono); font-size: .74rem; letter-spacing: .24em; color: var(--u-ink-3);
}
.mode-marketing .foot-copy { margin: 0; font-size: .8rem; color: var(--u-ink-3); }

/* --- buttons ------------------------------------------------------------- */
.mode-marketing .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 8px;
  font-family: inherit; font-size: .94rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.mode-marketing .btn-lg { height: 50px; padding: 0 26px; font-size: 1rem; }
.mode-marketing .btn-block { width: 100%; }
.mode-marketing .btn-primary { background: var(--u-live); color: #04140c; }
.mode-marketing .btn-primary:hover { background: #5cf0a2; transform: translateY(-1px); }
.mode-marketing .mk-btn-ghost,
.mode-marketing .btn-outline {
  background: transparent; color: var(--u-ink); border-color: var(--u-line-2, rgba(198,222,214,.15));
}
.mode-marketing .mk-btn-ghost:hover,
.mode-marketing .btn-outline:hover { border-color: var(--u-line-3, rgba(198,222,214,.26)); background: rgba(255,255,255,.02); }
.mode-marketing :focus-visible { outline: 2px solid var(--u-live); outline-offset: 3px; border-radius: 4px; }

/* --- section rhythm ------------------------------------------------------ */
.mk-section { padding: clamp(72px, 9vw, 122px) 0; border-top: 1px solid var(--u-line); }
.mk-section:first-of-type { border-top: 0; }
.mk-head { max-width: 66ch; margin-bottom: clamp(40px, 5vw, 62px); }

.mk-card {
  background: var(--u-panel, #0b1015);
  border: 1px solid var(--u-line);
  border-radius: var(--u-r-lg, 16px);
  padding: 26px;
}
.mk-card-sub { color: var(--u-ink-2); font-size: .95rem; line-height: 1.62; margin: 0; }

/* =========================================================================
   HERO
   Sized to its content, not the viewport — the first frame has to show the
   page, not push it below the fold.
   ========================================================================= */
.mk-hero { padding: clamp(64px, 9vw, 104px) 0 clamp(52px, 6vw, 78px); position: relative; }
.mk-hero .wrap { position: relative; z-index: 2; }
.mk-hero-grid { display: grid; gap: clamp(30px, 4vw, 54px); }
.mk-hero h1 { margin-bottom: 1.5rem; }
.mk-dot { color: var(--u-live); }
.mk-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2.1rem; }
.mk-hero-note { margin: 1.4rem 0 0; font-family: var(--mk-mono); font-size: .76rem; color: var(--u-ink-3); letter-spacing: .04em; }

/* Fact strip under the hero: hairline-separated, monospaced figures. */
.mk-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--u-line);
  margin-top: clamp(46px, 6vw, 72px);
}
/* Every cell is padded on BOTH sides of its divider. Previously only the
   right side was padded, so each figure started flush against the rule to its
   left and read as if it were touching the line. */
.mk-fact {
  padding: 24px 28px 8px 28px;
  border-right: 1px solid var(--u-line);
}
.mk-fact:first-child { padding-left: 0; }
.mk-fact:last-child  { border-right: 0; padding-right: 0; }
.mk-fact b {
  display: block; font-family: var(--mk-mono); font-weight: 500;
  font-size: 1.55rem; color: var(--u-ink); letter-spacing: -.02em;
  /* tabular figures keep the count-up from reflowing the label under it */
  font-variant-numeric: tabular-nums;
}
.mk-fact span { display: block; margin-top: 5px; font-size: .82rem; color: var(--u-ink-3); line-height: 1.45; }

/* =========================================================================
   LIVE CAMPAIGN FLOW
   The centrepiece. Connectors carry a travelling neon pulse; each node lights
   as the pulse reaches it. Pure CSS on top of SVG paths normalised with
   pathLength="100", so it runs with no JavaScript at all and cannot get stuck.
   ========================================================================= */
.flow-canvas { position: relative; margin-top: 8px; }
.flow-stage { position: relative; width: 100%; padding-bottom: 28.34%; }   /* 1200x340 */
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.flow-link-base { fill: none; stroke: var(--u-line-2, rgba(198,222,214,.15)); stroke-width: 1.4; }

/* Direction is stated, not merely implied. Without arrowheads the diagram reads
   identically in both directions the moment the pulse is elsewhere on the
   chain -- and in a screenshot it never moves at all. Drawn as ordinary paths
   rather than SVG markers: a marker is scaled by the referencing path's
   stroke-width inside its own viewBox, which collapsed these to a couple of
   pixels against a stage-stretched viewBox. Slightly brighter than the links so
   the direction reads before the line does. */
.flow-tip {
  fill: none; stroke: rgba(198,222,214,.42);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* The pulse is a single path whose dash pattern decays -- a long head followed
   by shorter and shorter marks -- so it reads as a comet trail with no extra
   elements to animate. The pattern spans 25 units against a path normalised to
   100, so exactly one trail is ever on a link at a time. */
.flow-link-live {
  fill: none;
  stroke: var(--u-live);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 9 2 5 2 3 2 2 100;
  stroke-dashoffset: 25;
  filter: url(#flowGlow);
  opacity: 0;
}

/* A pass takes 2.85s, each link starting as the one before it arrives. The two
   option links deliberately do NOT fire together: a campaign is a training path
   OR a policy acknowledgement, never both, so branch A runs on one cycle and
   branch B on the next. The trunk links keep the short period and stay in phase
   because the long cycle is exactly two of them. */
.flow-link-live.a1 { animation: flow-run-alt 5.7s  linear infinite; animation-delay: 0s;    }
.flow-link-live.a2 { animation: flow-run-alt 5.7s  linear infinite; animation-delay: .95s;  }
.flow-link-live.b1 { animation: flow-run-alt 5.7s  linear infinite; animation-delay: 2.85s; }
.flow-link-live.b2 { animation: flow-run-alt 5.7s  linear infinite; animation-delay: 3.8s;  }
.flow-link-live.z  { animation: flow-run     2.85s linear infinite; animation-delay: 1.9s;  }

@keyframes flow-run {
  0%   { stroke-dashoffset: 25;   opacity: 0; }
  3%   { opacity: 1; }
  30%  { stroke-dashoffset: -100; opacity: 1; }
  34%  { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
/* Same travel speed, half the duty cycle: the pulse crosses in 0.855s either
   way, then the link stays dark while the other branch takes its turn. */
@keyframes flow-run-alt {
  0%    { stroke-dashoffset: 25;   opacity: 0; }
  1.5%  { opacity: 1; }
  15%   { stroke-dashoffset: -100; opacity: 1; }
  17%   { stroke-dashoffset: -100; opacity: 0; }
  100%  { stroke-dashoffset: -100; opacity: 0; }
}

.flow-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--nw, 186px);
  background: var(--u-panel);
  border: 1px solid var(--u-line-2);
  border-radius: 12px;
  padding: 14px 15px;
  box-shadow: 0 12px 30px -20px rgba(0,0,0,.95);
}

/* Each node lights at the instant the pulse lands on it -- its delay is the
   arrival time -- rather than on a rhythm of its own, which is what made the
   old chase drift out of step with the connectors. */
.flow-node.fn-1 { animation: node-live     2.85s linear infinite; animation-delay: 0s;     }
.flow-node.fn-a { animation: node-live-alt 5.7s  linear infinite; animation-delay: .855s;  }
.flow-node.fn-b { animation: node-live-alt 5.7s  linear infinite; animation-delay: 3.705s; }
.flow-node.fn-3 { animation: node-live     2.85s linear infinite; animation-delay: 1.805s; }
.flow-node.fn-4 { animation: node-live     2.85s linear infinite; animation-delay: 2.755s; }

@keyframes node-live {
  0%   { border-color: var(--u-live-line, rgba(60,227,139,.34)); box-shadow: 0 0 0 1px rgba(60,227,139,.16), 0 12px 30px -20px rgba(0,0,0,.95); }
  26%  { border-color: var(--u-line-2);                          box-shadow: 0 0 0 1px rgba(60,227,139,0),   0 12px 30px -20px rgba(0,0,0,.95); }
  100% { border-color: var(--u-line-2);                          box-shadow: 0 0 0 1px rgba(60,227,139,0),   0 12px 30px -20px rgba(0,0,0,.95); }
}
@keyframes node-live-alt {
  0%   { border-color: var(--u-live-line, rgba(60,227,139,.34)); box-shadow: 0 0 0 1px rgba(60,227,139,.16), 0 12px 30px -20px rgba(0,0,0,.95); }
  13%  { border-color: var(--u-line-2);                          box-shadow: 0 0 0 1px rgba(60,227,139,0),   0 12px 30px -20px rgba(0,0,0,.95); }
  100% { border-color: var(--u-line-2);                          box-shadow: 0 0 0 1px rgba(60,227,139,0),   0 12px 30px -20px rgba(0,0,0,.95); }
}
.fn-step {
  font-family: var(--mk-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; color: var(--u-ink-3);
}
.fn-title { display: block; margin: 6px 0 0; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.fn-desc  { margin: 7px 0 0; font-size: .8rem; line-height: 1.5; color: var(--u-ink-3); }
.fn-tag {
  display: inline-block; margin-top: 9px; padding: 2px 8px; border-radius: 4px;
  background: var(--u-live-dim, rgba(60,227,139,.13)); color: var(--u-live);
  font-family: var(--mk-mono); font-size: .66rem; letter-spacing: .08em;
}

/* The one ornament in the diagram, on the node the whole flow exists to reach:
   three linked records with the newest live, echoing the hero object so the
   page makes the same claim twice in two different registers. */
.fn-chain { display: flex; align-items: center; gap: 5px; margin-top: 11px; }
.fn-chain i {
  position: relative; width: 7px; height: 7px; border-radius: 2px;
  border: 1px solid var(--u-line-2);
}
.fn-chain i + i::before {
  content: ""; position: absolute; left: -6px; top: 50%; width: 5px; height: 1px;
  background: var(--u-line-2);
}
.fn-chain i:last-child { border-color: var(--u-live); background: var(--u-live-dim, rgba(60,227,139,.13)); }

/* Below the diagram's usable width it becomes a vertical list with a rail. */
.flow-list { display: none; }
@media (max-width: 900px) {
  .flow-stage { display: none; }
  .flow-list { display: block; position: relative; padding-left: 26px; }
  .flow-list::before {
    content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px;
    background: var(--u-line-2);
  }
  .flow-list li { position: relative; list-style: none; padding: 0 0 22px; }
  .flow-list li::before {
    content: ""; position: absolute; left: -24px; top: 7px; width: 9px; height: 9px;
    border-radius: 2px; background: var(--u-live); transform: rotate(45deg);
  }
  .flow-list .fn-title { font-size: 1rem; }
}

/* =========================================================================
   CAPABILITY GRID / FRAMEWORKS / COURSES / STEPS
   ========================================================================= */
.mk-grid { display: grid; gap: 1px; background: var(--u-line); border: 1px solid var(--u-line); border-radius: var(--u-r-lg); overflow: hidden; }
.mk-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mk-cell { background: var(--u-ground); padding: 30px 26px; }
.mk-cell-ico { color: var(--u-live); margin-bottom: 16px; display: block; }
.mk-cell-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-cell h3 { margin-bottom: 9px; }
.mk-cell p { margin: 0; font-size: .91rem; line-height: 1.62; color: var(--u-ink-2); }

.mk-fw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--u-line); border: 1px solid var(--u-line); border-radius: var(--u-r-lg); overflow: hidden; }
.mk-fw-cell { background: var(--u-ground); padding: 24px 20px; }
.mk-fw-name { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.mk-fw-n { display: block; margin-top: 10px; font-family: var(--mk-mono); font-size: 1.5rem; color: var(--u-live); font-variant-numeric: tabular-nums; }
.mk-fw-lbl { display: block; margin-top: 3px; font-size: .76rem; color: var(--u-ink-3); }

.mk-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.mk-course { background: var(--u-panel); border: 1px solid var(--u-line); border-radius: var(--u-r-lg); padding: 24px; display: flex; flex-direction: column; }
.mk-cat { font-family: var(--mk-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--u-ink-3); margin: 0 0 12px; }
.mk-course h3 { margin-bottom: 10px; }
.mk-course p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--u-ink-2); }

.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--u-line); border-top: 1px solid var(--u-line); border-bottom: 1px solid var(--u-line); }
.mk-step { background: var(--u-ground); padding: 30px 26px 32px; }
.mk-step-n { font-family: var(--mk-mono); font-size: .72rem; letter-spacing: .18em; color: var(--u-live); }
.mk-step h3 { margin: 14px 0 9px; }
.mk-step p { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--u-ink-2); }

/* Evidence block: a claim on the left, the mechanism on the right. */
.mk-eviz { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.mk-proof { list-style: none; margin: 0; padding: 0; }
.mk-proof li { padding: 20px 0; border-top: 1px solid var(--u-line); }
.mk-proof li:first-child { border-top: 0; padding-top: 0; }
.mk-proof b { display: block; font-size: .98rem; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em; }
.mk-proof span { display: block; font-size: .9rem; line-height: 1.6; color: var(--u-ink-2); }

/* A real, checkable certificate ID, shown as the artefact it is. */
.mk-cert {
  background: var(--u-panel); border: 1px solid var(--u-line-2); border-radius: var(--u-r-lg);
  padding: 26px; font-family: var(--mk-mono);
}

/* The log the certificate lands in. A rail with a node per entry, so the
   chaining is visible rather than asserted, and the newest entry is the only
   thing wearing the live colour. */
.mk-chainlog {
  margin-top: 18px; background: var(--u-panel); border: 1px solid var(--u-line-2);
  border-radius: var(--u-r-lg); padding: 20px 22px;
}
.cl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cl-title {
  font-family: var(--mk-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--u-ink-3);
}
.cl-state {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mk-mono); font-size: .7rem; letter-spacing: .08em; color: var(--u-live);
}
.cl-state::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--u-live); box-shadow: 0 0 0 3px var(--u-live-dim);
}
.cl-rows { list-style: none; margin: 0; padding: 0 0 0 19px; position: relative; }
.cl-rows::before {
  content: ""; position: absolute; left: 3px; top: 12px; bottom: 12px;
  width: 1px; background: var(--u-line-2);
}
.cl-rows li {
  position: relative; display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center; padding: 9px 0;
  font-family: var(--mk-mono); font-size: .74rem;
}
.cl-rows li + li { border-top: 1px solid var(--u-line); }
.cl-rows li::before {
  content: ""; position: absolute; left: -19px; top: 50%; margin-top: -4px;
  width: 7px; height: 7px; border-radius: 2px;
  border: 1px solid var(--u-line-2); background: var(--u-panel);
}
.cl-rows li:first-child::before { border-color: var(--u-live); background: var(--u-live-dim); }
.cl-seq  { color: var(--u-ink-3); }
.cl-act  { color: var(--u-ink-2); }
.cl-hash { color: var(--u-ink-3); }
.cl-rows li:first-child .cl-hash { color: var(--u-live); }
.cl-foot { margin: 14px 0 0; font-size: .78rem; line-height: 1.55; color: var(--u-ink-3); }
.mk-cert-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--u-line); font-size: .84rem; }
.mk-cert-row:first-of-type { border-top: 0; }
.mk-cert-row dt { color: var(--u-ink-3); margin: 0; }
.mk-cert-row dd { color: var(--u-ink); margin: 0; text-align: right; }
.mk-cert-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--u-live-dim); color: var(--u-live);
  font-size: .74rem; font-weight: 500; letter-spacing: .06em;
}
.mk-cert-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--u-live); }

/* --- closing band + CTA --------------------------------------------------- */
.mk-band { border-top: 1px solid var(--u-line); padding: 30px 0; }
.mk-band-inner { display: flex; align-items: center; gap: 16px; }
.mk-shield { color: var(--u-live); flex: none; }
.mk-shield svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-band b { font-size: .95rem; }
.mk-band span { color: var(--u-ink-2); font-size: .93rem; }

.mk-final { padding: clamp(78px, 9vw, 120px) 0; border-top: 1px solid var(--u-line); text-align: center; }
.mk-final .mk-sub { margin-left: auto; margin-right: auto; }
.mk-final .mk-cta { justify-content: center; }

/* --- form pages (contact / trial / verify) share the shell ---------------- */
.mode-marketing .form-error {
  margin: 0 0 6px; padding: 12px 15px; border-radius: 9px;
  background: rgba(248,113,113,.09); border: 1px solid rgba(248,113,113,.3);
  color: #fca5a5; font-size: .9rem; line-height: 1.5;
}
.mode-marketing .flash {
  margin: 0 0 6px; padding: 12px 15px; border-radius: 9px;
  background: var(--u-live-dim); border: 1px solid var(--u-live-line);
  color: var(--u-live); font-size: .9rem;
}
.mode-marketing .field-label { font-size: .86rem; font-weight: 500; color: var(--u-ink-2); }
.mode-marketing .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- reveal on scroll ----------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.7,.3,1); }
/* Without JS nothing may stay hidden. */
.no-js .reveal { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px) {
  .mk-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mk-fw { grid-template-columns: repeat(3, 1fr); }
  .mk-eviz { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mode-marketing .wrap { padding: 0 20px; }
  .mk-facts { grid-template-columns: repeat(2, 1fr); }
  /* Two columns: the odd cells start a row, the even cells end one. */
  .mk-fact { padding: 20px 20px 18px 20px; }
  .mk-fact:nth-child(odd)  { padding-left: 0; }
  .mk-fact:nth-child(even) { border-right: 0; padding-right: 0; }
  .mk-fact:nth-child(-n+2) { border-bottom: 1px solid var(--u-line); }
  .mk-grid-4, .mk-grid-3 { grid-template-columns: 1fr; }
  .mk-fw { grid-template-columns: repeat(2, 1fr); }
  .mk-steps { grid-template-columns: 1fr; }
  .mode-marketing .site-nav { gap: 14px; }
  .mode-marketing .head-inner { height: 60px; }
}
@media (max-width: 720px) {
  /* ui.css hides every nav link except the account chip at this width. That is
     right for the app and wrong here, because the public site's call to action
     lives in this bar — so restore exactly that one link and let "Contact"
     stay hidden; it is reachable from the closing block and the footer.

     Scored a.btn-demo rather than .btn-demo on purpose: ui.css's rule is
     (0,3,1) thanks to its two :not() classes, so a three-class selector alone
     would lose the tie-break and the button would vanish on phones. */
  .mode-marketing .site-nav a.btn-demo { display: inline-flex; }
  .mode-marketing .site-nav { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .flow-link-live, .flow-link-live.a1, .flow-link-live.a2, .flow-link-live.b1,
  .flow-link-live.b2, .flow-link-live.z {
    animation: none; opacity: .85; stroke-dasharray: none; stroke-dashoffset: 0; stroke-width: 1.8;
  }
  .flow-node, .flow-node.fn-1, .flow-node.fn-a, .flow-node.fn-b,
  .flow-node.fn-3, .flow-node.fn-4 { animation: none; }
  .mode-marketing * { transition-duration: .001ms !important; }
}

/* --- footer navigation ---------------------------------------------------- */
.mode-marketing .foot-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.mode-marketing .foot-nav a {
  color: var(--u-ink-3); text-decoration: none; font-size: .82rem;
}
.mode-marketing .foot-nav a:hover { color: var(--u-ink); }
@media (max-width: 620px) {
  .mode-marketing .foot-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* --- FAQ ------------------------------------------------------------------
   <details> rather than a JS accordion: it works before any script runs, it
   is keyboard-operable for free, and browser find-in-page can still reach the
   answers, which matters because these answers are also the structured data.
   -------------------------------------------------------------------------- */
.mk-faq { border-top: 1px solid var(--u-line); }
.mk-faq-item { border-bottom: 1px solid var(--u-line); }
.mk-faq-item summary {
  list-style: none; cursor: pointer;
  padding: 22px 40px 22px 0; position: relative;
  font-size: 1.06rem; font-weight: 600; letter-spacing: -.012em;
  color: var(--u-ink);
}
.mk-faq-item summary::-webkit-details-marker { display: none; }
.mk-faq-item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.6px solid var(--u-ink-3); border-bottom: 1.6px solid var(--u-ink-3);
  transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease;
}
.mk-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--u-live); }
.mk-faq-item summary:hover { color: #fff; }
.mk-faq-item p {
  margin: 0; padding: 0 60px 24px 0;
  font-size: .96rem; line-height: 1.68; color: var(--u-ink-2); max-width: 74ch;
}
@media (max-width: 620px) { .mk-faq-item p { padding-right: 0; } }

/* --- hero field -----------------------------------------------------------
   Canvas sits behind the hero content. Its edge fade is computed per point in
   the script rather than with a CSS mask, which keeps this stylesheet free of
   gradients. pointer-events stay off so it can never intercept a click on the
   CTA behind it — the script listens on the section itself.
   -------------------------------------------------------------------------- */
.mk-hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-field {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero-field-canvas { display: block; width: 100%; height: 100%; }
.mk-hero .wrap { position: relative; z-index: 1; }

/* A single hairline anchors the hero to the section below it. */
.mk-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--u-line); z-index: 1;
}

/* =========================================================================
   PUBLIC FORM PAGES  (/trial, /contact)
   Two columns on desktop: the case for acting on the left, the form on the
   right in its own panel. Previously the form inherited the 1180px content
   width and ran the full width of the screen, which read as a wall of inputs
   rather than something designed.
   ========================================================================= */
.fm-section { padding-top: clamp(56px, 7vw, 92px); }

.fm-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(38px, 5.5vw, 84px);
  align-items: start;
}
.fm-intro { padding-top: 6px; }
.fm-intro .fm-title { margin-bottom: .6rem; }
.fm-intro .fm-lede { margin-bottom: 1.9rem; }

.fm-panel {
  background: var(--u-panel);
  border: 1px solid var(--u-line);
  border-radius: var(--u-r-lg);
  padding: clamp(24px, 2.6vw, 34px);
}
.fm-panel .form-error { margin-bottom: 18px; }

/* Success state is a single measured column — nothing to fill a second one. */
.fm-done { max-width: 62ch; }
.fm-done .fm-title { margin-bottom: .6rem; }

@media (max-width: 900px) {
  .fm-split { grid-template-columns: 1fr; gap: 34px; }
  .fm-intro { padding-top: 0; }
  .fm-panel { padding: 22px 20px; }
}

/* =========================================================================
   HERO LAYOUT + LIVE PROOF CARD
   The right column is a working miniature of the product: a campaign filling
   in, then the certificate it issues. Every state shown is a real one, so the
   ornament is also an explanation.
   ========================================================================= */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-aside { min-width: 0; perspective: 1000px; }

.proof-card {
  background: var(--u-panel);
  border: 1px solid var(--u-line-2);
  border-radius: 14px;
  padding: 18px 18px 16px;
  /* set from script as the pointer moves; harmless at rest */
  transform: rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s cubic-bezier(.22,.7,.3,1), border-color .3s ease;
}
.proof-card.is-tilting { transition: border-color .3s ease; }

.proof-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--u-line);
}
.proof-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mk-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--u-live);
}
.proof-live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--u-live);
  animation: proof-pulse 2s ease-in-out infinite;
}
@keyframes proof-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.proof-course {
  font-size: .78rem; color: var(--u-ink-3); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The chain: a spine down the left with a node per record. Each entry links
   to the one above it, which is the actual shape of the audit log. */
.proof-chain { list-style: none; margin: 0; padding: 0; position: relative; }
.proof-chain::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 14px;
  width: 1px; background: var(--u-ridge);
}
.proof-link {
  position: relative; padding: 0 0 14px 22px;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  gap: 2px 10px; align-items: baseline;
  opacity: 0; transform: translateY(5px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22,.7,.3,1);
}
.proof-link.is-in { opacity: 1; transform: none; }
.proof-node {
  position: absolute; left: 0; top: 5px;
  width: 11px; height: 11px; border-radius: 2px;
  border: 1px solid var(--u-line-3); background: var(--u-panel);
  transform: rotate(45deg);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.proof-link.is-signed .proof-node {
  background: var(--u-live); border-color: var(--u-live);
  box-shadow: 0 0 0 3px var(--u-live-dim);
}
.proof-name { font-size: .84rem; color: var(--u-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-state {
  font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--u-ink-3); white-space: nowrap;
}
.proof-link.is-signed .proof-state { color: var(--u-live); }
.proof-hash {
  grid-column: 1 / -1;
  font-family: var(--mk-mono); font-size: .68rem; color: var(--u-ink-3);
  letter-spacing: .04em; min-height: .95em;
}

.proof-foot {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--u-line);
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.proof-foot.is-on { opacity: 1; transform: none; }
.proof-label {
  grid-column: 1 / -1;
  font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--u-ink-3);
}
.proof-id {
  font-family: var(--mk-mono); font-size: .92rem; color: var(--u-ink);
  letter-spacing: .06em;
}
.proof-verified {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--u-live-dim); color: var(--u-live);
  font-size: .66rem; font-weight: 600; letter-spacing: .04em;
  opacity: 0; transition: opacity .35s ease;
}
.proof-verified::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--u-live);
}
.proof-verified.is-on { opacity: 1; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-aside { max-width: 420px; }
}
@media (max-width: 620px) {
  /* On a phone the hero should get to the CTA fast; the card is illustrative,
     and the flow diagram further down tells the same story. */
  .hero-aside { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-card { transform: none !important; transition: none !important; }
  .proof-bar i { transition: none !important; }
  .proof-live i { animation: none; opacity: 1; }
  .proof-foot { opacity: 1 !important; transform: none !important; }
  .proof-verified { opacity: 1 !important; }
}

/* --- hero object: the audit chain in 3D ----------------------------------
   The canvas sizes itself to this box, so the box owns the layout and the
   script never fights it. Height is clamped rather than fixed so the object
   keeps its proportions from a laptop to a wide monitor.
   ------------------------------------------------------------------------- */
.chain3d {
  position: relative;
  width: 100%;
  height: clamp(360px, 42vw, 520px);
  touch-action: pan-y;                 /* the parallax must never eat a scroll */
}
.chain3d-canvas { display: block; width: 100%; height: 100%; }

.chain3d-cap {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0 0;
  font-family: var(--mk-mono);
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--u-ink-3);
}
.chain3d-cap .mono { color: var(--u-ink-2); }
.chain3d-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--u-live); flex: none;
  box-shadow: 0 0 0 4px var(--u-live-dim);
  animation: chain3d-pulse 2.4s ease-in-out infinite;
}
@keyframes chain3d-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .chain3d-pip { animation: none; }
}

@media (max-width: 900px) {
  .chain3d { height: clamp(300px, 62vw, 380px); }
}