/* Website v2 (pages/site-v2-*.tsx, lib/site-v2.tsx): the glow, the fading titles, eyebrows, bento, counters,
   ticker, terminal window, trust grid, CTA band and the evidence-first robot card. Tokens only, classes m2-.
   The glow is the brand cyan (--ats-info / --ats-grad-cta-from); green stays for profit and the primary action. */

.m2 {
  --m2-glow: color-mix(in oklab, var(--ats-grad-cta-from) 55%, transparent);
  --m2-glow-2: color-mix(in oklab, var(--ats-grad-cta-to) 22%, transparent);
  --m2-line: color-mix(in oklab, var(--ats-fg) 6%, transparent);
  --m2-card: color-mix(in oklab, var(--ats-surface) 88%, transparent);
  --m2-card-hi: color-mix(in oklab, var(--ats-surface) 70%, var(--ats-surface-warm));
  --m2-pad: clamp(16px, 4vw, 48px);
  /* The website's smallest text is 12px: the kit's 11px micro step suits dense app tables, not a reading page. */
  --ats-text-micro: var(--ats-text-caption);
  background: var(--ats-bg);
  color: var(--ats-fg);
  overflow-x: clip;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .m2 { --m2-glow: color-mix(in oklab, var(--ats-grad-cta-from) 30%, transparent); --m2-glow-2: color-mix(in oklab, var(--ats-grad-cta-to) 16%, transparent); } }
:root[data-theme="light"] .m2 { --m2-glow: color-mix(in oklab, var(--ats-grad-cta-from) 30%, transparent); --m2-glow-2: color-mix(in oklab, var(--ats-grad-cta-to) 16%, transparent); }

.m2-wrap { max-inline-size: 1240px; margin-inline: auto; padding-inline: var(--m2-pad); box-sizing: border-box; }
.m2-main { display: block; }
.m2-header { backdrop-filter: saturate(140%) blur(12px); background: color-mix(in oklab, var(--ats-bg) 78%, transparent); border-block-end: 1px solid var(--m2-line); }

/* ---------- type ---------- */
.m2-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 10px; inline-size: fit-content;
  border: 1px solid var(--ats-border-strong); border-radius: var(--ats-radius-pill); background: color-mix(in oklab, var(--ats-surface) 60%, transparent);
  font-family: var(--ats-font-mono); font-size: var(--ats-text-label); letter-spacing: 0.02em; color: var(--ats-muted-strong);
}
.m2-pulse { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ats-value-positive); box-shadow: 0 0 0 0 color-mix(in oklab, var(--ats-value-positive) 60%, transparent); animation: m2-pulse 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
@keyframes m2-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ats-value-positive) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.m2-title { margin: 0; font-family: var(--ats-font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(24px, 2.6vw, 34px); color: var(--ats-fg); text-wrap: balance; }
.m2-title-xl { font-size: clamp(36px, 4.8vw, 60px); letter-spacing: -0.035em; line-height: 1.04; }
.m2-hero-long .m2-title-xl { font-size: clamp(32px, 3.6vw, 48px); }
.m2-hero-split.m2-hero-long .m2-title-xl { max-inline-size: 22ch; }
.m2-fade { background: linear-gradient(180deg, color-mix(in oklab, var(--ats-fg) 72%, transparent), color-mix(in oklab, var(--ats-fg) 45%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m2-lede { margin: 0; max-inline-size: 62ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--ats-muted-strong); }
.m2-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.m2-align-center { text-align: center; align-items: center; }
.m2-align-center .m2-lede, .m2-align-center .m2-hero-lede { margin-inline: auto; }
.m2-align-center .m2-actions { justify-content: center; }
.m2-mono { font-family: var(--ats-font-mono); font-variant-numeric: tabular-nums; }
.m2-muted { color: var(--ats-muted); }
.m2-chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--ats-radius-pill); border: 1px solid var(--ats-border);
  font-size: var(--ats-text-micro); color: var(--ats-muted-strong); background: color-mix(in oklab, var(--ats-surface) 70%, transparent); white-space: nowrap;
}

/* ---------- sections ---------- */
.m2-section { padding-block: clamp(56px, 8vw, 112px); position: relative; }
.m2-section-tight { padding-block: clamp(36px, 5vw, 64px); }
.m2-section + .m2-section { border-block-start: 1px solid var(--m2-line); }
.m2-section-head { display: flex; flex-direction: column; gap: 16px; margin-block-end: clamp(28px, 4vw, 48px); }

/* ---------- hero ---------- */
.m2-hero { position: relative; isolation: isolate; padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px); overflow: hidden; }
.m2-hero-compact { padding-block: clamp(44px, 6vw, 80px) clamp(32px, 4vw, 56px); }
.m2-hero-glow {
  position: absolute; inset: -30% -10% auto; block-size: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 50% 100%, var(--m2-glow) 0%, transparent 70%),
    radial-gradient(30% 35% at 70% 90%, var(--m2-glow-2) 0%, transparent 70%);
  filter: blur(8px); opacity: 0.9;
}
.m2-hero-split .m2-hero-glow { background: radial-gradient(38% 52% at 72% 62%, var(--m2-glow) 0%, transparent 72%), radial-gradient(26% 32% at 88% 85%, var(--m2-glow-2) 0%, transparent 70%); }
.m2-hero-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--m2-line) 1px, transparent 1px), linear-gradient(90deg, var(--m2-line) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(70% 70% at 50% 30%, #000 30%, transparent 85%);
}
.m2-hero-in { display: flex; flex-direction: column; gap: 20px; }
.m2-hero-split .m2-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.m2-hero-copy { display: flex; flex-direction: column; gap: 22px; min-inline-size: 0; }
.m2-hero.m2-align-center .m2-hero-copy { align-items: center; }
.m2-hero-lede { margin: 0; max-inline-size: 56ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--ats-muted-strong); }
.m2-hero-aside { min-inline-size: 0; }
.m2-hero-below { margin-block-start: clamp(36px, 5vw, 64px); }

