/* Product-style mock components that replace the drawn art: real HTML, theme-aware, no numbers that could pass for real figures. */

.mk-win { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.mk-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mk-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mk-bar b { margin-left: 8px; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.mk-body { padding: clamp(16px, 3vw, 32px); }

.mk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk-card.is-main { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mk-head { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
.mk-sub { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.mk-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); }
.mk-ico svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-main .mk-ico { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* grey bars stand in for values: nothing here claims a number */
.mk-sk { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 11%, transparent); }
.mk-sk.g { background: var(--accent); }
.w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w90 { width: 90%; } .w100 { width: 100%; }

.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.78rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.mk-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-chip.g { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; font-size: 0.875rem; color: var(--muted); }
.mk-row > .mk-sk { flex: none; }
.mk-row.total { margin-inline: -16px; padding: 12px 16px 0; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.mk-name { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.mk-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-toggle { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.mk-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.mk-state { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.8rem; }

/* the sponsor-money flow */
.mk-flow { display: grid; grid-template-columns: minmax(0, 1fr) clamp(48px, 8vw, 96px) minmax(0, 1.25fr); align-items: stretch; }
.mk-flow > .mk-card:first-child { align-self: center; }
.mk-split { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.mk-wires { display: block; width: 100%; height: 100%; color: var(--muted); }
.mk-wires path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mk-wires .main { stroke: var(--accent); stroke-width: 3; }
@media (max-width: 720px) {
  .mk-flow { grid-template-columns: 1fr; gap: 16px; }
  .mk-wires { display: none; }
  .mk-flow > .mk-card:first-child { align-self: stretch; }
}

/* small cards that sit above a short heading and text */
.mk-tile, .mk-box { width: 100%; max-width: 340px; margin: 0 auto 24px; text-align: left; }
.mk-tile .mk-card, .mk-box .mk-card { padding: 16px; box-shadow: var(--shadow); }
.fact .mk-tile { max-width: none; }
.mk-tile .mk-note, .mk-box .mk-note { margin: 0; color: var(--muted); font-size: 0.78rem; }

.fact .mk-card { height: 168px; justify-content: center; }
.keep-list .mk-card { height: 136px; justify-content: center; }
@media (max-width: 720px) { .mk-split { grid-template-rows: auto; } }

/* ---------- small additions for the new components ---------- */
.mk-sw { display: inline-grid; justify-items: end; }
.mk-sw b { grid-area: 1 / 1; font-weight: 500; }
.mk-sw .on { opacity: 0; color: var(--accent-text); }
.mk-line { position: relative; flex: 1 1 auto; height: 2px; min-width: 24px; border-radius: 2px; background: var(--line); }
.mk-line i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); }
.mk-pay { gap: 10px; }
.mk-line::after { content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }
.mk-meter { display: block; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.mk-meter i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; }
.mk-eye .slash, .mk-ico .slash { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------- motion: plays once when the component scrolls into view ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .mk-anim .mk-card,
  .js .mk-anim .mk-wires,
  .js .mk-anim .mk-sk,
  .js .mk-anim .mk-chip,
  .js .mk-anim .mk-row { transition: opacity 0.55s cubic-bezier(.2, .7, .2, 1), transform 0.55s cubic-bezier(.2, .7, .2, 1), clip-path 0.9s cubic-bezier(.4, 0, .2, 1), background-color 0.4s; }

  /* money flow */
  .js .mk-win:not(.in) .mk-card { opacity: 0; transform: translateY(10px); }
  .js .mk-win:not(.in) .mk-wires { clip-path: inset(0 100% 0 0); }
  .js .mk-win .mk-wires { clip-path: inset(0 0 0 0); transition-delay: 0.45s; }
  .js .mk-win .mk-cost { transition-delay: 1.2s; }
  .js .mk-win .mk-prof { transition-delay: 1.45s; }
  .js .mk-win:not(.in) .mk-src .mk-sk, .js .mk-win:not(.in) .mk-prof .mk-sk { transform: scaleX(0); }
  .js .mk-win .mk-sk { transform-origin: left; transition-delay: 0.25s; }
  .js .mk-win .mk-prof .mk-sk { transition-duration: 1.1s; transition-delay: 1.7s; }
  .js .mk-win:not(.in) .mk-chip { opacity: 0; transform: scale(0.9); }
  .js .mk-win .mk-cost .mk-chip:nth-child(1) { transition-delay: 1.5s; }
  .js .mk-win .mk-cost .mk-chip:nth-child(2) { transition-delay: 1.6s; }
  .js .mk-win .mk-cost .mk-chip:nth-child(3) { transition-delay: 1.7s; }
  .js .mk-win .mk-cost .mk-chip:nth-child(4) { transition-delay: 1.8s; }
  .js .mk-win .mk-prof .mk-chip { transition-delay: 2.5s; }

  /* tiles: rows arrive one after the other, bars fill */
  .js .mk-tile:not(.in) .mk-card { opacity: 0; transform: translateY(10px); }
  .js .mk-tile:not(.in) .mk-card > * { opacity: 0; transform: translateY(6px); }
  .js .mk-tile .mk-card > * { transition: opacity 0.5s cubic-bezier(.2, .7, .2, 1), transform 0.5s cubic-bezier(.2, .7, .2, 1); }
  .js .mk-tile .mk-card > :nth-child(1) { transition-delay: 0.2s; }
  .js .mk-tile .mk-card > :nth-child(2) { transition-delay: 0.4s; }
  .js .mk-tile .mk-card > :nth-child(3) { transition-delay: 0.6s; }
  .js .mk-tile:not(.in) .mk-sk { transform: scaleX(0); }
  .js .mk-tile .mk-sk { transform-origin: right; transition: transform 0.8s cubic-bezier(.2, .7, .2, 1); transition-delay: 0.5s; }
  .js .mk-tile .mk-row:nth-child(2) .mk-sk { transition-delay: 0.7s; }
  .js .mk-tile .mk-row:nth-child(3) .mk-sk { transition-delay: 0.9s; }
  .js .mk-tile .mk-row.total .mk-sk { transition-duration: 1s; transition-delay: 1.1s; }

  /* payment: a dot travels from Ferndrop to the planting partner */
  .js .mk-tile.in .mk-line i { animation: mk-send 2.4s cubic-bezier(.5, 0, .2, 1) 0.8s infinite; }
  .js .mk-tile:not(.in) .mk-line i { opacity: 0; }
  @keyframes mk-send { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }

  /* toggles start on and switch off, one after the other */
  .mk-toggle, .mk-toggle::after { transition: background-color 0.4s, left 0.4s cubic-bezier(.3, .7, .3, 1); }
  .js .mk-tile:not(.in) .mk-toggle { background: var(--accent); }
  .js .mk-tile:not(.in) .mk-toggle::after { left: 14px; }
  .js .mk-tile:not(.in) .mk-sw .on { opacity: 1; }
  .js .mk-tile:not(.in) .mk-sw .off { opacity: 0; }
  .mk-sw b { transition: opacity 0.3s; }
  .js .mk-tile .mk-row:nth-child(1) .mk-toggle, .js .mk-tile .mk-row:nth-child(1) .mk-sw b, .js .mk-tile .mk-row:nth-child(1) .mk-toggle::after { transition-delay: 0.9s; }
  .js .mk-tile .mk-row:nth-child(2) .mk-toggle, .js .mk-tile .mk-row:nth-child(2) .mk-sw b, .js .mk-tile .mk-row:nth-child(2) .mk-toggle::after { transition-delay: 1.25s; }
  .js .mk-tile .mk-row:nth-child(3) .mk-toggle, .js .mk-tile .mk-row:nth-child(3) .mk-sw b, .js .mk-tile .mk-row:nth-child(3) .mk-toggle::after { transition-delay: 1.6s; }

  /* a file counts down and is gone */
  .js .mk-tile.in .mk-meter i { animation: mk-drain 2.6s linear 0.8s forwards; }
  .js .mk-tile .mk-gone { transition: opacity 0.6s 3.4s; }
  .js .mk-tile.in .mk-gone { opacity: 0.35; }
  @keyframes mk-drain { to { transform: scaleX(0); } }

  /* the address is swapped for a code */
  .js .mk-tile .mk-addr .mk-chip { transition: opacity 0.6s 1.4s, text-decoration-color 0.6s 1.4s; text-decoration: line-through; text-decoration-color: transparent; }
  .js .mk-tile.in .mk-addr .mk-chip { opacity: 0.45; text-decoration-color: currentColor; }
  .js .mk-tile:not(.in) .mk-hash .mk-chip { filter: blur(6px); }
  .js .mk-tile .mk-hash .mk-chip { transition: opacity 0.5s 1.2s, filter 0.7s 1.2s, transform 0.5s 1.2s; }

  /* the eye is struck out */
  .js .mk-tile:not(.in) .mk-ico .slash { stroke-dashoffset: 1; }
  .mk-ico .slash { transition: stroke-dashoffset 0.7s ease 0.6s; }
}

/* ---------- the two ways to send: the real screens, simplified ---------- */
.sec.tint .mk-win { background: var(--bg); }
.fig .mk-win { margin-bottom: 24px; }
.fig .mk-body { display: flex; align-items: center; justify-content: center; min-height: 236px; }
.mk-app .mk-card { width: 100%; max-width: 380px; margin-inline: auto; }
.mk-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink); font-size: 0.85rem; }
.mk-field > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 64px; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.8rem; font-weight: 600; }
.mk-btn svg { width: 12px; height: 12px; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mk-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mk-st { justify-items: start; }
.mk-st b, .mk-copy b { font-weight: inherit; }
.mk-st .a { opacity: 0; }
.mk-copy { display: inline-grid; }
.mk-copy b { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; }
.mk-copy .a { opacity: 0; }
.mk-stage { display: grid; }
.mk-stage > * { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; min-height: 82px; }
.mk-l1 { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* direct: waiting, then connected and sending */
  .js .mk-loop.live .mk-st .a { animation: mk-wait 9s linear infinite; }
  .js .mk-loop.live .mk-st .b { animation: mk-go 9s linear infinite; }
  .js .mk-loop.live .mk-send i { animation: mk-sendfill 9s ease-in-out infinite; }
  .js #fig1 .mk-loop.live .mk-dot { animation: mk-blink 9s linear infinite; }
  @keyframes mk-wait { 0%, 30% { opacity: 1; } 34%, 99% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes mk-go { 0%, 30% { opacity: 0; } 34%, 96% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes mk-sendfill { 0%, 32% { transform: scaleX(0); } 90% { transform: scaleX(1); } 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  @keyframes mk-blink { 0%, 100% { opacity: 1; } 8%, 24% { opacity: 0.25; } 16% { opacity: 1; } 34% { opacity: 1; } }
  /* link: upload, then the link appears and is copied */
  .js .mk-loop.live .mk-l1 { animation: mk-l1 10s ease-in-out infinite; }
  .js .mk-loop.live .mk-l2 { animation: mk-l2 10s ease-in-out infinite; }
  .js .mk-loop.live .mk-up i { animation: mk-upfill 10s ease-in-out infinite; }
  .js .mk-loop.live .mk-copy .a { animation: mk-ca 10s linear infinite; }
  .js .mk-loop.live .mk-copy .b { animation: mk-cb 10s linear infinite; }
  @keyframes mk-l1 { 0% { opacity: 0; } 4%, 36% { opacity: 1; } 42%, 100% { opacity: 0; } }
  @keyframes mk-l2 { 0%, 40% { opacity: 0; transform: translateY(6px); } 48%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes mk-upfill { 0%, 6% { transform: scaleX(0); } 34%, 100% { transform: scaleX(1); } }
  @keyframes mk-ca { 0%, 70% { opacity: 1; } 72%, 94% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes mk-cb { 0%, 70% { opacity: 0; } 72%, 94% { opacity: 1; } 100% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .mk-l1 { display: none; }
  .mk-st .a { display: none; }
  .mk-st .b, .mk-copy .a { opacity: 1; }
  .mk-copy .a { display: none; }
  .mk-copy .b { opacity: 1; }
}

/* ---------- why Ferndrop ---------- */
@media (min-width: 1000px) { .why-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-strike span:last-child { text-decoration: line-through; text-decoration-color: currentColor; }
.mk-pay .mk-lane { flex: 1 1 auto; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .mk-strike span:last-child { transition: text-decoration-color 0.4s 1s, opacity 0.5s 1s; }
  .js .mk-tile:not(.in) .mk-strike span:last-child { text-decoration-color: transparent; }
  .js .mk-tile.in .mk-strike span:last-child { opacity: 0.5; }
  .js .mk-tile.in .mk-lane i { animation: mk-hop 1.8s linear 1s infinite; }
  .js .mk-tile.in .mk-lane i:nth-child(2) { animation-delay: 1.6s; }
  .js .mk-tile.in .mk-lane i:nth-child(3) { animation-delay: 2.2s; }
}

/* ---------- what we keep: still and neutral until you hover a card ---------- */
.mk-hov .mk-chip.g { color: var(--muted); border-color: var(--line); background: var(--surface); transition: color 0.35s, border-color 0.35s, background-color 0.35s; }
.mk-hov .mk-ico { transition: color 0.35s, border-color 0.35s, background-color 0.35s; }
.keep-list li:hover .mk-hov .mk-chip.g { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.keep-list li:hover .mk-hov .mk-ico { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mk-hov .mk-meter i { background: color-mix(in srgb, var(--ink) 30%, transparent); transition: background-color 0.35s; }
.keep-list li:hover .mk-hov .mk-meter i { background: var(--accent); }
.mk-hov .mk-toggle { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.mk-hov .mk-sw .on { color: var(--accent-text); }
.mk-hov .mk-addr .mk-chip { text-decoration: line-through; text-decoration-color: transparent; transition: opacity 0.5s, text-decoration-color 0.5s; }
.keep-list li:hover .mk-hov .mk-addr .mk-chip { opacity: 0.45; text-decoration-color: currentColor; transition-delay: 0.5s; }

@media (prefers-reduced-motion: no-preference) {
  /* the file counts down and is gone */
  .keep-list li:hover .mk-hov .mk-meter i { animation: mk-drain 2.4s linear forwards; }
  .keep-list li:hover .mk-hov .mk-gone { animation: mk-dim 2.4s ease-in forwards; }
  @keyframes mk-dim { 0%, 80% { opacity: 1; } 100% { opacity: 0.35; } }
  /* switches go from on to off, one after another */
  .keep-list li:hover .mk-hov .mk-toggle { animation: mk-tog 0.45s ease backwards; }
  .keep-list li:hover .mk-hov .mk-toggle::after { animation: mk-knob 0.45s cubic-bezier(.3, .7, .3, 1) backwards; }
  .keep-list li:hover .mk-hov .mk-sw .on { animation: mk-swon 0.45s linear backwards; }
  .keep-list li:hover .mk-hov .mk-sw .off { animation: mk-swoff 0.45s linear backwards; }
  .keep-list li:hover .mk-hov .mk-row:nth-child(1) :is(.mk-toggle, .mk-toggle::after, .mk-sw b) { animation-delay: 0.15s; }
  .keep-list li:hover .mk-hov .mk-row:nth-child(2) :is(.mk-toggle, .mk-toggle::after, .mk-sw b) { animation-delay: 0.55s; }
  .keep-list li:hover .mk-hov .mk-row:nth-child(3) :is(.mk-toggle, .mk-toggle::after, .mk-sw b) { animation-delay: 0.95s; }
  @keyframes mk-tog { from { background-color: var(--accent); } }
  @keyframes mk-knob { from { left: 14px; } }
  @keyframes mk-swon { from { opacity: 1; } }
  @keyframes mk-swoff { from { opacity: 0; } }
  /* the code fades in */
  .keep-list li:hover .mk-hov .mk-hash .mk-chip { animation: mk-unblur 0.9s ease 0.5s backwards; }
  @keyframes mk-unblur { from { filter: blur(6px); opacity: 0; } }
  /* the eye is struck out */
  .keep-list li:hover .mk-hov .mk-ico .slash { animation: mk-draw 0.7s ease 0.15s backwards; }
  @keyframes mk-draw { from { stroke-dashoffset: 1; } }
}

/* the travelling dots used by the "Big files, directly" card */
.mk-lane { position: relative; height: 2px; margin: 0 6px; border-radius: 2px; background: var(--line); }
.mk-lane i { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes mk-hop { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
}