/* ============================================================================
   marketing.css — public-site design tokens, animation primitives, and the
   shared chrome (header, footer, buttons, section label, FAQ row, cards).

   Sections 1 and 2 are copied VERBATIM from apps/editor/src/index.css. They
   are the visual contract of the marketing site; changing a value here changes
   the product.

   Section 3 replaces Tailwind utility classes with named rules. Every
   declaration is the resolved value of the utility it came from — the Tailwind
   class list for each block is quoted above it so the two can be diffed. No
   value was reinterpreted, rounded, or "improved".

   Tailwind reference used throughout:
     spacing   1=0.25rem  1.5=0.375  2=0.5  2.5=0.625  3=0.75  3.5=0.875
               4=1rem  5=1.25  6=1.5  7=1.75  8=2  9=2.25  10=2.5  16=4  20=5
     text-xs   0.75rem/1rem     text-sm 0.875rem/1.25rem   text-base 1rem/1.5rem
     text-lg   1.125rem/1.75rem text-xl 1.25rem/1.75rem
     rounded-lg 0.5rem  rounded-xl 0.75rem  rounded-2xl 1rem  rounded-3xl 1.5rem
     transition default 150ms cubic-bezier(.4,0,.2,1)
     breakpoints sm 640  md 768  lg 1024
   ========================================================================= */

/* ═══ 1. Design tokens (verbatim from index.css) ═══════════════════════════ */

/* Marketing-side pages that reuse editor (--ed-*) tokens for their forms
   (login, reset password) follow the MARKETING theme, not the editor toggle:
   light by default, dark when .mk-dark is active (override further below). */
.mk-light-scope {
  color-scheme: light;
  --ed-bg:            #E9EEF4;
  --ed-surface:       #FFFFFF;
  --ed-surface-alt:   #DEE5EE;
  --ed-input:         #FFFFFF;
  --ed-border:        #C6D0DC;
  --ed-text:          #0B1220;
  --ed-text-2:        #1E293B;
  --ed-muted:         #334155;
  --ed-muted-2:       #444444;
  --ed-dim:           #64748B;
  --ed-disabled:      #B0BCCB;
  --ed-primary:       #2563EB;
  --ed-primary-dark:  #1D4ED8;
}