/* ---------- counters ---------- */
.m2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: 0; border: 1px solid var(--ats-border); border-radius: var(--ats-radius-lg); background: var(--m2-card); overflow: hidden; }
.m2-stat { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-inline-start: 1px solid var(--ats-border); }
.m2-stat:first-child { border-inline-start: 0; }
.m2-stat dd, .m2-stat dt { margin: 0; }
.m2-stat-label { font-size: var(--ats-text-label); color: var(--ats-muted); }
.m2-stat-value { font-family: var(--ats-font-mono); font-variant-numeric: tabular-nums; font-size: clamp(26px, 2.8vw, 38px); font-weight: 500; letter-spacing: -0.02em; color: var(--ats-fg); }
.m2-stat-value.is-positive { color: var(--ats-value-positive); }
.m2-stat-value.is-accent { background: var(--ats-grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m2-stat-sub { font-size: var(--ats-text-caption); color: var(--ats-muted); }

/* ---------- ticker ---------- */
.m2-ticker { overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; mask-image: linear-gradient(90deg, #000 92%, transparent); padding-block-end: 6px; border-radius: 8px; }
.m2-ticker:focus-visible { outline: 2px solid var(--ats-info); outline-offset: 4px; }
.m2-ticker-track { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; inline-size: max-content; }
.m2-ticker-track > li { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .m2-pulse { animation: none; } }
/* Visually hidden, still read: the SEO parts of a WordPress heading. */
.m2-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- terminal window ---------- */
.m2-term {
  border: 1px solid var(--ats-border-strong); border-radius: 14px; overflow: hidden; background: color-mix(in oklab, var(--ats-surface) 92%, transparent);
  box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--ats-grad-cta-from) 35%, transparent), 0 0 0 1px color-mix(in oklab, var(--ats-fg) 4%, transparent) inset;
}
.m2-term-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-block-end: 1px solid var(--ats-border); background: color-mix(in oklab, var(--ats-bg) 60%, var(--ats-surface)); }
.m2-term-dots { display: inline-flex; gap: 6px; }
.m2-term-dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--ats-border-strong); }
.m2-term-dots i:nth-child(1) { background: color-mix(in oklab, var(--ats-danger) 80%, transparent); }
.m2-term-dots i:nth-child(2) { background: color-mix(in oklab, var(--ats-warning) 80%, transparent); }
.m2-term-dots i:nth-child(3) { background: color-mix(in oklab, var(--ats-value-positive) 80%, transparent); }
.m2-term-title { font-family: var(--ats-font-mono); font-size: var(--ats-text-label); color: var(--ats-muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-term-status { margin-inline-start: auto; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); color: var(--ats-value-positive); white-space: nowrap; }
.m2-term-body { padding: 16px; }

/* ---------- bento ---------- */
.m2-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.m2-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-inline-size: 0;
  padding: 22px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); overflow: hidden;
}
.m2-tile-accent { background: radial-gradient(120% 100% at 100% 0%, color-mix(in oklab, var(--ats-grad-cta-from) 18%, transparent), transparent 60%), var(--m2-card); }
.m2-span-2 { grid-column: span 2; }
.m2-span-3 { grid-column: 1 / -1; }
.m2-tall { grid-row: span 2; }
.m2-tile-visual { min-inline-size: 0; }
.m2-tile-copy { display: flex; flex-direction: column; gap: 6px; }
.m2-tile-kicker { margin: 0; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ats-accent-text); }
.m2-tile-title { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-title-sm); font-weight: 600; letter-spacing: -0.01em; color: var(--ats-fg); }
.m2-tile-text { margin: 0; font-size: var(--ats-text-ui); line-height: 1.55; color: var(--ats-muted); }

