/* Shared by every product UI on marketing pages. The kit's .ui tokens read from whatever ground they sit on,
   and a lit panel swaps --ink for its own slate. Product windows always stay white with the brand's teal ink. */
.pui {
  --u-bg: #ffffff;
  --u-surface: var(--p-surface);
  --u-ink: var(--p-ink);
  --u-muted: var(--p-muted);
  --u-accent: var(--p-accent);
  --u-accent-ink: var(--p-accent-ink);
  --ui-font: var(--font-text);
  --ui-mono: var(--font-mono);
  color: var(--p-ink);
}

/* One line with nodes runs through every product visual. Three node shapes match the product's step types. */
.pui-node { position: relative; display: grid; place-items: center; width: 24px; height: 24px; background: var(--u-bg); flex: none; }
.pui-node::before { content: ""; display: block; box-sizing: border-box; }
.pui-node--action::before { width: 8px; height: 8px; border-radius: 50%; background: var(--u-ink); }
.pui-node--decision::before { width: 9px; height: 9px; border: 1.5px solid var(--u-ink); background: var(--u-bg); transform: rotate(45deg); }
.pui-node--result::before { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--u-ink); background: radial-gradient(circle, var(--u-ink) 0 2.25px, transparent 2.75px); }

.pui-mono { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: -0.01em; color: var(--u-muted); font-feature-settings: "tnum" 1; }

/* A group's other panels hold their finished picture, and play while the pointer rests on their card. */
.card:not(:hover) .mk-held *, .nav__menu .mk-held * { animation: none !important; }

/* ---- Marketing page furniture, built on the kit's tokens ---- */

/* A section that can't fit a short laptop or a phone grows instead of letting its content collide. */
@media (min-width: 1024px) and (max-height: 820px) {
  main > :is(section, .section), footer.closing { height: auto; min-height: 100svh; }
  main > :is(section, .section) > .wrap, footer.closing > .wrap { height: auto; }
  main > :is(section, .section) > .wrap > .fill { flex: none; min-height: 440px; }
  .hero__media { min-height: 520px; }
}
@media (max-width: 639px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing { height: auto; min-height: 100lvh; }
  main > :is(section, .section):not(.hero, .section--hero) > .wrap, footer.closing > .wrap { height: auto; }
  main > :is(section, .section) > .wrap > .fill { flex: none; }
}

/* Struck-through list price wherever the seat price appears */
main s, footer s { color: var(--muted); font-weight: 400; }
.ground-inverse s { color: inherit; opacity: .7; }

/* Hero */
.hero__note { font-size: var(--t-small); color: var(--muted); }
.hero__text > .hero__note { margin-top: var(--s-4); }
.hero__media.mk-hero-visual { position: relative; height: 100%; min-height: 0; }
.mk-hero-visual[data-m-loop] > .stage--fade-b { bottom: 0; }
.hero--long { --ly-h1: calc(var(--ly-scale) * clamp(36px, 2.2vw + 22px, 52px)); }
.hero--long h1 { line-height: 1.06; }
.mk-hero-list { display: grid; gap: var(--s-2); list-style: none; padding: 0; }
.mk-hero-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: var(--s-2); font-weight: 500; }
.hero__text > .mk-hero-list { margin-top: var(--s-4); }
/* Desktop: the words start a little below the picture's top line, so the hero has room to breathe. */
@media (min-width: 1024px) {
  .hero--split .hero__text { padding-top: var(--s-7); }
}
@media (max-width: 1023px) {
  .hero__media.mk-hero-visual { height: auto; min-height: 0; }
}

/* Heading on the left line, its supporting line on the split line */
.mk-head { margin-bottom: var(--head-gap); align-items: start; }
.mk-head h2 { max-width: 20ch; }
.mk-head__side { display: grid; gap: var(--s-4); }
.mk-head__side p { font-size: var(--t-lead); line-height: 1.5; max-width: 54ch; }
.mk-head__side .mk-quiet { font-size: var(--t-body); line-height: 26px; color: var(--ink); }
.mk-split-text { display: grid; align-content: start; gap: var(--s-5); }
.mk-security-link { margin-top: var(--s-5); }
.mk-cell { display: flex; min-height: 0; }