@property --mk-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Marketing surface — clean professional light theme (DEFAULT). bg is a cool
   off-white (never flat #fff, so white cards still read as raised surfaces),
   bg-alt is the tinted band separating alternating sections. The `.mk-dark`
   block below restores the original dark look behind the header toggle. */
:root {
  --mk-bg:     #fcfbf7;
  --mk-bg-alt: #f8f4ee;
  --mk-tile:   #ffffff;
  --mk-text:   #0f172a;
  --mk-text-muted: #000000;
  /* Cards & chrome */
  --mk-card-grad:    linear-gradient(180deg, #ffffff, #fbfcfe);
  --mk-card-grad-hi: linear-gradient(180deg, rgba(99,102,241,0.08), #fbfcfe);
  --mk-divider:      #e2e8f0;
  --mk-inset:        #faf8f4;
  --mk-shadow-sm:    0 1px 2px rgba(15,23,42,0.04);
  --mk-shadow-card:  0 1px 2px rgba(15,23,42,0.04), 0 12px 32px rgba(15,23,42,0.05);
  /* Header glass */
  --mk-glass:           rgba(255,255,255,0.55);
  --mk-glass-hi:        rgba(255,255,255,0.85);
  --mk-glass-border:    rgba(15,23,42,0.05);
  --mk-glass-border-hi: rgba(15,23,42,0.1);
  --mk-glass-shadow:    0 12px 40px rgba(15,23,42,0.12);
  --mk-glass-card:      rgba(255,255,255,0.92);
}

/* ── Dark marketing theme (the original pre-light look, toggle-gated) ──
   The original used TWO dark surface systems: charcoal for content pages and
   a deeper blue-black for the home page (kept high-contrast for the hero
   x-ray). .mk-dark carries the content-page charcoal; the .mk-home scope on
   the landing page overrides to the deep set — exactly as before. */
.mk-dark {
  --mk-bg:     #191a1b;
  --mk-bg-alt: #141516;
  --mk-tile:   #1f2022;
  --mk-text:   #f8fafc;
  --mk-text-muted: #94a3b8;
  --mk-card-grad:    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  --mk-card-grad-hi: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(255,255,255,0.015));
  --mk-divider:      rgba(255,255,255,0.08);
  --mk-inset:        rgba(255,255,255,0.04);
  --mk-shadow-sm:    none;
  --mk-shadow-card:  none;
  --mk-glass:           rgba(20,21,23,0.35);
  --mk-glass-hi:        rgba(20,21,23,0.78);
  --mk-glass-border:    rgba(255,255,255,0.05);
  --mk-glass-border-hi: rgba(255,255,255,0.1);
  --mk-glass-shadow:    0 12px 40px rgba(0,0,0,0.45);
  --mk-glass-card:      rgba(9,14,26,0.9);
}
.mk-dark .mk-home {
  --mk-bg:     #030712;
  --mk-bg-alt: #04060f;
  --mk-tile:   #060a14;
}

/* Status-page pill colors — saturated ink on light, the original pastel neon
   on dark. */
:root {
  --mk-status-neutral: #64748b; --mk-status-neutral-bg: rgba(148,163,184,0.1);  --mk-status-neutral-bd: rgba(100,116,139,0.3);
  --mk-status-ok:      #059669; --mk-status-ok-bg:      rgba(16,185,129,0.08);  --mk-status-ok-bd:      rgba(5,150,105,0.3);
  --mk-status-warn:    #d97706; --mk-status-warn-bg:    rgba(245,158,11,0.1);   --mk-status-warn-bd:    rgba(217,119,6,0.35);
  --mk-status-err:     #dc2626; --mk-status-err-bg:     rgba(239,68,68,0.08);   --mk-status-err-bd:     rgba(220,38,38,0.35);
  --mk-status-accent:  #7c3aed; --mk-status-accent-bg:  rgba(139,92,246,0.1);   --mk-status-accent-bd:  rgba(124,58,237,0.3);
}
.mk-dark {
  --mk-status-neutral: #94a3b8; --mk-status-neutral-bg: rgba(148,163,184,0.07); --mk-status-neutral-bd: rgba(148,163,184,0.25);
  --mk-status-ok:      #34d399; --mk-status-ok-bg:      rgba(16,185,129,0.07);  --mk-status-ok-bd:      rgba(16,185,129,0.25);
  --mk-status-warn:    #fbbf24; --mk-status-warn-bg:    rgba(245,158,11,0.07);  --mk-status-warn-bd:    rgba(245,158,11,0.3);
  --mk-status-err:     #f87171; --mk-status-err-bg:     rgba(239,68,68,0.07);   --mk-status-err-bd:     rgba(239,68,68,0.3);
  --mk-status-accent:  #c4b5fd; --mk-status-accent-bg:  rgba(139,92,246,0.1);   --mk-status-accent-bd:  rgba(139,92,246,0.25);
}

/* Login/reset forms follow the marketing theme (see .mk-light-scope above). */
.mk-dark .mk-light-scope {
  color-scheme: dark;
  --ed-bg:            #0F172A;
  --ed-surface:       #111827;
  --ed-surface-alt:   #1C2333;
  --ed-input:         #0F172A;
  --ed-border:        #1F2937;
  --ed-text:          #F1F5F9;
  --ed-text-2:        #E2E8F0;
  --ed-muted:         #94A3B8;
  --ed-muted-2:       #6B7280;
  --ed-dim:           #4B5563;
  --ed-disabled:      #374151;
}

/* ═══ 2. Animation primitives (verbatim from index.css) ════════════════════ */

@keyframes mk-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(70px, -50px) scale(1.15); }
  66%      { transform: translate(-50px, 40px) scale(0.92); }
}
@keyframes mk-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-80px, 60px) scale(1.2); }
}
@keyframes mk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes mk-marquee-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes mk-shimmer {
  to { background-position: 200% center; }
}
@keyframes mk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes mk-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.8); opacity: 0; }
}
@keyframes mk-spin-angle {
  to { --mk-angle: 360deg; }
}

.mk-drift-a { animation: mk-drift-a 18s ease-in-out infinite; }
.mk-drift-b { animation: mk-drift-b 22s ease-in-out infinite; }
.mk-float   { animation: mk-float 6s ease-in-out infinite; }

