/* /link: SubPro Link, a standalone page (Jay, 2026-09-21). It mirrors the
   section structure, nav style and visual rhythm of make.com/en, in SubPro's
   colors. This sheet is its own; the page does not load styles.css. The
   sitewide copy and design rules do not apply here: make.com's page is the
   rule. Fonts are the site's self-hosted Inter. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mk-orange: #ff6b13;
  --mk-orange-2: #ff9a3c;
  --mk-orange-deep: #f26100;
  --mk-navy: #08223d;
  --mk-navy-2: #0c2d4f;
  --mk-ink: #06111f;
  --mk-ink-2: #0b1a2e;
  --mk-paper: #ffffff;
  --mk-sand: #f7f4ee;
  --mk-text: #15202b;
  --mk-muted: #55606c;
  --mk-line: #e6e2da;
  --mk-steel: #d5dfea;
  --mk-steel-dim: #93a4b8;
  --mk-grad: linear-gradient(90deg, #ff6b13 0%, #ff9a3c 100%);
  --mk-grad-card: linear-gradient(135deg, rgba(255, 107, 19, 0.16), rgba(255, 154, 60, 0.04));
  --mk-radius: 12px;
  --mk-radius-lg: 20px;
  --mk-max: 1184px;
  --mk-font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--mk-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--mk-text);
  background: var(--mk-paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }

p { margin: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 8px 12px;
  background: var(--mk-orange);
  color: #fff;
  z-index: 100;
}

.skip-link:focus-visible { left: 8px; }

.mk-wrap {
  width: min(var(--mk-max), calc(100% - 48px));
  margin: 0 auto;
}

.mk-center { text-align: center; }

/* Announce bar */
.mk-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 24px;
  background: var(--mk-navy-2);
  color: #fff;
  font-size: 15px;
}

.mk-announce a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nav */
.mk-header {
  background: var(--mk-ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}

.mk-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 78px;
}

.mk-brand {
  flex: none;
  margin-right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.mk-brand-link { height: 40px; width: auto; display: block; }

.mk-brand-by {
  align-self: flex-end;
  margin: 0 0 4px 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-steel-dim);
}

.mk-brand-sub { align-self: flex-end; height: 16px; width: auto; display: block; margin-bottom: 5px; }

.mk-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 16px 0 0;
  padding: 0;
  list-style: none;
}

.mk-menu > li { position: relative; }

.mk-menu > li > a,
.mk-menu > li > button {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 9px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
}

.mk-menu > li > a:hover,
.mk-menu > li > button:hover { background: rgba(255, 255, 255, 0.08); }

.mk-menu svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.mk-dd {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  margin: 6px 0 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  color: var(--mk-text);
  border-radius: var(--mk-radius);
  box-shadow: 0 20px 50px rgba(6, 17, 31, 0.25);
  /* Hidden by visibility, not display, so closing can wait: the pointer gets
     a quarter second to cross from the menu item into the dropdown. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.25s;
}

/* An invisible bridge over the gap between the menu item and the dropdown,
   so moving down onto it never leaves the hover area (Jay, 2026-09-23). */
.mk-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.mk-menu > li:hover > .mk-dd,
.mk-menu > li:focus-within > .mk-dd {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.mk-dd a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
}

.mk-dd a strong { display: block; font-weight: 600; }

.mk-dd a span { display: block; color: var(--mk-muted); font-size: 13px; }

.mk-dd a:hover { background: var(--mk-sand); }

.mk-nav-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 1500px) {
  .mk-nav-actions .mk-text { display: none; }
}

@media (max-width: 1320px) {
  .mk-nav-actions .mk-btn-outline { display: none; }
}

.mk-nav-actions .mk-text { white-space: nowrap; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }

.mk-nav-toggle {
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: none;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
}

/* Buttons */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.mk-btn-grad {
  background: var(--mk-grad);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 107, 19, 0.35);
}

.mk-btn-grad:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255, 107, 19, 0.45); }

.mk-btn-outline {
  background: transparent;
  color: #fff;
  border-color: var(--mk-orange);
}

.mk-btn-outline:hover { background: rgba(255, 107, 19, 0.12); }

.mk-btn-dark {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.mk-btn-dark:hover { background: rgba(255, 255, 255, 0.18); }

/* Hero */
.mk-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(70% 70% at 78% 45%, rgba(255, 107, 19, 0.28), transparent 60%), linear-gradient(180deg, var(--mk-ink) 0%, var(--mk-navy) 100%);
  color: #fff;
  padding: 72px 0 40px;
}

.mk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 40px;
  align-items: center;
  min-height: 520px;
}

.mk-hero h1 {
  font-size: clamp(40px, 3.2vw + 20px, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.mk-hero .mk-sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--mk-steel);
  max-width: 34em;
  margin-bottom: 28px;
}

.mk-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.mk-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--mk-steel);
}

.mk-checks li::before { content: "\2713"; margin-right: 8px; color: var(--mk-orange); font-weight: 700; }

.mk-hero-art { position: relative; margin: 0; display: grid; place-items: center; }

.mk-hero-art svg { width: min(100%, 560px); height: auto; filter: drop-shadow(0 40px 80px rgba(255, 107, 19, 0.45)); }

/* Logo strip: the manufacturers' real logos from the library, scrolling right
   to left like make.com's customer strip. Two copies of the track, translated by
   half, so the loop is seamless. Logos are flattened to white so a dark-ink
   and a light-ink logo read the same on the dark hero. Pauses on hover and
   stops entirely for reduced motion. */
.mk-logos { padding: 56px 0 24px; }

.mk-logos p {
  text-align: center;
  color: var(--mk-steel-dim);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.mk-marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mk-marquee:hover .mk-marquee-track { animation-play-state: paused; }

.mk-marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: none;
  margin: 0;
  padding: 0 14px;
  list-style: none;
  animation: mk-scroll 70s linear infinite;
}

.mk-marquee-track li {
  flex: none;
  display: grid;
  place-items: center;
  width: 176px;
  height: 64px;
  padding: 0 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

/* Light-ink marks are inverted so they read dark on the same light chip. */
.mk-marquee-track li.light img { filter: invert(1) grayscale(1); }

.mk-marquee-track img {
  display: block;
  height: 36px;
  width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
}



@keyframes mk-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .mk-marquee-track { animation: none; }
  .mk-marquee { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
  .mk-marquee-track[aria-hidden="true"] { display: none; }
}

/* Stats row (where make.com shows review ratings) */
.mk-stats {
  padding: 56px 0;
}

.mk-stats ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-stats li { display: flex; align-items: center; gap: 14px; justify-content: center; }

.mk-stats svg { width: 28px; height: 28px; stroke: var(--mk-orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mk-stats strong { display: block; font-size: 22px; font-weight: 700; }

.mk-stats span { display: block; color: var(--mk-muted); font-size: 14px; }

/* Sections */
.mk-section { padding: 88px 0; }

.mk-section-dark {
  background: radial-gradient(60% 60% at 50% 0%, rgba(255, 107, 19, 0.2), transparent 60%), var(--mk-navy);
  color: #fff;
}

.mk-kicker {
  color: var(--mk-orange);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
}

.mk-section-dark .mk-kicker { color: var(--mk-orange-2); }

.mk-h2 {
  font-size: clamp(30px, 2vw + 14px, 40px);
  letter-spacing: -0.02em;
  max-width: 20em;
  margin: 0 auto 16px;
}

.mk-sub {
  font-size: 17px;
  color: var(--mk-muted);
  max-width: 36em;
  margin: 0 auto;
}

.mk-section-dark .mk-sub { color: var(--mk-steel); }

.mk-head { margin-bottom: 44px; }

/* Three cards */
.mk-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 0;
  text-align: left;
}

.mk-card {
  padding: 32px;
  border: 1px solid rgba(255, 107, 19, 0.18);
  border-radius: var(--mk-radius-lg);
  background: var(--mk-grad-card), #fff;
}

.mk-card h3 { font-size: 24px; margin: 24px 0 10px; }

.mk-card p { color: var(--mk-muted); font-size: 15px; }

.mk-tile {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--mk-grad);
  color: #fff;
}

.mk-tile svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Solutions tabs (CSS only) */
.mk-tabs { position: relative; }

.mk-tabs > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mk-tablist {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 6px;
  margin: 0 0 56px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(6, 17, 31, 0.08);
  border: 1px solid var(--mk-line);
}

.mk-tablist label {
  flex: 1;
  text-align: center;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 500;
  cursor: pointer;
}

#mk-t1:checked ~ .mk-tablist label[for="mk-t1"],
#mk-t2:checked ~ .mk-tablist label[for="mk-t2"],
#mk-t3:checked ~ .mk-tablist label[for="mk-t3"],
#mk-t4:checked ~ .mk-tablist label[for="mk-t4"],
#mk-t5:checked ~ .mk-tablist label[for="mk-t5"],
#mk-t6:checked ~ .mk-tablist label[for="mk-t6"] {
  background: rgba(255, 107, 19, 0.12);
  border-color: var(--mk-orange);
  color: var(--mk-orange-deep);
}

