/* Magic Sales White Board, marketing page.
   Loaded after /family.css (the family's app.css, vendored and untouched). Every token used here
   comes from that file: --ink, --ink-2, --ink-3, --mist, --line, --line-2, --paper, --signal,
   --accent, --accent-ink, --tint, --tint-2, --r-sm/--r/--r-lg, --display, --text. The page sets
   its own accent, Marker Red, in the head.

   This file is the marketing layer for this one product, written in the family's language: Deep
   Ink grounds with a drifting accent glow for the hero and the pricing band, Paper below, Archivo
   800/900 tight for headlines, Archivo 600 uppercase tracked for eyebrows, Inter for the rest, and
   one set of radii, shadows and edges so every frame matches the family's other pages.

   The family's pages are light only; the dark work is done by the Deep Ink grounds, not by a
   second palette. This page is pinned the same way. */

body.mk {
  background: var(--paper);
  --deep: #0F1626; --night: #18202F;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Tight corners on purpose. Buttons and chips 4px, cards 6px, big panels 10px. */
  --r1: 4px; --r2: 4px; --r3: 6px; --r4: 10px;
  --edge: rgba(255,255,255,.1); --edge-2: rgba(255,255,255,.18);
  --sh-1: 0 1px 2px rgba(15,22,38,.06), 0 8px 24px -12px rgba(15,22,38,.18);
  --sh-2: 0 24px 60px -28px rgba(0,0,0,.55);
  --sh-3: 0 2px 4px rgba(15,22,38,.05), 0 22px 44px -18px rgba(15,22,38,.28);
  --gutter: clamp(16px, 4vw, 48px);
  --btn-h: 44px;
  /* Marker Red is too dark to read as type on Deep Ink, so the same color-mix the family uses for
     its tints lifts it, rather than inventing a second brand hex. */
  --accent-lift: color-mix(in srgb, var(--accent) 52%, #fff);
  --accent-glow: color-mix(in srgb, var(--accent) 85%, transparent);
  overflow-x: clip;
}
:root { color-scheme: only light; }
body.mk p { text-wrap: pretty; }
body.mk main { display: block; }
.mk-head, .hero, .hub-stats, .feats, .proof, .boards, .how, .kit, .faq-sec, .cta-sec, .fam-more,
.mk-foot-inner, .mk-foot-base { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
section.feats, section.proof, section.boards, section.how, section.faq-sec { padding-top: clamp(56px, 7.5vw, 96px); padding-bottom: clamp(8px, 1.5vw, 16px); }
section.boards { padding-top: clamp(40px, 5vw, 64px); }
section.faq-sec + .cta-sec { padding-top: clamp(48px, 6vw, 72px); }

/* ---------- type ---------- */
body.mk h1, body.mk h2, body.mk h3 { font-family: var(--display); }
body.mk h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; max-width: 22ch; text-wrap: balance; }
body.mk h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow i { width: 10px; height: 3px; background: var(--accent); border-radius: 2px; }
.mk-dark .eyebrow { color: var(--ink-3); }
.mk-dark .eyebrow i { background: var(--accent); }
.sec-head { display: grid; gap: 14px; justify-items: start; }
.sec-sub { color: var(--ink-2); font-size: 17px; max-width: 56ch; margin: 2px 0 0; line-height: 1.5; }
.sec-head + * { margin-top: 36px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 90; }
.skip:focus { left: 12px; top: 12px; padding: 10px 14px; border-radius: var(--r2); background: var(--paper); color: var(--ink); font: 600 14px/1 var(--text); text-decoration: none; box-shadow: var(--sh-3); }

/* ---------- buttons on top of family.css ---------- */
body.mk .btn { height: var(--btn-h); padding: 0 18px; border-radius: var(--r2); font-weight: 600; font-size: 14.5px;
  transition: background .15s, border-color .15s, color .15s, transform .18s var(--ease), box-shadow .18s var(--ease); }
body.mk .btn:hover { transform: translateY(-1px); }
body.mk .btn:active { transform: translateY(1px); }
body.mk .btn-lg { height: 52px; padding: 0 24px; font-size: 15.5px; border-radius: var(--r2); }
/* .btn-signal's recipe, in Marker Red: an inset top highlight and a shadow the colour of the button. */
.btn-flame { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent)); color: #fff; font-weight: 700; border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 20px -10px var(--accent-glow); }
.btn-flame:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #fff), color-mix(in srgb, var(--accent) 92%, #fff)); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.36) inset, 0 14px 30px -10px var(--accent-glow); }
.btn-dark { background: transparent; color: #fff; border-color: var(--edge-2); }
.btn-dark:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: #fff; }
body.mk .btn-ghost { background: #fff; }
body.mk .btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: #0F1626; font-weight: 700; border-color: transparent; }
.btn-light:hover { background: color-mix(in srgb, var(--accent) 8%, #fff); color: #0F1626; }

/* ---------- Deep Ink ground: header + hero ---------- */
.mk-dark { background: var(--deep); color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.mk-dark::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 60% at 85% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
  linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25)); }
.mk-dark::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .45; background-image:
  linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 100%); mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 100%); }
/* two drifting light sources behind the hero: transform only, so the compositor does the work */
.mk-glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; will-change: transform; }
.mk-glow-a { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; right: -8vw; top: -14vw;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%); animation: glow-a 14s ease-in-out infinite alternate; }
.mk-glow-b { width: 34vw; height: 34vw; max-width: 520px; max-height: 520px; left: 18vw; bottom: -18vw;
  background: radial-gradient(circle at 50% 50%, rgba(242,179,61,.14), transparent 62%); animation: glow-b 18s ease-in-out infinite alternate; }
@keyframes glow-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-9vw, 7vw, 0) scale(1.18); } }
@keyframes glow-b { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(12vw, -6vw, 0) scale(.86); } }