/* ---------- trust grid ---------- */
.m2-trust { display: flex; flex-direction: column; gap: 28px; }
.m2-trust-group { display: flex; flex-direction: column; gap: 16px; padding-block-start: 22px; border-block-start: 1px solid var(--ats-border); }
.m2-trust-pill { margin: 0; inline-size: fit-content; padding: 3px 10px; border: 1px solid var(--ats-border-strong); border-radius: var(--ats-radius-pill); font-size: var(--ats-text-label); color: var(--ats-muted-strong); }
.m2-trust-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; margin: 0; padding: 0; list-style: none; }
.m2-trust-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 600; color: var(--ats-fg); }
.m2-trust-icon { display: inline-flex; color: var(--ats-accent-text); }
.m2-trust-text { margin: 0; font-size: var(--ats-text-ui); line-height: 1.55; color: var(--ats-muted); }

/* ---------- CTA band ---------- */
.m2-cta { padding-block: clamp(32px, 6vw, 80px); }
.m2-cta-in {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
  padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 64px); border-radius: 24px; border: 1px solid var(--ats-border-strong);
  background: linear-gradient(180deg, color-mix(in oklab, var(--ats-surface) 85%, transparent), var(--ats-bg));
}
.m2-cta-glow { position: absolute; inset: 15% -10% -45% -10%; z-index: -1; background: radial-gradient(50% 50% at 50% 100%, var(--m2-glow) 0%, transparent 70%), radial-gradient(30% 30% at 65% 100%, var(--m2-glow-2), transparent 70%); }
.m2-cta-title { margin: 0; max-inline-size: 22ch; font-family: var(--ats-font-display); font-size: clamp(28px, 4vw, 48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.m2-cta-text { margin: 0; max-inline-size: 56ch; color: var(--ats-muted-strong); line-height: 1.6; }

/* ---------- footer ---------- */
.m2-footer { border-block-start: 1px solid var(--m2-line); }
.m2-foot-tag { margin: 10px 0 0; max-inline-size: 30ch; color: var(--ats-muted); font-size: var(--ats-text-ui); line-height: 1.5; }
.m2-datanote { color: var(--ats-muted); font-size: var(--ats-text-caption); }

/* ---------- drawdown bands ---------- */
.m2-dd { font-family: var(--ats-font-mono); font-variant-numeric: tabular-nums; }
.m2-dd.is-low { color: var(--ats-value-positive); }
.m2-dd.is-medium { color: var(--ats-fg); }
.m2-dd.is-high { color: color-mix(in oklab, var(--ats-warning) 72%, var(--ats-fg)); }
.m2-dd.is-severe { color: var(--ats-value-negative); }

/* ---------- the robot card ---------- */
.m2-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.m2-rcard {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; padding: 16px;
  border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card);
  transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.m2-rcard:hover { border-color: color-mix(in oklab, var(--ats-grad-cta-from) 45%, var(--ats-border)); transform: translateY(-2px); box-shadow: 0 18px 40px -24px color-mix(in oklab, var(--ats-grad-cta-from) 50%, transparent); }
.m2-rcard-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.m2-rcard-link:focus-visible { outline: 2px solid var(--ats-info); outline-offset: 2px; }
.m2-rcard-head { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.m2-rcard-thumb { flex: none; inline-size: 44px; block-size: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--ats-border); background: var(--ats-media-bg); }
.m2-rcard-id { min-inline-size: 0; flex: 1; }
.m2-rcard-name { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; color: var(--ats-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-rcard-spec { margin: 2px 0 0; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); color: var(--ats-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-rcard-chart { position: relative; display: grid; place-items: stretch; min-block-size: 72px; padding: 8px 0 0; border-radius: 10px; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--ats-value-positive) 5%, transparent)); }
.m2-rcard-window { position: absolute; inset-block-start: 4px; inset-inline-start: 2px; font-family: var(--ats-font-mono); font-size: 10px; color: var(--ats-muted); letter-spacing: 0.04em; }
.m2-rcard-compact .m2-rcard-chart { min-block-size: 56px; }
.m2-rcard-chart svg { inline-size: 100%; block-size: auto; }
.m2-rcard-nochart {
  display: grid; place-items: center; margin: 0; min-block-size: 64px; border: 1px dashed var(--ats-border); border-radius: 10px;
  font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); color: var(--ats-muted);
}
.m2-rcard-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.m2-rcard-figs div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.m2-rcard-figs dt { font-size: var(--ats-text-micro); color: var(--ats-muted); }
.m2-rcard-figs dd { margin: 0; font-family: var(--ats-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ats-text-lead); font-weight: 500; color: var(--ats-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-rcard-figs dd.is-pos { color: var(--ats-value-positive); }
.m2-rcard-figs dd.is-neg { color: var(--ats-value-negative); }
.m2-rcard-foot { display: flex; align-items: center; gap: 10px; padding-block-start: 12px; border-block-start: 1px solid var(--ats-border); }
.m2-rcard-tags { display: flex; gap: 6px; min-inline-size: 0; overflow: hidden; }
.m2-rcard-price { margin: 0 0 0 auto; font-family: var(--ats-font-mono); font-size: var(--ats-text-ui); font-weight: 500; color: var(--ats-fg); white-space: nowrap; max-inline-size: 55%; overflow: hidden; text-overflow: ellipsis; }
.m2-rcard-price.is-free { color: var(--ats-accent-text); }
.m2-rcard-go { display: inline-flex; color: var(--ats-muted); transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms; }
.m2-rcard:hover .m2-rcard-go { transform: translateX(3px); color: var(--ats-fg); }

/* ---------- shared table look for data lists ---------- */
.m2-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.m2-rows > li { display: grid; align-items: center; gap: 12px; padding: 10px 0; border-block-end: 1px solid var(--ats-border); font-size: var(--ats-text-ui); }
.m2-rows > li:last-child { border-block-end: 0; }

@media (max-width: 1023px) {
  .m2-hero-split .m2-hero-in { grid-template-columns: minmax(0, 1fr); }
  .m2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m2-span-3 { grid-column: 1 / -1; }
  .m2-trust-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .m2-bento { grid-template-columns: minmax(0, 1fr); }
  .m2-span-2, .m2-span-3 { grid-column: auto; }
  .m2-tall { grid-row: auto; }
  .m2-trust-items { grid-template-columns: minmax(0, 1fr); }
  .m2-stat { border-inline-start: 0; border-block-start: 1px solid var(--ats-border); }
  .m2-stat:first-child { border-block-start: 0; }
}

/* ---------- content sections (lib/site-v2-sections.tsx): roadmap, split, feature bento, figures, media list, FAQ ---------- */
.m2s-head { display: flex; flex-direction: column; gap: 14px; margin-block-end: clamp(24px, 3.5vw, 40px); max-inline-size: 760px; }
.m2s-head.is-center { align-items: center; text-align: center; margin-inline: auto; }
.m2s-paras { display: flex; flex-direction: column; gap: 12px; }
.m2s-paras p { margin: 0; line-height: 1.7; color: var(--ats-muted-strong); max-inline-size: 70ch; }
.m2s-paras h4 { margin: 8px 0 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; color: var(--ats-fg); }
.m2s-lede p { font-size: var(--ats-text-lead); }
.m2s-head.is-center .m2s-lede p { margin-inline: auto; }

.m2s-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; position: relative; }
.m2s-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 4px; border-block-start: 1px solid var(--ats-border-strong); }
.m2s-step::before { content: ''; position: absolute; inset-block-start: -5px; inset-inline-start: 20px; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--ats-grad-cta); box-shadow: 0 0 12px var(--m2-glow); }
.m2s-step-n { font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); color: var(--ats-accent-text); letter-spacing: 0.08em; }
.m2s-step-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; color: var(--ats-fg); }
.m2s-step-x { margin: 0; font-size: var(--ats-text-ui); line-height: 1.55; color: var(--ats-muted); }