/* Shimmering gradient headline text — indigo/violet ink for light surfaces. */
.mk-shimmer-text {
  background: linear-gradient(110deg, #4f46e5 0%, #8b5cf6 25%, #4338ca 50%, #8b5cf6 75%, #4f46e5 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mk-shimmer 7s linear infinite;
}
.mk-dark .mk-shimmer-text {
  background-image: linear-gradient(110deg, #a5b4fc 0%, #f5f3ff 25%, #c4b5fd 50%, #f5f3ff 75%, #a5b4fc 100%);
  background-size: 200% auto;
}

/* Hero headline "ink" gradient — near-black on light, white on dark. */
.mk-hero-ink {
  background: linear-gradient(to bottom right, #0f172a 40%, #475569);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mk-dark .mk-hero-ink {
  background-image: linear-gradient(to bottom right, #ffffff 40%, #94a3b8);
}

/* Same effect for use INSIDE dark panels (e.g. the final CTA card keeps its
   dark surface on the light site — a deliberate contrast move). */
.mk-shimmer-text-dark {
  background: linear-gradient(110deg, #a5b4fc 0%, #f5f3ff 25%, #c4b5fd 50%, #f5f3ff 75%, #a5b4fc 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mk-shimmer 7s linear infinite;
}

/* Infinite marquee: duplicate the track content once, translate by -50% */
.mk-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mk-marquee-track {
  display: flex;
  width: max-content;
  animation: mk-marquee var(--mk-dur, 52s) linear infinite;
}
.mk-marquee-track.mk-rev { animation-name: mk-marquee-rev; }
.mk-marquee:hover .mk-marquee-track { animation-play-state: paused; }

/* Rotating conic border — apply to a 1px-padded wrapper, put solid bg on the child */
.mk-conic {
  background: conic-gradient(
    from var(--mk-angle),
    #6366f1, #a855f7, #22d3ee, #6366f1
  );
  animation: mk-spin-angle 4s linear infinite;
}
.mk-conic-subtle {
  background: conic-gradient(
    from var(--mk-angle),
    rgba(99, 102, 241, 0.6), rgba(168, 85, 247, 0.15),
    rgba(34, 211, 238, 0.5), rgba(99, 102, 241, 0.6)
  );
  animation: mk-spin-angle 6s linear infinite;
}

/* Mouse-tracked spotlight — the component sets --mx / --my on mousemove */
.mk-spot {
  position: relative;
}
.mk-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 50%),
    rgba(99, 102, 241, 0.08),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.mk-spot:hover::before { opacity: 1; }
.mk-dark .mk-spot::before {
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 50%),
    rgba(99, 102, 241, 0.14),
    transparent 40%
  );
}

/* Pulsing live-status dot */
.mk-pulse-dot { position: relative; }
.mk-pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: inherit;
  animation: mk-pulse-ring 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Cursor x-ray: a hidden layer that becomes visible through a radial mask
   following the mouse — the script sets --rx/--ry in px and toggles
   .is-active. Content stays pointer-transparent. */
.mk-reveal {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  -webkit-mask-image: radial-gradient(
    circle 320px at var(--rx, 50%) var(--ry, 50%),
    #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 78%
  );
  mask-image: radial-gradient(
    circle 320px at var(--rx, 50%) var(--ry, 50%),
    #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 78%
  );
}
.mk-reveal.is-active { opacity: 1; }

/* Content thumbnail treatment (the tutorial and blog cards): the same
   dulled-down look read as intentionally moody on the dark theme, but just
   flat/washed out on the light one — brighter and more saturated there, short
   of looking like an unedited photo (still a touch dimmed/desaturated to match
   the dark gradient backdrop behind it and the overlay wash on top). */
.mk-content-thumb-img {
  filter: grayscale(0%) saturate(105%) brightness(0.92) contrast(1) blur(0.2px);
}
.mk-dark .mk-content-thumb-img {
  filter: grayscale(10%) saturate(78%) brightness(0.78) contrast(0.94) blur(0.2px);
}

/* Faint blueprint grid for hero backdrops — slate ink on light surfaces */
.mk-grid-bg {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
}
.mk-dark .mk-grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

@media (prefers-reduced-motion: reduce) {
  .mk-drift-a, .mk-drift-b, .mk-float, .mk-shimmer-text,
  .mk-marquee-track, .mk-conic, .mk-conic-subtle, .mk-pulse-dot::after {
    animation: none !important;
  }
}

/* ── Pinwheel logo: moves like a real pinwheel catching a gust of air.
   One 8s cycle: creeps into motion, accelerates hard through several fast
   turns, coasts down under "friction", nudges to a stop, rests — repeat.
   Every stop lands on a multiple of 90deg, so the 4-blade wheel always
   comes to rest in its original pose. ── */
@keyframes mk-pinwheel {
  0%    { transform: rotate(0deg);    animation-timing-function: ease-in; }        /* still */
  7%    { transform: rotate(50deg);   animation-timing-function: ease-in; }        /* first stir */
  16%   { transform: rotate(330deg);  animation-timing-function: linear; }         /* catching the gust */
  34%   { transform: rotate(1250deg); animation-timing-function: ease-out; }       /* full speed */
  50%   { transform: rotate(1660deg); animation-timing-function: ease-out; }       /* coasting down */
  58%   { transform: rotate(1780deg); animation-timing-function: ease-in-out; }    /* almost there */
  63%   { transform: rotate(1800deg); }                                            /* settles (5 turns) */
  100%  { transform: rotate(1800deg); }                                            /* rest until the next gust */
}
.mk-logo-spin {
  animation: mk-pinwheel 8s infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .mk-logo-spin { animation: none; }
}

/* ═══ 3. Shared chrome ═════════════════════════════════════════════════════ */

/* Page root — the wrapper LandingPage/PageShell put around everything.
   style={{ background: var(--mk-bg), color: var(--mk-text),
            fontFamily: 'Inter, system-ui, sans-serif' }} */
.mk-page {
  background: var(--mk-bg);
  color: var(--mk-text);
  font-family: Inter, system-ui, sans-serif;
}
/* Content pages (PageShell and the custom-layout pages that copy it) also set
   minHeight: '100vh'; the landing page deliberately does not. */
.mk-page--min { min-height: 100vh; }

/* ── Announcement bar ──────────────────────────────────────────────────────
   "fixed top-0 left-0 right-0 z-[60] flex items-center justify-center px-10
    text-center" + height 36, background/border by tone.
   Its height is reserved with padding-top on <body> so it never overlaps page
   content, and the fixed header is pushed down by the same amount. */
.mk-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  text-align: center;
  height: 36px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.4);
  background: #312e81;
}
.mk-banner--warning {
  background: #78350f;
  border-bottom-color: rgba(245, 158, 11, 0.4);
}
/* "text-[12.5px] font-medium text-white truncate" */
.mk-banner__text {
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.has-mk-banner { padding-top: 36px; }

/* ── Header ────────────────────────────────────────────────────────────────
   Solid full-width product header: logo left, nav beside it, actions right.
   No glass, no floating container, no scroll state.
   "fixed left-0 right-0 z-50 border-b border-slate-200 dark:border-white/10" */
.mk-header {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #e2e8f0;
  background: var(--mk-tile);
}
.mk-dark .mk-header { border-bottom-color: rgba(255, 255, 255, 0.1); }
body.has-mk-banner .mk-header { top: 36px; }

/* "max-w-7xl mx-auto" */
.mk-header__inner { max-width: 80rem; margin-left: auto; margin-right: auto; }
/* "px-6 h-16 flex items-center gap-10" */
.mk-header__bar {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* "flex items-center gap-2.5 font-extrabold text-slate-900 dark:text-white
    text-[17px] tracking-tight flex-shrink-0" + letterSpacing -0.03em */
.mk-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 800;
  color: #0f172a;
  font-size: 17px;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.mk-dark .mk-logo { color: #fff; }
/* LogoMark: "flex-shrink-0 flex items-center" + drop-shadow */
.mk-logo__mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 2px 6px rgba(99, 102, 241, 0.35));
}

/* "hidden md:flex items-center gap-1 text-sm text-[#000000] dark:text-slate-400" */
.mk-header__nav { display: none; }
@media (min-width: 768px) {
  .mk-header__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #000;
  }
}
.mk-dark .mk-header__nav { color: #94a3b8; }

/* "px-3 py-1.5 rounded-lg hover:text-slate-900 dark:hover:text-white
    hover:bg-slate-900/[0.05] dark:hover:bg-white/[0.06] transition-all" */
.mk-header__link {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-header__link:hover { color: #0f172a; background: rgba(15, 23, 42, 0.05); }
.mk-dark .mk-header__link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

/* "hidden md:flex items-center gap-2 flex-shrink-0 ml-auto" */
.mk-header__actions { display: none; }
@media (min-width: 768px) {
  .mk-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
  }
}

/* "text-sm text-[#000000] dark:text-slate-400 hover:text-slate-900
    dark:hover:text-white transition-colors px-3 py-1.5 rounded-lg
    hover:bg-slate-900/[0.05] dark:hover:bg-white/[0.06]" */
.mk-header__login {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #000;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-dark .mk-header__login { color: #94a3b8; }
.mk-header__login:hover { color: #0f172a; background: rgba(15, 23, 42, 0.05); }
.mk-dark .mk-header__login:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

/* ── Account menu (signed in, desktop) ─────────────────────────────────────
   "relative" wrapper, a trigger, and an absolutely-positioned panel. */
.mk-account { position: relative; }
/* "flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300
    hover:text-slate-900 dark:hover:text-white transition-colors px-2.5 py-1.5
    rounded-lg hover:bg-slate-900/[0.05] dark:hover:bg-white/[0.06]" */
.mk-account__trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #334155;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  background: none;
  font-family: inherit;
}
.mk-dark .mk-account__trigger { color: #cbd5e1; }
.mk-account__trigger:hover { color: #0f172a; background: rgba(15, 23, 42, 0.05); }
.mk-dark .mk-account__trigger:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* "w-6 h-6 rounded-full bg-gradient-to-br from-indigo-500 to-violet-500
    text-white text-[11px] font-bold flex items-center justify-center uppercase" */
.mk-account__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
/* The chevron flips while the panel is open. */
.mk-account__chevron { transition: transform 0.15s; }
.mk-account__trigger[aria-expanded="true"] .mk-account__chevron { transform: rotate(180deg); }
/* "fixed inset-0 z-40" — click-away catcher behind the panel. */
.mk-account__backdrop { position: fixed; inset: 0; z-index: 40; }
/* Solid panel in both themes — a translucent dropdown over page content is
   unreadable. The dark value is the original's bg-[#141517].
   "absolute right-0 top-full mt-2 z-50 w-64 rounded-xl border
    border-slate-200 dark:border-white/10 bg-white dark:bg-[#141517]
    shadow-2xl py-1.5" */
.mk-account__panel {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  z-index: 50;
  width: 16rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.mk-dark .mk-account__panel { border-color: rgba(255, 255, 255, 0.1); background: #141517; }
/* "px-4 pt-1.5 pb-2 text-xs text-slate-500 truncate border-b border-slate-100
    dark:border-white/[0.08]" */
.mk-account__email {
  padding: 0.375rem 1rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid #f1f5f9;
}
.mk-dark .mk-account__email { border-bottom-color: rgba(255, 255, 255, 0.08); }
/* "block px-4 py-2 text-sm text-[#444444] dark:text-slate-400
    hover:text-slate-900 dark:hover:text-white hover:bg-slate-50
    dark:hover:bg-white/[0.06]" — also used by the full-width Log out button. */
.mk-account__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #444;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.mk-dark .mk-account__item { color: #94a3b8; }
.mk-account__item:hover { color: #0f172a; background: #f8fafc; }
.mk-dark .mk-account__item:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* The "My Portfolio" row when nothing is published: a title line plus a
   quieter explanation. The wrapper has no text colour of its own. */
.mk-account__item--stacked { padding: 0.5rem 1rem; color: inherit; }
.mk-account__item-title { display: block; font-size: 0.875rem; line-height: 1.25rem; color: #444; }
.mk-dark .mk-account__item-title { color: #94a3b8; }
.mk-account__item--stacked:hover .mk-account__item-title { color: #0f172a; }
.mk-dark .mk-account__item--stacked:hover .mk-account__item-title { color: #fff; }
.mk-account__item-note {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 0.125rem;
  line-height: 1.375;
}
/* And when a profile IS live: the row becomes a link to it, with the status
   pill on the right — "flex items-center justify-between gap-3" plus the
   emerald dot the original draws. */
.mk-account__item--live { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mk-account__live {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  color: #059669;
}
.mk-dark .mk-account__live { color: #34d399; }
.mk-account__live-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: #10b981;
}
/* Signed-in mobile block: "pt-3 mt-1 border-t border-slate-200
    dark:border-white/8 flex flex-col gap-1" — the /8 dark border generates no
   rule, so slate-200 stays (see PROJECT.md "Reproduced quirks"). */
.mk-header__menu-account {
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* "text-xs text-slate-500 truncate py-1" */
.mk-header__menu-email {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
/* "text-slate-500 dark:text-slate-600 text-xs" suffix on "My Portfolio". */
.mk-header__menu-suffix { color: #64748b; font-size: 0.75rem; line-height: 1rem; }
.mk-dark .mk-header__menu-suffix { color: #475569; }

/* Theme toggle wrapper: "inline-flex items-center" (+ "md:hidden ml-auto"
   for the compact one that sits beside the burger). */
.mk-theme-toggle { display: inline-flex; align-items: center; }
.mk-theme-toggle--mobile { margin-left: auto; }
@media (min-width: 768px) {
  .mk-theme-toggle--mobile { display: none; }
}

/* ThemeSwitch — pure inline styles in the original so it renders identically
   inside the Tailwind marketing chrome and the inline-styled editor TopBar.
   Kept as one component class here; the values are unchanged. */
.mk-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  background: #e2e8f0;
  transition: background 0.2s ease;
}
.mk-dark .mk-switch { background: #475569; }
.mk-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.mk-dark .mk-switch__knob { transform: translateX(20px); }
/* One button carries both icons; the active theme decides which is painted. */
.mk-switch__moon { display: none; }
.mk-dark .mk-switch__sun { display: none; }
.mk-dark .mk-switch__moon { display: block; }

/* Burger: "md:hidden text-[#000000] dark:text-slate-400
    hover:text-slate-900 dark:hover:text-white" */
.mk-header__burger { color: #000; background: none; }
.mk-dark .mk-header__burger { color: #94a3b8; }
.mk-header__burger:hover { color: #0f172a; }
.mk-dark .mk-header__burger:hover { color: #fff; }
@media (min-width: 768px) {
  .mk-header__burger { display: none; }
}
.mk-header__burger .mk-header__burger-close { display: none; }
.mk-header__burger[aria-expanded="true"] .mk-header__burger-open { display: none; }
.mk-header__burger[aria-expanded="true"] .mk-header__burger-close { display: block; }

/* Mobile menu: "md:hidden border-t border-slate-200 dark:border-white/8
    px-5 py-4 flex flex-col gap-1" — rendered only when open in React, so the
    closed state here is display:none rather than an absent element. */
.mk-header__menu {
  display: none;
  border-top: 1px solid #e2e8f0;
  padding: 1rem 1.25rem;
  flex-direction: column;
  gap: 0.25rem;
}
/* No dark override: the original writes `dark:border-white/8`, and 8 is not on
   Tailwind's opacity scale, so no rule is generated and the slate-200 border
   stays in dark mode. Same for every /6 and /8 border on these pages — see
   migration/PROJECT.md, "Reproduced quirks". */
.mk-header__menu.is-open { display: flex; }
@media (min-width: 768px) {
  .mk-header__menu, .mk-header__menu.is-open { display: none; }
}
/* "text-sm text-[#000000] dark:text-slate-400 hover:text-slate-900
    dark:hover:text-white py-2" */
.mk-header__menu-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #000;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.mk-dark .mk-header__menu-link { color: #94a3b8; }
.mk-header__menu-link:hover { color: #0f172a; }
.mk-dark .mk-header__menu-link:hover { color: #fff; }
/* The mobile SIGNED-IN links are the same as the nav links but at py-1.
   This must stay AFTER the base rule: both are single-class selectors, so
   source order decides, and while it sat earlier in the file the base py-2
   silently won and the signed-in menu ran 32px long. */
.mk-header__menu-link--tight { padding-top: 0.25rem; padding-bottom: 0.25rem; }
/* "pt-3 mt-1 border-t border-slate-200 dark:border-white/8 flex flex-col gap-2" */
.mk-header__menu-auth {
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* `dark:border-white/8` — no rule generated, slate-200 stays. */
/* "text-sm text-slate-500 dark:text-slate-600 py-1" */
.mk-header__menu-login {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #64748b;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.mk-dark .mk-header__menu-login { color: #475569; }

/* ── Buttons ───────────────────────────────────────────────────────────────
   GradientButton: "group relative overflow-hidden rounded-xl font-bold
   text-white transition-transform duration-200 hover:scale-[1.03]
   active:scale-[0.98]" + small "px-5 py-2.5 text-sm" / large "px-9 py-4
   text-base", background and shadow inline. */
.mk-btn-gradient {
  position: relative;
  overflow: hidden;
  /* No `border: none` — preflight already gives every element border-width 0
     with a solid #e5e7eb colour, and overriding the style to `none` changes
     the computed border-color to currentColor. Nothing renders either way,
     but leaving preflight alone keeps the computed styles identical. */
  /* The original renders a <button>; the ported markup uses <a> where the
     handler was only navigate(). display + text-align restore the two UA
     defaults a <button> brought with it — text-align is load-bearing in the
     mobile menu, where the button stretches to the column width and its
     inline-flex label would otherwise sit left. */
  display: inline-block;
  text-align: center;
  text-decoration: none;
  /* Third restored <button> default, and the least obvious. An inline-block
     with `overflow: hidden` takes its baseline from its bottom margin edge, so
     the line's strut adds ~6px of descender space UNDER it; Chrome derives a
     <button>'s baseline from its content instead and adds nothing. Only
     visible where the control sits in a plain block (the /pricing FAQ call to
     action) — everywhere else it is a flex item and vertical-align is ignored. */
  vertical-align: middle;
  border-radius: 0.75rem;
  font-weight: 700;
  color: #fff;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: inherit;
}
.mk-btn-gradient--large {
  padding: 1rem 2.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
.mk-btn-gradient:hover { transform: scale(1.03); }
.mk-btn-gradient:active { transform: scale(0.98); }
/* "relative z-10 inline-flex items-center gap-2" */
.mk-btn-gradient__label {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* "absolute inset-0 -translate-x-full group-hover:translate-x-full
    transition-transform duration-700 ease-out" */
.mk-btn-gradient__sheen {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  transition: transform 700ms cubic-bezier(0, 0, 0.2, 1);
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
}
.mk-btn-gradient:hover .mk-btn-gradient__sheen { transform: translateX(100%); }

/* GhostButton: "inline-flex items-center gap-2 rounded-xl font-semibold
   text-slate-700 dark:text-slate-300 border border-slate-300
   dark:border-white/10 bg-white/70 dark:bg-transparent
   hover:border-slate-400 dark:hover:border-white/25 hover:text-slate-900
   dark:hover:text-white hover:bg-white dark:hover:bg-white/[0.04]
   transition-all" + large "px-8 py-4 text-sm" / small "px-5 py-2.5 text-sm" */
.mk-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  color: #334155;
  border: 1px solid #cbd5e1;
  background: rgba(255, 255, 255, 0.7);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--mk-shadow-sm);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.mk-btn-ghost--large { padding: 1rem 2rem; }
.mk-btn-ghost:hover { border-color: #94a3b8; color: #0f172a; background: #fff; }
.mk-dark .mk-btn-ghost { color: #cbd5e1; border-color: rgba(255, 255, 255, 0.1); background: transparent; }
.mk-dark .mk-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.25); color: #fff; background: rgba(255, 255, 255, 0.04); }

/* ── PageHero ──────────────────────────────────────────────────────────────
   The standard hero for sub-pages. Shared by every PageShell page (/docs,
   /tutorials, /help, /status, /privacy, /terms).
   "relative pt-36 pb-14 px-6 overflow-hidden" */
.page-hero {
  position: relative;
  padding: 9rem 1.5rem 3.5rem;
  overflow: hidden;
}
/* "relative max-w-4xl mx-auto" + "text-center" when align is center (default) */
.page-hero__inner {
  position: relative;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
.page-hero__inner--center { text-align: center; }
/* "text-4xl md:text-5xl font-black text-slate-900 dark:text-white
    tracking-tight mb-4" + lineHeight 1.08, letterSpacing -0.03em */
.page-hero__title {
  font-size: 2.25rem;
  line-height: 1.08;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.mk-dark .page-hero__title { color: #fff; }
@media (min-width: 768px) { .page-hero__title { font-size: 3rem; } }
/* "text-base text-[#000000] dark:text-slate-400 leading-relaxed" plus
    "max-w-xl mx-auto" when centred, or "max-w-2xl" when left-aligned. */
.page-hero__sub {
  font-size: 1rem;
  color: #000;
  line-height: 1.625;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.mk-dark .page-hero__sub { color: #94a3b8; }
.page-hero__sub--left { max-width: 42rem; margin-left: 0; margin-right: 0; }
/* The legal pages append this to the sub: "block mt-3 text-xs text-slate-500
    dark:text-slate-600" */
.page-hero__updated {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
}
.mk-dark .page-hero__updated { color: #475569; }

/* ── Section eyebrow ───────────────────────────────────────────────────────
   "text-[11px] font-semibold uppercase tracking-[0.18em] text-indigo-600
    dark:text-indigo-400 mb-5" — deliberately NOT a capsule/pill. */
.mk-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #4f46e5;
  margin-bottom: 1.25rem;
}
.mk-dark .mk-section-label { color: #818cf8; }

/* ── Aurora backdrop ───────────────────────────────────────────────────────
   "absolute inset-0 pointer-events-none overflow-hidden" wrapping the grid. */
.mk-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.mk-aurora > .mk-grid-bg { position: absolute; inset: 0; }

/* ── FAQ accordion row ─────────────────────────────────────────────────────
   "rounded-xl border overflow-hidden transition-all duration-300" with
   background/borderColor/boxShadow inline; open rows switch the border to
   #6366f1 and the content grid from 0fr to 1fr. */
.mk-faq {
  border-radius: 0.75rem;
  border: 1px solid var(--mk-divider);
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--mk-tile);
  box-shadow: var(--mk-shadow-sm);
}
.mk-faq.is-open { border-color: #6366f1; }
/* "w-full flex items-center justify-between p-5 text-left" */
.mk-faq__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  text-align: left;
  background: none;
  font-family: inherit;
}
/* "font-semibold text-sm text-slate-900 dark:text-white pr-4" */
.mk-faq__q {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #0f172a;
  padding-right: 1rem;
}
.mk-dark .mk-faq__q { color: #fff; }
/* "flex-shrink-0 w-6 h-6 rounded-full border border-slate-200
    dark:border-white/10 flex items-center justify-center text-slate-500
    transition-transform duration-300" */
.mk-faq__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--mk-inset);
}
.mk-dark .mk-faq__icon { border-color: rgba(255, 255, 255, 0.1); }
.mk-faq.is-open .mk-faq__icon { transform: rotate(45deg); }
/* "grid transition-all duration-300 ease-out" with gridTemplateRows 0fr/1fr */
.mk-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: all 300ms cubic-bezier(0, 0, 0.2, 1);
}
.mk-faq.is-open .mk-faq__panel { grid-template-rows: 1fr; }
.mk-faq__panel > div { overflow: hidden; }
/* "px-5 pb-5 text-sm text-[#000000] dark:text-slate-400 leading-relaxed" */
.mk-faq__a {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.875rem;
  color: #000;
  line-height: 1.625;
}
.mk-dark .mk-faq__a { color: #94a3b8; }

/* ── Footer ────────────────────────────────────────────────────────────────
   Light theme: solid cream band. Dark theme stays transparent (it inherits
   each page's own dark surface) — the footer text colours here are tuned for
   a dark background, so a light bg in dark theme would leave pale text
   unreadable against it.
   "relative border-t border-slate-200 dark:border-white/6 pt-20 pb-6
    overflow-hidden bg-[#fcf2e3] dark:bg-transparent" */
.mk-footer {
  position: relative;
  border-top: 1px solid #e2e8f0;
  padding-top: 5rem;
  padding-bottom: 1.5rem;
  overflow: hidden;
  background: #fcf2e3;
}
/* `dark:border-white/6` generates no rule, so the top border stays slate-200
   in dark mode; only the background actually changes. */
.mk-dark .mk-footer { background: transparent; }
/* "relative max-w-7xl mx-auto px-6" */
.mk-footer__inner {
  position: relative;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/* "grid grid-cols-2 md:grid-cols-6 gap-10 mb-16" */
.mk-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .mk-footer__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* "col-span-2" */
.mk-footer__brand { grid-column: span 2 / span 2; }
/* "flex items-center gap-2.5 font-extrabold text-slate-900 dark:text-white
    text-lg mb-4" + letterSpacing -0.03em */
.mk-footer__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 800;
  color: #0f172a;
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.mk-dark .mk-footer__logo { color: #fff; }
/* "text-sm text-[#000000] dark:text-slate-500 leading-relaxed mb-6 max-w-xs" */
.mk-footer__blurb {
  font-size: 0.875rem;
  color: #000;
  line-height: 1.625;
  margin-bottom: 1.5rem;
  max-width: 20rem;
}
.mk-dark .mk-footer__blurb { color: #64748b; }
/* "text-xs font-semibold text-slate-500 uppercase tracking-widest mb-4" */
.mk-footer__heading {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
/* "flex flex-col gap-3" */
.mk-footer__list { display: flex; flex-direction: column; gap: 0.75rem; }
/* "text-sm text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors" */
.mk-footer__link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #64748b;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-footer__link:hover { color: #0f172a; }
.mk-dark .mk-footer__link:hover { color: #fff; }
/* "border-t border-slate-200 dark:border-white/6 pt-6 pb-2 flex flex-col
    md:flex-row items-center justify-between gap-4" */
.mk-footer__bottom {
  border-top: 1px solid #e2e8f0;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* `dark:border-white/6` — no rule generated, slate-200 stays. */
@media (min-width: 768px) {
  .mk-footer__bottom { flex-direction: row; }
}
/* "text-xs text-slate-500 dark:text-slate-600" */
.mk-footer__copy { font-size: 0.75rem; line-height: 1rem; color: #64748b; }
.mk-dark .mk-footer__copy { color: #475569; }
/* "flex items-center gap-6" */
.mk-footer__legal { display: flex; align-items: center; gap: 1.5rem; }
/* "text-xs text-slate-500 dark:text-slate-600 hover:text-slate-800
    dark:hover:text-slate-300 transition-colors" */
.mk-footer__legal-link {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-dark .mk-footer__legal-link { color: #475569; }
.mk-footer__legal-link:hover { color: #1e293b; }
.mk-dark .mk-footer__legal-link:hover { color: #cbd5e1; }

/* ── Maintenance notice (App.tsx MaintenanceNotice) ───────────────────────── */
.mk-maintenance {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--mk-bg);
  color: #f8fafc;
  text-align: center;
  padding: 24px 16px;
  gap: 12px;
}
.mk-maintenance__brand { font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.mk-maintenance__line { font-size: 15px; font-weight: 700; }
.mk-maintenance__note { font-size: 13px; color: #94a3b8; max-width: 380px; }