.mk-panel {
  display: none;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
}

#mk-t1:checked ~ .mk-panel[data-tab="1"],
#mk-t2:checked ~ .mk-panel[data-tab="2"],
#mk-t3:checked ~ .mk-panel[data-tab="3"],
#mk-t4:checked ~ .mk-panel[data-tab="4"],
#mk-t5:checked ~ .mk-panel[data-tab="5"],
#mk-t6:checked ~ .mk-panel[data-tab="6"] { display: grid; }

.mk-panel h2 { font-size: 34px; letter-spacing: -0.02em; margin-bottom: 16px; }

.mk-panel p { color: var(--mk-muted); font-size: 17px; margin-bottom: 0; }

.mk-panel-art { position: relative; padding-bottom: 96px; }

.mk-panel-art img { display: block; width: 100%; border-radius: var(--mk-radius-lg); }

.mk-flow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mk-flow > div {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 120px;
  font-size: 12px;
  text-align: center;
  color: var(--mk-text);
}

.mk-bubble {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 30px rgba(6, 17, 31, 0.15);
  font-weight: 800;
  font-size: 30px;
  color: var(--mk-navy);
}

.mk-bubble.orange { background: var(--mk-grad); color: #fff; }

.mk-bubble svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mk-flow > .mk-dots { display: flex; gap: 6px; align-items: center; height: 88px; width: auto; }

.mk-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-orange-2); }

/* Split rows */
.mk-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}

.mk-split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.mk-split h2 { font-size: 36px; letter-spacing: -0.02em; margin-bottom: 16px; }

.mk-split p { color: var(--mk-muted); font-size: 17px; margin-bottom: 28px; }

.mk-section-dark .mk-split p { color: var(--mk-steel); }

/* Security badges */
.mk-badges {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-badges li { display: grid; justify-items: center; gap: 12px; width: 120px; text-align: center; font-weight: 600; font-size: 15px; line-height: 1.2; }

.mk-badge {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--mk-grad);
  color: #fff;
  box-shadow: 0 12px 30px rgba(255, 107, 19, 0.3);
}

.mk-badge svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* About */
.mk-about { padding: 40px 0 88px; }

.mk-about .mk-sub { max-width: 60em; font-size: 17px; margin-bottom: 32px; }

/* Stories (dark) */
.mk-stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 0;
  text-align: left;
}

