/* MirroAPI site kit — one design system for every page built after 2026-09-21.
 *
 * Order: tokens → base → layout → buttons → navigation → footer → components → frames → scenes.
 * Rules of the kit:
 *   · Every colour is a token. A scene takes its firm colour from --brand / --on-brand only.
 *   · Motion is calm and exact: ease-out, 260 ms or less, colour / opacity / shadow. Nothing lifts, springs, sweeps or tilts.
 *   · A stage never moves. Only light, colour and numbers change inside it.
 *   · Product scenes are HTML, sized in em from the frame's own width (cqw), so they are sharp at every size.
 */

@font-face { font-family: "Sora Variable"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/sora-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Mona Sans Variable"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/mona-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); }

:root {
  /* brand */
  --lime: #b7ff00; --lime-bright: #c9ff3f; --lime-deep: #a3e600; --lime-ink: #3f6a06; --lime-soft: #f2fbd9; --lime-line: #cfe99a;
  /* paper surface */
  --bg: #ffffff; --bg-soft: #f5f7f5; --bg-sunk: #eceff0;
  --ink: #101613; --ink-2: #3c4541; --ink-3: #5d6763; --ink-4: #8a938f;
  --line: #e3e8e5; --line-strong: #c9d0cb;
  /* deck surface (the dark bands) */
  --deck: #0a0f0d; --deck-2: #101714; --deck-3: #17201c; --deck-line: rgba(255, 255, 255, .10); --deck-ink: #f1f5f2; --deck-ink-2: #aab5af; --deck-ink-3: #7e8a84;
  /* states */
  --ok: #15803d; --ok-soft: #e6f5eb; --warn: #b45309; --warn-soft: #fff2dc; --bad: #c42525; --bad-soft: #fdecec; --info: #1e4fd1; --info-soft: #e8eeff;
  /* a firm's colour inside a scene; the default firm wears MirroAPI's lime */
  --brand: #b7ff00; --on-brand: #0a0f0c;

  --font-display: "Sora Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Mona Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-xs: 8px; --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 36px;
  --sh-1: 0 1px 2px rgba(16, 22, 19, .05), 0 0 0 1px rgba(16, 22, 19, .06);
  --sh-2: 0 1px 2px rgba(16, 22, 19, .04), 0 12px 32px -16px rgba(16, 22, 19, .22), 0 0 0 1px rgba(16, 22, 19, .06);
  --sh-3: 0 2px 6px rgba(10, 16, 13, .06), 0 36px 80px -28px rgba(10, 16, 13, .38), 0 0 0 1px rgba(16, 22, 19, .07);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: 200ms;
  --container: 1200px; --gutter: 24px;
  --nav-h: 72px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; color: inherit; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
code, pre { font-family: var(--font-mono); }
::selection { background: var(--lime); color: #0a0f0c; }
:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: 3px; border-radius: 6px; }
[data-surface="deck"] :focus-visible { outline-color: var(--lime); }
[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }
[hidden] { display: none !important; }
.k-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ── layout ───────────────────────────────────────────────────────────── */
.k-container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.k-container.is-narrow { --container: 860px; }
.k-container.is-wide { --container: 1320px; }
.k-section { position: relative; padding: clamp(56px, 7vw, 100px) 0; }
.k-section.is-tight { padding: clamp(48px, 6vw, 80px) 0; }
.k-section.is-soft { background: var(--bg-soft); }
.k-section.is-deck, [data-surface="deck"] { background: var(--deck); color: var(--deck-ink); }
.k-section.is-flush-top { padding-top: 0; }
.k-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.k-bento > *, .k-grid > *, .k-split > *, .k-pkgs > *, .k-apply > *, .k-show-head > *, .k-hero-split > *, .k-duo > *, .k-form-row > *, .k-steps > *, .g-scenes > * { min-width: 0; }

/* section head: kicker, title, lead */
.k-head { max-width: 760px; }
.k-head.is-center { margin-inline: auto; text-align: center; }
.k-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--lime-ink); }
.k-kicker::before { content: ""; flex: 0 0 24px; width: 24px; height: 24px; background: url("/mirro-icon-160.webp") center / contain no-repeat; }
[data-surface="deck"] .k-kicker, .is-deck .k-kicker { color: var(--lime); }
.k-h1 { font-size: clamp(38px, 5.6vw, 70px); line-height: 1.02; letter-spacing: -0.035em; }
.k-h2 { font-size: clamp(30px, 3.7vw, 48px); line-height: 1.06; letter-spacing: -0.03em; }
.k-h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
.k-tone { color: var(--ink-4); }
[data-surface="deck"] .k-tone, .is-deck .k-tone { color: var(--deck-ink-3); }
.k-lead { margin-top: 20px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--ink-3); max-width: 64ch; }
.k-head.is-center .k-lead { margin-inline: auto; }
[data-surface="deck"] .k-lead, .is-deck .k-lead { color: var(--deck-ink-2); }
.k-muted { color: var(--ink-3); } .k-small { font-size: 13.5px; }