.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; position: relative; }
.mk-head::after { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--edge); }
.mk-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; flex: none; border-radius: 6px; display: block; }
.mk-word { font: 800 19px/1 var(--display); letter-spacing: -0.03em; }
.msb-word { display: grid; gap: 3px; line-height: 1; }
.msb-word > span { font: 700 11px/1 var(--display); letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.msb-word b { font: 800 19px/1 var(--display); letter-spacing: -.03em; color: var(--accent-lift); }
.mk-foot .msb-word > span { color: #8B94A6; }
.mk-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; }
.mk-nav .btn { height: 38px; padding: 0 16px; font-size: 14px; }
.mk-nav a { white-space: nowrap; }
.mk-nav a:not(.btn) { color: rgba(255,255,255,.75); text-decoration: none; padding: 6px 0; position: relative; }
.mk-nav a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent-lift); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.mk-nav a:not(.btn):hover { color: #fff; }
.mk-nav a:not(.btn):hover::after { transform: scaleX(1); }
@media (max-width: 860px) {
  .mk-nav a:not(.btn):not(.nav-signin) { display: none; }
  .mk-nav { gap: 14px; } .mk-head { height: 64px; }
  .mk-nav .btn { height: 36px; padding: 0 14px; }
  .brand-mark { width: 30px; height: 30px; }
  .msb-word > span { font-size: 9.5px; letter-spacing: .14em; } .msb-word b { font-size: 16px; }
}
@media (max-width: 420px) { .mk-head { gap: 8px; padding-inline: 16px; } .mk-nav { gap: 10px; } .mk-nav .btn { padding: 0 12px; font-size: 13px; } }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center;
  padding-top: clamp(36px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero h1 { font-size: clamp(36px, 5.1vw, 66px); font-weight: 900; letter-spacing: -0.045em; line-height: .98; max-width: 17ch; color: #fff; margin-top: 18px; text-wrap: balance; }
.h1-sig { color: var(--accent-lift); }
.lede { font-size: clamp(16px, 1.4vw, 18.5px); color: rgba(255,255,255,.72); max-width: 46ch; margin: 22px 0 26px; line-height: 1.55; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-note { margin: 16px 0 0; font-size: 13px; color: rgba(255,255,255,.5); max-width: 52ch; line-height: 1.5; }
.hero-copy > * { animation: rise .6s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .06s; } .hero-copy > :nth-child(3) { animation-delay: .12s; }
.hero-copy > :nth-child(4) { animation-delay: .18s; } .hero-copy > :nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.hero-demo { display: flex; justify-content: center; align-items: stretch; animation: rise .7s var(--ease) .15s both; min-width: 0; }
@media (max-width: 480px) { .hero-cta .btn-lg { flex: 1 1 100%; } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-bottom: 36px; } .hero h1 { max-width: 18ch; } .hero-demo { margin-top: 4px; } }

/* the stage frame every family hero demo sits in */
.stage { width: 100%; max-width: 600px; border: 1px solid var(--edge); border-radius: var(--r4);
  background: linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: var(--sh-2);
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-width: 0; }
.stage-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--edge);
  font: 600 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.stage-live { display: inline-flex; align-items: center; gap: 7px; }
.stage-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(242,179,61,.2); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.stage-body { display: grid; gap: 14px; align-content: start; padding: clamp(16px, 2.6vw, 26px); }

/* ---------- the hand-built board mock, image free ---------- */
.tv { position: relative; border-radius: var(--r3); padding: 10px;
  background: linear-gradient(170deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border: 1px solid var(--edge-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 26px 54px -26px rgba(0,0,0,.75); }
.tv-screen { border-radius: var(--r2); padding: 12px 11px 13px;
  background: radial-gradient(130% 110% at 50% -10%, #223049 0%, #141C2C 52%, #0C1320 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 0 42px -10px color-mix(in srgb, var(--accent) 30%, transparent) inset; }
.tv-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; align-items: start; }
.tv-colhead { font: 600 9.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.52);
  padding: 0 2px 8px; margin-bottom: 7px; border-bottom: 1px solid var(--edge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-cell { display: grid; gap: 3px; min-width: 0; padding: 9px 9px 10px; margin-bottom: 7px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); border: 1px solid var(--edge);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 18px -12px rgba(0,0,0,.7);
  transition: transform .3s var(--ease), border-color .25s, box-shadow .3s var(--ease); }
.tv-cell b { font: 800 12px/1.15 var(--display); letter-spacing: -.02em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-cell span { font-size: 10.5px; line-height: 1.25; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-cell.hot { border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 13%, transparent));
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 26px -14px var(--accent-glow); }
.tv-cell.hot span { color: color-mix(in srgb, var(--accent) 30%, #fff); font-weight: 600; }
.tv-cell.won { position: relative; border-color: rgba(124,227,166,.4); background: linear-gradient(180deg, rgba(46,204,113,.18), rgba(46,204,113,.07)); }
/* the funded check sits in the corner of the square, so it never eats the name's width */
.tv-cell.won::after { content: '\2713'; position: absolute; top: 8px; right: 8px; color: #7CE3A6; font: 700 11px/1 var(--display); }
.tv-cell.won b { padding-right: 15px; }
.tv-cell.empty { margin-bottom: 0; min-height: 40px; background: none; border: 1px dashed var(--edge); box-shadow: none; }
.tv:hover .tv-cell.hot { transform: translateY(-2px); }
.tv-tag { position: absolute; top: -11px; right: 14px; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 4px;
  background: var(--signal); color: #18202F; font: 800 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 6px 18px -6px rgba(242,179,61,.9); }
.tv-cap { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.55); text-align: center; }
@media (max-width: 1060px) and (min-width: 901px) { .tv-colhead { font-size: 8.5px; letter-spacing: .06em; } .tv-cell b { font-size: 11px; } .tv-cell span { font-size: 10px; } }
@media (max-width: 540px) {
  .tv { padding: 7px; } .tv-screen { padding: 10px 8px; } .tv-cols { gap: 5px; }
  .tv-colhead { font-size: 8px; letter-spacing: .05em; padding-bottom: 6px; margin-bottom: 5px; }
  .tv-cell { padding: 7px 6px 8px; margin-bottom: 5px; border-radius: 7px; }
  /* narrow squares give the name the whole width; the check drops beside the number instead */
  .tv-cell.won::after { top: auto; bottom: 7px; right: 6px; font-size: 9px; } .tv-cell.won b { padding-right: 0; }
  .tv-cell.won span { padding-right: 12px; }
  /* a phone has no room to ellipsis these away: let the names and heads wrap instead */
  .tv-colhead { white-space: normal; overflow: visible; text-overflow: clip; font-size: 7.5px; letter-spacing: .02em; line-height: 1.2; }
  .tv-cell b { font-size: 10px; white-space: normal; line-height: 1.2; }
  .tv-cell span { font-size: 9px; white-space: normal; line-height: 1.25; }
  .tv-cell.empty { display: none; }
  .tv-tag { right: 8px; font-size: 9px; padding: 4px 9px; }
}

/* ---------- glance strip under the hero ---------- */
.hub-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--edge); padding-top: 26px; padding-bottom: 44px; gap: 16px; }
.hub-stats > div { position: relative; padding-left: 16px; }
.hub-stats > div::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--signal); opacity: .8; }
.hub-stats b { display: block; font: 800 clamp(26px, 3.2vw, 32px)/1 var(--display); letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.hub-stats span { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 7px; line-height: 1.4; max-width: 21ch; }
@media (max-width: 760px) { .hub-stats { grid-template-columns: 1fr 1fr; gap: 20px 12px; padding-bottom: 34px; } }

/* ---------- feature cards ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feat { border: 1px solid var(--line); border-radius: var(--r3); padding: 20px; background: #fff; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--sh-1); transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease); }
.feat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--sh-3); }
.feat h3 { font-size: 17px; margin-top: 2px; }
.feat p { color: var(--ink-2); margin: 0; font-size: 14px; line-height: 1.55; }
.feat-tag { align-self: flex-start; font: 600 10.5px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink);
  padding: 6px 10px; border-radius: 4px; background: var(--tint); border: 1px solid var(--tint-2); }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .feat-grid { grid-template-columns: 1fr; } }

/* ---------- trades strip ---------- */
.marquee { margin: 34px calc(-1 * var(--gutter)) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 56s linear infinite; }
.marquee-track .trade-run { display: flex; gap: 8px; padding-right: 8px; }
.marquee-track i { --a: var(--accent); font-style: normal; white-space: nowrap; padding: 10px 17px; border-radius: var(--r1);
  border: 1px solid color-mix(in srgb, var(--a) 25%, white); background: color-mix(in srgb, var(--a) 7%, white);
  color: color-mix(in srgb, var(--a) 72%, black); font-weight: 600; font-size: 14px; }
.marquee-track .trade-run > i:nth-child(3n+2) { --a: #3A4456; }
.marquee-track .trade-run > i:nth-child(3n+3) { --a: #18202F; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* ---------- ready-made boards ---------- */
.board-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(22px, 4vw, 44px); align-items: center;
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r4); padding: clamp(22px, 3.5vw, 40px); box-shadow: var(--sh-1);
  position: relative; isolation: isolate; overflow: hidden; }
.board-panel::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(75% 85% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%); }
.board-copy { display: grid; gap: 12px; justify-items: start; }
.board-copy h3 { font-size: clamp(20px, 2.3vw, 27px); font-weight: 800; letter-spacing: -.03em; max-width: 24ch; }
.board-copy p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 44ch; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.board-list li { position: relative; padding: 10px 12px 10px 30px; border-radius: var(--r2); background: var(--paper); border: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 500; box-shadow: var(--sh-1); transition: transform .25s var(--ease), border-color .2s, box-shadow .25s var(--ease); }
.board-list li::before { content: ''; position: absolute; left: 12px; top: 18px; width: 10px; height: 3px; border-radius: 2px; background: var(--accent); }
.board-list li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--sh-3); }
@media (max-width: 900px) { .board-panel { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .board-list { grid-template-columns: 1fr; } }

/* ---------- how it gets on the TV ---------- */
.how-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.how-steps li { position: relative; padding: 22px; border-radius: var(--r3); background: var(--mist); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; transition: transform .35s var(--ease), background .25s, border-color .25s, box-shadow .35s var(--ease); }
.how-steps li:hover { transform: translateY(-3px); background: #fff; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--sh-3); }
.how-steps p { color: var(--ink-2); margin: 0; font-size: 14px; line-height: 1.55; }
.how-n { font: 800 13px/1 var(--display); letter-spacing: .04em; color: var(--accent-ink); margin-bottom: 6px; padding-bottom: 10px;
  border-bottom: 2px solid var(--accent); align-self: flex-start; }
.how-note { margin: 28px 0 0; max-width: 66ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; padding-left: 16px; border-left: 3px solid var(--tint-2); }
@media (max-width: 1000px) { .how-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .how-steps { grid-template-columns: 1fr; } }

/* ---------- pricing: the family's lit band ---------- */
section.kit { max-width: 1240px; padding-top: clamp(56px, 7.5vw, 96px); padding-bottom: clamp(8px, 1.5vw, 16px); }
.kit-box { position: relative; isolation: isolate; overflow: hidden; border-radius: 12px;
  padding: clamp(36px, 5vw, 64px) clamp(16px, 3.5vw, 48px) clamp(24px, 3.5vw, 40px); color: #fff;
  background: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%),
              radial-gradient(120% 80% at 50% 0%, #22304D 0%, #131B2D 45%, var(--deep) 100%);
  box-shadow: 0 40px 100px -40px rgba(15,22,38,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.kit-box::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(80% 60% at 50% 20%, #000 20%, transparent 75%); }
.kit-glow { position: absolute; z-index: -1; left: 50%; top: 52%; width: 900px; height: 520px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 9%, transparent) 55%, transparent 75%);
  filter: blur(10px); animation: kit-breathe 6s ease-in-out infinite; pointer-events: none; }
@keyframes kit-breathe { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.kit-head { justify-items: center; text-align: center; margin-inline: auto; max-width: 660px; }
.kit-head h2 { color: #fff; font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; max-width: none;
  background: linear-gradient(180deg, #fff 34%, color-mix(in srgb, var(--accent) 48%, #fff) 140%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kit-head .sec-sub { color: rgba(255,255,255,.72); }
.kit-head .eyebrow { color: rgba(255,255,255,.7); } .kit-head .eyebrow i { background: var(--signal); }

.kit-cards { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 18px; align-items: stretch; margin-top: 46px; }
.kc { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px 20px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease); }
.kc:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.24); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.kc-top h3 { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0 0 6px; }
.kc-top p { margin: 0; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.45; }
.kc-price { font: 800 50px/1 var(--display); letter-spacing: -0.05em; color: #fff; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.kc-price small { font: 500 14px var(--text); letter-spacing: 0; color: rgba(255,255,255,.6); white-space: nowrap; }
.kc-save { align-self: flex-start; font: 700 12px/1.3 var(--display); letter-spacing: .02em; color: #7CE3A6;
  background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.28); padding: 7px 11px; border-radius: 4px; }
.kc-save-free { color: #FFD98A; background: rgba(242,179,61,.1); border-color: rgba(242,179,61,.3); }
.kc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1; align-content: start; font-size: 14px; color: rgba(255,255,255,.86); }
.kc-list li { position: relative; padding-left: 24px; }
.kc-list li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 11px; height: 6px;
  border-left: 2px solid var(--accent-lift); border-bottom: 2px solid var(--accent-lift); transform: rotate(-45deg); }
.kc-list li.off { color: rgba(255,255,255,.5); }
.kc-list li.off::before { border: 0; top: 9px; left: 3px; width: 10px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.32); transform: none; }
.kc-free { align-self: center; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.72); text-decoration: none; padding: 4px 6px; border-bottom: 1px dashed rgba(255,255,255,.3); }
.kc-free:hover { color: #fff; border-bottom-color: var(--accent-lift); }
.kc .btn-block { margin-top: auto; }

/* the featured card: a slow ring of light around it */
@property --kc-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.kc-hot { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(255,255,255,.04) 42%), rgba(15,22,38,.6);
  border-color: transparent; transform: translateY(-10px); box-shadow: 0 40px 80px -40px var(--accent-glow); }
.kc-hot::before { content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: 9px; padding: 1.5px;
  background: conic-gradient(from var(--kc-ang), color-mix(in srgb, var(--accent) 16%, transparent), var(--accent) 18%,
    color-mix(in srgb, var(--accent) 45%, #fff) 22%, color-mix(in srgb, var(--accent) 16%, transparent) 40%,
    color-mix(in srgb, var(--accent) 16%, transparent) 60%, var(--accent) 78%, color-mix(in srgb, var(--accent) 16%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kc-spin 6s linear infinite; }
.kc-hot:hover { transform: translateY(-14px); }
@keyframes kc-spin { to { --kc-ang: 360deg; } }
.kc-flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 4px; background: var(--signal); color: #18202F; font: 800 11px/1 var(--display);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 20px -6px rgba(242,179,61,.9); }
.kit-note { max-width: 76ch; margin: 30px auto 18px; text-align: center; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.65; }
.kit-note b { color: #fff; }
@media (max-width: 960px) {
  .kit-cards { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 28px; }
  .kc-hot { order: -1; transform: none; } .kc-hot:hover, .kc:hover { transform: none; }
}
@media (max-width: 560px) { .kit-box { border-radius: 10px; } .kc { padding: 24px 18px 18px; } .kc-price { font-size: 44px; } }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font: 700 16.5px/1.35 var(--display); letter-spacing: -0.015em; transition: color .15s; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq-x { width: 22px; height: 22px; flex: none; position: relative; }
.faq-x::before, .faq-x::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--ink); width: 14px; height: 2px; translate: -50% -50%; transition: transform .25s var(--ease); }
.faq-x::after { transform: rotate(90deg); }
details[open] .faq-x::after { transform: rotate(0); }
.faq-a { padding: 0 40px 20px 0; color: var(--ink-2); animation: faq-in .3s var(--ease); line-height: 1.6; font-size: 14.5px; }
.faq-a p { margin: 0; } .faq-a p + p { margin-top: 12px; }
.faq-a ul { margin: 12px 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.faq-a ul li { position: relative; padding-left: 22px; }
.faq-a ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 11px; height: 3px; border-radius: 2px; background: var(--accent); }
.faq-a strong { color: var(--ink); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- closer ---------- */
.cta-sec { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.cta-box { background: var(--deep); color: #fff; border-radius: var(--r4); padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; position: relative; overflow: hidden; box-shadow: var(--sh-2); }
.cta-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 90% at 95% 50%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%); }
.cta-box > * { position: relative; }
.cta-copy { display: grid; gap: 10px; }
.cta-box h2 { color: #fff; max-width: 18ch; }
.cta-box p { color: rgba(255,255,255,.7); margin: 0; max-width: 50ch; font-size: 16.5px; line-height: 1.55; }
.cta-acts { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) { .cta-box { grid-template-columns: 1fr; justify-items: start; } }
@media (max-width: 480px) { .cta-acts { width: 100%; } .cta-acts .btn-lg { flex: 1 1 100%; } }

/* ---------- family chips, the family's .fam-more row with CSS-drawn marks ---------- */
.fam-more { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 72px); color: var(--ink); scroll-margin-top: 80px; }
.fam-eyebrow { margin: 0 0 8px; font: 700 12.5px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fam-more h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; margin: 0 0 8px; letter-spacing: -.02em; }
.fam-lede { margin: 0 0 24px; color: var(--ink-2); font-size: 16px; max-width: 62ch; line-height: 1.55; }
.fam-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fam-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 99px;
  font-size: 13.5px; font-weight: 600; color: inherit; text-decoration: none; background: var(--paper); box-shadow: var(--sh-1);
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease); }
.fam-chip small { font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.fam-chip-dot { width: 18px; height: 18px; border-radius: 5px; flex: none; background: var(--fam);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 4px 10px -4px color-mix(in srgb, var(--fam) 80%, transparent); }
.fam-chip.is-here { background: var(--mist); border-color: color-mix(in srgb, var(--fam) 45%, var(--line)); box-shadow: none; }
a.fam-chip:hover { border-color: var(--fam); transform: translateY(-2px); box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--fam) 60%, transparent); }

/* ---------- footer ---------- */
.mk-foot { background: var(--night); color: #C9D0DC; }
.mk-foot-inner { padding-top: 48px; padding-bottom: 36px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.mk-foot .mk-brand { color: #fff; }
.mk-foot-brand p { margin: 16px 0 0; font-size: 13.5px; max-width: 36ch; color: #9AA3B5; line-height: 1.55; }
.mk-foot-partof { color: #C9D0DC; }
.mk-foot-partof a { color: var(--accent-lift); text-decoration: none; }
.mk-foot-partof a:hover { text-decoration: underline; }
.mk-foot h4 { margin: 0 0 12px; font: 600 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #8B94A6; }
.mk-foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 13.5px; }
.mk-foot-links a { color: #C9D0DC; text-decoration: none; display: inline-flex; align-items: flex-start; gap: 9px; line-height: 1.4;
  transition: color .15s, transform .2s var(--ease); }
.mk-foot-links a i { width: 8px; height: 8px; border-radius: 2px; background: var(--a); flex: none; margin-top: 5px; }
.mk-foot-links a:hover { color: #fff; transform: translateX(2px); }
.mk-foot-base { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 24px; padding-top: 18px; padding-bottom: 26px;
  border-top: 1px solid var(--edge); font-size: 12.5px; color: #8B94A6; }
.mk-foot-copy { text-align: left; }
.mk-foot-co { display: block; font-size: .85em; opacity: .7; margin-top: 3px; }
.mk-foot-tag { text-align: center; }
.mk-foot-legal { justify-self: end; }
.mk-foot-legal a { color: #8B94A6; text-decoration: none; margin-left: 14px; }
.mk-foot-legal a:hover { color: #fff; }
@media (max-width: 960px) { .mk-foot-inner { grid-template-columns: 1fr 1fr; gap: 26px; } .mk-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .mk-foot-base { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .mk-foot-copy, .mk-foot-tag { text-align: center; }
  .mk-foot-legal { justify-self: center; } .mk-foot-legal a { margin: 0 8px; }
}

/* ---------- reduced motion: static final frames ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk-glow, .kit-glow, .kc-hot::before, .marquee-track, .stage-live i, .hero-copy > *, .hero-demo { animation: none !important; }
  .hero-copy > *, .hero-demo { opacity: 1; transform: none; }
  .btn, .feat, .how-steps li, .kc, .tv-cell, .board-list li, .fam-chip, .mk-foot-links a, .tool { transition: none; }
}

/* ==========================================================================
   MOTION LAYER
   Everything below is movement: the glint on a button, the steps lighting up
   one after another as you reach them, the colour running through the trades
   marquee. One rule governs all of it: the page must be complete and readable
   with every animation removed, which is what the reduced-motion block at the
   bottom enforces by switching each one to its finished frame.
   ========================================================================== */

/* ---------- the poppy palette ----------
   The board itself is 25 themes of colour. The site was three tints of red,
   which made it look like a different product. These eight hues are the ones
   the board's own themes draw from. */
body.mk {
  --pop-1: #C81E1E;  /* marker red   */
  --pop-2: #F2B33D;  /* signal amber */
  --pop-3: #2EA8E0;  /* sky          */
  --pop-4: #16A34A;  /* green        */
  --pop-5: #7C3AED;  /* violet       */
  --pop-6: #FF6B35;  /* orange       */
  --pop-7: #EC4899;  /* pink         */
  --pop-8: #0EA5A4;  /* teal         */
}

/* ---------- glint: a highlight that sweeps across a button on hover ----------
   The sweep lives on a pseudo-element clipped to the button, so it never
   affects layout and never fires on a touch device, where :hover does not
   mean what it means with a pointer. */
body.mk .btn { position: relative; overflow: hidden; isolation: isolate; }
body.mk .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, .55) 50%,
    transparent 62%);
  transform: translateX(-130%);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  body.mk .btn:hover::after { animation: glint .62s var(--ease) 1; }
}
/* On the pale buttons a white sweep is invisible, so it darkens instead. */
body.mk .btn-ghost::after, body.mk .btn-quiet::after {
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 62%);
}
@keyframes glint {
  0%   { transform: translateX(-130%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

/* ---------- reveal: sections arrive rather than appear ----------
   motion.js adds .seen when the element reaches the viewport. No scroll
   handler, one IntersectionObserver for the whole page. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].seen { opacity: 1; transform: none; }

/* ---------- the four steps, lighting up in order ----------
   Each step waits its turn. Resting state is flat and slightly recessed; the
   lit state brings its own accent, a glow behind it, and a number that fills
   in. The accents run through the palette so the row reads as a sequence
   rather than four copies of the same card. */
.how-steps { counter-reset: hs; }
.how-steps li {
  --step: var(--pop-1);
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  overflow: hidden;
}
.how-steps li:nth-child(1) { --step: var(--pop-1); }
.how-steps li:nth-child(2) { --step: var(--pop-6); }
.how-steps li:nth-child(3) { --step: var(--pop-2); }
.how-steps li:nth-child(4) { --step: var(--pop-4); }

/* The glow sits behind the card and blooms when the step lights. */
.how-steps li::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -40%;
  width: 118%;
  height: 86%;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--step);
  filter: blur(42px);
  opacity: 0;
  transition: opacity .7s var(--ease);
}

/* A rule that draws itself across the top of the card as the step lights. */
.how-steps li::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  height: 3px;
  width: 100%;
  background: var(--step);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .62s var(--ease);
}

.how-steps li.lit {
  opacity: 1;
  transform: none;
  background: #fff;
  border-color: color-mix(in srgb, var(--step) 42%, var(--line));
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--step) 70%, transparent);
}
.how-steps li.lit::before { transform: scaleX(1); }
.how-steps li.lit::after { opacity: .16; }
.how-steps li.lit .how-n { color: var(--step); border-bottom-color: color-mix(in srgb, var(--step) 36%, var(--line)); }

/* The step number gets a dot that fills when its turn comes. */
.how-n { position: relative; display: flex; align-items: center; gap: 8px; transition: color .45s var(--ease), border-color .45s var(--ease); }
.how-n::before {
  content: '';
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
.how-steps li.lit .how-n::before {
  background: var(--step);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--step) 20%, transparent);
}

/* Hover keeps working once a step is lit, just more gently than before. */
.how-steps li.lit:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -24px color-mix(in srgb, var(--step) 75%, transparent);
}

/* ---------- the trades marquee, in full colour ----------
   Eight hues on rotation instead of three, so the strip of trades reads the
   way the board does. */
.marquee-track .trade-run > i:nth-child(8n+1) { --a: var(--pop-1); }
.marquee-track .trade-run > i:nth-child(8n+2) { --a: var(--pop-3); }
.marquee-track .trade-run > i:nth-child(8n+3) { --a: var(--pop-4); }
.marquee-track .trade-run > i:nth-child(8n+4) { --a: var(--pop-5); }
.marquee-track .trade-run > i:nth-child(8n+5) { --a: var(--pop-6); }
.marquee-track .trade-run > i:nth-child(8n+6) { --a: var(--pop-8); }
.marquee-track .trade-run > i:nth-child(8n+7) { --a: var(--pop-7); }
.marquee-track .trade-run > i:nth-child(8n+8) { --a: var(--pop-2); }
.marquee-track i {
  border: 1px solid color-mix(in srgb, var(--a) 34%, transparent);
  background: color-mix(in srgb, var(--a) 9%, #fff);
  color: color-mix(in srgb, var(--a) 72%, #14171D);
  font-weight: 600;
  transition: background .25s, color .25s, border-color .25s;
}
.marquee-track i::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--a);
  margin-right: 9px;
  vertical-align: 1px;
}

/* ---------- feature cards pick up the palette too ---------- */
.feats .feat:nth-child(8n+1) { --fa: var(--pop-1); }
.feats .feat:nth-child(8n+2) { --fa: var(--pop-3); }
.feats .feat:nth-child(8n+3) { --fa: var(--pop-4); }
.feats .feat:nth-child(8n+4) { --fa: var(--pop-5); }
.feats .feat:nth-child(8n+5) { --fa: var(--pop-6); }
.feats .feat:nth-child(8n+6) { --fa: var(--pop-8); }
.feats .feat:nth-child(8n+7) { --fa: var(--pop-7); }
.feats .feat:nth-child(8n+8) { --fa: var(--pop-2); }
.feats .feat {
  --fa: var(--accent);
  position: relative;
  overflow: hidden;
  border-top: 3px solid color-mix(in srgb, var(--fa) 70%, transparent);
}
.feats .feat:hover {
  border-color: color-mix(in srgb, var(--fa) 40%, var(--line));
  border-top-color: var(--fa);
  box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--fa) 80%, transparent);
}
.feats .feat .feat-tag { background: color-mix(in srgb, var(--fa) 10%, #fff); border-color: color-mix(in srgb, var(--fa) 30%, transparent); color: color-mix(in srgb, var(--fa) 76%, #14171D); }

/* ---------- the board cells on the hero TV breathe ----------
   One cell at a time picks up its accent ring, which is what a real board
   looks like when somebody is working on it across the room. */
@keyframes cellPulse {
  0%, 92%, 100% { box-shadow: none; }
  40%, 60% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 70%, transparent), 0 8px 22px -12px var(--signal); }
}
.tv-cell:nth-child(2) { animation: cellPulse 9s var(--ease) infinite; }
.tv-cell:nth-child(5) { animation: cellPulse 9s var(--ease) 3s infinite; }
.tv-cell:nth-child(8) { animation: cellPulse 9s var(--ease) 6s infinite; }

/* ---------- reduced motion: every animation at its finished frame ---------- */
@media (prefers-reduced-motion: reduce) {
  body.mk .btn::after { display: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .how-steps li { opacity: 1; transform: none; transition: none; }
  .how-steps li::before { transform: scaleX(1); }
  .how-steps li::after { opacity: .12; }
  .how-steps li .how-n::before { background: var(--step); }
  .tv-cell { animation: none !important; }
}

/* ==========================================================================
   BUTTONS, REDONE AGAINST ROUND ROBIN PRO
   The old ones were flat: a gradient and one weak shadow. Measuring roundrbn's
   actual buttons showed the recipe is different and simpler. Solid brand
   colour, no gradient, a 4px corner, real height, and TWO stacked shadows in
   the brand colour that sit just under the button and make it look lit from
   within rather than pasted on. Hover lifts and spreads the glow.
   ========================================================================== */

body.mk .btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .15s, border-color .15s, color .15s;
}
body.mk .btn-lg { height: 50px; padding: 0 26px; font-size: 16px; border-radius: 4px; }

/* The primary. Solid, not a gradient. */
body.mk .btn-flame {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border: 0;
  box-shadow:
    0 5.6px 15.7px -4.5px color-mix(in srgb, var(--accent) 45%, transparent),
    0 6.1px 16.7px -3.5px color-mix(in srgb, var(--accent) 37%, transparent);
}
body.mk .btn-flame:hover {
  background: color-mix(in srgb, var(--accent) 92%, #000);
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px -6px color-mix(in srgb, var(--accent) 52%, transparent),
    0 14px 34px -8px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.mk .btn-flame:active { transform: translateY(0); }

/* The quiet one next to it: a real outlined button, not a ghost. */
body.mk .btn-ghost, body.mk .btn-quiet {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 23, 29, .04);
}
body.mk .btn-ghost:hover, body.mk .btn-quiet:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(20, 23, 29, .3);
}

/* The header. Round Robin's nav items are small outlined buttons rather than
   bare links, which is most of why its header reads as finished. */
.mk-nav a:not(.btn) {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color .18s, color .18s, transform .18s var(--ease), box-shadow .18s var(--ease);
}
.mk-nav a:not(.btn):hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(20, 23, 29, .32);
}
.mk-nav .btn { height: 36px; padding: 0 15px; font-size: 13.5px; }
.mk-head .mk-nav { gap: 8px; }

/* The header used to sit on ink and these inverted the outlined buttons for it.
   The top is paper now (see BRIGHT TOP LAYER at the end of this file), so the
   plain light rules above are the right ones and the inversions are gone. */

/* ---------- talk to it: the MCP connector ----------
   Dark band so it reads as a different kind of thing from the board sections,
   and because the quotes look like a chat window against ink. */
.ai-sec { position: relative; isolation: isolate; color: #fff;
  background: linear-gradient(165deg, #14171D 0%, #1B1F28 55%, #221A1C 100%);
  padding: clamp(56px, 7vw, 92px) var(--gutter) clamp(48px, 6vw, 76px);
  margin-top: clamp(40px, 5vw, 64px); }
.ai-sec::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 78% 18%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.ai-sec .sec-head h2 { color: #fff; }
.ai-sec .sec-sub { color: rgba(255,255,255,.72); }
.ai-sec .eyebrow { color: var(--signal); }
.ai-sec .eyebrow i { background: var(--signal); }

.ai-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 3vw, 40px);
  max-width: var(--wide); margin: 8px auto 0; align-items: start; }
@media (max-width: 900px) { .ai-wrap { grid-template-columns: 1fr; } }

/* The things you can say, as a stack of spoken lines. */
.ai-says { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ai-says li { position: relative; padding: 14px 16px 14px 17px; border-radius: 6px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1);
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.45; color: #fff;
  border-left: 3px solid var(--q, var(--accent)); }
.ai-says li:nth-child(1) { --q: var(--pop-1); }
.ai-says li:nth-child(2) { --q: var(--pop-3); }
.ai-says li:nth-child(3) { --q: var(--pop-4); }
.ai-says li:nth-child(4) { --q: var(--pop-2); }
.ai-says li:nth-child(5) { --q: var(--pop-5); }
.ai-says li span { color: var(--q); font-weight: 700; }

.ai-how { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 22px; }
.ai-how h3 { margin: 0 0 12px; font-family: var(--display), system-ui, sans-serif; font-size: 1.15rem; color: #fff; }
.ai-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 9px; }
.ai-steps li { color: rgba(255,255,255,.8); font-size: 14.5px; line-height: 1.5; }
.ai-steps b { color: #fff; }
.ai-url { display: block; margin-top: 7px; padding: 9px 11px; border-radius: 4px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14);
  font: 600 13.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--signal);
  word-break: break-all; }
.ai-note { color: rgba(255,255,255,.6); font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }
.ai-sec .btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff; }
.ai-sec .btn-ghost:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); color: #fff; }