.mk-story {
  border-radius: var(--mk-radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.mk-story-art {
  height: 200px;
  display: grid;
  place-items: center;
  background: radial-gradient(80% 100% at 50% 100%, rgba(255, 154, 60, 0.6), transparent), linear-gradient(135deg, #b83f00, #ff6b13);
}

.mk-story-art .mk-flow { position: static; transform: none; }

.mk-story-art .mk-flow > div { width: auto; }

.mk-story-art .mk-bubble { width: 64px; height: 64px; font-size: 22px; }

.mk-story-art .mk-bubble svg { width: 30px; height: 30px; }

.mk-story-art .mk-dots { height: 64px; }

.mk-story-art .mk-dots i { background: #fff; }

.mk-story-body { padding: 22px 24px 28px; }

.mk-story-meta { color: var(--mk-steel-dim); font-size: 13px; margin-bottom: 10px; }

.mk-story h3 { font-size: 21px; line-height: 1.3; }

/* Orchestrate: node diagram. Each node group carries its own edge, a
   travelling packet and a tip, so one :hover lights the whole path. */
.mk-nodes { width: 100%; height: auto; overflow: visible; }

.mk-node { outline: none; cursor: default; }

.mk-edge {
  fill: none;
  stroke: #ff9a3c;
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  animation: mk-flow 1.8s linear infinite;
  transition: stroke 0.25s, stroke-width 0.25s;
}

.mk-in .mk-edge { animation-direction: reverse; }

.mk-dot {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1.25);
}

.mk-halo-ring { fill: none; stroke: #ff6b13; stroke-width: 2; opacity: 0; transition: opacity 0.25s; }

.mk-tip { opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity 0.2s, transform 0.2s; }

.mk-pkt { fill: #ff6b13; opacity: 0; offset-rotate: 0deg; }

.mk-n-c .mk-pkt { offset-path: path("M280 190 L120 90"); }
.mk-n-g .mk-pkt { offset-path: path("M280 190 L440 90"); }
.mk-n-pdf .mk-pkt { offset-path: path("M280 190 L280 60"); }
.mk-n-sds .mk-pkt { offset-path: path("M280 190 L80 200"); }
.mk-n-data .mk-pkt { offset-path: path("M280 190 L480 200"); }
.mk-n-war .mk-pkt { offset-path: path("M280 190 L140 320"); }
.mk-n-man .mk-pkt { offset-path: path("M280 190 L420 320"); }
.mk-n-mfst .mk-pkt { offset-path: path("M280 190 L280 330"); }

.mk-node:hover .mk-edge,
.mk-node:focus-visible .mk-edge,
.mk-nodes:has(.mk-hub:hover) .mk-edge,
.mk-nodes:has(.mk-hub:focus-visible) .mk-edge {
  stroke: #ff6b13;
  stroke-width: 3;
  stroke-dasharray: 7 7;
  animation-duration: 0.5s;
}

.mk-node:hover .mk-dot,
.mk-node:focus-visible .mk-dot,
.mk-nodes:has(.mk-hub:hover) .mk-dot,
.mk-nodes:has(.mk-hub:focus-visible) .mk-dot { transform: scale(1.12); }

.mk-node:hover .mk-halo-ring,
.mk-node:focus-visible .mk-halo-ring,
.mk-nodes:has(.mk-hub:hover) .mk-halo-ring,
.mk-nodes:has(.mk-hub:focus-visible) .mk-halo-ring { opacity: 1; }

.mk-node:hover .mk-tip,
.mk-node:focus-visible .mk-tip { opacity: 1; transform: none; }

.mk-node:hover .mk-pkt,
.mk-node:focus-visible .mk-pkt,
.mk-nodes:has(.mk-hub:hover) .mk-pkt,
.mk-nodes:has(.mk-hub:focus-visible) .mk-pkt { animation: mk-pkt-out 1.1s ease-in-out infinite; }

.mk-in:hover .mk-pkt,
.mk-in:focus-visible .mk-pkt,
.mk-nodes:has(.mk-hub:hover) .mk-in .mk-pkt,
.mk-nodes:has(.mk-hub:focus-visible) .mk-in .mk-pkt { animation-name: mk-pkt-in; }

@keyframes mk-flow { to { stroke-dashoffset: -14; } }

@keyframes mk-pkt-out {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes mk-pkt-in {
  0% { offset-distance: 100%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 0%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-edge, .mk-pkt { animation: none !important; }
  .mk-dot { transition: none; }
}

/* Teams: screenshot with floating panel */
.mk-shot { position: relative; padding: 0 60px 40px 0; }

.mk-shot > img {
  display: block;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(6, 17, 31, 0.22);
  border: 1px solid var(--mk-line);
}

.mk-float {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 250px;
  padding: 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(6, 17, 31, 0.22);
  border: 1px solid var(--mk-line);
  font-size: 12px;
}

.mk-float strong { display: block; font-size: 13px; letter-spacing: 0.04em; margin-bottom: 10px; }

.mk-float ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.mk-float li { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--mk-line); }

.mk-float li span:last-child { color: var(--mk-muted); }

.mk-float li.ok span:last-child { color: #1d7a3e; }

.mk-float li.src span:last-child { color: var(--mk-orange-deep); }

/* Footer */
.mk-footer {
  background: linear-gradient(180deg, var(--mk-navy) 0%, var(--mk-ink) 100%);
  color: var(--mk-steel);
  padding: 72px 0 40px;
}

.mk-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 56px;
}

.mk-footer-cta h2 { color: #fff; font-size: 30px; letter-spacing: -0.02em; }

.mk-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 2fr));
  gap: 40px;
  padding-bottom: 56px;
}

.mk-subscribe label { display: block; color: #fff; margin-bottom: 10px; font-size: 15px; }

.mk-subscribe input {
  width: 100%;
  max-width: 330px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #fff;
  color: var(--mk-text);
  font: inherit;
}

.mk-subscribe small { display: block; margin: 12px 0; color: var(--mk-steel-dim); font-size: 12px; max-width: 330px; }

.mk-subscribe small a { color: var(--mk-steel); }

.mk-subscribe button {
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}

.mk-footer-col h4 { color: var(--mk-steel-dim); font-weight: 500; font-size: 15px; margin-bottom: 14px; }

.mk-footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.mk-footer-col a { color: #fff; text-decoration: none; font-size: 15px; }

.mk-footer-col a:hover { text-decoration: underline; }

.mk-footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
}

.mk-legal { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }

.mk-legal a { color: var(--mk-steel-dim); text-decoration: none; }

.mk-legal a:hover { color: #fff; text-decoration: underline; }

.mk-social { display: flex; gap: 14px; }

.mk-social a { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; }

.mk-social svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 1000px) {
  .mk-menu { display: none; }
  .mk-nav-actions .mk-text { display: none; }
  .mk-hero-grid, .mk-panel, .mk-split, .mk-split.rev { grid-template-columns: 1fr; }
  .mk-hero { padding: 48px 0 32px; }
  .mk-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-cards, .mk-stories { grid-template-columns: 1fr; }
  .mk-tablist { flex-wrap: wrap; justify-content: center; }
  .mk-tablist label { flex: 0 0 auto; }
  .mk-badges { justify-content: flex-start; flex-wrap: wrap; }
  .mk-footer-grid { grid-template-columns: 1fr 1fr; }
  .mk-shot { padding-right: 0; }
  .mk-float { position: static; width: auto; margin-top: 16px; }
}

@media (max-width: 640px) {
  .mk-wrap { width: calc(100% - 32px); }
  .mk-stats ul, .mk-footer-grid { grid-template-columns: 1fr; }
  .mk-logos ul { justify-content: center; }
  .mk-nav-actions .mk-btn-outline { display: none; }
  .mk-flow > div { width: 96px; }
}

/* Hero animation (Jay, 2026-09-21 12:46): a cartoon phone getting its submittal
   documents inside the assistant. Pure CSS, plays once on page load and
   holds the finished screen (Jay, 12:56: no loop). Everything keys off the
   same 9s so the timeline reads as one scene: the ask pops, the assistant
   answers, three document cards fly in from off screen and land as rows, the
   done reply pops with a sparkle burst, then it all fades and starts over.
   Under reduced motion the finished state is shown, still. */
.mk-scene {
  --t: 9s;
  /* Where the phone sits relative to the scene centre, so the flying cards
     and the sparkle burst still land on its screen (laptop added 09-22). */
  --pdx: 185px;
  --pdy: 30px;
  position: relative;
  width: 600px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.mk-halo {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 19, 0.55), rgba(255, 107, 19, 0) 70%);
}

.mk-ring {
  position: absolute;
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 3px dashed rgba(255, 154, 60, 0.45);
}

.mk-phone {
  position: relative;
  width: 250px;
  height: 500px;
  border-radius: 40px;
  background: #06111f;
  border: 4px solid #0c2d4f;
  box-shadow: 0 0 0 4px #1c3d63, 12px 14px 0 #04111f, 0 40px 70px rgba(0, 0, 0, 0.55);
  transform: rotate(11deg);
  translate: var(--pdx) var(--pdy);
  animation: mk-bounce var(--t) ease-in-out 1 forwards;
  overflow: hidden;
  z-index: 2;
}

/* The laptop (Jay, 2026-09-22 15:33): the same chat in a desktop window, sat
   behind and to the left of the phone. Same cartoon shell as the phone: navy
   body, hard offset shadow. Both screens run the same timeline, so the ask,
   the rows and the done reply land together on both devices. */
.mk-laptop {
  position: absolute;
  left: 0;
  top: 11%;
  width: 70%;
  z-index: 1;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
}

.mk-laptop-lid {
  position: relative;
  aspect-ratio: 16 / 12;
  border-radius: 18px 18px 6px 6px;
  background: #06111f;
  border: 4px solid #0c2d4f;
  box-shadow: 0 0 0 4px #1c3d63, 12px 14px 0 #04111f;
  overflow: hidden;
}

.mk-laptop-cam {
  position: absolute;
  top: 7px;
  left: 50%;
  translate: -50% 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1c3d63;
  box-shadow: inset 0 0 0 2px #06111f;
  z-index: 3;
}

.mk-laptop-base {
  position: relative;
  margin: 0 -3.5%;
  height: 4.6%;
  min-height: 14px;
  border-radius: 4px 4px 16px 16px;
  background: linear-gradient(#1c3d63, #0c2d4f);
  border: 4px solid #0c2d4f;
  border-top-width: 3px;
  box-shadow: 0 0 0 4px #1c3d63, 12px 12px 0 #04111f;
}

.mk-laptop-base span {
  position: absolute;
  top: -3px;
  left: 50%;
  translate: -50% 0;
  width: 18%;
  height: 7px;
  border-radius: 0 0 8px 8px;
  background: #06111f;
}

/* The chat keeps to the left 72% of the window; the phone stands in front of
   the rest, so nothing that matters is ever behind it. Document rows run
   side by side, the way a wide window would lay them out. */
.mk-screen.mk-screen-lap {
  inset: 16px 10px 10px;
  border-radius: 8px;
  padding: 8px 28% 8px 12px;
  font-size: 12px;
  gap: 6px;
}

.mk-screen-lap .mk-bub { max-width: 86%; padding: 7px 10px; }
.mk-screen-lap .mk-docs { flex-direction: row; gap: 6px; }
.mk-screen-lap .mk-doc-row { flex: 1 1 0; min-width: 0; padding: 6px 8px; gap: 6px; font-size: 11px; }
.mk-screen-lap .mk-doc-row em { display: block; margin-left: 0; font-size: 9px; }
.mk-screen-lap .mk-doc-row > span + * { flex: 1; }
.mk-screen-lap .mk-doc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mk-screen-lap .mk-bub-done { max-width: 92%; }

.mk-winbar { display: flex; gap: 6px; margin-bottom: 2px; }
.mk-winbar i { width: 9px; height: 9px; border-radius: 50%; background: #d9d3c8; border: 1.5px solid #06111f; }
.mk-winbar i:first-child { background: #ff6b13; }

.mk-phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 20px;
  border-radius: 12px;
  background: #06111f;
  z-index: 3;
}

.mk-screen {
  position: absolute;
  inset: 8px;
  border-radius: 32px;
  background: linear-gradient(180deg, #f7f4ee, #ffffff);
  padding: 44px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  color: #15202b;
}

.mk-chat-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #55606c;
  margin-bottom: 4px;
}

.mk-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #1d7a3e; box-shadow: 0 0 0 3px rgba(29, 122, 62, 0.2); }

.mk-bub {
  padding: 9px 11px;
  border-radius: 14px;
  border: 2.5px solid #06111f;
  box-shadow: 3px 3px 0 #06111f;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: left bottom;
}

.mk-bub-you {
  align-self: flex-end;
  background: #ff6b13;
  color: #fff;
  font-weight: 600;
  border-bottom-right-radius: 4px;
  transform-origin: right bottom;
  animation: mk-pop var(--t) cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
}

.mk-bub-bot { background: #fff; border-bottom-left-radius: 4px; }

.mk-bub-bot-1 { animation: mk-pop var(--t) cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards; animation-delay: 1s; }

.mk-ellipsis i { font-style: normal; animation: mk-blink 1.2s steps(1) 4; }
.mk-ellipsis i:nth-child(2) { animation-delay: 0.2s; }
.mk-ellipsis i:nth-child(3) { animation-delay: 0.4s; }

.mk-docs { display: flex; flex-direction: column; gap: 6px; }

.mk-doc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #fff;
  border: 2.5px solid #06111f;
  box-shadow: 3px 3px 0 #06111f;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-16px);
  animation: mk-row var(--t) cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
}

.mk-doc-row em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; color: #1d7a3e; }
.mk-doc-row em.src { color: #cc4e00; }
.mk-doc-row-1 { animation-delay: 2.5s; }
.mk-doc-row-2 { animation-delay: 3.5s; }
.mk-doc-row-3 { animation-delay: 4.5s; }

.mk-doc-ico, .mk-fly-ico {
  display: inline-block;
  width: 16px;
  height: 20px;
  border: 2.5px solid #06111f;
  border-radius: 3px 6px 3px 3px;
  background: linear-gradient(#fff 0 30%, #ff9a3c 30% 45%, #fff 45% 60%, #cfc9bf 60% 68%, #fff 68% 82%, #cfc9bf 82% 90%, #fff 90%);
  flex: none;
}

.mk-bub-done {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffe9d6;
  font-weight: 600;
  animation: mk-pop var(--t) cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
  animation-delay: 5.3s;
}

.mk-check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1d7a3e;
  border: 2.5px solid #06111f;
  position: relative;
}

.mk-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Flying document cards, outside the phone, landing on the screen. */
.mk-fly {
  position: absolute;
  left: calc(50% + var(--pdx));
  top: calc(50% + var(--pdy));
  width: 150px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: #fff;
  border: 3px solid #06111f;
  box-shadow: 5px 5px 0 #06111f;
  font-weight: 800;
  font-size: 15px;
  color: #06111f;
  opacity: 0;
  z-index: 5;
  animation: mk-fly-in var(--t) cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

.mk-fly.src { background: #ffe9d6; }
.mk-fly .mk-fly-ico { width: 22px; height: 28px; border-width: 3px; }
.mk-fly-1 { --fx: 250px; --fy: -230px; --fr: 24deg; animation-delay: 1.3s; }
.mk-fly-2 { --fx: -270px; --fy: -120px; --fr: -28deg; animation-delay: 2.3s; }
.mk-fly-3 { --fx: 260px; --fy: 200px; --fr: 18deg; animation-delay: 3.3s; }

.mk-spark {
  position: absolute;
  left: calc(50% + var(--pdx));
  top: calc(50% + var(--pdy));
  width: 44px;
  height: 44px;
  background: #ff9a3c;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 10px rgba(255, 154, 60, 0.9));
  opacity: 0;
  z-index: 6;
  animation: mk-spark var(--t) ease-out 1 forwards;
  animation-delay: 5.3s;
}

/* The laptop's own burst. Its stars live inside .mk-laptop, so they follow
   the laptop at every width without a second set of scene offsets, and they
   sit in the laptop's stacking context, which puts them behind the phone
   where the two overlap. */
.mk-laptop .mk-spark {
  left: 50%;
  top: 46%;
}

.mk-spark-l1 { --sx: -300px; --sy: -230px; width: 56px; height: 56px; }
.mk-spark-l2 { --sx: 60px; --sy: -300px; width: 46px; height: 46px; background: #fff; }
.mk-spark-l3 { --sx: -350px; --sy: 90px; width: 66px; height: 66px; }
.mk-spark-l4 { --sx: -180px; --sy: 300px; width: 50px; height: 50px; background: #fff; }
.mk-spark-l5 { --sx: -60px; --sy: 330px; width: 40px; height: 40px; }

.mk-spark-1 { --sx: -300px; --sy: -260px; }
.mk-spark-2 { --sx: 310px; --sy: -300px; width: 62px; height: 62px; background: #fff; }
.mk-spark-3 { --sx: 350px; --sy: 50px; width: 52px; height: 52px; }
.mk-spark-4 { --sx: -340px; --sy: 130px; width: 70px; height: 70px; }
.mk-spark-5 { --sx: 190px; --sy: 340px; width: 56px; height: 56px; background: #fff; }
.mk-spark-6 { --sx: -160px; --sy: 350px; width: 48px; height: 48px; }

@keyframes mk-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes mk-bounce {
  0%, 57%, 63%, 100% { scale: 1; }
  59% { scale: 1.04 0.96; }
  61% { scale: 0.98 1.03; }
}

@keyframes mk-breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes mk-spin { to { transform: rotate(360deg); } }

@keyframes mk-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* pop: hidden until its delay, springs in over ~0.35s, then holds */
@keyframes mk-pop {
  0% { opacity: 0; transform: scale(0.6); }
  4%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes mk-row {
  0% { opacity: 0; transform: translateX(-16px) scale(0.9); }
  3% { opacity: 1; transform: translateX(0) scale(1.03); }
  5%, 100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* fly-in: appears off screen, swoops to the phone, shrinks into it, gone */
@keyframes mk-fly-in {
  0% { opacity: 0; transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) rotate(var(--fr)) scale(1.1); }
  1% { opacity: 1; }
  6% { transform: translate(calc(-50% + var(--fx) * 0.35), calc(-50% + var(--fy) * 0.35)) rotate(calc(var(--fr) * -0.5)) scale(1.2); }
  13% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(0.4); }
  14%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
}

@keyframes mk-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  2% { opacity: 1; }
  11% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.6) rotate(200deg); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-halo, .mk-ring, .mk-phone, .mk-bub, .mk-doc-row, .mk-ellipsis i { animation: none; }
  .mk-bub, .mk-doc-row { opacity: 1; transform: none; }
  .mk-fly, .mk-spark { display: none; }
}

@media (max-width: 1000px) {
  .mk-scene { --pdx: 140px; --pdy: 24px; width: 520px; margin: 24px auto 0; }
  .mk-phone { width: 210px; height: 420px; }
  .mk-screen { padding-top: 40px; font-size: 11px; }
  .mk-screen.mk-screen-lap { padding: 7px 28% 8px 10px; font-size: 10.5px; gap: 5px; }
  .mk-screen-lap .mk-bub { padding: 5px 8px; }
  .mk-screen-lap .mk-doc-row { padding: 5px 6px; font-size: 9.5px; gap: 5px; }
  .mk-screen-lap .mk-doc-row em { font-size: 8px; }
  .mk-screen-lap .mk-doc-ico { width: 13px; height: 16px; border-width: 2px; }
  .mk-screen-lap .mk-bub-done { max-width: 100%; }
  .mk-laptop-lid { aspect-ratio: 16 / 12.6; }
  .mk-winbar i { width: 7px; height: 7px; }
  .mk-fly { width: 112px; font-size: 12px; }
  .mk-fly-1 { --fx: 180px; --fy: -180px; }
  .mk-fly-2 { --fx: -190px; --fy: -100px; }
  .mk-fly-3 { --fx: 180px; --fy: 160px; }
  .mk-spark-l1 { --sx: -210px; --sy: -170px; }
  .mk-spark-l2 { --sx: 40px; --sy: -220px; }
  .mk-spark-l3 { --sx: -250px; --sy: 70px; }
  .mk-spark-l4 { --sx: -130px; --sy: 220px; }
  .mk-spark-l5 { --sx: -40px; --sy: 240px; }
}

/* Phone width: the scene is the column (358px at 390), so the phone shrinks
   and sits closer in, or its right edge leaves the viewport. Placed after
   the 1000px block on purpose: the base phone rules would win otherwise. */
@media (max-width: 640px) {
  .mk-scene { --pdx: 84px; --pdy: 16px; width: 420px; }
  .mk-laptop { width: 90%; top: 8%; }
  .mk-phone { width: 170px; height: 340px; border-radius: 30px; }
  .mk-screen { padding-top: 34px; font-size: 9px; gap: 5px; border-radius: 24px; }
  .mk-phone-notch { width: 60px; height: 14px; top: 9px; }
  .mk-screen.mk-screen-lap { padding: 6px 30% 7px 8px; font-size: 9px; gap: 4px; }
  .mk-screen-lap .mk-bub { padding: 4px 6px; }
  .mk-screen-lap .mk-doc-row { padding: 4px 5px; font-size: 8px; gap: 4px; }
  .mk-screen-lap .mk-doc-row em { display: none; }
  .mk-screen-lap .mk-doc-ico { width: 10px; height: 13px; border-width: 2px; }
  .mk-fly { width: 100px; font-size: 11px; }
  .mk-fly-1 { --fx: 150px; --fy: -160px; }
  .mk-fly-2 { --fx: -170px; --fy: -90px; }
  .mk-fly-3 { --fx: 150px; --fy: 140px; }
}

/* Sign up page (/link-signup, 2026-09-21): make.com's register layout, the
   form card on the left, the plan on the right. The card carries
   data-link-signup="waitlist" until subscriptions open; link.js reads it. */
.mk-signup { padding: 64px 0 96px; background: var(--mk-sand); }

.mk-signup-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

/* The marquee track is a fixed 5400px flex row; every ancestor between it and
   the grid needs min-width: 0 or the phone layout grows to the track. */
.mk-signup-grid > * { min-width: 0; }

.mk-logos-light .mk-marquee { min-width: 0; width: 100%; }

.mk-signup-card {
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-lg);
  padding: 44px 44px 36px;
  box-shadow: 0 30px 60px rgba(6, 17, 31, 0.08);
}

.mk-signup-card h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; margin: 6px 0 14px; }

.mk-signup-lead { color: var(--mk-muted); font-size: 16px; line-height: 1.55; margin: 0 0 18px; }

.mk-signup-soon {
  margin: 0 0 22px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--mk-grad-card);
  border: 1px solid rgba(255, 107, 19, 0.25);
  color: var(--mk-text);
  font-size: 14px;
  font-weight: 600;
}

.mk-signup-form { display: grid; gap: 18px; }

.mk-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }

.mk-field > span, .mk-field > legend { font-size: 14px; font-weight: 600; color: var(--mk-text); padding: 0; }

.mk-field input[type="email"], .mk-field input[type="text"], .mk-field input[type="tel"], .mk-field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #cfd6de;
  background: #fff;
  color: var(--mk-text);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Sign up details (2026-09-25): two fields per row on wide screens, a Terms box. */
.mk-signup-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .mk-signup-pair { grid-template-columns: 1fr; } }
.mk-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mk-text); }
.mk-terms input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--mk-orange); flex: none; }
.mk-terms a { color: var(--mk-text); }

.mk-field select:focus, .mk-field input:focus { outline: none; border-color: var(--mk-orange); box-shadow: 0 0 0 4px rgba(255, 107, 19, 0.15); }

.mk-choice { gap: 10px; }

.mk-choice > legend { margin-bottom: 8px; }

.mk-choice label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 14px;
  font-size: 15px;
  cursor: pointer;
}

.mk-choice input { accent-color: var(--mk-orange); width: 18px; height: 18px; margin: 0; }

.mk-signup-btn { width: 100%; justify-content: center; font-size: 16px; padding: 16px 24px; }

.mk-signup-alt { font-size: 13px; color: var(--mk-muted); margin: 0; }

.mk-signup-alt a { color: var(--mk-text); }

.mk-signup-note { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fff4ec; border: 1px solid rgba(255, 107, 19, 0.45); font-size: 14px; font-weight: 600; color: var(--mk-text); }

.mk-signup-alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mk-line); }