/* A panel that fills its grid cell */
.mk-panel.panel { --p-h: 440px; margin: 0; width: 100%; border-radius: var(--r-lg); flex: 1 1 auto; }
.mk-panel.panel[data-m-loop] > .stage--fade-b { bottom: 0; }
.mk-steps .mk-panel.panel { --p-h: 256px; margin-top: var(--s-5); }
.mk-benefits .mk-panel.panel { --p-h: 300px; margin-top: var(--s-5); }
.section.g2 .mk-benefits .mk-panel.panel { --p-h: 360px; }
.mk-audience .mk-panel.panel { --p-h: 340px; margin-top: var(--s-5); }
.menu-card .panel { --p-h: 180px; margin-bottom: var(--s-3); border-radius: var(--r-md); }

/* How it works, second screen: every app a task touches, flowing into Patterns and out as SOPs */
.section.g2 .mk-steps { align-content: start; flex: none; }
.mk-connected { align-self: stretch; }
.mk-connected__head { margin-bottom: var(--s-6); align-items: start; row-gap: var(--s-3); }
.mk-connected__head h3 { max-width: 24ch; font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: -0.016em; }
.mk-connected__head p { max-width: 54ch; font-size: var(--t-lead); line-height: 1.5; }
/* The kit's .fill starts from 0, which only works in a fixed-height screen; this one starts at its panel's
   height, so wherever sections grow to their content (phones, short laptops) it can't spill into the next */
.mk-connected > .mk-connected__fill { display: flex; flex: 1 0 auto; }
.mk-connected__panel.panel { --p-h: 360px; margin: 0; width: 100%; border-radius: var(--r-lg); flex: 1 1 auto; }
.mk-connected__key { display: none; gap: var(--s-2); margin: var(--s-4) 0 0; font-size: var(--t-small); line-height: 20px; }
.mk-connected__key > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.mk-connected__key dt { color: var(--muted); }
.mk-connected__key dd { margin: 0; }
.mk-connected:has(.dg[data-tier="c"]) .mk-connected__key { display: grid; }
/* Below a wide desktop the steps stack and run past one screen, so the two parts stop being equal screens:
   each takes its own height, one band apart */
@media (max-width: 1279px) {
  main > .section.mk-how.g2 { --h: 1; }
  main > .section.mk-how.g2 > .wrap { grid-template-rows: auto auto; align-content: start; row-gap: var(--s-9); }
  .mk-connected__panel.panel { --p-h: 400px; }
}
@media (max-width: 1023px) {
  .mk-connected__head > * { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .mk-connected__panel.panel { --p-h: 340px; }
}

/* The thread: rows connected by one line */
.mk-rail { position: relative; display: grid; list-style: none; padding: 0; margin: 0; --u-ink: var(--ink); --u-bg: var(--bg); }
.mk-rail::before { content: ""; position: absolute; left: 11.5px; top: 28px; bottom: 28px; width: 1px; background: var(--line-strong); }
.mk-rail > li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s-4); padding-block: var(--s-3); }
.mk-rail .pui-node { margin-top: 2px; }
.mk-rail h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.mk-rail p { margin-top: var(--s-1); max-width: 52ch; }
.mk-rail--tight > li { padding-block: var(--s-2); font-size: var(--t-lead); line-height: 1.4; }
.mk-rail__last { font-weight: 500; }
.mk-rail__inline { margin-top: 2px !important; }
.mk-rail__inline b { font-weight: 500; }

/* Cards */
.mk-link-card { display: grid; align-content: start; color: inherit; text-decoration: none; }
.mk-link-card .link { margin-top: var(--s-3); justify-self: start; }
.mk-steps .card--open h3 { margin-top: var(--s-3); }