/* ── buttons and links ────────────────────────────────────────────────── */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-body); font-size: 15.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.k-btn svg { width: 16px; height: 16px; flex: none; }
.k-btn.is-primary { background: var(--lime); color: #0a0f0c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(122, 176, 0, .45), 0 10px 24px -14px rgba(122, 176, 0, .9); }
.k-btn.is-primary:hover { background: var(--lime-bright); }
.k-btn.is-dark { background: var(--ink); color: #fff; }
.k-btn.is-dark:hover { background: #1d2622; }
.k-btn.is-outline { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.k-btn.is-outline:hover { border-color: var(--ink); }
.k-btn.is-ghost { background: transparent; color: var(--ink-2); }
.k-btn.is-ghost:hover { color: var(--ink); background: var(--bg-soft); }
[data-surface="deck"] .k-btn.is-outline, .is-deck .k-btn.is-outline { background: transparent; border-color: rgba(255, 255, 255, .24); color: var(--deck-ink); }
[data-surface="deck"] .k-btn.is-outline:hover, .is-deck .k-btn.is-outline:hover { border-color: rgba(255, 255, 255, .6); }
.k-btn.is-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.k-btn.is-block { width: 100%; }
.k-btn[disabled] { opacity: .6; cursor: progress; }
.k-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--ink); border-bottom: 1px solid rgba(16, 22, 19, .22); padding-bottom: 2px; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.k-link:hover { border-color: var(--ink); }
.k-link svg { width: 15px; height: 15px; }
.k-link { position: relative; }
.k-link::after { content: ""; position: absolute; inset: -10px -8px; }
[data-surface="deck"] .k-link, .is-deck .k-link { color: var(--deck-ink); border-color: rgba(255, 255, 255, .28); }
[data-surface="deck"] .k-link:hover, .is-deck .k-link:hover { border-color: #fff; }
.k-ulink { color: var(--lime-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(63, 106, 6, .4); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.k-ulink:hover { text-decoration-color: currentColor; }
.k-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.k-head.is-center .k-cta-row { justify-content: center; }

/* ── navigation ───────────────────────────────────────────────────────── */
.k-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.k-nav.is-stuck, .k-nav.is-open { border-bottom-color: var(--line); background: rgba(255, 255, 255, .94); }
.k-nav > .k-container { display: flex; align-items: center; height: 100%; gap: 8px; }
.k-logo { display: inline-flex; align-items: center; gap: 10px; margin-right: 28px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.k-logo img { width: 30px; height: 30px; }
.k-logo .thin { font-weight: 300; }
.k-menu { display: none; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.k-menu > li { position: relative; }
.k-menu-link, .k-menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: color var(--t) var(--ease), background-color var(--t) var(--ease); }
.k-menu-link:hover, .k-menu-btn:hover, .k-menu-btn[aria-expanded="true"], .k-menu-link[aria-current="page"] { color: var(--ink); background: var(--bg-soft); }
.k-menu-btn[data-current="true"] { color: var(--ink); font-weight: 600; }
.k-menu-btn svg { width: 12px; height: 12px; transition: transform var(--t) var(--ease); }
.k-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.k-mega { position: absolute; left: -14px; top: calc(100% + 10px); width: max-content; max-width: min(820px, calc(100vw - 48px)); padding: 10px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms; }
.k-mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.k-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps hover alive across the gap */
.k-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 280px)) minmax(220px, 250px); gap: 4px; }
.k-mega-grid.is-simple { grid-template-columns: minmax(250px, 290px); }
.k-mega-col { display: grid; align-content: start; gap: 2px; }
.k-mega-item { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 11px 12px; border-radius: var(--r-sm); transition: background-color var(--t) var(--ease); }
.k-mega-item:hover { background: var(--bg-soft); }
.k-mega-item .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--bg-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.k-mega-item:hover .ico { background: var(--lime); color: #0a0f0c; box-shadow: none; }
.k-mega-item .ico svg { width: 18px; height: 18px; }
.k-mega-item b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.k-mega-item span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.k-mega-feature { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r); background: var(--deck); color: var(--deck-ink); }
.k-mega-feature b { font-family: var(--font-display); font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; }
.k-mega-feature p { font-size: 13px; line-height: 1.5; color: var(--deck-ink-2); }
.k-mega-feature .k-link { margin-top: auto; align-self: flex-start; font-size: 13.5px; color: var(--lime); border-color: rgba(183, 255, 0, .35); }
.k-nav-actions { display: none; align-items: center; gap: 8px; margin-left: auto; }
.k-country { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.k-country:hover { border-color: var(--line-strong); color: var(--ink); }
.k-country svg { width: 15px; height: 15px; }
.k-burger { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.k-burger i { position: relative; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: background-color var(--t) var(--ease); }
.k-burger i::before, .k-burger i::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--t) var(--ease), top var(--t) var(--ease); }
.k-burger i::before { top: -7px; } .k-burger i::after { top: 7px; }
.k-burger[aria-expanded="true"] i { background: transparent; }
.k-burger[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.k-burger[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }
.k-sheet { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; padding: 12px var(--gutter) 40px; background: #fff; opacity: 0; visibility: hidden; transition: opacity 180ms var(--ease), visibility 0s linear 180ms; }
.k-sheet.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.k-sheet h4 { margin: 22px 0 6px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.k-sheet a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; }
.k-sheet .k-sheet-cta { display: grid; gap: 10px; margin-top: 26px; }
.k-sheet .k-sheet-cta a { border: 0; padding: 0; }
.k-sheet .k-sheet-cta .k-btn { display: flex; font-size: 16px; }
@media (min-width: 1080px) { .k-menu, .k-nav-actions { display: flex; } .k-burger, .k-sheet { display: none; } }
@media (max-width: 1079px) { :root { --nav-h: 64px; } .k-logo { margin-right: 0; } }

/* ── components ───────────────────────────────────────────────────────── */
.k-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.k-chip.is-lime { background: var(--lime-soft); box-shadow: inset 0 0 0 1px var(--lime-line); color: var(--lime-ink); }
.k-chip.is-dark { background: var(--ink); box-shadow: none; color: #fff; }
.k-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
[data-surface="deck"] .k-chip, .is-deck .k-chip { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--deck-line); color: var(--deck-ink-2); }
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* icon tile */
.k-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--lime-soft); color: var(--lime-ink); box-shadow: inset 0 0 0 1px var(--lime-line); flex: none; }
.k-ico svg { width: 21px; height: 21px; }
.k-ico.is-dark { background: var(--ink); color: var(--lime); box-shadow: none; }
[data-surface="deck"] .k-ico, .is-deck .k-ico { background: rgba(183, 255, 0, .1); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(183, 255, 0, .25); }

/* cards and the bento grid */
.k-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); overflow: hidden; }
.k-card-body { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.k-card h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; }
.k-card p { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.k-card p strong, .k-card p b { color: var(--ink); font-weight: 600; }
.k-card p code, .k-ticks code { font-size: .88em; padding: 1px 5px; border-radius: 5px; background: var(--bg-soft); color: var(--ink-2); }
.k-card .k-link, .k-card .k-ulink { margin-top: auto; align-self: flex-start; }
.k-card-body > .k-chip { align-self: flex-start; margin-bottom: 4px; }
.k-card-body > .k-ico { margin-bottom: 8px; }
.k-card .k-ticks + .k-link { margin-top: 12px; }
.k-card-art { --pad: clamp(18px, 2.4vw, 30px); position: relative; min-height: 0; padding: var(--pad) var(--pad) 0; background: var(--bg-soft); border-bottom: 1px solid var(--line); overflow: hidden; }
.k-card-art.is-pad { padding-bottom: var(--pad); }
.k-card-art.is-fixed { height: clamp(250px, 26vw, 350px); }
.k-card-art > * { width: 100%; }
.k-card.is-art-bottom .k-card-art { order: 2; flex: 1; display: flex; align-items: center; border-bottom: 0; border-top: 1px solid var(--line); }
.k-card.is-deck { background: var(--deck-2); color: var(--deck-ink); box-shadow: inset 0 0 0 1px var(--deck-line); }
.k-card.is-deck p { color: var(--deck-ink-2); }
.k-card.is-deck code { background: rgba(255, 255, 255, .08); color: #dfe7e2; }
.k-card.is-deck .k-chip { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--deck-line); color: var(--deck-ink); }
.k-card.is-deck .k-card-art { background: var(--deck); border-color: var(--deck-line); }
.k-bento { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: clamp(36px, 4.5vw, 56px); }
@media (min-width: 760px) { .k-bento { grid-template-columns: repeat(6, 1fr); } .k-bento > .is-2 { grid-column: span 2; } .k-bento > .is-3 { grid-column: span 3; } .k-bento > .is-4 { grid-column: span 4; } .k-bento > .is-6 { grid-column: span 6; } }
@media (min-width: 760px) and (max-width: 1023px) { .k-bento > .is-2 { grid-column: span 3; } .k-bento > .is-4 { grid-column: span 6; } }
.k-grid { display: grid; gap: 16px; margin-top: clamp(32px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.k-grid.is-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* ticks list */
.k-ticks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.k-ticks li { position: relative; padding-left: 28px; }
.k-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--lime-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.7 2.7L14.2 7.4' fill='none' stroke='%233f6a06' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: inset 0 0 0 1px var(--lime-line); }
[data-surface="deck"] .k-ticks, .is-deck .k-ticks { color: var(--deck-ink-2); }
[data-surface="deck"] .k-ticks li::before, .is-deck .k-ticks li::before { background-color: rgba(183, 255, 0, .14); box-shadow: inset 0 0 0 1px rgba(183, 255, 0, .3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.7 2.7L14.2 7.4' fill='none' stroke='%23b7ff00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* split: copy beside a scene */
.k-split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 980px) { .k-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .k-split.is-flip > :first-child { order: 2; } .k-split.is-even { grid-template-columns: 1fr 1fr; } }
.k-split + .k-split { margin-top: clamp(72px, 9vw, 128px); }
.k-split-copy .k-h2 { font-size: clamp(28px, 3vw, 40px); }
.k-split-copy .k-lead { font-size: 17px; }
.k-split-copy .k-ticks { margin-top: 22px; }
.k-split-copy .k-link { margin-top: 26px; }
.k-split-art { min-width: 0; }

/* facts strip */
.k-facts { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .k-facts { grid-template-columns: repeat(4, 1fr); } }
.k-fact { padding: 28px 24px 28px 0; border-right: 1px solid var(--line); }
.k-fact:nth-child(2n) { border-right: 0; padding-left: 24px; }
.k-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .k-fact, .k-fact:nth-child(2n) { border-right: 1px solid var(--line); padding-left: 28px; border-top: 0 !important; } .k-fact:first-child { padding-left: 0; } .k-fact:last-child { border-right: 0; } }
.k-fact b { display: block; font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 42px); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.k-fact b small { font-size: .5em; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-3); margin-left: 4px; }
.k-fact span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-3); max-width: 26ch; }
/* the narrowest phones: a figure like MT4/MT5 must not push its column past the screen */
@media (max-width: 359px) { .k-fact { padding-right: 14px; } .k-fact:nth-child(2n) { padding-left: 14px; } .k-fact b { font-size: 24px; } }
[data-surface="deck"] .k-facts, .is-deck .k-facts, [data-surface="deck"] .k-fact, .is-deck .k-fact { border-color: var(--deck-line); }
[data-surface="deck"] .k-fact span, .is-deck .k-fact span, [data-surface="deck"] .k-fact b small, .is-deck .k-fact b small { color: var(--deck-ink-2); }

/* numbered steps */
.k-steps { list-style: none; counter-reset: k-step; margin: clamp(36px, 4.5vw, 56px) 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.k-step { counter-increment: k-step; position: relative; padding: 26px 24px 28px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); }
.k-step::before { content: counter(k-step, decimal-leading-zero); display: block; margin-bottom: 40px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--lime-ink); }
.k-step::after { content: ""; position: absolute; left: 24px; right: 24px; top: 58px; height: 1px; background: var(--line); }
.k-step h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
.k-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }

/* tabs (segmented) */
.k-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.k-tabs button { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.k-tabs button:hover { color: var(--ink); }
.k-tabs button[aria-selected="true"], .k-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
[data-surface="deck"] .k-tabs, .is-deck .k-tabs { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--deck-line); }
[data-surface="deck"] .k-tabs button, .is-deck .k-tabs button { color: var(--deck-ink-2); }
[data-surface="deck"] .k-tabs button[aria-selected="true"], .is-deck .k-tabs button[aria-selected="true"], [data-surface="deck"] .k-tabs button[aria-pressed="true"], .is-deck .k-tabs button[aria-pressed="true"] { background: var(--lime); color: #0a0f0c; box-shadow: none; }

/* FAQ */
.k-faq { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.k-faq details { border-bottom: 1px solid var(--line); }
.k-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='%23101613' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.k-faq details[open] summary::after { background-color: var(--lime); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='%23101613' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.k-faq details > div { padding: 0 48px 24px 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-3); max-width: 76ch; }
.k-faq details > div p + p { margin-top: 10px; }
.k-faq code { font-size: .88em; padding: 1px 5px; border-radius: 5px; background: var(--bg-soft); color: var(--ink-2); }

/* pricing packages */
.k-pkgs { display: grid; gap: 16px; margin-top: clamp(32px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.k-pkg { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); }
.k-pkg.is-popular { box-shadow: 0 0 0 1.5px var(--lime-deep), 0 0 0 6px rgba(183, 255, 0, .2), 0 30px 60px -36px rgba(101, 163, 13, .5); background: linear-gradient(180deg, #f9ffe9, #fff 38%); }
.k-pkg-flag { position: absolute; top: 24px; right: 24px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--lime); font-size: 11.5px; font-weight: 600; }
.k-pkg h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.k-pkg .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 18px; font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 42px); font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.k-pkg .price small { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.k-pkg .seats { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.k-pkg .k-ticks { margin: 22px 0 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.k-pkg .k-ticks li.is-from { padding-left: 0; font-weight: 600; color: var(--ink); }
.k-pkg .k-ticks li.is-from::before { display: none; }
.k-pkg .k-btn { margin-top: auto; }
.k-note { margin-top: 22px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); max-width: 86ch; }

/* comparison table */
.k-table-wrap { margin-top: clamp(28px, 4vw, 44px); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); overflow-x: auto; }
.k-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.k-table th, .k-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.k-table thead th { font-family: var(--font-display); font-size: 15px; font-weight: 600; background: var(--bg-soft); position: sticky; top: 0; }
.k-table tbody th { font-weight: 500; color: var(--ink-2); }
.k-table td { text-align: center; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.k-table thead th:not(:first-child) { text-align: center; }
.k-table tr:last-child th, .k-table tr:last-child td { border-bottom: 0; }
.k-table .yes { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.7 2.7L14.2 7.4' fill='none' stroke='%230a0f0c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; vertical-align: middle; }
.k-table .no { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: var(--line-strong); vertical-align: middle; }

/* forms */
.k-form { display: grid; gap: 18px; }
.k-form-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .k-form-row { grid-template-columns: 1fr 1fr; } }
.k-field { display: grid; gap: 7px; min-width: 0; border: 0; padding: 0; margin: 0; }
.k-field > span, .k-field > legend { padding: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.k-field small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.k-field input:not([type="checkbox"]), .k-field select, .k-field textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: #fff; font: inherit; font-size: 16px; color: var(--ink); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.k-field textarea { height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.k-field select { appearance: none; -webkit-appearance: none; padding-right: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%233c4541' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; }
.k-field input:hover, .k-field select:hover, .k-field textarea:hover { border-color: var(--ink-4); }
.k-field input:focus, .k-field select:focus, .k-field textarea:focus { outline: 0; border-color: var(--lime-ink); box-shadow: 0 0 0 4px rgba(134, 184, 20, .22); }
.k-field ::placeholder { color: var(--ink-4); }
.k-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.k-checks label { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.k-checks label:has(input:checked) { border-color: var(--lime-ink); background: var(--lime-soft); }
.k-checks input, .k-consent input { width: 16px; height: 16px; accent-color: #3f6a06; }
.k-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.k-consent input { margin-top: 3px; flex: none; }
.k-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.k-form-foot { display: grid; gap: 12px; margin-top: 6px; }
.k-form-status { min-height: 20px; font-size: 14px; }
.k-form-status[data-kind="err"] { color: var(--bad); }
.k-form-done { display: none; padding: 40px 0; }
.k-form-done[data-show="true"] { display: block; }
.k-form-done h2 { font-size: 30px; letter-spacing: -0.02em; }
.k-form-done p { margin-top: 12px; color: var(--ink-3); }

/* dialog */
.k-dialog { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(10, 15, 13, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.k-dialog-card { width: min(100%, 460px); padding: 30px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-3); }
.k-dialog-card h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.k-dialog-card p { margin: 10px 0 20px; font-size: 15px; color: var(--ink-3); }
.k-dialog-card .k-btn { margin-top: 20px; }

/* closing call-to-action band (deck) */
.k-cta { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 80px); background: var(--deck); color: var(--deck-ink); }
.k-cta::before { content: ""; position: absolute; right: -10%; top: -60%; width: 70%; height: 220%; background: radial-gradient(50% 50% at 50% 50%, rgba(183, 255, 0, .2), rgba(183, 255, 0, 0) 70%); pointer-events: none; }
.k-cta > * { position: relative; }
.k-cta h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; }
.k-cta p { margin-top: 16px; color: var(--deck-ink-2); max-width: 56ch; font-size: 17px; }

/* code block (deck) */
.k-code { border-radius: var(--r); background: var(--deck); color: #d7e0da; box-shadow: inset 0 0 0 1px var(--deck-line); overflow: hidden; font-size: 13px; }
.k-code-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--deck-line); font-family: var(--font-mono); font-size: 12px; color: var(--deck-ink-2); }
.k-code-top .m { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-weight: 700; font-size: 10.5px; letter-spacing: .04em; background: var(--lime); color: #0a0f0c; }
.k-code-top .m.is-hook { background: #7dd3fc; }
.k-code pre { margin: 0; padding: 16px; overflow-x: auto; line-height: 1.65; font-size: 12.5px; }
.k-code .k { color: #c4b5fd; } .k-code .s { color: #bef264; } .k-code .n { color: #fdba74; } .k-code .p { color: #7dd3fc; } .k-code .c { color: #8b9a92; }

/* reveal: opacity and a short rise, once */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ── stage: the product picture under a solution hero ─────────────────────
   White like the page around it (the hero above flows straight into it), lit from behind by the firm's own colour.
   The control room and the trader's phone stand side by side and are sized from the SCREEN, its width and its height:
   the customizer and both whole devices show in one view under the nav on a desk, a laptop, a tablet or a phone held
   sideways. On a phone held upright the control room runs the full width as a faithful miniature and the phone stands
   under it at a size a thumb can read. Nothing is ever cut by an edge. */
.k-stage { --vh: 100vh; --bar-h: 100px; --stage-gap: clamp(14px, 1.7vw, 22px); position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: clamp(2px, .6vw, 10px) 0 clamp(36px, 4.6vw, 68px); background: linear-gradient(180deg, #fff 0%, #fff 16%, #f7f9f7 58%, #eff2f0 100%); color: var(--ink); }
@supports (height: 100svh) { .k-stage { --vh: 100svh; } }
@media (min-width: 1280px) { .k-stage { --bar-h: 56px; } }
.k-stage > .k-container { --container: 1400px; }
/* the light behind the devices is the firm's colour, so choosing one visibly relights the whole stage; a plain colour under a fixed mask, because a colour can glide and a gradient cannot */
.k-stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1640px, 132%); height: 100%; transform: translate(-50%, -50%); background-color: rgba(183, 255, 0, .4); background-color: color-mix(in srgb, var(--brand) 44%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, .28) 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, .28) 76%, transparent 100%); transition: background-color 600ms var(--ease); pointer-events: none; }
.k-stage::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(16, 22, 19, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 22, 19, .05) 1px, transparent 1px); background-size: 52px 52px; background-position: 50% 0; -webkit-mask-image: radial-gradient(62% 70% at 50% 46%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 78%); mask-image: radial-gradient(62% 70% at 50% 46%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 78%); pointer-events: none; }
/* the customizer: one floating panel that hugs its controls. The firm's own name and colour first, the example firms after: two centred rows, one row on a wide desk */
.k-stage-bar { display: grid; justify-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto var(--stage-gap); padding: 7px; border-radius: 30px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(16, 22, 19, .07), 0 1px 2px rgba(16, 22, 19, .04), 0 22px 44px -26px rgba(16, 22, 19, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.k-stage .k-yours { justify-content: center; gap: 8px 12px; padding: 4px 8px 4px 16px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px rgba(16, 22, 19, .05); }
.k-stage .k-yours .k-brands-label { color: var(--lime-ink); }
.k-stage .k-yours .k-brand-input { width: 204px; height: 34px; padding: 0 13px; border-color: var(--line-strong); background: #fff; color: var(--ink); }
.k-stage .k-yours .k-brand-input::placeholder { color: var(--ink-3); }
.k-stage .k-yours .k-brand-input:focus { border-color: var(--lime-ink); box-shadow: 0 0 0 3px rgba(63, 106, 6, .14); }
.k-stage .k-brands { justify-content: center; gap: 8px; padding: 0 6px 0 10px; }
.k-stage .k-brand-btn { height: 34px; white-space: nowrap; }
.k-stage .k-brands-label { white-space: nowrap; }
@media (min-width: 900px) { .k-stage .k-yours, .k-stage .k-brands { flex-wrap: nowrap; } .k-stage .k-swatches { gap: 6px; } }
.k-stage .k-brand-btn[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(16, 22, 19, .07); }
/* the devices: one width decides everything. --desk-w is the control room's width, the smaller of what the container allows and what the screen's height allows; the phone is a fixed share of it, stands a little in front and hangs a little lower. */
.k-stage-set { --fit-h: clamp(236px, calc(var(--vh) - var(--nav-h) - var(--bar-h) - var(--stage-gap) - 34px), 780px); --desk-w: min(78.5%, calc(var(--fit-h) / .7035)); display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--desk-w) * .032); }
.k-stage-set > .fr-browser { flex: none; width: var(--desk-w); border-radius: clamp(8px, 1.3vw, 18px); box-shadow: 0 0 0 1px rgba(16, 22, 19, .08), 0 2px 6px rgba(10, 16, 13, .05), 0 18px 36px -20px rgba(10, 16, 13, .16), 0 48px 96px -36px rgba(10, 16, 13, .36); }
.k-stage-set > .fr-phone { flex: none; z-index: 2; width: calc(var(--desk-w) * .2825); margin: 0 0 calc(var(--desk-w) * -.032) calc(var(--desk-w) * -.01); }
.k-stage-set > .fr-phone .fr-phone-shell { box-shadow: 0 0 0 1px rgba(16, 22, 19, .3), -14px 22px 44px -22px rgba(10, 16, 13, .42), 0 44px 80px -34px rgba(10, 16, 13, .5); }
/* a picture of a desk at any size: inside the stage nothing holds a minimum, so bar, address and text shrink together and the miniature stays the same picture */
.k-stage-set .fr-bar { height: clamp(11px, 3.4cqw, 40px); }
.k-stage-set .fr-dots i { width: clamp(3px, .85cqw, 10px); height: clamp(3px, .85cqw, 10px); }
.k-stage-set .fr-url { font-size: min(1.05cqw, 12.5px); }
.k-stage-set > .fr-browser .fr-view { font-size: min(1.06cqw, 14.5px); }
.k-stage-set > .fr-phone .fr-view { font-size: min(3.55cqw, 13px); }
.k-stage-note { max-width: 64ch; margin: clamp(22px, 2.8vw, 38px) auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.k-stage-note b { color: var(--ink); font-weight: 600; }
.k-stage-note small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
/* one row of controls on a wide desk, with a hairline between the two groups */
@media (min-width: 1280px) { .k-stage-bar { display: flex; align-items: center; gap: 6px; border-radius: 999px; } .k-stage .k-yours .k-brand-input { width: clamp(176px, calc(15vw - 16px), 214px); } .k-stage .k-brands { flex-wrap: nowrap; margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--line); } }
/* a screen too short to hold the customizer and the devices together (a phone held sideways): the devices alone fit the view, and each group of controls still keeps to one row */
@media (max-height: 540px) { .k-stage { --bar-h: -16px; } }
@media (max-width: 899px) and (min-aspect-ratio: 1/1) { .k-stage .k-yours .k-swatch { width: 32px; height: 32px; } .k-stage .k-yours .k-swatches { gap: 8px; flex-wrap: nowrap; } .k-stage .k-yours .k-brand-input { width: 168px; } .k-stage .k-brand-btn { padding: 0 11px 0 7px; font-size: 13.5px; } .k-stage .k-brands-label { font-size: 12px; } }
/* a phone held upright: the control room runs the full width, the trader's phone stands under it, a little over its lower edge */
@media (max-width: 759px) and (max-aspect-ratio: 1/1) {
  .k-stage-set { --desk-w: 100%; flex-direction: column; align-items: center; padding-bottom: 0; }
  .k-stage-set > .fr-phone { width: min(64%, 256px); margin: clamp(16px, 5vw, 26px) 0 0; }
  .k-stage-bar { width: 100%; justify-items: stretch; gap: 10px; padding: 10px; border-radius: 26px; }
  .k-stage .k-yours { border-radius: 20px; padding: 10px 12px 12px; gap: 8px 10px; }
  .k-stage .k-yours .k-brand-input { width: 100%; height: 44px; font-size: 16px; }
  .k-stage .k-yours .k-swatches { width: 100%; justify-content: space-between; gap: 6px; }
  .k-stage .k-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 4px 4px; }
  .k-stage .k-brands .k-brands-label { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 12px; }
  .k-stage .k-brand-btn { height: auto; min-height: 44px; padding: 6px 8px 6px 7px; gap: 7px; border-radius: 14px; font-size: 12.5px; line-height: 1.15; text-align: left; white-space: normal; }
  .k-stage .k-brand-btn i { flex: none; }
  .k-stage-note { font-size: 14px; }
  .k-stage::before { background-color: rgba(183, 255, 0, .26); background-color: color-mix(in srgb, var(--brand) 30%, transparent); }
}
@media (max-width: 379px) and (max-aspect-ratio: 1/1) { .k-stage .k-brand-btn { flex-direction: column; align-items: flex-start; padding: 8px; } .k-stage .k-yours .k-swatch { width: 32px; height: 32px; } }
@media (max-width: 349px) and (max-aspect-ratio: 1/1) { .k-stage .k-yours .k-swatch { width: 28px; height: 28px; } }

/* white-label switcher */
.k-brands, .k-yours { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* the customizer leads the stage: a name box that invites typing, and the colours beside it */
.k-yours { gap: 10px 14px; padding: 8px 10px 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.k-yours .k-brands-label { color: var(--lime); }
.k-yours .k-brand-input { width: 214px; border-style: solid; border-color: rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .25); }
[data-surface="deck"] .k-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
[data-surface="deck"] .k-swatch:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 3px rgba(255, 255, 255, .14); }
[data-surface="deck"] .k-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 2px #0b1411, 0 0 0 4px #fff; }
[data-surface="deck"] .k-swatch:focus-visible, [data-surface="deck"] .k-swatch.is-any:focus-within { outline-color: var(--lime); }
@media (max-width: 640px) { .k-yours { border-radius: 22px; padding: 12px 14px; } .k-yours .k-brand-input { width: 100%; } }
.k-brands-label { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--deck-ink-3); margin-right: 2px; }
.k-brand-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--deck-line); background: rgba(255, 255, 255, .04); color: var(--deck-ink-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease); }
.k-brand-btn i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--c); color: var(--oc); font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; }
.k-brand-btn:hover { color: var(--deck-ink); border-color: rgba(255, 255, 255, .3); }
.k-brand-btn[aria-pressed="true"] { color: #fff; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1); }
.k-brand-input { height: 38px; width: 178px; padding: 0 14px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .3); background: transparent; color: #fff; font: inherit; font-size: 14px; transition: border-color var(--t) var(--ease); }
.k-brand-input::placeholder { color: var(--deck-ink-3); }
.k-brand-input:focus { outline: 0; border-style: solid; border-color: var(--lime); }
/* the same control on a paper surface */
[data-surface="paper"] .k-brands-label { color: var(--ink-3); }
[data-surface="paper"] .k-brand-btn { border-color: var(--line-strong); background: #fff; color: var(--ink-2); }
[data-surface="paper"] .k-brand-btn:hover { border-color: var(--ink-4); color: var(--ink); }
[data-surface="paper"] .k-brand-btn[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(16, 22, 19, .06); }
[data-surface="paper"] .k-brand-input { border-color: var(--line-strong); color: var(--ink); }
[data-surface="paper"] .k-brand-input::placeholder { color: var(--ink-4); }
[data-surface="paper"] .k-brand-input:focus { border-color: var(--lime-ink); }

/* ── frames ───────────────────────────────────────────────────────────── */
.fr-browser { position: relative; container-type: inline-size; border-radius: clamp(10px, 1.4vw, 18px); background: #1a221e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 120px -40px rgba(0, 0, 0, .8); overflow: hidden; }
.fr-browser.on-paper { background: #fff; box-shadow: var(--sh-3); }
.fr-bar { display: flex; align-items: center; gap: 1.2cqw; height: clamp(26px, 3.4cqw, 40px); padding: 0 1.6cqw; background: #141b18; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.fr-browser.on-paper .fr-bar { background: #f3f5f3; border-bottom-color: var(--line); }
.fr-dots { display: flex; gap: .55cqw; }
.fr-dots i { width: clamp(6px, .85cqw, 10px); height: clamp(6px, .85cqw, 10px); border-radius: 50%; background: rgba(255, 255, 255, .16); }
.fr-browser.on-paper .fr-dots i { background: #d5dbd7; }
.fr-url { flex: 1; max-width: 46cqw; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: .6cqw; height: 62%; border-radius: 999px; background: rgba(255, 255, 255, .06); font-family: var(--font-body); font-size: clamp(9px, 1.05cqw, 12.5px); color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; }
.fr-browser.on-paper .fr-url { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.fr-url svg { width: 1em; height: 1em; opacity: .7; flex: none; }
.fr-url b { font-weight: 500; color: rgba(255, 255, 255, .92); }
.fr-browser.on-paper .fr-url b { color: var(--ink); }
.fr-view { position: relative; font-size: clamp(6.4px, 1.06cqw, 14.5px); }
.fr-phone { position: relative; container-type: inline-size; }
.fr-phone-shell { position: relative; aspect-ratio: 9 / 18.4; padding: 3cqw; border-radius: 14.5cqw; background: linear-gradient(160deg, #2c3530, #0c110f 55%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 90px -30px rgba(0, 0, 0, .85); }
.fr-phone.on-paper .fr-phone-shell { box-shadow: 0 0 0 1px rgba(16, 22, 19, .25), 0 40px 80px -36px rgba(10, 16, 13, .55); }
.fr-phone-shell::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 5.4cqw; width: 27cqw; height: 7.4cqw; border-radius: 999px; background: #070a09; transform: translateX(-50%); }
.fr-phone .fr-view { height: 100%; border-radius: 11.6cqw; overflow: hidden; font-size: clamp(6px, 3.55cqw, 13px); background: #eaede9; }
/* on small screens a desktop scene keeps a readable size and runs off the right edge instead of shrinking to a thumbnail */
.fr-clip { overflow: hidden; min-width: 0; max-width: 100%; }
@media (max-width: 759px) { .fr-clip > .fr-browser { width: 700px; max-width: none; } }
/* a bare scene card (no device), used inside bento art and splits */
.fr-card { container-type: inline-size; }
.fr-card .sc { font-size: clamp(11px, 2.1cqw, 14px); }
.k-card-art .fr-browser { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -30px rgba(10, 16, 13, .35); }
.k-card-art.is-bleed-right { padding-right: 0; }
.k-card-art.is-bleed-right .fr-browser { width: 150%; max-width: none; border-top-right-radius: 0; }

/* ── scenes: the firm console, drawn in em ────────────────────────────── */
.sc { --s-bg: #eaede9; --s-surface: #fff; --s-surface-2: #f6f8f5; --s-line: #e1e6e2; --s-ink: #101613; --s-ink-2: #3c4541; --s-muted: #59635f; --s-rail: #0b1411; color: var(--s-ink); font-family: var(--font-body); line-height: 1.4; text-align: left; -webkit-user-select: none; user-select: none; cursor: default; }
.sc * { min-width: 0; }
.sc-app { display: grid; grid-template-columns: 5.6em 1fr; gap: 1.1em; padding: 1.1em; background: var(--s-bg); aspect-ratio: 16 / 10.2; overflow: hidden; }
.sc-rail { display: flex; flex-direction: column; align-items: center; gap: .9em; padding: 1.5em 0; border-radius: 2em; background: linear-gradient(180deg, #0f1a16, var(--s-rail)); }
.sc-logo { width: 2.2em; height: 2.2em; border-radius: .65em; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-family: var(--font-display); font-weight: 700; font-size: 1em; transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.sc-rail .sc-ri { width: 2.9em; height: 2.9em; border-radius: .9em; display: grid; place-items: center; color: rgba(255, 255, 255, .5); }
.sc-rail .sc-ri svg { width: 1.35em; height: 1.35em; }
.sc-rail .sc-ri.is-box { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--brand); margin-bottom: 1.6em; }
.sc-rail .sc-ri.is-on { background: var(--brand); color: var(--on-brand); box-shadow: 0 .4em 1.4em -.3em color-mix(in srgb, var(--brand) 70%, transparent); transition: background-color 300ms var(--ease); }
.sc-rail .sc-ri.is-dot { position: relative; }
.sc-rail .sc-ri.is-dot::after { content: ""; position: absolute; right: .55em; top: .55em; width: .5em; height: .5em; border-radius: 50%; background: #ff5a5a; }
.sc-rail .sc-me { margin-top: auto; width: 2.4em; height: 2.4em; border-radius: .8em; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: .9em; transition: background-color 300ms var(--ease); }
.sc-main { display: flex; flex-direction: column; gap: 1em; padding-top: .4em; overflow: hidden; }
.sc-top { display: flex; align-items: center; gap: 1.2em; }
.sc-top h4 { font-size: 1.95em; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-top .sc-sub { margin-left: auto; font-size: .98em; color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-status { display: inline-flex; align-items: center; gap: .5em; font-size: .98em; font-weight: 500; white-space: nowrap; }
.sc-status i { width: .62em; height: .62em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 .2em color-mix(in srgb, currentColor 0%, rgba(21, 128, 61, .16)); flex: none; }
.sc-status.is-info i { background: var(--info); box-shadow: 0 0 0 .2em rgba(30, 79, 209, .14); }
.sc-status.is-warn i { background: var(--warn); box-shadow: 0 0 0 .2em rgba(180, 83, 9, .15); }
.sc-status.is-bad i { background: var(--bad); box-shadow: 0 0 0 .2em rgba(196, 37, 37, .14); }
.sc-status.is-mute i { background: #9aa39f; box-shadow: none; }
.sc-tabs { display: flex; gap: .3em; font-size: 1em; }
.sc-tabs span { padding: .62em 1.15em; border-radius: .8em; color: var(--s-muted); font-weight: 500; white-space: nowrap; }
.sc-tabs span.is-on { background: var(--s-surface); color: var(--s-ink); font-weight: 600; box-shadow: 0 .05em .15em rgba(16, 22, 19, .08), 0 0 0 1px rgba(16, 22, 19, .04); }
.sc-alert { padding: .85em 1.15em; border-radius: .9em; background: #fdecec; box-shadow: inset 0 0 0 1px #f2c1c1, inset .22em 0 0 #e05252; color: #8b1717; font-size: .93em; line-height: 1.45; }
.sc-alert b { display: block; font-weight: 600; }
.sc-alert.is-warn { background: #fff2dc; box-shadow: inset 0 0 0 1px #f6d9a8, inset .22em 0 0 #d98a1f; color: #7c3f06; }
.sc-kpis { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: .85em; }
.sc-kpi { padding: 1em 1.1em 1.05em; border-radius: 1.15em; background: var(--s-surface); box-shadow: 0 0 0 1px rgba(16, 22, 19, .045), 0 .06em .16em rgba(16, 22, 19, .04); }
.sc-kpi > span { display: block; font-size: .86em; color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-kpi b { display: block; margin-top: .22em; font-family: var(--font-display); font-size: 1.62em; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-kpi b.is-bad { color: var(--bad); } .sc-kpi b.is-ok { color: var(--ok); }
.sc-kpi small { display: block; margin-top: .3em; font-size: .82em; line-height: 1.35; color: var(--s-muted); }
.sc-panel { border-radius: 1.3em; background: var(--s-surface); box-shadow: 0 0 0 1px rgba(16, 22, 19, .045), 0 .06em .16em rgba(16, 22, 19, .04); overflow: hidden; }
/* a panel that is the last thing on a screen runs to the foot of it, and its table shares the height out between its rows */
.sc-panel.is-fill { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.sc-fill { flex: 1 1 0; min-height: 0; overflow: hidden; }
.sc-fill > .sc-table { height: 100%; }
.sc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.15em 1.5em; }
.sc-panel-head b { font-family: var(--font-display); font-size: 1.12em; font-weight: 600; letter-spacing: -0.01em; }
.sc-panel-head span { font-size: .84em; color: var(--s-muted); white-space: nowrap; }
.sc-table { width: 100%; border-collapse: collapse; font-size: .95em; }
.sc-table th { padding: .8em 1.5em; text-align: left; font-size: .78em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); background: var(--s-surface-2); border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); white-space: nowrap; }
.sc-table td { padding: .95em 1.5em; border-bottom: 1px solid var(--s-line); vertical-align: middle; white-space: nowrap; }
.sc-table tr:last-child td { border-bottom: 0; }
.sc-table .m { font-weight: 500; } .sc-table .s { display: block; font-size: .88em; color: var(--s-muted); font-weight: 400; margin-top: .1em; }
.sc-table code { font-size: .86em; color: var(--s-muted); }
.sc-table .r { text-align: right; } .sc-table .is-bad { color: var(--bad); }
.sc-tag { display: inline-flex; align-items: center; padding: .22em .7em; border-radius: 999px; background: #e8eeff; color: #1c357e; font-size: .86em; font-weight: 500; white-space: nowrap; }
.sc-tag.is-brand { background: color-mix(in srgb, var(--brand) 22%, #fff); color: var(--s-ink); }
.sc-meter { position: relative; height: .5em; border-radius: 999px; background: #e3e8e4; overflow: hidden; }
.sc-meter i { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: inherit; background: var(--ok); transition: width 900ms var(--ease), background-color 300ms var(--ease); }
.sc-meter.is-warn i { background: #c2620c; } .sc-meter.is-bad i { background: var(--bad); }
.sc-meter.is-target i { background: var(--brand); box-shadow: inset 0 0 0 1px rgba(16, 22, 19, .12); }
.sc-meter.is-mini { width: 6.4em; height: .38em; margin-top: .45em; }
.sc-seg { display: inline-flex; padding: .22em; border-radius: 999px; background: #dfe4e0; font-size: .9em; }
.sc-seg span { padding: .42em 1.05em; border-radius: 999px; color: var(--s-muted); font-weight: 500; }
.sc-seg span.is-on { background: var(--s-ink); color: #fff; }
.sc-btn { display: inline-flex; align-items: center; gap: .4em; padding: .62em 1.15em; border-radius: 999px; font-size: .92em; font-weight: 600; white-space: nowrap; background: var(--brand); color: var(--on-brand); transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.sc-btn.is-line { background: var(--s-surface); color: var(--s-ink); box-shadow: inset 0 0 0 1px #c9d0cb; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
/* the live challenge card */
.sc-card { padding: 1.5em; border-radius: 1.4em; background: var(--s-surface); box-shadow: 0 0 0 1px rgba(16, 22, 19, .06), 0 1.4em 3.4em -1.6em rgba(10, 16, 13, .3); display: flex; flex-direction: column; gap: 1.05em; }
.sc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.sc-card-head b { font-family: var(--font-display); font-size: 1.2em; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card .sc-kpi b { font-size: 1.28em; }
.sc-card-head b small { font-family: var(--font-body); font-size: .74em; font-weight: 500; color: var(--s-muted); margin-left: .4em; }
.sc-flags { display: flex; flex-wrap: wrap; align-items: center; gap: .8em; }
.sc-well { padding: 1.1em 1.25em; border-radius: 1.05em; background: var(--s-surface-2); box-shadow: inset 0 0 0 1px var(--s-line); display: grid; gap: .6em; font-size: .92em; }
.sc-well .sc-row span:last-child { color: var(--s-muted); }
.sc-well p { font-size: .94em; color: var(--s-muted); line-height: 1.45; }
.sc-phases { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .7em; }
.sc-phase { padding: .8em 1em; border-radius: .95em; box-shadow: inset 0 0 0 1px var(--s-line); font-size: .92em; }
.sc-phase b { display: block; font-weight: 600; } .sc-phase span { display: block; font-size: .9em; color: var(--s-muted); margin-top: .1em; }
.sc-phase.is-done { box-shadow: inset 0 0 0 1px #7fb89a; }
.sc-phase.is-current { background: color-mix(in srgb, var(--brand) 16%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 60%, #6c8a1a); transition: background-color 300ms var(--ease); }
/* record / timeline */
.sc-events { display: grid; gap: .1em; }
.sc-event { display: grid; grid-template-columns: 1.4em 1fr; gap: .2em .9em; padding: .75em 0; border-top: 1px solid var(--s-line); font-size: .93em; }
.sc-event:first-child { border-top: 0; }
.sc-event i { grid-row: span 2; width: .7em; height: .7em; margin-top: .4em; border-radius: 50%; background: #9aa39f; }
.sc-event.is-ok i { background: var(--ok); } .sc-event.is-warn i { background: var(--warn); } .sc-event.is-bad i { background: var(--bad); } .sc-event.is-info i { background: var(--info); }
.sc-event b { font-weight: 600; text-transform: capitalize; } .sc-event b small { font-weight: 400; color: var(--s-muted); margin-left: .5em; text-transform: none; }
.sc-event span { grid-column: 2; color: var(--s-ink-2); line-height: 1.45; }
/* the phone: a trader's own challenge */
.sc-mobile { height: 100%; display: flex; flex-direction: column; background: var(--s-bg); }
.sc-mobile-bar { display: flex; align-items: center; gap: .7em; padding: 3.4em 1.2em .9em; background: linear-gradient(180deg, #0f1a16, var(--s-rail)); color: #fff; }
.sc-mobile-bar b { font-family: var(--font-display); font-size: 1.15em; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mobile-body { flex: 1; padding: 1.1em; display: flex; flex-direction: column; gap: .85em; overflow: hidden; }
.sc-mobile h5 { margin: 0; font-family: var(--font-display); font-size: 1.5em; letter-spacing: -0.02em; }
.sc-mobile .sc-kpis { --cols: 2; gap: .7em; }
.sc-mobile .sc-kpi { padding: .8em .9em; border-radius: 1em; }
.sc-mobile .sc-kpi b { font-size: 1.28em; }
.sc-mobile .sc-well { font-size: .88em; padding: .9em 1em; }
.sc-mobile .sc-phase { font-size: .86em; padding: .65em .8em; }
.sc-mobile-foot { margin-top: auto; text-align: center; font-size: .78em; color: var(--s-muted); padding-bottom: .4em; }
/* templates and rules, as panels */
.sc-list { display: grid; gap: .8em; }
.sc-tpl { padding: 1.1em 1.25em; border-radius: 1.05em; background: var(--s-surface-2); box-shadow: inset 0 0 0 1px var(--s-line); display: grid; gap: .55em; }
.sc-tpl b { font-weight: 600; } .sc-tpl p { font-size: .9em; color: var(--s-muted); line-height: 1.45; }
.sc-sizes { display: flex; flex-wrap: wrap; gap: .4em; }
.sc-sizes span { padding: .3em .75em; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--s-line); font-size: .86em; font-weight: 500; }
.sc-sizes span.is-on { background: var(--s-ink); color: #fff; box-shadow: none; }
.sc-field { display: grid; gap: .4em; font-size: .92em; }
.sc-field label { font-weight: 600; font-size: .92em; color: var(--s-ink-2); }
.sc-input { display: flex; align-items: center; justify-content: space-between; gap: .6em; height: 2.9em; padding: 0 1em; border-radius: .8em; background: #fff; box-shadow: inset 0 0 0 1px #c9d0cb; white-space: nowrap; overflow: hidden; }
.sc-input em { font-style: normal; color: var(--s-muted); }
.sc-swatch { width: 1.3em; height: 1.3em; border-radius: .4em; background: var(--brand); box-shadow: inset 0 0 0 1px rgba(16, 22, 19, .18); flex: none; transition: background-color 300ms var(--ease); }
.sc-switch { display: grid; grid-template-columns: auto 1fr; gap: .9em; align-items: start; font-size: .92em; }
.sc-switch i { width: 2.7em; height: 1.55em; border-radius: 999px; background: var(--brand); position: relative; box-shadow: inset 0 0 0 1px rgba(16, 22, 19, .14); transition: background-color 300ms var(--ease); }
.sc-switch i::after { content: ""; position: absolute; right: .18em; top: .18em; width: 1.19em; height: 1.19em; border-radius: 50%; background: #fff; box-shadow: 0 .06em .2em rgba(0, 0, 0, .3); }
.sc-switch b { font-weight: 600; display: block; } .sc-switch span { display: block; color: var(--s-muted); font-size: .94em; line-height: 1.4; margin-top: .15em; }
.sc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; }
/* letters and messages in the firm's name */
.sc-mail { border-radius: 1.2em; background: var(--s-surface); box-shadow: 0 0 0 1px rgba(16, 22, 19, .06), 0 1.2em 3em -1.6em rgba(10, 16, 13, .3); overflow: hidden; }
.sc-mail-head { display: grid; grid-template-columns: 2.6em 1fr auto; gap: .9em; align-items: center; padding: 1.1em 1.3em; border-bottom: 1px solid var(--s-line); }
.sc-mail-head .sc-logo { display: grid; width: 2.6em; height: 2.6em; border-radius: .8em; font-size: 1em; color: var(--on-brand); }
.sc-mail-head b { display: block; font-weight: 600; } .sc-mail-head span { display: block; font-size: .88em; color: var(--s-muted); } .sc-mail-head time { font-size: .84em; color: var(--s-muted); }
.sc-mail-body { padding: 1.2em 1.3em 1.35em; display: grid; gap: .7em; font-size: .95em; line-height: 1.5; color: var(--s-ink-2); }
.sc-mail-body h6 { margin: 0; font-family: var(--font-display); font-size: 1.22em; letter-spacing: -0.01em; color: var(--s-ink); }
.sc-bubble { max-width: 88%; padding: .9em 1.1em; border-radius: 1.15em 1.15em 1.15em .35em; background: #fff; box-shadow: 0 0 0 1px rgba(16, 22, 19, .06), 0 .5em 1.4em -.8em rgba(10, 16, 13, .3); font-size: .93em; line-height: 1.45; color: var(--s-ink-2); }
.sc-bubble b { display: block; color: #1d6fd1; font-weight: 600; margin-bottom: .2em; }
/* import results */
.sc-count { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }

/* ── diagrams ─────────────────────────────────────────────────────────── */
.dg { container-type: inline-size; }
.dg-flow { display: grid; gap: 1.1em; font-size: clamp(14px, 1.55cqw, 15px); align-items: stretch; grid-template-columns: 1fr; }
@container (min-width: 640px) { .dg-flow { grid-template-columns: 1fr auto 1.25fr auto 1fr; } }
.dg-node { position: relative; padding: 1.25em 1.3em; border-radius: 1.2em; background: #fff; box-shadow: var(--sh-1); display: grid; gap: .5em; align-content: start; }
.dg-node.is-core { background: var(--deck); color: var(--deck-ink); box-shadow: 0 0 0 1px rgba(183, 255, 0, .3), 0 1.6em 3.6em -1.8em rgba(10, 16, 13, .6); }
.dg-node small { font-size: .82em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dg-node.is-core small { color: var(--lime); }
.dg-node b { font-family: var(--font-display); font-size: 1.08em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.dg-node pre { margin: .2em 0 0; padding: .8em .9em; border-radius: .7em; background: var(--bg-soft); font-size: .8em; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.dg-node.is-core pre { background: rgba(255, 255, 255, .06); color: #d7e0da; }
.dg-node ul { list-style: none; margin: .2em 0 0; padding: 0; display: grid; gap: .45em; font-size: .88em; color: var(--deck-ink-2); }
.dg-node li { display: flex; gap: .6em; align-items: baseline; }
.dg-node li::before { content: ""; flex: none; width: .45em; height: .45em; border-radius: 50%; background: var(--lime); transform: translateY(-.1em); }
.dg-node li.is-no::before { background: #ff8a8a; }
.dg-arrow { display: grid; place-items: center; color: var(--ink-4); }
.dg-arrow svg { width: 2em; height: 2em; }
@container (max-width: 639px) { .dg-arrow svg { transform: rotate(90deg); } }
.dg-out { display: grid; gap: .6em; align-content: start; }
.dg-out .dg-node { padding: 1em 1.15em; }
/* drawdown chart */
.dg-chart { min-width: 0; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); padding: clamp(18px, 2.4vw, 28px); }
.dg-chart-top { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dg-chart svg { width: 100%; height: auto; overflow: visible; }
.dg-chart .grid line { stroke: var(--line); stroke-width: 1; }
.dg-chart .eq { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dg-chart .eq-fill { fill: url(#dg-eq-grad); }
.dg-chart .floor { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 5 5; stroke-linejoin: round; opacity: 0; transition: opacity 260ms var(--ease); }
.dg-chart .floor.is-on { opacity: 1; }
.dg-chart .start { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 2 4; }
.dg-chart text { font-family: var(--font-body); font-size: 11px; fill: var(--ink-3); }
.dg-chart text.b { fill: var(--bad); font-weight: 600; }
.dg-chart .day line { stroke: var(--line-strong); stroke-dasharray: 2 5; }
.dg-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.dg-legend span { display: inline-flex; align-items: center; gap: 8px; }
.dg-legend i { width: 18px; height: 0; border-top: 2.2px solid var(--ink); }
.dg-legend i.f { border-top: 2px dashed var(--bad); } .dg-legend i.s { border-top: 1px dashed var(--ink-4); }
.dg-caption { margin-top: 14px; min-height: 3.1em; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
/* the five-second loop */
.dg-loop { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); counter-reset: dg-loop; }
.dg-loop li { counter-increment: dg-loop; list-style: none; position: relative; padding: 18px 18px 20px; border-radius: var(--r); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--deck-line); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.dg-loop li::before { content: counter(dg-loop, decimal-leading-zero); display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--deck-ink-3); transition: color 300ms var(--ease); }
.dg-loop li b { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--deck-ink); }
.dg-loop li span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--deck-ink-2); }
.dg-loop li.is-on { background: rgba(183, 255, 0, .08); box-shadow: inset 0 0 0 1px rgba(183, 255, 0, .45); }
.dg-loop li.is-on::before { color: var(--lime); }
ol.dg-loop { margin: 0; padding: 0; }

/* ── page heroes ──────────────────────────────────────────────────────── */
.k-hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(44px, 5vw, 72px); text-align: center; }
.k-hero .k-h1 { max-width: 17ch; margin-inline: auto; }
.k-hero .k-lead { margin-inline: auto; max-width: 66ch; }
.k-hero .k-cta-row { justify-content: center; }
.k-hero-note { margin-top: 20px; font-size: 14px; color: var(--ink-3); }
.k-hero-note strong { color: var(--ink); font-weight: 600; }
/* the front of a solution page: tight enough that the product shows above the fold */
.k-hero.is-front { padding: clamp(32px, 4.2vw, 60px) 0 clamp(30px, 3.4vw, 44px); }
.k-hero.is-front .k-h1 { font-size: clamp(36px, 5vw, 64px); }
.k-hero-tone { margin-top: 10px; font-size: clamp(22px, 2.9vw, 38px); }
.k-hero.is-front .k-lead { margin-top: 16px; font-size: clamp(16px, 1.25vw, 18px); }
.k-hero.is-front .k-cta-row { margin-top: 24px; }
.k-hero-points { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.k-hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.k-hero-points li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.7 2.7L14.2 7.4' fill='none' stroke='%230a0f0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.k-hero.is-front .k-hero-note { margin-top: 14px; font-size: 13.5px; }
.k-hero.is-left { text-align: left; }
.k-hero.is-left .k-h1, .k-hero.is-left .k-lead { margin-inline: 0; }
.k-hero.is-left .k-cta-row { justify-content: flex-start; }
.k-crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13.5px; color: var(--ink-3); }
.k-crumbs a:hover { color: var(--ink); }
.k-crumbs svg { width: 12px; height: 12px; opacity: .6; }

/* in-page section index (platform tour) */
.k-index { position: sticky; top: var(--nav-h); z-index: 30; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.k-index ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.k-index ul::-webkit-scrollbar { display: none; }
.k-index a { display: block; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: color var(--t) var(--ease), background-color var(--t) var(--ease); }
.k-index a:hover { color: var(--ink); }
.k-index a.is-current { background: var(--ink); color: #fff; }

/* templates fed by the gateway */
.k-tpl { padding: 24px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 12px; }
.k-tpl h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.k-tpl > p { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.k-tpl .rules { display: flex; flex-wrap: wrap; gap: 6px; }
.k-tpl .rules span { padding: 4px 10px; border-radius: 8px; background: var(--bg-soft); font-size: 12.5px; font-weight: 500; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.k-tpl .sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.k-tpl .sizes span { padding: 4px 10px; border-radius: 999px; background: var(--lime-soft); box-shadow: inset 0 0 0 1px var(--lime-line); font-size: 12.5px; font-weight: 600; color: var(--lime-ink); font-variant-numeric: tabular-nums; }
.k-tpl .fees { font-size: 13px; color: var(--ink-3); }
.k-loading { color: var(--ink-3); font-size: 15px; }

/* apply: reassurance beside the form */
.k-apply { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 980px) { .k-apply { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: start; } .k-apply-side { position: sticky; top: calc(var(--nav-h) + 32px); } }
.k-apply-card { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-2); }
.k-next { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.k-next li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.k-next li i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-style: normal; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; }
.k-next li b { display: block; color: var(--ink); font-weight: 600; }

/* a scene in a narrow card keeps its words and drops its secondary controls */
@container (max-width: 460px) {
  .sc-card { padding: 1.25em; }
  .sc-card-head .sc-seg, .sc-card-head .sc-btn.is-line, .sc-card-head > span:not(.sc-tag):not(.sc-status):not(.sc-btn) { display: none; }
  .sc-grid2 { grid-template-columns: 1fr; }
  .sc-card .sc-kpis { --cols: 2 !important; }
  .sc-table th, .sc-table td { padding-left: 1em; padding-right: 1em; }
  .sc-table .is-wide { display: none; }
  .sc-table td { white-space: normal; }
  .sc-well .sc-row, .sc-card-head { flex-wrap: wrap; }
  .sc-status { white-space: normal; }
  .sc-input { white-space: normal; height: auto; min-height: 2.9em; padding-block: .5em; }
}

/* showcase: words in two columns, then the scene at the full width of the page so it can be read */
.k-show-head { display: grid; gap: clamp(20px, 4vw, 64px); align-items: end; }
@media (min-width: 980px) { .k-show-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.k-show-head .k-ticks { margin: 0; }
.k-show-art { margin-top: clamp(32px, 4vw, 56px); }
.k-show-art .fr-browser.on-paper { box-shadow: var(--sh-3); }
[data-surface="deck"] .k-ticks code, .is-deck .k-ticks code, [data-surface="deck"] p code, .is-deck p code { background: rgba(255, 255, 255, .08); color: #dfe7e2; }
/* a hero with a scene beside the words */
.k-hero-split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 1040px) { .k-hero-split { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); } }

/* ── the trader dashboards (public/kit/challenge-views.css is the console's own stylesheet) ───────────── */
/* inside a scene a view wears the firm's colour, and sits on the scene's surface */
.sc .cv { --cv-accent: var(--brand); --cv-on-accent: var(--on-brand); --cv-accent-ink: color-mix(in srgb, var(--brand) 55%, #101613); --cv-muted: var(--s-muted); --cv-line: var(--s-line); box-shadow: 0 0 0 1px rgba(16, 22, 19, .06), 0 1.2em 3em -1.6em rgba(10, 16, 13, .3); }
.sc .cv-cockpit { --cv-line: rgba(255, 255, 255, .1); --cv-muted: #93a09a; --cv-accent: var(--brand-lit, var(--brand)); --cv-accent-ink: var(--brand-lit, var(--brand)); --cv-on-accent: var(--on-brand-lit, var(--on-brand)); box-shadow: 0 1.4em 3.4em -1.6em rgba(10, 16, 13, .6); }
.sc-app.is-tall { aspect-ratio: auto; min-height: 0; }
.sc-dash { min-width: 0; }
.sc-mobile-body.is-dash { gap: .7em; overflow: hidden; }
.sc-mobile-body.is-dash .cv { padding: 1em; gap: .7em; border-radius: 1.2em; font-size: .93em; }
.sc-mobile-body.is-dash .cv-facts { gap: .5em; } .sc-mobile-body.is-dash .cv-facts > div { padding: .6em .8em; } .sc-mobile-body.is-dash .cv-spark { height: 3.3em; margin-top: .5em; } .sc-mobile-body.is-dash .cv-cock { gap: .8em; }
.sc-mobile-body.is-dash .cv-plot { height: 11em; } .sc-mobile-body.is-dash .cv-meter { gap: .3em; } .sc-mobile-body.is-dash .cv-pulse .cv-meters { gap: .5em; }
.sc-mobile-body.is-dash .cv-stages li { padding: .55em .7em; }
.sc-mobile-body.is-dash .cv-objs li { padding: .5em 0; }
.sc-mobile-body.is-dash .cv-group { padding: .7em .85em .25em; } .sc-mobile-body.is-dash .cv-group dl > div { padding: .4em 0; } .sc-mobile-body.is-dash .cv-group dd.is-note { display: none; }
.sc-mobile-body.is-dash .cv-groups { gap: .55em; } .sc-mobile-body.is-dash .cv-ledger .cv-meters { display: none; }
/* the showcase: the design tabs, what the design is for, then a desk and a phone showing it */
/* the dashboards showcase: the picker and the desk share the left column, the phone stands beside both */
.k-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 28px; }
.k-dash-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.k-dash-pick > .k-tabs { justify-self: start; }
.k-dash-yours { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.k-dash-yours > b { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.k-dash-yours .k-brand-input { width: 190px; }
.k-swatches { display: inline-flex; align-items: center; gap: 8px; }
.k-swatch { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 0; background: var(--c, #ddd); box-shadow: inset 0 0 0 1px rgba(16, 22, 19, .18); cursor: pointer; transition: box-shadow var(--t) var(--ease); }
@media (max-width: 899px) { .k-swatch { width: 36px; height: 36px; } .k-swatches { gap: 10px; flex-wrap: wrap; } }
.k-swatch:hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 19, .18), 0 0 0 3px rgba(16, 22, 19, .08); }
.k-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(16, 22, 19, .18), 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.k-swatch.is-any { display: inline-grid; place-items: center; overflow: hidden; background: conic-gradient(#ff7aa2, #ffd166, #b7ff00, #8ccbff, #c4b5fd, #ff7aa2); }
.k-swatch.is-any input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; }
.k-swatch:focus-visible, .k-swatch.is-any:focus-within { outline: 2px solid var(--lime-ink); outline-offset: 3px; }
.k-dash-hint { font-size: 14px; color: var(--ink-3); } .k-dash-hint b { color: var(--ink); font-weight: 600; }
.k-dash-gist { max-width: 64ch; min-height: 3.2em; font-size: 15.5px; line-height: 1.6; color: var(--ink-3); }
/* The desk is one fixed window: every design fills it, so turning from one to the next never moves the page. It is drawn
   as a narrower window than the other scenes (larger em), because these are the pictures a visitor leans in to read. */
.k-dash-desk { display: none; }
.k-dash-desk .fr-view { font-size: clamp(7px, 1.36cqw, 15.5px); }
.k-dash-desk .sc-app.is-tall { aspect-ratio: 16 / 11.3; }
.k-dash-desk .sc-main { min-height: 0; } .k-dash-desk .sc-dash { flex: 1 1 0; min-height: 0; display: grid; }
.k-dash-desk.fr-clip { overflow: visible; }
/* inside the window a card's soft shadow would be cut square by the page area it sits in, so here it keeps only its hairline */
.k-dash-desk .sc-dash > .sc-card { align-self: start; box-shadow: 0 0 0 1px rgba(16, 22, 19, .07); }
.k-dash-desk .sc-dash > .cv { box-shadow: 0 0 0 1px rgba(16, 22, 19, .07); } .k-dash-desk .sc-dash > .cv-cockpit { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.k-dash-desk .sc-dash > .cv { min-height: 0; }
.k-dash-desk .cv-cockpit, .k-dash-desk .cv-ledger, .k-dash-desk .cv-focus { grid-template-rows: auto 1fr auto auto; } .k-dash-desk .cv-cock, .k-dash-desk .cv-focus-main { align-self: center; }
/* the ledger's panels are as tall as the window allows, and their rows share that height evenly: no panel ends in a blank */
.k-dash-desk .cv-group { display: grid; grid-template-rows: auto 1fr; } .k-dash-desk .cv-group dl { display: grid; align-content: space-around; }
.k-dash-desk .cv-pulse { grid-template-rows: auto auto 1fr auto auto; } .k-dash-desk .cv-plot { height: auto; min-height: 10em; }
.k-dash-desk .cv-runway { grid-template-rows: auto auto auto 1fr auto; } .k-dash-desk .cv-objs { align-content: space-evenly; }
.k-tabs button { position: relative; }
.k-tabs.is-auto button[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--lime-ink); transform-origin: 0 50%; animation: k-tab-run 5200ms linear both; }
@keyframes k-tab-run { from { transform: scaleX(0); } }
.k-dash-phone { width: min(78%, 300px); justify-self: center; }
/* six short tabs: a row where there is room, three by two where there is not (a phone, or a narrow column) */
.k-tabs.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; border-radius: 24px; overflow: visible; } .k-tabs.is-grid button { padding: 0 8px; }
@media (max-width: 560px) { .k-dash-pick > .k-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; border-radius: 24px; overflow: visible; } .k-dash-pick > .k-tabs button { padding: 0 8px; } }
@media (min-width: 900px) {
  /* the words stay on the page's left edge; only the two frames reach past it, by the same amount on each side */
  .k-dash { --out: calc((min(100vw - 48px, 1340px) - min(100vw - 48px, 1200px)) / 2); grid-template-columns: minmax(0, 1fr) clamp(230px, 24%, 300px); gap: 26px clamp(28px, 3.4vw, 52px); align-items: end; }
  .k-dash-desk { margin-left: calc(-1 * var(--out)); } .k-dash-phone { margin-right: calc(-1 * var(--out)); }
  .k-dash-pick { grid-column: 1; }
  .k-dash-desk { display: block; grid-column: 1; }
  .k-dash-phone { grid-column: 2; grid-row: 1 / span 2; width: auto; align-self: end; justify-self: stretch; }
}
.k-dash-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); text-align: center; }
.k-dash-gist { max-width: 70ch; min-height: 3.2em; font-size: 15.5px; line-height: 1.6; color: var(--ink-3); }

/* ── the template lab ─────────────────────────────────────────────────── */
.lab { display: grid; gap: 16px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); }
.lab > *, .lab-side, .lab-list { min-width: 0; }
@media (min-width: 1040px) { .lab { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; --out: calc((min(100vw - 48px, 1340px) - min(100vw - 48px, 1200px)) / 2); margin-right: calc(-1 * var(--out)); } .lab-side { position: sticky; top: calc(var(--nav-h) + 64px); } }
.lab-cap { margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.lab-list { display: grid; gap: 8px; }
.lab-tpl { display: grid; gap: 4px; width: 100%; padding: 14px 16px; border: 0; border-radius: var(--r); background: #fff; box-shadow: var(--sh-1); text-align: left; cursor: pointer; transition: box-shadow var(--t) var(--ease), background-color var(--t) var(--ease); }
.lab-tpl { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; } .lab-tpl span { grid-column: 1 / -1; }
.lab-tpl b { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
/* the shape of the template's drawdown rule: an equity line, and the floor that rule draws under it */
.lab-glyph { width: 62px; height: 27px; overflow: visible; } .lab-glyph path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lab-glyph .e { stroke: var(--ink-3); stroke-width: 1.7; } .lab-glyph .f { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 3 2.6; opacity: .85; }
.lab-tpl[aria-checked="true"] .lab-glyph .e { stroke: var(--ink); }
.lab-tpl span { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.lab-tpl:hover { box-shadow: 0 0 0 1px var(--line-strong), 0 1px 2px rgba(16, 22, 19, .05); }
.lab-tpl[aria-checked="true"] { background: var(--lime-soft); box-shadow: 0 0 0 1.5px var(--lime-deep), 0 10px 26px -18px rgba(101, 163, 13, .7); }
.lab-main { min-width: 0; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-2); }
.lab-head h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; line-height: 1.2; }
.lab-head h3 span { color: var(--lime-ink); }
.lab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lab-chips span { padding: 4px 10px; border-radius: 8px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.lab-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 20px; }
.lab-row .lab-cap { margin: 0; min-width: 96px; }
.lab-sizes, .lab-months { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lab-sizes button, .lab-months button { height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.lab-sizes button:hover, .lab-months button:hover { box-shadow: inset 0 0 0 1px var(--ink-4); color: var(--ink); }
.lab-sizes button[aria-checked="true"], .lab-months button[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.lab-fee { font-size: 13px; color: var(--ink-3); } .lab-fee b { color: var(--ink); font-weight: 600; }
.lab-gist { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.lab-chart { margin-top: 14px; border-radius: var(--r); background: linear-gradient(180deg, #fbfcfb, #f5f7f5); box-shadow: inset 0 0 0 1px var(--line); padding: 10px 6px 2px; }
.lab-chart svg { width: 100%; height: auto; overflow: visible; }
.lab-grid line { stroke: var(--line); } .lab-grid text, .lab-days text { font-family: var(--font-body); font-size: 11px; fill: var(--ink-3); }
.lab-area { fill: url(#lab-eq); }
.lab-equity { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.lab-balance { fill: none; stroke: #8a938f; stroke-width: 1.4; }
.lab-floor { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 6 5; }
.lab-daily { fill: none; stroke: #c2620c; stroke-width: 1.5; stroke-dasharray: 2 4; }
.lab-target { fill: none; stroke: #5d8f0b; stroke-width: 1.8; stroke-dasharray: 8 5; }
.lab-mark circle { fill: #fff; stroke: var(--ink-4); stroke-width: 1.6; } .lab-mark text { font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: var(--ink); }
.lab-mark.is-ok circle { stroke: var(--ok); fill: #e6f5eb; } .lab-mark.is-bad circle { stroke: var(--bad); fill: #fdecec; } .lab-mark.is-warn circle { stroke: var(--warn); fill: #fff2dc; } .lab-mark.is-info circle { stroke: var(--info); fill: #e8eeff; }
.lab-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.lab-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lab-legend i { width: 18px; height: 0; border-top: 2.2px solid var(--ink); } .lab-legend i.b { border-top: 1.4px solid #8a938f; } .lab-legend i.f { border-top: 2px dashed var(--bad); } .lab-legend i.d { border-top: 1.5px dotted #c2620c; } .lab-legend i.t { border-top: 1.8px dashed #5d8f0b; }
/* the stage: the month on the left, the trader's own phone for that day on the right */
.lab-stage { display: grid; gap: 22px; margin-top: 14px; grid-template-columns: minmax(0, 1fr); }
.lab-screen { min-width: 0; } .lab-stage .lab-chart { margin-top: 0; }
.lab-device { display: grid; gap: 12px; justify-items: center; align-content: start; min-width: 0; }
.lab-device .lab-cap { margin: 0; justify-self: stretch; text-align: center; font-variant-numeric: tabular-nums; }
.lab-device .fr-phone { width: min(100%, 330px); }
@media (min-width: 760px) { .lab-device .fr-phone { width: min(100%, 270px); } }
.lab-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.lab-seg button { height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.lab-seg button:hover { color: var(--ink); } .lab-seg button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
@media (min-width: 760px) { .lab-stage.has-phone { grid-template-columns: minmax(0, 1fr) minmax(220px, 270px); align-items: start; } }
.lab-transport { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 14px; }
.lab-play { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.lab-play:hover { background: #1f2a25; } .lab-play.is-on { background: var(--lime); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(16, 22, 19, .14); }
.lab-play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .lab-play svg .p { fill: currentColor; stroke-width: 1.6; }
.lab-play span { min-width: 5.6em; text-align: left; }
.lab-head-line { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 3 4; } .lab-head-line.is-end { opacity: 0; }
.lab-now { fill: #fff; stroke: var(--ink); stroke-width: 2.2; }
.lab-scrub { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-3); }
.lab-scrub b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lab-scrub input { width: 100%; accent-color: #3f6a06; height: 28px; }
.lab-verdict { display: grid; gap: 4px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r); font-size: 14px; line-height: 1.5; animation: lab-in 320ms ease-out backwards; }
.lab-record li { animation: lab-in 380ms ease-out backwards; }
@keyframes lab-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lab-verdict, .lab-record li { animation: none; } }
.lab-verdict b { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.lab-verdict.is-ok { background: var(--ok-soft); color: #125e2e; box-shadow: inset 0 0 0 1px #bfe5cb; } .lab-verdict.is-bad { background: var(--bad-soft); color: #8b1717; box-shadow: inset 0 0 0 1px #f2c1c1; }
.lab-verdict.is-warn { background: var(--warn-soft); color: #7c3f06; box-shadow: inset 0 0 0 1px #f6d9a8; } .lab-verdict.is-info { background: var(--info-soft); color: #1c357e; box-shadow: inset 0 0 0 1px #cbd8ff; }
.lab-record { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.lab-record li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; }
.lab-record li:first-child { border-top: 0; }
.lab-record i { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; background: var(--bg-soft); box-shadow: inset 0 0 0 1.5px var(--ink-4); color: var(--ink); }
.lab-record li.is-ok i { background: #e6f5eb; box-shadow: inset 0 0 0 1.5px var(--ok); } .lab-record li.is-bad i { background: #fdecec; box-shadow: inset 0 0 0 1.5px var(--bad); } .lab-record li.is-warn i { background: #fff2dc; box-shadow: inset 0 0 0 1.5px var(--warn); } .lab-record li.is-info i { background: #e8eeff; box-shadow: inset 0 0 0 1.5px var(--info); }
.lab-record b { display: block; font-weight: 600; color: var(--ink); } .lab-record b small { margin-left: 8px; font-weight: 400; color: var(--ink-3); }
.lab-record span { color: var(--ink-2); overflow-wrap: anywhere; }
.lab-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.lab-foot span { flex: 1 1 260px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 1039px) { .lab-list { grid-auto-flow: column; grid-auto-columns: minmax(230px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; } .lab-list::-webkit-scrollbar { display: none; } .lab-tpl { scroll-snap-align: start; } }
@media (max-width: 759px) { .lab-row .lab-cap { min-width: 100%; } .lab-months, .lab-sizes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1 - 18px); padding-inline: calc(var(--gutter) + 18px); } .lab-months::-webkit-scrollbar, .lab-sizes::-webkit-scrollbar { display: none; } .lab-months button, .lab-sizes button { flex: none; } .lab-main { border-radius: var(--r-lg); } }

/* ── phones ───────────────────────────────────────────────────────────── */
.k-tabs { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.k-tabs::-webkit-scrollbar { display: none; }
.k-tabs button { flex: none; white-space: nowrap; }
.k-duo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
.k-duo > div:last-child { display: grid; gap: 16px; }
@media (max-width: 759px) {
  :root { --gutter: 18px; }
  .k-card-body { padding: 22px 20px; }
  /* a rule card reads as one line of icon and title, then its words */
  .k-bento .k-card-body:has(> .k-ico) { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 6px; align-items: center; }
  .k-bento .k-card-body:has(> .k-ico) > .k-ico { width: 40px; height: 40px; border-radius: 12px; margin: 0; }
  .k-bento .k-card-body:has(> .k-ico) > :not(.k-ico):not(h3) { grid-column: 1 / -1; }
  /* a long run of cards becomes a rail the thumb moves: the next card always shows its edge */
  .k-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter); }
  .k-rail::-webkit-scrollbar { display: none; }
  .k-rail > * { flex: 0 0 84%; scroll-snap-align: start; }
  .k-duo { grid-template-columns: 1fr; justify-items: center; }
  .k-duo > .fr-phone { width: min(64%, 250px); }
  .k-duo > div:last-child { width: 100%; }
  .k-step::before { margin-bottom: 28px; } .k-step::after { top: 50px; }
  .k-pkg { padding: 24px 22px; }
  .k-faq summary { font-size: 16.5px; padding: 18px 0; }
  .k-faq details > div { padding-right: 0; }
}

.api-business-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;}
.api-business-hero{text-align:left;}
.api-business-hero .k-h1{max-width:none;font-size:clamp(36px,4vw,58px);}
.api-business-hero .k-hero-tone{font-size:22px;}
.api-business-hero .k-cta-row,.api-business-hero .k-hero-points{justify-content:flex-start;}
.api-business-art{margin:0;background:#101714;border-radius:24px;overflow:hidden;}
.api-business-art img{width:100%;height:auto;display:block;}
.api-business-art figcaption{padding:0 24px 26px;color:#bec6c4;font-size:10px;letter-spacing:.16em;text-align:center;}
@media(max-width:900px){.api-business-grid{grid-template-columns:1fr;gap:28px;}.api-business-art{max-width:640px;}.api-business-hero .k-lead{margin-left:0;}}