.mk-signup-side h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin: 8px 0 22px; }

.mk-plan { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }

.mk-plan li {
  position: relative;
  padding-left: 30px;
  color: var(--mk-muted);
  font-size: 15px;
  line-height: 1.55;
}

.mk-plan li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mk-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.mk-plan strong { color: var(--mk-text); }

.mk-plan-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }

.mk-plan-facts div { background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); padding: 14px 16px; }

.mk-plan-facts dt { font-size: 12px; color: var(--mk-muted); margin-bottom: 4px; }

.mk-plan-facts dd { margin: 0; font-size: 22px; }

/* The logo strip on a light background: chips get the hairline, the cue reads
   muted instead of steel. */
.mk-logos-light { padding: 24px 0 0; }

.mk-logos-light p { color: var(--mk-muted); text-align: left; }

.mk-logos-light .mk-marquee-track li { border: 1px solid var(--mk-line); }

@media (max-width: 1000px) {
  .mk-signup-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .mk-signup { padding: 40px 0 64px; }
  .mk-signup-card { padding: 28px 22px 24px; }
  .mk-signup-card h1 { font-size: 28px; }
  .mk-plan-facts { grid-template-columns: 1fr; }
}

/* Phone widths (2026-09-21): the nav button and the hero scene both ran past
   a 390px viewport (found while building /link-signup). */