.m2s-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.m2s-split.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.m2s-split.is-flip .m2s-split-pic { order: -1; }
.m2s-split.is-solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .m2s-split.is-solo .m2s-paras:has(p:nth-of-type(3)) { display: block; columns: 2; column-gap: 48px; } .m2s-split.is-solo .m2s-paras:has(p:nth-of-type(3)) > * { break-inside: avoid; margin-block-end: 12px; } }
.m2s-split-copy { display: flex; flex-direction: column; gap: 18px; }
.m2s-split-pic, .m2s-media-pic { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--ats-border); background: var(--ats-media-bg); box-shadow: 0 30px 70px -40px var(--m2-glow); }
.m2s-split-pic img, .m2s-media-pic img { display: block; inline-size: 100%; block-size: auto; }

.m2s-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.m2s-feat { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--ats-border); border-radius: 14px; background: var(--m2-card); }
.m2s-feat.is-lead { grid-column: span 2; grid-row: span 2; background: radial-gradient(110% 90% at 100% 0%, color-mix(in oklab, var(--ats-grad-cta-from) 16%, transparent), transparent 60%), var(--m2-card); }
.m2s-feat.is-lead .m2s-feat-t { font-size: var(--ats-text-title); }
.m2s-feat.is-lead .m2s-feat-x { font-size: var(--ats-text-body); line-height: 1.65; }
.m2s-feat-n { font-size: var(--ats-text-micro); color: var(--ats-accent-text); }
.m2s-feat-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; color: var(--ats-fg); }
.m2s-feat-x { margin: 0; font-size: var(--ats-text-ui); line-height: 1.55; color: var(--ats-muted); }
.m2s-more { display: flex; justify-content: center; margin-block-start: 16px; }
.m2s-flip { transform: rotate(180deg); }