.ai-family { max-width: var(--wide); margin: clamp(22px, 3vw, 34px) auto 0;
  color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.6; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1); }

@media (prefers-reduced-motion: reduce) { .ai-sec::before { animation: none; } }


/* ==================================================================
   BRIGHT TOP LAYER
   ------------------------------------------------------------------
   The header and hero used to sit on Deep Ink navy with a red glow
   bleeding across it. His words: "the dark blue and red gradient at
   the top really makes it blah." He is right, and the reference he
   keeps pointing at settles it: roundrbn.com, this family's own site,
   has no dark hero at all. Its public pages are #f7f7f8 ground,
   #ffffff cards, #111 ink, and cardinal red doing every bit of the
   work. So the top of this page is bright the same way.

   The only dark thing left up there is the TV itself, which should be
   dark, because it is a television. Against a bright room it reads as
   a screen that is switched on instead of one more dark panel on a
   dark page, and the red squares on it finally pop.

   Navy is gone from the rest of the page too: --deep and --night are
   re-pointed at the family's near-black, so the pricing band and the
   footer are ink, not blue. Everything above still stands; this layer
   only re-grounds what sat on the dark.
   ================================================================== */

body.mk { --deep: #14171D; --night: #1A1D24; }

/* ---- the ground itself ---- */
.mk-dark { background: #FBFAF7; color: var(--ink); }
.mk-dark::before { background:
  radial-gradient(44% 46% at 92% 24%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%),
  radial-gradient(46% 42% at 6% 0%, rgba(242,179,61,.18), transparent 70%),
  linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 52%, #F3F1EA 100%); }
/* the grid hairlines have to invert: white lines are invisible on paper */
.mk-dark::after { opacity: .55; background-image:
  linear-gradient(rgba(20,23,29,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(20,23,29,.05) 1px, transparent 1px); }
/* the two drifting light sources stay, lighter, so the top still moves */
.mk-glow-a { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 64%); }
.mk-glow-b { background: radial-gradient(circle at 50% 50%, rgba(242,179,61,.26), transparent 64%); }
.mk-head::after { background: var(--line); }

/* ---- type and chrome on paper ---- */
.mk-dark .msb-word > span { color: var(--ink-3); }
.mk-dark .msb-word b { color: var(--accent); }
.mk-nav a:not(.btn)::after { display: none; }
.hero h1 { color: var(--ink); }
.h1-sig { color: var(--accent); }
.lede { color: var(--ink-2); }
.hero-note { color: var(--ink-3); }

/* the secondary hero button was a ghost cut out of the dark; on paper it
   wants to be a real white button with a real edge and a real shadow */
body.mk .btn-dark {
  background: #fff; color: var(--ink); border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(20,23,29,.06), 0 8px 20px -12px rgba(20,23,29,.3);
}
body.mk .btn-dark:hover { background: #fff; color: var(--ink); border-color: var(--ink-3); }

/* ---- the stage the TV sits in ---- */
.stage { border-color: var(--line); background: #fff;
  box-shadow: 0 2px 4px rgba(20,23,29,.05), 0 34px 74px -36px rgba(20,23,29,.45); }
.stage-bar { border-bottom-color: var(--line); color: var(--ink-3); }

/* ---- the TV: ink, not navy ---- */
.tv { background: linear-gradient(170deg, #262A33, #14171D); border-color: rgba(255,255,255,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 30px 60px -28px rgba(20,23,29,.65); }
.tv-screen { background: radial-gradient(130% 110% at 50% -10%, #24272F 0%, #16181E 52%, #0C0E12 100%); }

/* ---- the pricing band, same ink ---- */
.kit-box { background:
  radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%),
  radial-gradient(120% 80% at 50% 0%, #292D37 0%, #1A1D24 45%, #101217 100%);
  box-shadow: 0 40px 100px -40px rgba(20,23,29,.6), inset 0 1px 0 rgba(255,255,255,.08); }


/* ==================================================================
   THE NUMBERS THAT RUN UP
   ------------------------------------------------------------------
   The old strip was "1 free board / 13 boards / $0 / 30 day trial"
   set in small type on a hairline. He called it what it was. These
   are the four numbers that actually sell the thing, each one true
   and each one read straight off the plan catalogue, in type big
   enough to land, with a coloured rule that wipes in and a figure
   that counts up to itself when the strip arrives on screen.
   ================================================================== */

.hub-stats { grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 0; margin-bottom: 0; }
.hub-stats > div { position: relative; padding: 30px 26px 32px; }
.hub-stats > div + div { border-left: 1px solid var(--line); }
.hub-stats > div:first-child { padding-left: 0; }
.hub-stats > div:last-child { padding-right: 0; }

/* the rule on top wipes out from the left as the strip arrives */
.hub-stats > div::before { content: ''; position: absolute; left: 0; top: 0; right: auto; bottom: auto;
  width: 100%; height: 3px; border-radius: 0; opacity: 1; transform: scaleX(0); transform-origin: left;
  background: var(--stat-pop, var(--accent)); transition: transform .7s var(--ease); }
.hub-stats > div:first-child::before { left: 0; }
.hub-stats > div.seen::before { transform: scaleX(1); }
.hub-stats > div:nth-child(1) { --stat-pop: var(--pop-1, #C81E1E); }
.hub-stats > div:nth-child(2) { --stat-pop: var(--pop-3, #F2B33D); }
.hub-stats > div:nth-child(3) { --stat-pop: var(--pop-5, #2E8BE6); }
.hub-stats > div:nth-child(4) { --stat-pop: var(--pop-7, #2ECC71); }

.hub-stats b { display: block; color: var(--ink);
  font: 900 clamp(38px, 5.2vw, 62px)/.92 var(--display); letter-spacing: -.055em;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.hub-stats .stat-unit { font-size: .52em; font-weight: 800; letter-spacing: -.02em;
  color: var(--stat-pop, var(--accent)); margin-left: 2px; }
.hub-stats span { display: block; margin-top: 10px; max-width: 24ch;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.hub-stats .stat-sub { display: block; margin-top: 6px; max-width: 24ch;
  font: 600 11.5px/1.3 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 860px) {
  .hub-stats { grid-template-columns: repeat(2, 1fr); }
  .hub-stats > div { padding: 24px 18px 26px; }
  .hub-stats > div:nth-child(odd) { padding-left: 0; }
  .hub-stats > div:nth-child(3) { border-left: 0; }
  .hub-stats > div:nth-child(3), .hub-stats > div:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 460px) {
  .hub-stats { grid-template-columns: 1fr; }
  .hub-stats > div { padding: 20px 0 22px; border-left: 0 !important; }
  .hub-stats > div + div { border-top: 1px solid var(--line); }
}


/* ==================================================================
   WORKS WITH CLAUDE AND CHATGPT, said where it can be seen
   ------------------------------------------------------------------
   The connector section is near the bottom of the page and he got all
   the way down the hero without knowing the board talks to anything.
   This row sits directly under the hero buttons and points at it.
   ================================================================== */

.hero-ai { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero-ai-label { font: 600 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 2px; }
.aibadge { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 4px; background: #fff; color: var(--ink);
  font: 700 13px/1 var(--text); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20,23,29,.05);
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s var(--ease); }
.aibadge svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.aibadge:hover { transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.hero-ai-more { font: 600 13px/1 var(--text); color: var(--accent); text-decoration: none; margin-left: 4px; }
.hero-ai-more:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .aibadge { transition: none; } .aibadge:hover { transform: none; }
  .hub-stats > div::before { transition: none; transform: scaleX(1); }
}


/* ==================================================================
   CHECK OUT MORE OF OUR PRODUCTS, the Round Robin Pro layout
   ------------------------------------------------------------------
   This page used to show the family as a bare row of chips. Round
   Robin Pro gives each sibling a real card: its own accent rule along
   the top, the best match badged, the pitch, a line on why it pairs
   with what you are already looking at, the price, and a CTA arrow.
   Then the one-login panel with all six marks stacked, and the chip
   row underneath. Same structure here, same copy out of the family
   kit, in this page's geometry: 6px corners instead of 16, because
   the curves are the one thing he does not want back.
   ================================================================== */

.fam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 16px; }

.fam-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px;
  border: 1px solid var(--line); border-top: 4px solid var(--fam); border-radius: var(--r3);
  background: #fff; color: inherit; text-decoration: none; box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.fam-card:hover { transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20,23,29,.05), 0 22px 44px -22px color-mix(in srgb, var(--fam) 55%, transparent); }
.fam-card.is-top { box-shadow: 0 0 0 2px var(--fam) inset, var(--sh-1); }
.fam-card.is-top:hover { box-shadow: 0 0 0 2px var(--fam) inset, 0 22px 44px -22px color-mix(in srgb, var(--fam) 55%, transparent); }

.fam-name { display: flex; align-items: center; gap: 12px; font: 800 18px/1.15 var(--display); letter-spacing: -.02em; }
.fam-logo { width: 40px; height: 40px; border-radius: 9px; flex: none; display: block; }
.fam-badge { margin-left: auto; flex: none; padding: 4px 8px; border-radius: 3px; background: var(--fam); color: #fff;
  font: 700 10.5px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.fam-line { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.fam-pair { margin: 0; padding: 11px 13px; border-radius: var(--r2); background: var(--mist);
  border-left: 3px solid color-mix(in srgb, var(--fam) 65%, transparent); font-size: 14px; line-height: 1.5; color: var(--ink); }
.fam-pair b { display: block; margin-bottom: 3px; font: 700 11px/1 var(--display); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.fam-price { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.fam-cta { margin-top: auto; padding-top: 4px; font: 700 14px/1 var(--text); color: var(--fam); }
.fam-card:hover .fam-cta { text-decoration: underline; text-underline-offset: 3px; }

/* the one-login panel */
.fam-one { margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r4);
  background: var(--mist); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 24px; }
.fam-one-logos { display: flex; flex: none; }
.fam-one-logos img { width: 50px; height: 50px; border-radius: 11px; border: 3px solid #fff; margin-left: -12px;
  box-shadow: 0 6px 14px -8px rgba(20,23,29,.5); }
.fam-one-logos img:first-child { margin-left: 0; }
.fam-one h3 { margin: 0 0 5px; font-size: 20px; line-height: 1.2; }
.fam-one p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 62ch; }
.fam-one-cta { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: var(--r2);
  background: var(--ink); color: #fff; font: 700 15px/1 var(--text); text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--ease), background .18s; }
.fam-one-cta:hover { background: #000; transform: translateY(-1px); }
.fam-one .fam-group { grid-column: 1 / -1; margin-top: 2px; }
.fam-chip img.fam-chip-logo { width: 18px; height: 18px; border-radius: 5px; flex: none; display: block; }

@media (max-width: 880px) {
  .fam-one { grid-template-columns: 1fr; }
  .fam-one-cta { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .fam-card, .fam-one-cta { transition: none; }
  .fam-card:hover, .fam-one-cta:hover { transform: none; }
}


/* ==================================================================
   THE BOARD ON THE TV, ACTUALLY DOING SOMETHING
   ------------------------------------------------------------------
   "That screen, I like that screen to like be doing something. It
   just sits there." So it stops sitting there. A deal gets typed into
   the empty row at the bottom of New, a card gets dragged out of New
   and lands at the bottom of Underwriting, the hot card's note
   changes, and Funded ticks up by one. Then it resets and does it
   again, which is what the thing on the wall actually looks like all
   day. motion.js drives it; these are the states it toggles.
   ================================================================== */

/* the row being typed into: it stops being a dashed placeholder and grows a caret */
.tv-cell.is-typing { background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-style: solid;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
              0 0 22px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.tv-cell.is-typing b::after { content: ''; display: inline-block; width: 1.5px; height: 11px; margin-left: 2px;
  vertical-align: -1px; background: var(--accent-lift); animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* the flash a row gets the moment it is finished */
.tv-cell.is-fresh { animation: freshCell 1.5s var(--ease) 1; }
@keyframes freshCell {
  0%   { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 34px -4px var(--accent-glow); }
  100% { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 18px -12px rgba(0,0,0,.7); }
}

/* dragged out of its column */
.tv-cell.is-moving { animation: moveOut .52s var(--ease) both; }
@keyframes moveOut {
  0%   { transform: none; opacity: 1; }
  45%  { transform: translate3d(14px, -4px, 0) scale(1.04); opacity: 1;
         box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), 0 14px 30px -10px rgba(0,0,0,.8); }
  100% { transform: translate3d(42px, 6px, 0) scale(.94); opacity: 0; }
}
/* and landing in the next one */
.tv-cell.is-landed { animation: landIn .5s var(--ease) both; }
@keyframes landIn {
  0%   { transform: translate3d(-26px, -6px, 0) scale(.95); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* the note on the hot card changing under you */
.tv-cell .is-swap { animation: swapNote .5s var(--ease) both; }
@keyframes swapNote { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }

/* the count in a column head ticking up */
.tv-bump { display: inline-block; margin-left: 5px; padding: 1px 4px; border-radius: 3px;
  background: rgba(46,204,113,.22); color: #7CE3A6; font: 700 8.5px/1.3 var(--display); letter-spacing: 0;
  animation: bumpIn 2.2s var(--ease) both; }
@keyframes bumpIn {
  0%   { opacity: 0; transform: translateY(-3px) scale(.8); }
  12%  { opacity: 1; transform: none; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-cell.is-typing b::after, .tv-cell.is-fresh, .tv-cell.is-moving,
  .tv-cell.is-landed, .tv-cell .is-swap, .tv-bump { animation: none; }
}

/* the Works-with row is a sixth child of the hero copy, so it keeps the stagger */
.hero-copy > :nth-child(6) { animation-delay: .3s; }

/* Five siblings, not four: at desktop width auto-fit leaves a hole on the
   second row, so the last two cards widen and the row closes up. */
@media (min-width: 1020px) {
  .fam-grid { grid-template-columns: repeat(6, 1fr); }
  .fam-card { grid-column: span 2; }
  .fam-card:nth-child(4), .fam-card:nth-child(5) { grid-column: span 3; }
}


/* ==================================================================
   THE WAY INTO THE DEMO
   ------------------------------------------------------------------
   /demo is the real board app on a board that is already full, with
   every control live and nothing saved. The job of this block is to
   make that obvious from the top of the page: a button beside Start
   free, and the board in the hero itself, because a person looking at
   a board for ten seconds is already wondering if they can touch it.
   ================================================================== */

/* the Try me now button */
.btn-demo { position: relative; gap: 9px; }
.demo-ping { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--accent); }
.demo-ping::after { content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; animation: demoPing 2.4s var(--ease) infinite; }
@keyframes demoPing {
  0%   { transform: scale(.55); opacity: .85; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* the hero board, now a door. The label rides in on hover and is always
   there for a keyboard, which is the only way anyone tabs into it. */
.tv-open { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end;
  justify-content: center; padding-bottom: 14px; border-radius: var(--r3); text-decoration: none; }
.tv-open span { padding: 9px 16px; border-radius: 4px; background: var(--accent); color: #fff;
  font: 700 13px/1 var(--text); white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.18) inset;
  opacity: 0; transform: translateY(8px); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.tv:hover .tv-open span, .tv-open:focus-visible span { opacity: 1; transform: none; }
.tv-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tv:hover { cursor: pointer; }

/* each ready-made board opens its own demo, so the whole row is the target */
.board-list li { padding: 0; }
.board-list li::before { top: 50%; transform: translateY(-50%); z-index: 1; }
.board-list li > a { display: block; padding: 10px 12px 10px 30px; color: inherit;
  text-decoration: none; font: inherit; }
.board-list li:hover > a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .demo-ping::after { animation: none; opacity: 0; }
  .tv-open span { transition: none; }
}