@media (max-width: 640px) {
  .mk-nav { gap: 10px; }
  .mk-brand { margin-right: 6px; }
  .mk-brand-link { height: 32px; }
  .mk-brand-sub { height: 14px; }
  .mk-nav-actions .mk-btn-grad { padding: 10px 14px; font-size: 14px; }
}

@media (max-width: 460px) {
  .mk-hero-art { overflow: hidden; }
  .mk-scene { width: min(420px, 100%); }
}

/* Plans page (/link-pricing, 2026-09-21): make.com's pricing page. Hero with
   the billing toggle, five plan cards, a comparison table, the allowance
   pack band, questions. The cards show the allowance, never a price: prices
   appear at the Stripe checkout the buttons lead to. */
.mk-pricing-hero { padding: 72px 0 32px; background: var(--mk-sand); }

.mk-pricing-hero h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.025em; margin: 8px auto 16px; max-width: 16ch; }

.mk-pricing-hero .mk-sub { margin: 0 auto 22px; }

.mk-pricing-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 0 0 30px; padding: 0; list-style: none; color: var(--mk-text); font-size: 15px; font-weight: 500; }

.mk-pricing-points li::before { content: "\2713"; margin-right: 8px; color: var(--mk-orange); font-weight: 800; }

.mk-billing { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--mk-line); }