.m2s-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.m2s-figs:is([data-count="3"], [data-count="6"], [data-count="9"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m2s-fig { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--ats-border); border-radius: 14px; background: var(--m2-card); }
.m2s-fig-v { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -0.02em; background: var(--ats-grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent; inline-size: fit-content; }
.m2s-fig-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; color: var(--ats-fg); }
.m2s-fig-x { margin: 0; font-size: var(--ats-text-ui); line-height: 1.55; color: var(--ats-muted); }
.m2s-fig-pic { margin-block-start: auto; border-radius: 10px; border: 1px solid var(--ats-border); inline-size: 100%; block-size: auto; }

.m2s-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.m2s-media.is-solo { grid-template-columns: minmax(0, 1fr); }
.m2s-media-pic { position: sticky; inset-block-start: 96px; }
.m2s-media-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.m2s-media-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-block: 18px; border-block-end: 1px solid var(--ats-border); }
.m2s-media-list li:first-child { padding-block-start: 0; }
.m2s-media-list li:last-child { border-block-end: 0; }
.m2s-media-n { font-size: var(--ats-text-label); color: var(--ats-accent-text); padding-block-start: 3px; }
.m2s-media-list h3 { margin: 0 0 4px; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; color: var(--ats-fg); }
.m2s-media-list p { margin: 0; font-size: var(--ats-text-ui); line-height: 1.55; color: var(--ats-muted); }