/* Comparison table */
.mk-compare { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.mk-compare :is(th, td) { padding: var(--s-4) var(--s-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.mk-compare thead th { font-size: var(--t-label); font-weight: 500; color: var(--muted); border-bottom-color: var(--line-strong); }
.mk-compare tbody th { font-weight: 500; }
.mk-compare tbody tr:last-child :is(th, td) { border-bottom: 0; }
.mk-compare .is-ours { background: color-mix(in oklab, var(--accent) 8%, #fff); font-weight: 500; }
.mk-compare thead .is-ours { color: var(--ink); }
.mk-after { margin-top: var(--s-6); font-size: var(--t-lead); line-height: 1.5; max-width: 62ch; }
.mk-compare-scroll { overflow-x: auto; }

/* Stale-docs loop: four states on one line, with Patterns cutting the way back round */
.mk-loop { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); grid-template-rows: auto 72px auto; list-style: none; padding: 0; margin: 0; }
.mk-loop__card { display: flex; align-items: center; padding: var(--s-5); border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mk-loop__card.is-last { font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--ink); }
.mk-loop__h, .mk-loop__v { position: relative; align-self: center; justify-self: center; background: var(--line-strong); overflow: hidden; }
.mk-loop__h { width: 100%; height: 1.5px; }
.mk-loop__v { width: 1.5px; height: 100%; }
.mk-loop__h::after, .mk-loop__v::after { content: ""; position: absolute; background: var(--ink); opacity: 0; }
.mk-loop__h::after { top: 0; bottom: 0; left: 0; width: 20px; }
.mk-loop__v::after { left: 0; right: 0; top: 0; height: 20px; }
.mk-loop__a::after { animation: mk-loop-a 3.6s linear infinite; }
.mk-loop__b::after { animation: mk-loop-b 3.6s linear infinite; }
.mk-loop__c::after { animation: mk-loop-c 3.6s linear infinite; }
@keyframes mk-loop-a { 0% { transform: translateX(-20px); opacity: 1; } 22% { transform: translateX(56px); opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes mk-loop-b { 0%, 25% { transform: translateY(-20px); opacity: 0; } 26% { opacity: 1; } 48% { transform: translateY(72px); opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes mk-loop-c { 0%, 51% { transform: translateX(56px); opacity: 0; } 52% { opacity: 1; } 74% { transform: translateX(-20px); opacity: 1; } 75%, 100% { opacity: 0; } }
.mk-loop__cut { display: flex; flex-direction: column; align-items: center; }
.mk-loop__cut i { flex: 1 1 auto; border-left: 1.5px dashed var(--line-strong); }
.mk-loop__cut b { flex: none; padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--action); color: var(--action-ink); font-size: var(--t-small); font-weight: 500; }
.mk-loop-close { margin-top: var(--s-6); font-size: var(--t-lead); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .mk-loop__h::after, .mk-loop__v::after { animation: none; } }
@media (max-width: 639px) {
  .mk-loop { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mk-loop > * { grid-column: 1 !important; grid-row: auto !important; }
  .mk-loop__h { width: 1.5px; height: 24px; }
  .mk-loop__h::after { display: none; }
  .mk-loop__v { height: 24px; }
  .mk-loop__cut { display: none; }
}

/* Calculator */
.mk-calc { align-items: stretch; }
.mk-calc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gutter); align-items: end; }
.mk-calc__result { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); padding: var(--s-6); border-radius: var(--r-lg); background: var(--p-ink); color: var(--p-bg); }
.mk-calc__sentence { font: var(--display-weight) var(--t-h3)/1.3 var(--font-display); letter-spacing: -0.016em; }
.mk-calc__sentence b { font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; font-feature-settings: "tnum" 1; }
@media (max-width: 479px) { .mk-calc__fields { grid-template-columns: minmax(0, 1fr); } }

/* Pricing */
.mk-plans { align-items: stretch; }
.mk-plan { display: flex; flex-direction: column; gap: var(--s-3); }
.mk-plan h3 { font: 500 var(--t-card)/1.3 var(--font-text); }
.mk-plan .checks { margin-top: var(--s-2); margin-bottom: auto; padding: 0; list-style: none; }
.mk-plan .checks b { font-weight: 500; }
.mk-plan .btn { width: 100%; margin-top: var(--s-5); }
.mk-plan__price { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: -0.016em; }
.mk-plan__price small { display: block; margin-top: var(--s-1); font: 400 var(--t-small)/1.4 var(--font-text); letter-spacing: 0; color: var(--muted); }
.checks li.is-out::before { opacity: .35; }

/* FAQ in two columns where the list fits one screen */
.mk-faq-cols { columns: 2; column-gap: var(--gutter); }
.mk-faq-cols > .faq__item { break-inside: avoid; }
.mk-faq-cols > .faq__item:first-child { padding-top: var(--s-5); }
.faq a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
@media (max-width: 1023px) { .mk-faq-cols { columns: 1; } }

/* Security facts */
.mk-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); padding: 0; list-style: none; font-size: var(--t-small); color: var(--muted); }
.mk-facts li { display: inline-flex; align-items: center; gap: var(--s-2); }
.mk-facts li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* Close and footer */
footer.closing .closing__cta h2 { max-width: 30ch; }
footer.closing .close__word { font-size: calc(min(100vw - 2 * var(--gut), 1280px) * .284); line-height: .84; margin-left: -.03em; }
footer.closing.mk-footer-plain { height: auto; min-height: 0; padding-top: var(--s-8); }
footer.closing.mk-footer-plain > .wrap { height: auto; display: block; }
.mk-nowrap { white-space: nowrap; }

/* ---- Long-form pages: security detail, legal, blog, help ---- */
.doc-hero { padding-block: calc(var(--nav) + var(--s-8)) var(--s-8); background: var(--p-surface); }
.doc-hero h1 { font: var(--display-weight) var(--t-h2)/1.08 var(--font-display); font-size: clamp(36px, 3vw + 12px, 56px); letter-spacing: var(--display-tracking); max-width: 24ch; text-wrap: balance; }
.doc-hero__lead { margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.5; max-width: 62ch; }
.doc-hero__lead .is-strong { font-weight: 500; }
.doc-hero__meta { margin-top: var(--s-4); font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.doc-hero .btn-row { margin-top: var(--s-6); }
.doc-hero__list { display: grid; gap: var(--s-1); margin-top: var(--s-4); padding: 0; list-style: none; font-weight: 500; }
.doc-kicker { margin-bottom: var(--s-4); font-size: var(--t-small); color: var(--muted); }
.doc-kicker a { color: inherit; }
.doc-sec { padding-block: var(--s-8); }
.doc-sec--alt { background: var(--p-surface); }
.doc-sec > .wrap > h2 { margin-bottom: var(--s-6); max-width: 22ch; }
.doc-sec__intro { margin: calc(-1 * var(--s-4)) 0 var(--s-6); font-size: var(--t-lead); line-height: 1.5; max-width: 62ch; }
.doc-sec__note { margin-top: var(--s-6); font-size: var(--t-small); color: var(--muted); max-width: 72ch; }
.doc-sec__note .is-strong { font-weight: 500; }

/* One topic a row: its name on the left line, the detail on the split line */
.doc-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-block: var(--s-6); border-top: 1px solid var(--line); }
.doc-row:first-child { border-top: 0; padding-top: 0; }
.doc-row > :is(h2, h3) { grid-column: 1 / span 5; font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: -0.016em; font-stretch: var(--display-stretch); max-width: 20ch; }
.doc-row > div { grid-column: 7 / span 6; display: grid; gap: var(--s-3); }
.doc-row p, .doc-row li { max-width: 62ch; }
.doc-row ul { display: grid; gap: var(--s-2); padding-left: 1.1em; margin: 0; list-style: disc; }
.doc-row .is-strong { font-weight: 500; }
.doc-row .is-note { font-size: var(--t-small); color: var(--muted); }
.doc-link, .doc-row a:not(.btn), .doc-next a:not(.btn), .doc-prose a:not(.btn), .doc-sec p a:not(.btn) { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
.doc-link:hover, .doc-row a:not(.btn):hover, .doc-next a:not(.btn):hover, .doc-prose a:not(.btn):hover { text-decoration-color: currentColor; }
@media (max-width: 1023px) {
  .doc-row > :is(h2, h3), .doc-row > div { grid-column: 1 / -1; }
  .doc-row > div { margin-top: var(--s-3); }
}

.doc-next { display: grid; gap: var(--s-4); }
.doc-next h2 { max-width: 22ch; }
.doc-next p { font-size: var(--t-lead); line-height: 1.5; max-width: 62ch; }
.doc-next p .is-strong { font-weight: 500; }
.doc-next .btn-row { margin-top: var(--s-3); }

.doc-cards { align-items: stretch; }
.doc-card { display: flex; flex-direction: column; gap: var(--s-3); color: inherit; text-decoration: none; }
.doc-card :is(h2, h3) { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: -0.016em; }
.doc-card h3.doc-card__small { font: 500 var(--t-card)/1.3 var(--font-text); }
.doc-card ul { display: grid; gap: var(--s-2); padding-left: 1.1em; margin: 0; list-style: disc; }
.doc-card__tag { font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.doc-card .link { margin-top: auto; padding-top: var(--s-3); }
.doc-card .doc-yes-no { list-style: none; padding: var(--s-4) 0 0; margin-top: auto; }
.doc-yes-no li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-2); align-items: start; }
.doc-yes-no svg { margin-top: 3px; }
.doc-yes-no .is-no { color: var(--muted); }

.doc-prose { max-width: 720px; }
.doc-prose :is(h2, h3) { margin: var(--s-7) 0 var(--s-3); font: var(--display-weight) var(--t-h3)/1.25 var(--font-display); letter-spacing: -0.016em; }
.doc-prose h3 { font-size: var(--t-card); }
.doc-prose > :first-child { margin-top: 0; }
.doc-prose p { margin: 0 0 var(--s-4); line-height: 1.7; }
.doc-prose :is(ul, ol) { margin: 0 0 var(--s-4); padding-left: 1.25em; }
.doc-prose ul { list-style: disc; }
.doc-prose ol { list-style: decimal; }
.doc-prose li { margin-bottom: var(--s-2); line-height: 1.7; }
.doc-prose strong { font-weight: 500; }
.doc-prose hr { margin: var(--s-7) 0; border: 0; border-top: 1px solid var(--line); }
.doc-prose img { max-width: 100%; height: auto; margin-block: var(--s-4); border-radius: var(--r-md); }
.doc-prose table { width: 100%; margin-bottom: var(--s-5); border-collapse: collapse; display: block; overflow-x: auto; }
.doc-prose :is(th, td) { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--line); }
.doc-prose code { padding: 1px 5px; border-radius: 4px; background: var(--p-surface); font-family: var(--font-mono); font-size: .9em; }
.doc-prose code svg { display: inline; width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.doc-prose .btn svg { width: 18px; height: 18px; margin-left: var(--s-2); }
.doc-prose .is-note { font-size: var(--t-small); color: var(--muted); }

/* Forms */
.mk-form-card { padding: var(--s-6); border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mk-form-card h2 { margin-bottom: var(--s-5); font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: -0.016em; }
.mk-form-card .form .btn { width: 100%; }
.mk-form-note { font-size: var(--t-small); color: var(--muted); }
.mk-form-error { margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 500; }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.mk-contact-facts { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.mk-contact-facts h3 { font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.mk-contact-box { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-md); background: var(--p-surface); }
.mk-contact-box h3 { margin-bottom: var(--s-2); font: 500 var(--t-card)/1.3 var(--font-text); }
.mk-contact-box .btn-row { margin-top: var(--s-4); }

/* Blog */
.mk-articles { align-items: stretch; }
.mk-article { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; text-decoration: none; }
.mk-article__img { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--p-surface); overflow: hidden; }
.mk-article__img img { width: 100%; height: 100%; object-fit: cover; }
.mk-article__img svg { width: 40px; height: 40px; color: var(--muted); }
.mk-article__body { display: grid; gap: var(--s-2); padding: var(--s-5); }
.mk-article__body h2 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.mk-article__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mk-skel { display: block; border-radius: var(--r-sm); background: var(--p-surface); }
.mk-pager { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); }
.mk-center { display: grid; justify-items: start; gap: var(--s-4); padding-block: var(--s-8); }
.mk-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.mk-share__btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: inherit; background: none; box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; border: 0; }
.mk-share__btn:hover { background: var(--p-surface); }
.mk-share__btn svg { width: 16px; height: 16px; }
.mk-article-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }

/* Page-level helpers */
.mk-app-head { margin-bottom: var(--s-6); align-items: start; }
.mk-app-tabs { display: flex; justify-content: flex-end; }
.mk-app-frame { position: relative; min-height: 0; }
.mk-app-win { position: relative; height: 100%; }
.mk-app-win[hidden] { display: none; }
.mk-app-win[data-m-loop] { padding-bottom: 0; }
.mk-runs { position: relative; padding: var(--s-7) var(--s-7) 0; border-radius: var(--r-lg); background: var(--ground-bg); }
.mk-audience__link { margin-top: var(--s-4); }
.mk-b { font-weight: 500; }
.mk-gap { margin-top: var(--s-4); }
.mk-gap-top { margin: var(--s-6) 0 0; }
.mk-form-h2 { margin-bottom: var(--s-5); font-size: var(--t-h3); }
.mk-section-short { height: auto !important; min-height: 0 !important; padding-block: var(--s-8); }
.mk-section-short > .wrap { height: auto; }
.mk-thanks { min-height: calc(100svh - 240px); }
.mk-pricing-head { display: grid; gap: var(--s-3); }
.mk-pricing-page h1 { font: var(--display-weight) var(--t-h2)/1.08 var(--font-display); letter-spacing: var(--display-tracking); }
.doc-hero__lead .is-strong, .card p .is-strong, .doc-card .is-strong { font-weight: 500; }
@media (max-width: 1023px) {
  .mk-app-tabs { justify-content: flex-start; margin-top: var(--s-4); }
  .mk-app-win { height: 600px; }
}
@media (max-width: 639px) {
  .mk-runs { padding: var(--s-5) var(--s-5) 0; }
  .mk-app-win { height: 560px; }
}

/* Each section fills its screen: pictures and panels run to the foot of the section. */
.grid.fill { grid-template-rows: minmax(0, 1fr); }
.grid.fill > .mk-cell { align-self: stretch; }
.grid.fill > .mk-split-text, .grid.fill > .mk-rail, .grid.fill > .span-5 { align-self: start; }
.grid.fill > .mk-panel-cell { align-self: stretch; }
.mk-rail .pui-node { background: var(--bg); }
.mk-card-copy { min-height: 0; }

/* Row of cards: titles and panels line up whatever the copy length */
.mk-steps .card--open, .mk-benefits .card--open, .mk-audience .card--open { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
.mk-steps .card--open { grid-row: span 4; }
.mk-benefits .card--open { grid-row: span 3; }
.mk-audience .card--open { grid-row: span 4; }
.mk-benefits .card--open > p, .mk-steps .card--open > p, .mk-audience .card--open > p { margin-top: var(--s-2); }
.mk-loop-fill { display: flex; min-height: 0; }
.mk-loop-fill .mk-loop { flex: 1 1 auto; grid-template-rows: minmax(0, 1fr) 72px minmax(0, 1fr); }
.mk-loop-fill .mk-loop__card { font-size: var(--t-lead); line-height: 1.45; padding: var(--s-6); }
.mk-calc-fill { display: flex; min-height: 0; }
.mk-calc-fill .mk-calc { flex: 1 1 auto; grid-template-rows: minmax(0, 1fr); }
.mk-calc-fill .mk-calc__fields { align-content: start; gap: var(--s-5) var(--gutter); }
.mk-calc-fill .mk-calc__sentence { font-size: clamp(24px, 1.5vw + 12px, 36px); line-height: 1.25; }
.mk-compare--large .mk-compare :is(td, th) { padding: var(--s-5) var(--s-6); font-size: var(--t-lead); line-height: 1.4; }
.mk-compare--large .mk-compare thead th { font-size: var(--t-body); }

/* The close: the name runs line to line, and the footer may run a little past one screen. */
footer.closing { height: auto; min-height: 100svh; }
footer.closing > .wrap { height: auto; }
footer.closing .close__word { font-size: calc(min(100vw - 2 * var(--gut), 1280px) * .272); margin-left: -.02em; }
.closing__cta .section-head--split h2 { max-width: 26ch; }
.closing__links .footer__col ul { display: grid; gap: var(--s-2); }

@media (max-width: 1279px) {
  .mk-benefits .card--open, .mk-steps .card--open, .mk-audience .card--open { grid-row: auto; display: block; }
  .mk-benefits .card--open > .mk-panel, .mk-steps .card--open > .mk-panel, .mk-audience .card--open > .mk-panel { margin-top: var(--s-5); }
}
@media (max-width: 1023px) {
  .mk-loop-fill .mk-loop { grid-template-rows: auto 72px auto; }
  .mk-calc-fill .mk-calc { grid-template-rows: none; }
}
@media (max-width: 639px) {
  .mk-loop-fill .mk-loop { grid-template-rows: none; }
}

/* Long approved headlines stay within three lines at desktop. */
.hero--long { --ly-h1: calc(var(--ly-scale) * clamp(32px, 2vw + 20px, 48px)); }


/* Fit cards fill the section. */
.mk-fit .doc-card { font-size: var(--t-lead); padding: var(--s-7); }
.mk-fit .doc-yes-no { margin-top: var(--s-3); padding-top: 0; gap: var(--s-4); }
.mk-fit .doc-yes-no svg { margin-top: 7px; }

@media (max-width: 639px) {
  .mk-compare--stack .mk-compare thead { display: none; }
  .mk-compare--stack .mk-compare :is(tr, td, th) { display: block; }
  .mk-compare--stack .mk-compare tr { padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
  .mk-compare--stack .mk-compare :is(td, th) { padding: var(--s-2) var(--s-4); border: 0; font-size: var(--t-body); }
  .mk-compare--stack .mk-compare td::before { content: attr(data-label); display: block; font-size: var(--t-label); font-weight: 400; color: var(--muted); }
  .hero--long h1 { line-height: 1.1; }
}

/* Two-screen benefit rows sit at the top of each screen, with titles close to their copy. */
.section.g2 .mk-benefits { align-content: start; grid-auto-rows: auto; }

/* A UI that is shorter than its tall panel sits in the panel's middle. */
.mk-cell .mk-panel .at-rise { top: 50%; bottom: auto; transform: translateY(-50%); }
/* The stale PDF is the exception: it hangs from the top so its toolbar always shows, and its page runs
   down past the fade like a long document. */
.mk-panel .stage > .at-rise:has(> .pdf) { top: var(--ay, 32px); bottom: -72px; transform: none; }
.mk-panel .stage > .at-rise:has(> .pdf) > .pdf { height: 100%; }

/* Plan cards: the price leads, and rows keep one rhythm. */
.card.mk-plan { gap: 0; }
.card.mk-plan > .t-small { margin-top: 2px; }
.card.mk-plan > .mk-plan__price { margin-top: var(--s-4); font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: -0.016em; max-width: none; }
.card.mk-plan .checks { margin-top: var(--s-5); }

/* Links in a card take their own width, so the underline follows the words. */
.doc-card .link, .mk-audience__link, .mk-link-card .link { align-self: flex-start; justify-self: start; }

/* Fit cards take the height of their lists. */
.mk-fit.fill { flex: none; }

/* Phones: the hero stays exactly one screen. The window takes whatever height the words leave
   and crops under its bottom fade, so nothing above the fold needs a scroll. */
@media (max-width: 639px) {
  .hero__media.mk-hero-visual { flex: 1 1 0; min-height: 0; margin-top: var(--s-5); }
}
/* Short phones (an iPhone SE, a small Android): tighter words and the two buttons on one row,
   so the window still gets a useful height. */
@media (max-width: 639px) and (max-height: 760px) {
  .hero--split { --ly-h1: 34px; }
  .hero--split .hero__text > * + * { margin-top: var(--s-4); }
  .hero--split .hero__text > .btn-row { flex-direction: row; margin-top: var(--s-5); }
  .hero--split .hero__text > .btn-row > .btn--primary { flex: 1 1 auto; }
  .hero__media.mk-hero-visual { margin-top: var(--s-4); }
}
/* Too short for the window to read: the words and buttons take the screen alone. */
@media (max-width: 639px) and (max-height: 600px) {
  .hero__media.mk-hero-visual { display: none; }
}

/* Process mining headline keeps the page's largest size under its small h1. */
.doc-hero h1.mk-kicker-h1 { font: 400 var(--t-small)/1.4 var(--font-text); letter-spacing: 0; max-width: none; color: var(--muted); }
.doc-hero .mk-doc-headline { font: var(--display-weight) var(--t-h2)/1.08 var(--font-display); font-size: clamp(36px, 3vw + 12px, 56px); letter-spacing: var(--display-tracking); max-width: 24ch; text-wrap: balance; }

/* Features a plan leaves out get a cross, because a dimmed check still reads as included. */
.checks li.is-out::before {
  opacity: 1;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7m0-7l-7 7' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7m0-7l-7 7' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.card.mk-plan > .mk-plan__price { color: var(--ink); }

/* The small line above the Pricing heading */
.section-head.mk-pricing-head > .hero__kicker { font-size: var(--t-small); color: var(--muted); }

/* Card copy is reading text, so it stays at full ink (7:1 or better). */
.card { --c-text: var(--ink); }

/* The brand mark: the RunsToSop picture in one shape. Three runs of a task merge into one line that flows
   into a solid SOP page (folded corner), where it carries on as the page's first line. */
/* The Patterns mark: a single line that runs up from a step node, round the bowl and back down beside itself.
   Source files: public/images/logo/. */
.mark[data-mark="patterns"] { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.225 16.893V5.725A3.75 3.75 0 0 1 8.975 1.975H14.175A6.05 6.05 0 0 1 20.225 8.025A6.05 6.05 0 0 1 14.175 14.075A1.45 1.45 0 0 0 12.725 15.525V20.475A1.15 1.15 0 0 1 10.425 20.475V15.525A3.75 3.75 0 0 1 14.175 11.775A3.75 3.75 0 0 0 17.925 8.025A3.75 3.75 0 0 0 14.175 4.275H8.975A1.45 1.45 0 0 0 7.525 5.725V16.893A2.6 2.6 0 1 1 5.225 16.893Z'/%3E%3C/svg%3E"); }

/* The header logo: the mark beside the name, with the product line under it. */
.mk-logo { gap: 6px; }   /* the mark has ~4px of air inside its box */
.mk-logo .mark { width: 28px; height: 28px; }
.mk-logo__text { display: grid; gap: 1px; }
.mk-logo__sub { font: 500 11px/1 var(--font-text); letter-spacing: 0.01em; color: var(--muted); }
@media (max-width: 639px) {
  .mk-logo { gap: 4px; }
  .nav__logo.mk-logo .mark:not(.mark--initial) { width: 24px; height: 24px; }
  .mk-logo__text { gap: 1px; }
  .mk-logo__sub { font-size: 10px; }
}

/* The wordmark stays on the page's left line. */
footer.closing .close__word { margin-left: 0; line-height: .86; font-size: calc(min(100vw - 2 * var(--gut), 1280px) * .268); }