.mk-billing-btn {
  border: 0;
  background: none;
  color: var(--mk-muted);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
}

.mk-billing-btn[aria-pressed="true"] { background: var(--mk-navy); color: #fff; }

.mk-plans { padding: 32px 0 64px; background: var(--mk-sand); }

.mk-plan-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; }

.mk-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-lg);
  padding: 28px 22px 24px;
  min-width: 0;
}

.mk-plan-card--featured { border-color: var(--mk-orange); box-shadow: 0 24px 50px rgba(255, 107, 19, 0.16); }

.mk-plan-badge {
  position: absolute;
  top: -13px;
  left: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mk-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mk-plan-card h3 { font-size: 22px; margin: 0 0 8px; }

.mk-plan-tag { color: var(--mk-muted); font-size: 14px; line-height: 1.5; margin: 0 0 18px; min-height: 63px; }

.mk-plan-big { margin: 0 0 4px; display: flex; flex-direction: column; }

.mk-plan-big strong { font-size: 40px; line-height: 1; letter-spacing: -0.03em; }

.mk-plan-big span { color: var(--mk-muted); font-size: 13px; margin-top: 6px; }

.mk-plan-line { color: var(--mk-text); font-size: 13px; font-weight: 600; margin: 8px 0 18px; }

.mk-plan-cta { width: 100%; justify-content: center; margin-bottom: 20px; }

.mk-btn-outline-dark { border: 1.5px solid var(--mk-navy); color: var(--mk-navy); background: #fff; }

.mk-btn-outline-dark:hover { background: var(--mk-navy); color: #fff; }

.mk-plan-feats { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--mk-line); display: grid; gap: 10px; font-size: 14px; color: var(--mk-text); }

.mk-plan-feats li { position: relative; padding-left: 22px; line-height: 1.45; }

.mk-plan-feats li::before { content: "\2713"; position: absolute; left: 0; color: var(--mk-orange); font-weight: 800; }

.mk-plans-note { margin: 22px 0 0; text-align: center; color: var(--mk-muted); font-size: 14px; }

.mk-compare-section { padding-top: 72px; }

.mk-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mk-compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }

.mk-compare th, .mk-compare td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--mk-line); vertical-align: middle; }

.mk-compare thead th { font-size: 15px; font-weight: 700; color: var(--mk-text); border-bottom: 2px solid var(--mk-navy); }

.mk-compare thead th:first-child, .mk-compare tbody th[scope="row"] { text-align: left; }

.mk-compare tbody th[scope="row"] { font-weight: 500; color: var(--mk-text); width: 34%; }

.mk-compare-group th { text-align: left; padding-top: 28px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-orange-deep); border-bottom: 0; }

.mk-compare .y { color: var(--mk-orange); font-weight: 800; font-size: 16px; }

.mk-compare .n { color: #b8c0c9; }

.mk-addon-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.mk-addon-facts li { display: grid; gap: 4px; padding: 20px 22px; border-radius: var(--mk-radius); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }

.mk-addon-facts strong { font-size: 26px; color: #fff; }

.mk-addon-facts span { color: var(--mk-steel); font-size: 14px; }

.mk-faq-wrap { max-width: 820px; }

.mk-faq { border-top: 1px solid var(--mk-line); }

.mk-faq:last-of-type { border-bottom: 1px solid var(--mk-line); }

.mk-faq summary { cursor: pointer; padding: 18px 0; font-size: 17px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }

.mk-faq summary::-webkit-details-marker { display: none; }

.mk-faq summary::after { content: "+"; color: var(--mk-orange); font-size: 22px; line-height: 1; flex: none; }

.mk-faq[open] summary::after { content: "\2212"; }

.mk-faq p { margin: 0 0 20px; color: var(--mk-muted); line-height: 1.6; font-size: 15px; }

@media (max-width: 1100px) {
  .mk-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .mk-plan-grid { grid-template-columns: 1fr; }
  .mk-plan-tag { min-height: 0; }
  .mk-pricing-hero { padding: 44px 0 24px; }
}

/* Demo film (make.com's product video block): hero play link, a looping
   preview in a glowing frame with floating tags, and a dialog player. */
.mk-watch {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
  color: #fff; font-weight: 600; font-size: 16px; text-decoration: none;
}
.mk-watch em { font-style: normal; font-weight: 500; color: var(--mk-steel-dim); margin-left: 6px; }
.mk-watch-ring {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--mk-grad); box-shadow: 0 8px 24px rgba(255, 107, 19, 0.45);
  transition: transform 0.2s ease;
}
.mk-watch-ring svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.mk-watch-ring::after, .mk-demo-play::before, .mk-demo-play::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 154, 60, 0.7); animation: mk-pulse 2.2s ease-out infinite;
}
.mk-demo-play::after { animation-delay: 1.1s; }
.mk-watch:hover .mk-watch-ring { transform: scale(1.08); }
.mk-watch:focus-visible { outline: 2px solid var(--mk-orange-2); outline-offset: 6px; border-radius: 8px; }
@keyframes mk-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

.mk-demo-stage { position: relative; max-width: 980px; margin: 0 auto; }
.mk-demo-frame {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--mk-radius-lg); overflow: hidden; background: var(--mk-ink);
  box-shadow: 0 0 0 1.5px rgba(255, 154, 60, 0.4), 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 120px rgba(255, 107, 19, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mk-demo-frame:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px rgba(255, 154, 60, 0.7), 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 140px rgba(255, 107, 19, 0.32); }
.mk-demo-frame:focus-visible { outline: 3px solid var(--mk-orange-2); outline-offset: 6px; }
.mk-demo-loop { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.mk-demo-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 17, 31, 0.05) 30%, rgba(6, 17, 31, 0.55) 100%); }
.mk-demo-play {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  display: grid; place-items: center; border-radius: 50%; background: var(--mk-grad);
  box-shadow: 0 16px 40px rgba(255, 107, 19, 0.55); transition: transform 0.25s ease;
}
.mk-demo-play svg { width: 38px; height: 38px; fill: #fff; margin-left: 5px; }
.mk-demo-frame:hover .mk-demo-play { transform: scale(1.08); }
.mk-demo-time {
  position: absolute; left: 20px; bottom: 18px; padding: 6px 12px; border-radius: 999px;
  background: rgba(6, 17, 31, 0.75); color: #fff; font-size: 14px; font-weight: 600;
}
.mk-demo-tag {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px; background: #fff; color: var(--mk-text);
  font-size: 14px; white-space: nowrap; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  animation: mk-bob 5s ease-in-out infinite;
}
.mk-demo-tag::before {
  content: "\2713"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mk-grad); color: #fff; font-size: 12px; font-weight: 700;
}
.mk-demo-tag-1 { left: -56px; top: 14%; }
.mk-demo-tag-2 { right: -60px; top: 42%; animation-delay: -1.7s; }
.mk-demo-tag-3 { left: 8%; bottom: -22px; animation-delay: -3.3s; }
@keyframes mk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.mk-demo-actions { justify-content: center; margin-top: 56px; }

.mk-player { padding: 0; border: 0; background: transparent; width: min(1100px, 94vw); max-width: none; overflow: visible; }
.mk-player::backdrop { background: rgba(6, 17, 31, 0.85); backdrop-filter: blur(4px); }
.mk-player-box { position: relative; border-radius: 16px; background: #000; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.mk-player-video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 16px; }
.mk-player-close {
  position: absolute; right: 0; top: -56px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); cursor: pointer;
}
.mk-player-close svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.mk-player-close:hover { background: rgba(255, 255, 255, 0.26); }