.m2s-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.m2s-faq-grid .m2s-head { position: sticky; inset-block-start: 96px; }

@media (max-width: 1023px) {
  .m2s-split, .m2s-split.is-flip, .m2s-media, .m2s-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .m2s-split.is-flip .m2s-split-pic { order: 0; }
  .m2s-media-pic, .m2s-faq-grid .m2s-head { position: static; }
  .m2s-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m2s-figs:is([data-count="3"], [data-count="6"], [data-count="9"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .m2s-feats { grid-template-columns: minmax(0, 1fr); }
  .m2s-feat.is-lead { grid-column: auto; grid-row: auto; }
  .m2s-steps { grid-template-columns: minmax(0, 1fr); }
  .m2s-figs:is([data-count="3"], [data-count="6"], [data-count="9"]) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- marketplace body (lib/site-v2-market.tsx) ---------- */
.m2m { display: flex; flex-direction: column; gap: 20px; }
.m2m-tabs { border-block-end: 1px solid var(--ats-border); }
.m2m-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.m2m-rail { position: sticky; inset-block-start: 84px; display: flex; flex-direction: column; gap: 4px; max-block-size: calc(100vh - 100px); overflow: auto; padding: 16px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); scrollbar-width: thin; }
.m2m-rail-head { display: flex; align-items: center; justify-content: space-between; padding-block-end: 8px; }
.m2m-rail-t { margin: 0; font-family: var(--ats-font-display); font-weight: 600; }
.m2m-clear { padding: 0; border: 0; background: none; color: var(--ats-accent-text); font: inherit; font-size: var(--ats-text-label); cursor: pointer; }
.m2m-clear:hover { text-decoration: underline; }
.m2m-ddopt { display: inline-flex; align-items: center; gap: 8px; }
.m2m-ddopt i { inline-size: 8px; block-size: 8px; border-radius: 50%; }
.m2m-ddopt i.is-low { background: var(--ats-value-positive); }
.m2m-ddopt i.is-medium { background: var(--ats-muted-strong); }
.m2m-ddopt i.is-high { background: var(--ats-warning); }
.m2m-ddopt i.is-severe { background: var(--ats-value-negative); }
.m2m-syms { display: flex; flex-wrap: wrap; gap: 6px; }
.m2m-sym { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--ats-border); border-radius: var(--ats-radius-pill); background: transparent; color: var(--ats-muted-strong); font: inherit; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); cursor: pointer; }
.m2m-sym span { color: var(--ats-muted); }
.m2m-sym:hover { border-color: var(--ats-border-strong); color: var(--ats-fg); }
.m2m-sym.is-on { border-color: var(--ats-info); color: var(--ats-fg); background: color-mix(in oklab, var(--ats-info) 14%, transparent); }
.m2m-results { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
.m2m-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.m2m-search { flex: 1 1 260px; }
.m2m-count { margin: 0 auto 0 4px; font-size: var(--ats-text-ui); color: var(--ats-muted); }
.m2m-count strong { color: var(--ats-fg); font-family: var(--ats-font-mono); }
.m2m-cards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.m2m-table { border: 1px solid var(--ats-border); border-radius: 14px; overflow-x: auto; background: var(--m2-card); }
.m2m-trow { display: flex; align-items: center; gap: 10px; color: var(--ats-fg); text-decoration: none; min-inline-size: 200px; }
.m2m-trow img, .m2m-trow > span:first-child { inline-size: 28px; block-size: 28px; border-radius: 6px; object-fit: cover; background: var(--ats-media-bg); flex: none; }
.m2m-trow > span:last-child { display: flex; flex-direction: column; font-size: var(--ats-text-micro); }
.m2m-trow strong { font-size: var(--ats-text-ui); }
.m2m-trow:hover strong { text-decoration: underline; }
.m2m-empty { display: grid; place-items: center; gap: 8px; padding: 64px 16px; border: 1px dashed var(--ats-border); border-radius: 16px; color: var(--ats-muted); }
.m2m-empty p { margin: 0; }
@media (max-width: 1023px) {
  .m2m-grid { grid-template-columns: minmax(0, 1fr); }
  .m2m-rail { position: static; max-block-size: none; }
}

/* The megamenu's preview column: what the hovered link holds, as a picture or a live figure. */
.m2-mprev { display: flex; flex-direction: column; gap: 8px; block-size: 100%; box-sizing: border-box; padding: 14px; border-radius: var(--ats-radius-lg); border: 1px solid var(--m2-line); background: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--ats-accent) 12%, transparent), transparent 60%), var(--ats-bg); }
.m2-mprev-img { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ats-radius-md); outline: 1px solid color-mix(in oklab, var(--ats-fg) 10%, transparent); outline-offset: -1px; background: var(--ats-surface); }
.m2-mprev-img.is-short { aspect-ratio: 21 / 9; }
.m2-mprev-k { margin: 2px 0 0; font-size: var(--ats-text-caption); color: var(--ats-accent-text); }
.m2-mprev-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-ui); font-weight: 600; line-height: 1.3; color: var(--ats-fg); text-wrap: balance; }
.m2-mprev-p { margin: 0; font-size: var(--ats-text-caption); line-height: 1.5; color: var(--ats-muted-strong); text-wrap: pretty; }
.m2-mprev svg { display: block; max-inline-size: 100%; block-size: auto; }
.m2-mfigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block-start: auto; }
.m2-mfig { display: flex; flex-direction: column; gap: 2px; font-size: var(--ats-text-caption); color: var(--ats-muted); }
.m2-mfig b { font-family: var(--ats-font-mono); font-size: var(--ats-text-ui); font-weight: 500; color: var(--ats-fg); font-variant-numeric: tabular-nums; }
.m2-mfig b[data-tone="positive"] { color: var(--ats-value-positive); }
.m2-mfig b[data-tone="negative"] { color: var(--ats-value-negative); }
.m2-mshelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.m2-mshelf img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--ats-radius-md); outline: 1px solid color-mix(in oklab, var(--ats-fg) 10%, transparent); outline-offset: -1px; }
.m2-mcos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.m2-mcos li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.m2-mcos b { display: block; font-size: var(--ats-text-ui); font-weight: 600; color: var(--ats-fg); }
.m2-mcos li > span > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--ats-text-caption); line-height: 1.45; color: var(--ats-muted-strong); }
.m2-mco-mark { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--ats-radius-md); background: var(--ats-surface); border: 1px solid var(--m2-line); font-family: var(--ats-font-display); font-weight: 700; color: var(--ats-accent-text); }
.m2-mcos + .m2-mprev-p { margin-block-start: auto; }
.m2-mprev--person { align-items: flex-start; }
.m2-mprev-face { inline-size: 120px; block-size: 120px; border-radius: 50%; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--ats-fg) 10%, transparent); outline-offset: -1px; background: var(--ats-surface); }
.m2-mprev--stat { justify-content: flex-end; }
.m2-mstat { margin: 0; font-family: var(--ats-font-mono); font-size: var(--ats-text-title); font-weight: 500; line-height: 1; color: var(--ats-fg); font-variant-numeric: tabular-nums; }
.m2-mfaces { display: flex; margin-block-end: auto; }
.m2-mfaces img { inline-size: 40px; block-size: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ats-bg); margin-inline-start: -10px; }
.m2-mfaces img:first-child { margin-inline-start: 0; }