@media (max-width: 1100px) {
  .mk-demo-tag-1 { left: -12px; }
  .mk-demo-tag-2 { right: -12px; }
}
@media (max-width: 700px) {
  .mk-demo-tag { display: none; }
  .mk-demo-play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .mk-demo-play svg { width: 28px; height: 28px; }
  .mk-demo-actions { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-watch-ring::after, .mk-demo-play::before, .mk-demo-play::after { display: none; }
  .mk-demo-tag { animation: none; }
  .mk-demo-frame, .mk-demo-frame:hover { transition: none; transform: none; }
}

/* Plans: the price leads each card (Jay locked the numbers 2026-09-23), the
   monthly document allowance sits under it as a chip. */
.mk-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.mk-plan-price strong { font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.mk-plan-price span { color: var(--mk-muted); font-size: 14px; }
.mk-plan-card .mk-plan-line { margin: 6px 0 14px; color: var(--mk-muted); font-weight: 500; }
.mk-plan-card .mk-plan-big {
  flex-direction: row; align-items: baseline; gap: 6px; margin: 0 0 18px;
  padding: 10px 12px; border-radius: 10px; background: var(--mk-sand);
}
.mk-plan-card .mk-plan-big strong { font-size: 20px; letter-spacing: -0.01em; }
.mk-plan-card .mk-plan-big span { margin-top: 0; }
.mk-plan-price strong { font-size: 38px; }
.mk-plan-price span, .mk-plan-card .mk-plan-big span { white-space: nowrap; }
.mk-plan-card .mk-plan-big { padding: 10px; }
.mk-plan-card .mk-plan-big strong { font-size: 18px; }
.mk-plan-card .mk-plan-big span { font-size: 12.5px; }
@media (min-width: 1100px) {
  .mk-plan-tag { min-height: 6.4em; }
}

/* Allowance packs: subscribers only (Jay, 2026-09-23). */
.mk-addon-note {
  margin: 0 0 24px; padding: 12px 16px; border-left: 3px solid var(--mk-orange);
  border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 15px;
}
.mk-billing-save {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(255, 107, 19, 0.14); color: var(--mk-orange-deep);
}
.mk-billing-btn[aria-pressed="true"] .mk-billing-save { background: var(--mk-grad); color: #fff; }

/* ---- /link-setup and /link-signup (Start free), 2026-09-23 ---- */
.lk-welcome {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 16px;
  border-radius: 999px; background: rgba(255, 154, 60, 0.14); border: 1px solid rgba(255, 154, 60, 0.4);
  color: #fff; font-size: 14px; font-weight: 600;
}
.lk-welcome-dot { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.2); flex: none; }

/* Drawn app window (the connector dialog), shared by the setup art. */
.lk-art { position: relative; margin: 0; padding: 36px 48px 56px 0; }
.lk-art::before {
  content: ""; position: absolute; inset: 8% 6% 10% 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 107, 19, 0.35), transparent); filter: blur(10px);
}
.lk-art-light::before { background: radial-gradient(closest-side, rgba(255, 107, 19, 0.18), transparent); }
.lk-win {
  position: relative; max-width: 440px; margin-left: auto; border-radius: 16px; background: #fff; color: var(--mk-text);
  box-shadow: 0 0 0 1.5px rgba(255, 154, 60, 0.4), 0 30px 70px rgba(6, 17, 31, 0.35); overflow: hidden;
  transform: rotate(-2deg);
}
.lk-art-light .lk-win { transform: rotate(2deg); box-shadow: 0 0 0 1px var(--mk-line), 0 24px 60px rgba(6, 17, 31, 0.14); }
.lk-win .mk-winbar { padding: 10px 14px; background: var(--mk-sand); border-bottom: 1px solid var(--mk-line); }
.lk-win-body { padding: 20px 22px 22px; }
.lk-win-title { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.lk-win-label { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--mk-muted); }
.lk-win-field { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--mk-line); border-radius: 8px; font-size: 14px; }
.lk-win-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; border-color: var(--mk-orange); box-shadow: 0 0 0 3px rgba(255, 107, 19, 0.15); overflow-wrap: anywhere; }
.lk-win-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.lk-win-actions span { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.lk-win-cancel { color: var(--mk-muted); }
.lk-win-add { background: var(--mk-grad); color: #fff; }
.lk-row { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--mk-line); border-radius: 10px; font-size: 14px; font-weight: 600; }
.lk-row span:last-child { display: flex; flex: 1; justify-content: space-between; }
.lk-row em { font-style: normal; font-size: 12px; color: #1f9d55; }
.lk-row-dim { color: var(--mk-muted); font-weight: 500; }
.lk-row-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--mk-sand); flex: none; }
.lk-row-ico-link { background: var(--mk-grad); }
.lk-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 12px; background: #fff; color: var(--mk-text); font-size: 13px; font-weight: 600;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); animation: mk-bob 5s ease-in-out infinite; white-space: nowrap;
}
.lk-chip-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--mk-grad); }
.lk-chip-1 { left: -8px; bottom: 18px; }
.lk-chip-2 { right: 8px; top: 0; animation-delay: -2.5s; }

/* The connector address, copyable. */
.lk-address { padding: 0; margin-top: -44px; position: relative; z-index: 3; }
.lk-address-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center;
  padding: 28px 32px; border-radius: var(--mk-radius-lg); background: #fff;
  box-shadow: 0 0 0 1px var(--mk-line), 0 24px 60px rgba(6, 17, 31, 0.12);
}
.lk-address-card h2 { font-size: 24px; margin: 0 0 6px; letter-spacing: -0.01em; }
.lk-address-card p { margin: 0; color: var(--mk-muted); }
.lk-copy {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 12px;
  background: var(--mk-ink); border: 1px solid rgba(255, 154, 60, 0.4);
}
.lk-copy code { flex: 1; min-width: 0; color: #fff; font-size: 15px; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lk-copy-btn { padding: 10px 18px; flex: none; }
.lk-copy-light { flex-wrap: wrap; margin: 0 0 20px; }
.lk-copy-label { width: 100%; color: var(--mk-steel-dim); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

/* Steps */
.lk-steps { counter-reset: lk; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; }
.lk-steps li { counter-increment: lk; position: relative; padding-left: 52px; color: var(--mk-muted); font-size: 16px; line-height: 1.5; }
.lk-steps li strong { color: var(--mk-text); }
.lk-steps li::before {
  content: counter(lk); position: absolute; left: 0; top: -4px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mk-grad); color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 20px rgba(255, 107, 19, 0.35);
}
.lk-steps-compact { gap: 14px; margin: 0 0 22px; }
.lk-steps-compact li { font-size: 15px; padding-left: 44px; }
.lk-steps-compact li::before { width: 30px; height: 30px; font-size: 13px; top: -3px; }
.lk-sand { background: var(--mk-sand); }

/* Tabs on the Start free card */
.lk-tablist { display: inline-flex; padding: 4px; margin-bottom: 18px; border-radius: 999px; border: 1px solid var(--mk-line); background: var(--mk-sand); }
.lk-tablist button { border: 0; background: none; padding: 9px 20px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 14px; color: var(--mk-muted); cursor: pointer; }
.lk-tablist button[aria-selected="true"] { background: var(--mk-navy); color: #fff; }
.lk-tablist button:focus-visible { outline: 2px solid var(--mk-orange); outline-offset: 2px; }
.mk-signup-card .mk-signup-btn { margin-bottom: 16px; }

/* First requests */
.lk-prompts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.lk-prompt {
  display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--mk-radius-lg);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.lk-prompt p { flex: 1; margin: 0; color: #fff; font-size: 17px; line-height: 1.45; }
.lk-prompt-tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(61, 220, 132, 0.16); color: #7ff0b0; }
.lk-prompt-tag-build { background: rgba(255, 154, 60, 0.18); color: var(--mk-orange-2); }
.lk-prompt-copy { align-self: flex-start; border: 1px solid rgba(255, 255, 255, 0.3); background: none; color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.lk-prompt-copy:hover { background: rgba(255, 255, 255, 0.1); }
.lk-try-note { margin: 32px auto 0; max-width: 640px; color: var(--mk-steel); font-size: 15px; }

/* Manage cards */
.lk-card-link { display: inline-block; margin-top: 14px; color: var(--mk-orange-deep); font-weight: 700; text-decoration: none; }
.lk-card-link::after { content: " \2192"; }
.lk-card-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .lk-address-card { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .lk-prompts { grid-template-columns: 1fr; }
  .lk-art { padding: 24px 12px 48px; }
  .lk-win { margin: 0 auto; }
}
@media (max-width: 520px) {
  .lk-chip { font-size: 12px; padding: 8px 10px; }
  .lk-chip-1 { left: 0; }
  .lk-chip-2 { right: 0; }
  .lk-copy { flex-wrap: wrap; }
  .lk-copy-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-chip { animation: none; }
}
.lk-steps[hidden] { display: none; }

/* Start free form: sent state (2026-09-23 15:45) */
.lk-optional { font-style: normal; font-weight: 500; color: var(--mk-muted); margin-left: 6px; font-size: 12px; }
.lk-sent { padding: 24px; margin-bottom: 8px; border-radius: 14px; background: var(--mk-sand); border: 1px solid var(--mk-line); }
.lk-sent h2 { font-size: 22px; margin: 12px 0 8px; }
.lk-sent p { margin: 0 0 8px; color: var(--mk-muted); }
.lk-sent strong { color: var(--mk-text); overflow-wrap: anywhere; }
.lk-sent-ico { display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--mk-grad); box-shadow: 0 10px 24px rgba(255, 107, 19, 0.35); position: relative; }
.lk-sent-ico::after { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 20px; }
.lk-sent-small { font-size: 14px; }
.lk-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--mk-orange-deep); font-weight: 600; text-decoration: underline; cursor: pointer; }
.mk-nav-actions .mk-signin { white-space: nowrap; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; padding: 0 6px; }
.mk-nav-actions .mk-signin:hover { color: var(--mk-orange-2); }
@media (max-width: 520px) { .mk-nav-actions .mk-signin { font-size: 14px; padding: 0 2px; } }
.mk-signup-form[hidden], .lk-sent[hidden] { display: none; }

/* Link partners page, /link-partners (Jay, 2026-09-24 09:53) */
.lp-art { position: relative; padding: 40px 24px 56px; }
.lp-halo { position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 107, 19, 0.45) 0%, rgba(255, 154, 60, 0.12) 45%, transparent 70%); filter: blur(10px); }
.lp-win { position: relative; width: min(100%, 440px); padding: 14px 18px 20px; border-radius: var(--mk-radius-lg); background: #fff; color: var(--mk-text); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08); text-align: left; }
.lp-bar { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; font-size: 12px; font-weight: 600; color: var(--mk-muted); }
.lp-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); }
.lp-bub { max-width: 88%; margin-bottom: 10px; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.lp-you { margin-left: auto; background: var(--mk-navy); color: #fff; border-bottom-right-radius: 4px; }
.lp-bot { background: var(--mk-sand); border-bottom-left-radius: 4px; }
.lp-docs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.lp-docs li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--mk-line); border-radius: 10px; }
.lp-ico { flex: none; width: 28px; height: 34px; border-radius: 4px; background: var(--mk-grad); }
.lp-doc { flex: 1; min-width: 0; display: grid; }
.lp-doc b { font-size: 14px; }
.lp-doc small { font-size: 12px; color: var(--mk-muted); }
.lp-docs em { font-style: normal; font-size: 12px; font-weight: 700; color: #15803d; }
.lp-chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--mk-ink); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3); animation: lp-float 6s ease-in-out infinite; }
.lp-chip span { width: 10px; height: 10px; border-radius: 50%; background: var(--mk-grad); }
.lp-chip-2 { bottom: 16px; left: 0; animation-delay: -3s; }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.lp-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.lp-path { padding: 24px; border-radius: var(--mk-radius-lg); border: 1px solid var(--mk-line); background: var(--mk-sand); }
.lp-path-link { background: var(--mk-ink); color: #fff; border-color: transparent; box-shadow: 0 24px 48px rgba(255, 107, 19, 0.25); }
.lp-path-label { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-muted); }
.lp-path-link .lp-path-label { color: var(--mk-orange-2); }
.lp-path ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; }
.lp-path:not(.lp-path-link) li { color: var(--mk-muted); }
.lp-path-link li { font-weight: 600; }

.lp-steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: left; counter-reset: none; }
.lp-steps li { padding: 28px 24px; border-radius: var(--mk-radius-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.lp-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mk-grad); color: #fff; font-weight: 700; }
.lp-steps h3 { margin: 18px 0 8px; font-size: 19px; color: #fff; }
.lp-steps p { margin: 0; color: var(--mk-steel); font-size: 15px; }

/* Link affiliates: the program rules (2026-09-25). Numbered, one per row, FAQ hairlines. */
.lp-rules { margin: 32px 0 0; padding: 0; list-style: none; counter-reset: rule; }
.lp-rules li { counter-increment: rule; display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--mk-line); color: var(--mk-muted); line-height: 1.6; font-size: 15px; }
.lp-rules li:last-child { border-bottom: 1px solid var(--mk-line); }
.lp-rules li::before { content: counter(rule); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mk-orange); color: #fff; font-weight: 700; font-size: 14px; }
#earn .mk-cards + p { margin: 28px auto 0; max-width: 640px; color: var(--mk-muted); }

@media (max-width: 1000px) {
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lp-paths, .lp-steps { grid-template-columns: 1fr; }
  .lp-art { padding: 48px 0 56px; }
  .lp-chip { font-size: 12px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-chip { animation: none; }
}

/* Link technology partners page, /link-integrations (Jay, 2026-09-24 10:19) */
.li-term { position: relative; width: min(100%, 480px); padding: 14px 18px 20px; border-radius: var(--mk-radius-lg); background: var(--mk-ink); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); text-align: left; }
.li-code { margin-top: 12px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; color: var(--mk-steel); }
.li-code p { margin: 0 0 4px; overflow-wrap: anywhere; }
.li-code b { color: #fff; font-weight: 600; }
.li-arg { padding-left: 46px; color: var(--mk-steel-dim); }
.li-dir { display: inline-block; min-width: 40px; color: var(--mk-orange-2); font-weight: 700; }
.li-back { color: #4ade80; }
.li-ok { color: #4ade80; font-weight: 700; }
.li-tools { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; text-align: left; }
.li-tools li { padding: 28px; border-radius: var(--mk-radius-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.li-tools code { display: inline-block; padding: 6px 12px; border-radius: 8px; background: var(--mk-grad); color: #fff; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; }
.li-tools p { margin: 14px 0 0; color: var(--mk-steel); font-size: 15px; }
.li-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.li-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: var(--mk-radius-lg); border: 1px solid var(--mk-line); background: var(--mk-sand); }
.li-steps .lp-num { flex: none; }
.li-steps h3 { margin: 6px 0 4px; font-size: 18px; }
.li-steps p { margin: 0; color: var(--mk-muted); font-size: 15px; }
@media (max-width: 640px) {
  .li-tools { grid-template-columns: 1fr; }
  .li-code { font-size: 12px; }
  .li-arg { padding-left: 16px; }
}