/* =========================================================
   ViralHunt Landing — style.css (dark "signal room" system)
   Graphite console base; the heat gradient (red→pink→violet)
   comes from the brand's own logo/app accents — never cyan.
   Shared by index.php, compare*, alternative, pricing, legal.
   Fonts: Bebas Neue display / DM Sans body / IBM Plex Mono data.
   ========================================================= */

:root {
    /* Legacy token names kept — secondary pages reference them */
    --red-primary: #E63946;
    --red-dark: #C1121F;
    --red-light: #FF6B6B;
    --black: #0D0D0D;
    --white: #FAFAFA;
    --gray-light: #F0F0F0;
    --gray-mid: #98a2b5;
    --gradient-fire: linear-gradient(92deg, #E63946, #FF2F7B 52%, #8C5CFF);
    /* Signal-room tokens */
    --ink: #0a0d13;
    --panel: #121722;
    --panel-2: #0e1320;
    --line: rgba(160, 176, 205, .14);
    --text: #f2f0eb;
    --muted: #98a2b5;
    --signal: #E63946;
    --pink: #FF2F7B;
    --violet: #8C5CFF;
    --live: #35d07f;
    --heat: linear-gradient(92deg, #E63946, #FF2F7B 52%, #8C5CFF);
    --radius: 16px;
    --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background:
        radial-gradient(ellipse 55% 40% at 82% -4%, rgba(140, 92, 255, .13), transparent 70%),
        radial-gradient(ellipse 45% 35% at 8% 10%, rgba(230, 57, 70, .10), transparent 70%),
        var(--ink);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .015em; text-transform: uppercase; line-height: .96; }
.accent-text {
    background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cursor { width: 20px; height: 20px; border: 2px solid var(--pink); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transition: transform .15s ease, background .15s ease; mix-blend-mode: difference; }
.cursor.hover { transform: scale(2); background: var(--pink); }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }

.mono { font-family: var(--font-mono); }
.mono-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .22em; color: var(--signal); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.mono-label.sm { font-size: 11px; color: var(--muted); margin-bottom: 12px; }

/* ── NAV (shared markup from includes/header.php) ── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.1rem 3rem; display: flex; justify-content: space-between; align-items: center; background: rgba(10, 13, 19, .82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transition: padding .3s ease, box-shadow .3s ease; }
nav.scrolled { padding: .7rem 3rem; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
.logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.logo-img { height: 42px; width: auto; }
.nav-links { display: flex; gap: 2.2rem; align-items: center; }
.nav-links a { white-space: nowrap; font-family: var(--font-body); font-weight: 500; font-size: .92rem; color: var(--muted); text-decoration: none; position: relative; transition: color .25s ease; }
/* .nav-links a outranks .btn-primary in specificity — restate button colors so
   the nav CTA stays white-on-gradient instead of inheriting the muted gray. */
.nav-links a.btn-primary { color: #fff; }
.nav-links a.btn-primary:hover { color: #fff; }
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links a:not(.btn)::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--heat); transition: width .25s ease; }
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-auth { display: flex; align-items: center; gap: 1rem; margin-left: 1rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }

/* ── BUTTONS ── */
.btn { font-family: var(--font-body); font-weight: 700; font-size: .92rem; padding: .8rem 1.8rem; border-radius: 12px; text-decoration: none; transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--heat); color: #fff; box-shadow: 0 10px 34px rgba(230, 57, 70, .28); }
.btn-primary:hover { transform: translateY(-2px); filter: saturate(1.15) brightness(1.05); }
.btn-outline { background: var(--panel); color: var(--text); border: 1px solid rgba(255, 47, 123, .38); }
.btn-outline:hover { border-color: rgba(255, 47, 123, .7); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--muted); padding: .6rem 1rem; }
.btn-ghost:hover { color: var(--text); }
.btn-large { padding: 1.1rem 2.8rem; font-size: 1.05rem; }

/* ── LANGUAGE SWITCHER ── */
.lang-switcher { position: relative; margin-left: 1rem; }
.lang-current { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-family: var(--font-mono); font-size: .82rem; font-weight: 500; color: var(--muted); padding: .5rem .8rem; border-radius: 8px; transition: background .2s, color .2s; }
.lang-current:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.lang-current svg { width: 16px; height: 16px; transition: transform .2s; }
.lang-switcher.open .lang-current svg { transform: rotate(180deg); }
.lang-dropdown { position: absolute; top: 100%; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 50px rgba(0, 0, 0, .5); min-width: 140px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all .2s; z-index: 101; overflow: hidden; }
.lang-switcher.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(5px); }
.lang-option { display: block; padding: .7rem 1rem; font-size: .85rem; color: var(--muted); text-decoration: none; transition: background .2s, color .2s; }
.lang-option:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.lang-option.active { background: var(--heat); color: #fff; }

/* ── SIGNATURE: the signal wire ── */
.wire { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--panel-2); padding: 9px 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; margin-top: 72px; }
.wire-track { display: inline-flex; animation: wire-scroll 52s linear infinite; }
.wire-set { display: inline-flex; align-items: center; padding-right: 48px; }
.wire b { color: var(--text); font-weight: 600; margin-right: 8px; }
.wire b::before { content: "▲ "; color: var(--live); font-size: 10px; }
.wire i { font-style: normal; color: var(--pink); margin-left: 8px; }
.wire .sep { margin: 0 22px; color: rgba(160, 176, 205, .35); font-size: 8px; }
@keyframes wire-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── LAYOUT ── */
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 96px 0; }
.section-tint { background: var(--panel-2); border-block: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head.centered .mono-label { justify-content: center; }
.section-head h2 { font-size: clamp(40px, 4.4vw, 62px); }
.section-sub { color: var(--muted); font-size: 18px; margin-top: 16px; }

/* ── HERO ── */
/* The fixed nav is already cleared by .wire's margin-top, so the hero only
   needs breathing room, not nav clearance — keep the fold tight. */
.hero { position: relative; padding: 64px 0 56px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 80% 16%, rgba(255, 47, 123, .14), transparent 68%), radial-gradient(ellipse 40% 40% at 95% 60%, rgba(140, 92, 255, .12), transparent 70%); }
.hero-grid { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 52px; align-items: center; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); display: inline-block; animation: pulse-dot 2s ease infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .5); } 50% { box-shadow: 0 0 0 6px rgba(53, 208, 127, 0); } }

/* ── Product mockups (includes/ui-mockups.php) ─────────────────────────────────────────────────
   The app, drawn in DOM and animated, inside the same .monitor frame the screenshots used. The
   app itself is a dark sidebar beside a light workspace, so the mockup keeps that contrast even on
   this dark landing: it is the one place on the page that is allowed to be light, because it is
   depicting another screen. Sizes are in em off a 12px root so the whole thing scales with the
   frame. Animations run only after .go is added by the observer; reduced-motion gets the final
   frame with no motion. */
.mk { --mk-ink:#0e1320; --mk-muted:#6a7384; --mk-line:#e6e9f0; --mk-bg:#f5f6fa; --mk-card:#fff; --mk-brand:#5468ff;
      display:grid; grid-template-columns:44px 1fr; aspect-ratio:1400/698; font:12px/1.35 'Inter', var(--font-body); color:var(--mk-ink);
      background:var(--mk-bg); overflow:hidden; position:relative; container-type:inline-size; }
.mk * { box-sizing:border-box; }
.mk-side { background:#0e1320; padding:10px 8px; display:flex; flex-direction:column; gap:10px; }
.mk-logo { width:26px; height:14px; border-radius:4px; background:var(--heat); }
.mk-user { display:flex; align-items:center; gap:6px; }
.mk-av { width:18px; height:18px; border-radius:50%; background:#c55cff; color:#fff; font-size:9px; font-weight:700; display:grid; place-items:center; }
.mk-av.sm { width:14px; height:14px; font-size:8px; background:#5468ff; }
.mk-uline { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.14); }
.mk-nav { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.6); font-size:11px; padding:4px; border-radius:6px; }
.mk-nav i { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.12); }
.mk-nav.on { background:rgba(84,104,255,.22); color:#fff; }
.mk-nav.sm { padding:3px 4px; } .mk-nav.sm i { height:4px; }
.mk-plat { margin-top:auto; display:flex; flex-direction:column; gap:4px; }
.mk-main { padding:12px 14px; overflow:hidden; min-width:0; }
.mk-title { font-weight:800; font-size:15px; letter-spacing:-.01em; display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.mk-title small { color:var(--mk-muted); font-weight:400; font-size:10px; }
.mk-pill { font-size:9px; font-weight:600; color:var(--mk-muted); background:#eceef4; border-radius:999px; padding:2px 8px; }
.mk-chips { display:flex; gap:5px; margin-bottom:8px; flex-wrap:wrap; }
.mk-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--mk-line); background:#fff; border-radius:999px; padding:3px 9px; font-size:9.5px; font-weight:600; color:#3c4250; }
.mk-chip b { width:6px; height:6px; border-radius:50%; }
.mk-chip.on { background:#16181d; color:#fff; border-color:#16181d; }
.mk-thead { display:grid; grid-template-columns:34px 62px 1fr 62px 24px 54px; gap:8px; font-size:8px; letter-spacing:.08em; color:#9aa0ab; font-weight:700; padding:0 6px 4px; }
.mk-thead span:nth-child(3) { grid-column:3 / 5; }
.mk-row { display:grid; grid-template-columns:34px 62px 1fr 62px 24px 54px; gap:8px; align-items:center; background:#fff; border-radius:9px; padding:6px; margin-bottom:5px;
          box-shadow:0 1px 2px rgba(16,24,40,.06); opacity:0; transform:translateY(8px); }
.go .mk-row { animation:mk-in .45s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(.12s + var(--i) * .13s); }
.mk-thumb { width:30px; height:30px; border-radius:6px; background:linear-gradient(135deg,#dfe3ec,#c9cfdb); }
.mk-thumb.sm { width:22px; height:22px; border-radius:5px; }
.mk-thumb.mk-tt { background:linear-gradient(135deg,#222,#555); } .mk-thumb.mk-dy { background:linear-gradient(135deg,#fe2c55,#7a1030); }
.mk-thumb.mk-rd { background:linear-gradient(135deg,#ff4500,#c23a00); } .mk-thumb.mk-ig { background:linear-gradient(135deg,#e1306c,#f77737); }
.mk-thumb.mk-x { background:linear-gradient(135deg,#111,#333); } .mk-thumb.mk-bs { background:linear-gradient(135deg,#1185fe,#0a5bb0); }
.mk-badge { font-size:8.5px; font-weight:700; color:#fff; border-radius:6px; padding:3px 6px; text-align:center; white-space:nowrap; }
.mk-badge.mk-tt, .mk-badge.mk-x { background:#111; } .mk-badge.mk-dy { background:#fe2c55; } .mk-badge.mk-rd { background:#ff4500; } .mk-badge.mk-ig { background:#e1306c; }
.mk-post { min-width:0; } .mk-post b { display:block; font-size:10.5px; font-weight:600; color:#3b3fd8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-post small { color:var(--mk-muted); font-size:9px; }
.mk-eng { font-weight:800; font-size:11px; white-space:nowrap; } .mk-eng i { font-style:normal; font-size:9px; margin-right:2px; }
.mk-date { color:var(--mk-muted); font-size:9.5px; }
.mk-assign { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; font-size:9px; font-weight:700; border-radius:7px; padding:5px 0; text-align:center; }
.go .mk-assign.press { animation:mk-press .5s ease 1.3s both; }
.mk-toast { position:absolute; right:14px; bottom:12px; background:#16a34a; color:#fff; font-size:9.5px; font-weight:600; padding:6px 10px; border-radius:8px; opacity:0; transform:translateY(6px); }
.go .mk-toast { animation:mk-in .35s ease 1.9s forwards; }
/* board */
.mk-quick { display:flex; align-items:center; gap:6px; font-size:8.5px; color:var(--mk-muted); margin-bottom:8px; }
.mk-quick span { letter-spacing:.08em; font-weight:700; } .mk-quick em { font-style:normal; border:1px solid var(--mk-line); background:#fff; border-radius:999px; padding:2px 8px; color:#3c4250; }
.mk-cols { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; align-items:start; }
.mk-col { background:#fff; border:1px solid var(--mk-line); border-radius:9px; padding:6px; min-height:120px; }
.mk-colh { display:flex; align-items:center; gap:5px; font-size:8.5px; font-weight:700; letter-spacing:.04em; margin-bottom:6px; }
.mk-colh b { width:6px; height:6px; border-radius:50%; } .mk-colh span { margin-left:auto; color:var(--mk-muted); background:#eceef4; border-radius:999px; padding:1px 6px; font-weight:600; }
.mk-empty { border:1px dashed var(--mk-line); border-radius:7px; color:#9aa0ab; font-size:8.5px; text-align:center; padding:14px 4px; }
.mk-card { background:#fff; border:1px solid var(--mk-line); border-left:3px solid #5468ff; border-radius:7px; padding:6px; margin-bottom:5px; font-size:9px; position:relative; }
.mk-card b { display:block; font-weight:600; line-height:1.3; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mk-cat { font-size:7.5px; color:#5468ff; background:rgba(84,104,255,.1); border-radius:999px; padding:1px 6px; font-weight:600; }
.mk-card .mk-av.sm { position:absolute; right:6px; bottom:6px; }
.go .mk-card.mk-move { animation:mk-move 1.6s cubic-bezier(.4,0,.2,1) .9s forwards; z-index:2; }
/* dashboard */
.mk-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:9px; }
.mk-kpi { background:#fff; border:1px solid var(--mk-line); border-radius:9px; padding:8px 10px; opacity:0; transform:translateY(6px); }
.go .mk-kpi { animation:mk-in .4s ease forwards; animation-delay:calc(var(--i) * .1s); }
.mk-kpi span { font-size:7.5px; letter-spacing:.08em; font-weight:700; color:var(--mk-muted); display:block; }
.mk-kpi b { font-size:20px; font-weight:800; letter-spacing:-.02em; display:block; line-height:1.15; } .mk-kpi small { font-size:8px; color:var(--mk-muted); }
.mk-niche { background:#fff; border:1px solid var(--mk-line); border-radius:9px; padding:8px 10px; }
.mk-nh { display:flex; align-items:center; font-weight:800; font-size:11px; margin-bottom:7px; gap:8px; }
.mk-nh span { margin-left:auto; display:flex; gap:4px; } .mk-nh em { font-style:normal; font-size:7.5px; font-weight:600; color:#3b3fd8; background:rgba(84,104,255,.1); border-radius:999px; padding:1px 6px; }
.mk-panels { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.mk-panel { border:1px solid var(--mk-line); border-top:2px solid #5468ff; border-radius:8px; padding:6px; background:#fff; }
.mk-panel.mk-rd { border-top-color:#ff4500; } .mk-panel.mk-bs { border-top-color:#1185fe; } .mk-panel.mk-dy { border-top-color:#fe2c55; }
.mk-ph { display:flex; font-weight:700; font-size:9.5px; margin-bottom:5px; } .mk-ph span { margin-left:auto; font-weight:500; color:var(--mk-muted); font-size:8px; }
.mk-prow { display:flex; gap:6px; align-items:flex-start; padding:4px 0; border-top:1px solid var(--mk-line); opacity:0; transform:translateY(5px); min-width:0; }
.mk-prow:first-of-type { border-top:0; }
.go .mk-prow { animation:mk-in .4s ease forwards; animation-delay:calc(.35s + var(--i) * .09s); }
.mk-prow > span:last-child { min-width:0; } .mk-prow b { display:block; font-size:8.5px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-prow small { font-size:7.5px; color:var(--mk-muted); } .mk-prow small i { font-style:normal; color:#e8590c; font-weight:700; }
@keyframes mk-in { to { opacity:1; transform:none; } }
@keyframes mk-press { 0%,100% { transform:scale(1); } 40% { transform:scale(.93); filter:brightness(.92); } }
@keyframes mk-move { 0% { transform:none; box-shadow:0 1px 2px rgba(16,24,40,.06); } 25% { transform:translate(0,-6px) rotate(-1.5deg); box-shadow:0 12px 28px rgba(16,24,40,.18); }
                     75% { transform:translate(calc(100% + 7px),-6px) rotate(1deg); box-shadow:0 12px 28px rgba(16,24,40,.18); } 100% { transform:translate(calc(100% + 7px),0); box-shadow:0 1px 2px rgba(16,24,40,.06); } }
@media (max-width: 640px) { .mk { grid-template-columns:1fr; } .mk-side { display:none; } .mk-cols { grid-template-columns:repeat(3,1fr); } .mk-col:nth-child(n+4) { display:none; } .mk-kpis { grid-template-columns:repeat(2,1fr); } .mk-panels { grid-template-columns:1fr; } .mk-panel:nth-child(n+2) { display:none; } }
/* douyin: the bilingual screen. The Chinese title is there from the start; the English one fades in
   over it, because "in English" is the claim. Covers are gradients standing in for portrait video
   stills; the sparkline draws itself with a dash offset. */
.mk-cjk { font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',var(--font-body); }
.mk-dystrip { display:flex; gap:12px; font-size:8.5px; color:var(--mk-muted); margin:-2px 0 8px; }
.mk-dystrip .hi { color:#e8590c; font-weight:600; }
.mk-chip small { color:var(--mk-muted); font-weight:500; margin-left:2px; }
.mk-dygrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mk-dycard { background:#fff; border:1px solid var(--mk-line); border-radius:9px; overflow:hidden; opacity:0; transform:translateY(8px); }
.go .mk-dycard { animation:mk-in .45s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(.1s + var(--i) * .15s); }
.mk-dycover { position:relative; aspect-ratio:9/12; background:#1b1e2b; }
.mk-dycover.mk-dyc1 { background:radial-gradient(ellipse at 50% 30%, #6b5a3a, #1a1611 70%); }
.mk-dycover.mk-dyc2 { background:radial-gradient(ellipse at 40% 60%, #274b6d, #0b1522 70%); }
.mk-dycover.mk-dyc3 { background:radial-gradient(ellipse at 60% 40%, #b04a3a, #2a1210 70%); }
.mk-dypill { position:absolute; left:6px; top:6px; background:rgba(0,0,0,.55); color:#fff; font-size:7.5px; font-weight:600; border-radius:999px; padding:2px 6px; }
.mk-dydur { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.65); color:#fff; font-size:7.5px; font-weight:600; border-radius:5px; padding:1px 5px; font-family:var(--font-mono); }
.mk-dybody { padding:7px 8px 8px; }
.mk-dytitles { min-height:26px; margin-bottom:4px; }
.mk-dyen { display:block; font-size:9.5px; font-weight:700; line-height:1.25; color:var(--mk-ink); opacity:0; transform:translateY(-3px); }
.go .mk-dyen { animation:mk-in .5s ease forwards; animation-delay:calc(.9s + var(--i) * .15s); }
.mk-dyzh { display:block; font-size:8px; color:var(--mk-muted); line-height:1.3; }
.mk-dywho { display:flex; align-items:center; gap:4px; font-size:8px; color:#3c4250; margin:3px 0 4px; }
.mk-dywho i { width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,#c9cfdb,#98a2b5); }
.mk-dywho .mk-cjk { color:var(--mk-muted); }
.mk-dystats { display:flex; gap:7px; font-size:8px; font-weight:700; color:#c2255c; }
.mk-dystats span:nth-child(2) { color:#e8590c; } .mk-dystats span:nth-child(3) { color:#3c4250; font-weight:500; }
.mk-dyspark { display:flex; align-items:flex-end; gap:6px; margin-top:6px; }
.mk-dyspark svg { width:60%; height:22px; display:block; }
.mk-dyfill { fill:rgba(255,47,123,.12); stroke:none; opacity:0; }
.go .mk-dyfill { animation:mk-in .3s ease forwards; animation-delay:calc(1.9s + var(--i) * .15s); }
.mk-dyline { fill:none; stroke:#ff2f7b; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:140; stroke-dashoffset:140; }
.go .mk-dyline { animation:mk-draw 1s cubic-bezier(.4,0,.2,1) forwards; animation-delay:calc(1.3s + var(--i) * .15s); }
.mk-dyspark b { font-size:8.5px; color:#e8590c; font-weight:700; white-space:nowrap; }
.mk-dyspark b small { color:var(--mk-muted); font-weight:500; }
@keyframes mk-draw { to { stroke-dashoffset:0; } }
@media (max-width: 640px) { .mk-dygrid { grid-template-columns:repeat(2,1fr); } .mk-dycard:nth-child(3) { display:none; } .mk-dystrip span:nth-child(n+3) { display:none; } }
@media (prefers-reduced-motion: reduce) {
html:not(.demo-motion-enabled) .mk-row, html:not(.demo-motion-enabled) .mk-kpi, html:not(.demo-motion-enabled) .mk-prow, html:not(.demo-motion-enabled) .mk-toast, html:not(.demo-motion-enabled) .mk-dycard, html:not(.demo-motion-enabled) .mk-dyen, html:not(.demo-motion-enabled) .mk-dyfill { opacity:1 !important; transform:none !important; animation:none !important; }html:not(.demo-motion-enabled) .mk-dyline { stroke-dashoffset:0 !important; animation:none !important; }html:not(.demo-motion-enabled) .mk-card.mk-move { animation:none !important; }html:not(.demo-motion-enabled) .mk-assign.press { animation:none !important; }
}
.hero h1 { font-size: clamp(60px, 6.8vw, 104px); line-height: .92; }
.h1-line { display: block; }
.lead { font-size: 19px; color: #c3cad8; max-width: 560px; margin-top: 26px; }
.microline { margin-top: 18px; color: var(--text); }
.microline strong { color: var(--pink); }
/* The measured proof figure. Mono + signal colour so the number reads as an instrument
   reading rather than a marketing adjective, which is the only reason to print it. */
.hero-proof { margin-top: 16px; color: var(--muted); font-size: 17px; }
.hero-proof strong { color: var(--signal); font-family: var(--font-mono); font-size: 19px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.cta-row .btn { min-height: 50px; }
.cta-note { margin-top: 16px; font-size: 12.5px; color: var(--muted); letter-spacing: .04em; font-family: var(--font-mono); }
.cta-note.cta-delay { margin-top: 6px; letter-spacing: 0; font-family: inherit; font-size: 13.5px; }
.rail-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* Platform rail */
.platform-rail { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.platform-chip { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--muted); transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.platform-chip svg { width: 19px; height: 19px; fill: currentColor; }
.platform-chip:hover { color: var(--text); border-color: rgba(255, 47, 123, .55); transform: translateY(-2px); }

/* Monitor frames */
.monitor { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.monitor.glow { border-color: rgba(255, 47, 123, .22); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(230, 57, 70, .10); }
.monitor-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--panel-2); letter-spacing: .04em; font-family: var(--font-mono); }
.live-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--live); font-weight: 600; font-size: 11px; letter-spacing: .14em; }
.monitor img { width: 100%; display: block; }
.hero-visual { margin: 0; }
.monitor.tour img { aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }
.tour-caption { text-align: center; color: var(--muted); font-size: 15.5px; margin-top: 18px; max-width: 640px; margin-inline: auto; }

/* ── METRICS ── */
.metrics { padding: 26px 0 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.metric-grid > div { padding: 26px 18px; text-align: center; border-right: 1px solid var(--line); }
.metric-grid > div:last-child { border-right: 0; }
.metric-grid strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: 1; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric-grid span { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); }

/* ── CARDS ── */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 28px; transition: border-color .2s ease, transform .2s ease; }
.card:hover { border-color: rgba(255, 47, 123, .3); transform: translateY(-3px); }
.card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.015em; font-family: var(--font-body); }
.card p:not(.mono-label) { color: var(--muted); font-size: 15.5px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── DEEP DIVES ── */
.deep { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: center; padding: 44px 0; }
.deep.flip .deep-copy { order: 2; }
.deep.flip .deep-shot { order: 1; }
.deep + .deep { border-top: 1px solid var(--line); }
.deep-copy h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; font-family: var(--font-body); }
.deep-copy > p { color: var(--muted); font-size: 16.5px; }
.deep-copy .mono-label.sm { color: var(--pink); }
.deep-shot img { width: 100%; }

/* ── TABS ── */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }
.tab { font-family: var(--font-mono); font-size: 13px; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: color .15s, border-color .15s; }
.tab:hover { color: var(--text); border-color: rgba(255, 47, 123, .4); }
.tab.active { color: #fff; background: var(--heat); border-color: transparent; }

/* ── STEPS ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps .step { text-align: left; max-width: none; }
.steps .step::after { display: none; }
.step .mono-label.sm { color: var(--pink); }

/* ── AI VALIDATION ── */
.ai-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.ai-grid h2 { font-size: clamp(40px, 4.4vw, 62px); }
.check-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.check-list li { color: #c3cad8; font-size: 15.5px; padding-left: 24px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--live); font-weight: 700; }
.score-monitor { max-width: 440px; justify-self: end; width: 100%; }
.score-body { padding: 30px; }
.score-big { font-family: var(--font-display); font-size: 96px; line-height: 1; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score-big span { font-size: 26px; font-family: var(--font-mono); color: var(--muted); margin-left: 4px; -webkit-text-fill-color: var(--muted); }
.score-body h3 { font-size: 21px; margin: 8px 0 6px; font-family: var(--font-body); font-weight: 700; text-transform: none; }
.score-sub { font-size: 11.5px; letter-spacing: .16em; color: var(--muted); margin-bottom: 22px; font-family: var(--font-mono); }
.signal-row { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 12px 0; font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
.signal-row strong { color: var(--live); font-weight: 600; }

/* ── BEFORE / AFTER ── */
.swap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.swap .before, .swap .after { font-size: 10.5px; letter-spacing: .2em; font-weight: 600; font-family: var(--font-mono); }
.swap .before { color: var(--muted); }
.swap .after { color: var(--live); margin-top: 18px; }
.swap .was { color: var(--muted); font-size: 15.5px; margin-top: 6px; text-decoration: line-through; text-decoration-color: rgba(255, 47, 123, .6); text-decoration-thickness: 1.5px; }
.swap .now { color: var(--text); font-size: 15.5px; margin-top: 6px; }

/* ── PRICING (landing teaser; full detail lives on /pricing) ── */
.lp-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.lp-price { display: flex; flex-direction: column; }
.lp-price .price { font-family: var(--font-display); font-size: 64px; line-height: 1; margin: 4px 0 8px; }
.lp-price .price .per { font-size: 17px; font-family: var(--font-mono); color: var(--muted); margin-left: 4px; }
.lp-price .aud { color: var(--muted); font-size: 14.5px; margin-bottom: 16px; flex: 1; }
.lp-price.pop { border-color: rgba(255, 47, 123, .45); position: relative; }
.lp-price.pop::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--heat); border-radius: var(--radius) var(--radius) 0 0; }
.lp-price .trial { color: var(--live); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; margin-bottom: 14px; min-height: 1.2em; }
.pricing-more { text-align: center; margin-top: 22px; }
.pricing-more a { color: var(--pink); font-weight: 500; text-decoration: none; }
.pricing-more a:hover { color: var(--text); }

/* ── FAQ ── */
.faq-wrap { max-width: 780px; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin-bottom: 12px; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); font-size: 20px; color: var(--pink); transition: transform .2s ease; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { border-color: rgba(255, 47, 123, .35); }
.faq-answer { padding: 0 22px 20px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.faq-answer a { color: var(--pink); }

/* ── FINAL CTA ── */
.final-cta { padding: 40px 0 100px; }
.cta-panel { position: relative; overflow: hidden; border: 1px solid rgba(255, 47, 123, .35); border-radius: 20px; background: radial-gradient(ellipse 60% 90% at 8% 0%, rgba(230, 57, 70, .22), transparent 60%), radial-gradient(ellipse 50% 90% at 95% 100%, rgba(140, 92, 255, .20), transparent 60%), var(--panel); padding: 44px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-panel h2 { font-size: clamp(34px, 3.6vw, 52px); }
.cta-panel p { color: var(--muted); margin-top: 10px; font-size: 17px; }

/* ── FOOTER (shared markup from includes/footer.php) ── */
footer { background: var(--panel-2); color: var(--text); padding: 4rem 3rem 2rem; border-top: 1px solid var(--line); }
.footer-content { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 2.5rem; max-width: 1400px; margin: 0 auto 3rem; }
.footer-brand .logo { margin-bottom: 1.5rem; }
.footer-brand p { color: var(--muted); font-size: .95rem; line-height: 1.7; max-width: 300px; }
.footer-col h4 { font-family: var(--font-mono); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 1.5rem; color: var(--muted); }
.footer-col h4 + h4, .footer-col a + h4 { margin-top: 2rem; }
.footer-col a { display: block; color: var(--muted); text-decoration: none; font-size: .95rem; margin-bottom: .75rem; transition: color .3s ease; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid var(--line); max-width: 1400px; margin: 0 auto; }
.footer-bottom p { color: var(--muted); font-size: .85rem; }
.social-links { display: flex; gap: 1rem; }
.social-links a { width: 40px; height: 40px; background: rgba(255, 255, 255, .06); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); transition: all .3s ease; }
.social-links a:hover { background: var(--heat); transform: translateY(-3px); }
.footer-brand .social-links { margin-top: 1.6rem; }
.footer-brand .logo-img { height: 44px; width: auto; }
/* network discovery nav in the bottom bar — fine navigation without a whole column */
.footer-nets { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .2rem; font-family: var(--font-mono); font-size: .82rem; }
.footer-nets span { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; margin-right: .7rem; }
.footer-nets a { color: var(--muted); text-decoration: none; transition: color .3s ease; }
.footer-nets a:hover { color: var(--text); }
.footer-nets a:not(:first-of-type)::before { content: '·'; margin: 0 .55rem; color: rgba(160, 176, 205, .4); }

/* ── MOBILE STICKY CTA BAR ──
   Appears on phones after the visitor scrolls past the hero: the primary
   action stays one thumb-tap away for the whole page (the pattern every
   big SaaS uses on mobile). JS in index.php toggles .show on scroll. */
.mobile-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: none; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 13, 19, .92); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 47, 123, .3);
    transform: translateY(110%); transition: transform .25s ease;
}
.mobile-cta-bar.show { transform: translateY(0); }
.mobile-cta-bar .note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; line-height: 1.35; }
.mobile-cta-bar .note b { display: block; color: var(--text); font-family: var(--font-body); font-size: 13px; letter-spacing: 0; }
.mobile-cta-bar .btn { flex-shrink: 0; min-height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 768px) { .mobile-cta-bar { display: flex; } }

/* ── REVEAL / MOTION ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .wire-track { animation: none; }
    .live-dot { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .card:hover, .platform-chip:hover, .btn:hover { transform: none; }
    html { scroll-behavior: auto; }
}

/* ── MOBILE NAV (hamburger) ── */
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; color: var(--text); z-index: 102; }
.nav-burger svg { display: block; }
@media (max-width: 960px) {
    nav { padding: .9rem 1.25rem; }
    nav.scrolled { padding: .7rem 1.25rem; }
    .nav-burger { display: block; margin-left: auto; }
    .nav-links { display: flex !important; flex-direction: column; align-items: stretch; gap: 0; position: fixed; top: 64px; left: 0; right: 0; background: var(--panel-2); padding: 1rem 1.5rem 1.5rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); border-top: 1px solid var(--line); transform: translateY(-135%); transition: transform .28s ease; max-height: calc(100vh - 64px); overflow-y: auto; z-index: 99; }
    .nav-links.open { transform: translateY(0); }
    .nav-links > a { padding: .85rem 0; width: 100%; border-bottom: 1px solid var(--line); }
    /* Log In and Sign Up FIRST in the burger menu: on a phone they sat under two dropdowns and eight links, below the fold (2026-10-09) */
    .nav-auth { order: -1; flex-direction: row; align-items: stretch; width: 100%; gap: .6rem; margin: 0 0 .6rem; padding: 0 0 .9rem; border-left: 0; border-bottom: 1px solid var(--line); }
    .nav-auth .btn { flex: 1; }
    .nav-auth .btn { width: 100%; text-align: center; justify-content: center; }
    .lang-switcher { margin: .8rem 0 0; }
    .wire { margin-top: 62px; }
}

/* Six footer columns need room. Between 940px and 1200px they would squeeze to
   ~115px each and every "<Brand> alternative" link would wrap three lines, so
   step down to three columns first. The 940px rule below comes later in the
   file and wins under 940, dropping to two. */
@media (max-width: 1200px) {
    .footer-content { grid-template-columns: repeat(3, 1fr); }
}

/* ── RESPONSIVE ── */
@media (max-width: 940px) {
    .hero { padding-top: 34px; }
    .hero-grid, .ai-grid { grid-template-columns: 1fr; gap: 40px; }
    .deep, .deep.flip { grid-template-columns: 1fr; gap: 26px; padding: 34px 0; }
    .deep.flip .deep-copy { order: 1; }
    .deep.flip .deep-shot { order: 2; }
    .score-monitor { justify-self: start; }
    .feature-grid, .steps, .swap-grid, .lp-price-grid { grid-template-columns: 1fr 1fr; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .metric-grid > div:nth-child(2) { border-right: 0; }
    .metric-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .cta-panel { flex-direction: column; align-items: flex-start; }
    .section { padding: 72px 0; }
    .footer-content { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .container { width: calc(100% - 32px); }
    .feature-grid, .steps, .swap-grid, .lp-price-grid { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .hero { padding-top: 26px; }
    .hero h1 { font-size: clamp(52px, 14vw, 68px); }
    .lead { font-size: 16.5px; margin-top: 18px; }
    .microline { margin-top: 12px; }
    .cta-row { margin-top: 22px; }
    .platform-rail { margin-top: 22px; }
    .cta-row { width: 100%; }
    .cta-row .btn { flex: 1; min-width: 170px; }
    .cta-panel { padding: 30px 22px; }
    .footer-content { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; }
}

/* ── Mockups, second pass: tall screens, the composer, the Douyin channel strip, the hero carousel,
   and the proof blocks in the BEFORE/AFTER cards. .mk-tall drops the fixed aspect: the dashboard,
   the composer and Douyin take the height their content needs, because "show more of the dashboard"
   was the exact request and a 1400×698 frame clipped everything under the niche panel. Inside the
   hero carousel every slide is pinned to one aspect so the page does not jump between slides; the
   full-height versions live in the decks below. */
.mk.mk-tall { aspect-ratio:auto; }
.hcar-stage .mk, .hcar-stage .mk.mk-tall { aspect-ratio:1400/1000; }
/* dashboard, second half */
.mk-grid2 { display:grid; grid-template-columns:1.25fr 1fr; gap:7px; margin-top:7px; }
.mk-side2 { display:grid; gap:7px; align-content:start; }
.mk-rrow { display:grid; grid-template-columns:18px 1fr auto; gap:7px; align-items:center; padding:5px 0; border-top:1px solid var(--mk-line); opacity:0; transform:translateY(5px); }
.mk-rrow:first-of-type { border-top:0; }
.go .mk-rrow, .go .mk-drow, .go .mk-trow, .go .mk-dcard { animation:mk-in .4s ease forwards; animation-delay:calc(.35s + var(--i) * .09s); }
.mk-rank { width:18px; height:18px; border-radius:50%; font-size:8px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; background:#eef0f5; color:#3c4250; }
.mk-rank.r1 { background:#f6c344; color:#3d2e00; } .mk-rank.r2 { background:#d7dbe3; } .mk-rank.r3 { background:#e9b58a; color:#4a2a10; }
.mk-rbody { min-width:0; } .mk-rbody b { display:block; font-size:8.5px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mk-rbody small { font-size:7.5px; color:var(--mk-muted); }
.mk-sig { display:flex; gap:4px; } .mk-sig i { font-style:normal; font-size:7.5px; font-weight:700; border-radius:5px; padding:1px 5px; white-space:nowrap; }
.mk-sig .fb { background:rgba(24,119,242,.12); color:#1856b8; } .mk-sig .rd { background:rgba(255,69,0,.12); color:#c23a00; } .mk-sig .pi { background:rgba(230,0,35,.1); color:#b0001b; }
.mk-nh em.hot { color:#c2255c; background:rgba(255,47,123,.12); }
.mk-drow { display:flex; align-items:center; gap:6px; padding:5px 0; border-top:1px solid var(--mk-line); opacity:0; transform:translateY(5px); }
.mk-drow:first-of-type { border-top:0; } .mk-drow > span { min-width:0; flex:1; }
.mk-drow b { display:block; font-size:8.5px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mk-drow small { font-size:7.5px; color:var(--mk-muted); }
.mk-drow em, .mk-dcard em { font-style:normal; font-size:8px; font-weight:700; color:#fff; background:linear-gradient(135deg,#667eea,#764ba2); border-radius:6px; padding:3px 7px; white-space:nowrap; }
.mk-trow { display:grid; grid-template-columns:14px 34px 1fr 16px; gap:6px; align-items:center; padding:4px 0; opacity:0; transform:translateY(5px); }
.mk-tname { font-size:8.5px; font-weight:600; } .mk-trow b { font-size:8.5px; text-align:right; }
.mk-bar { height:6px; border-radius:3px; background:#eef0f5; overflow:hidden; } .mk-bar i { display:block; height:100%; width:0; border-radius:3px; }
.go .mk-bar i { animation:mk-grow .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(.9s + var(--i) * .09s); }
@keyframes mk-grow { to { width:var(--w); } }
/* composer */
.mk-pubgrid { display:grid; grid-template-columns:1.35fr 1fr; gap:8px; }
.mk-composer { background:#fff; border:1px solid var(--mk-line); border-radius:9px; padding:8px 10px; display:flex; flex-direction:column; gap:7px; }
.mk-tabs { display:flex; gap:4px; font-size:8px; font-weight:600; color:var(--mk-muted); } .mk-tabs span { padding:3px 7px; border-radius:6px; border:1px solid var(--mk-line); } .mk-tabs .on { background:#16181d; color:#fff; border-color:#16181d; } .mk-tabs-more { color:#5468ff; }
.mk-caption { border:1px solid var(--mk-line); border-radius:8px; padding:8px 9px; background:#fafbfd; } .mk-caption p { font-size:9.5px; line-height:1.4; margin:0 0 6px; }
.mk-media { display:flex; gap:4px; align-items:center; } .mk-media em { font-style:normal; font-size:8px; color:var(--mk-muted); }
.mk-simstrip { margin-top:7px; border:1px solid #f6c344; background:#fff8e1; border-radius:7px; padding:5px 7px; font-size:8px; display:grid; grid-template-columns:1fr auto; gap:1px 8px; align-items:center; opacity:0; transform:translateY(4px); }
.go .mk-simstrip { animation:mk-in .4s ease forwards; animation-delay:1.1s; }
.mk-simstrip b { grid-column:1; color:#7a5200; } .mk-simstrip span { grid-column:1; color:#5c4a12; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mk-simstrip i { grid-column:2; grid-row:1 / 3; font-style:normal; font-weight:700; color:#7a5200; border:1px solid #f6c344; border-radius:5px; padding:2px 6px; }
.mk-lbl { font-size:7.5px; letter-spacing:.08em; font-weight:700; color:var(--mk-muted); }
.mk-nets { display:flex; flex-wrap:wrap; gap:4px; }
.mk-netpill { display:inline-flex; align-items:center; gap:4px; font-size:8px; font-weight:600; border:1px solid var(--mk-line); border-radius:999px; padding:2px 7px 2px 4px; color:var(--mk-muted); background:#fff; }
.mk-netpill i { width:10px; height:10px; border-radius:50%; background:#d7dbe3; }
.go .mk-netpill { animation:mk-on .35s ease forwards; animation-delay:calc(.5s + var(--i) * .12s); }
@keyframes mk-on { to { color:var(--mk-ink); border-color:var(--c); background:#fff; } }
.go .mk-netpill i { animation:mk-dot .35s ease forwards; animation-delay:calc(.5s + var(--i) * .12s); }
@keyframes mk-dot { to { background:var(--c); } }
.mk-egrow { display:flex; align-items:center; gap:6px; font-size:8.5px; border:1px dashed #35d07f; background:rgba(53,208,127,.07); border-radius:7px; padding:5px 8px; }
.mk-check { width:12px; height:12px; border-radius:3px; background:#35d07f; color:#fff; font-size:8px; display:inline-flex; align-items:center; justify-content:center; flex:none; } .mk-check b { line-height:1; }
.mk-egrow em { font-style:normal; margin-left:auto; font-weight:700; border:1px solid var(--mk-line); border-radius:5px; padding:2px 6px; background:#fff; white-space:nowrap; }
.mk-pubfoot { display:flex; align-items:center; gap:8px; margin-top:auto; } .mk-when { font-size:8px; color:var(--mk-muted); }
.mk-schedule { margin-left:auto; background:linear-gradient(135deg,#ff2f7b,#8c5cff); color:#fff; font-size:9px; font-weight:800; border-radius:7px; padding:5px 12px; }
.go .mk-schedule.press { animation:mk-press .35s ease 2.2s 1; }
.mk-egcol { display:grid; gap:8px; align-content:start; }
.mk-dcard { border:1px solid var(--mk-line); border-radius:7px; padding:6px 7px; margin-top:5px; opacity:0; transform:translateY(5px); background:#fafbfd; }
.mk-dcard b { display:block; font-size:8.5px; font-weight:600; line-height:1.25; } .mk-dcard small { font-size:7.5px; color:var(--mk-muted); display:block; }
.mk-dcard p { font-size:7.5px; color:#3c4250; margin:4px 0 5px; line-height:1.35; } .mk-dcard p::before { content:"✨ "; }
.mk-queue { background:#fff; border:1px solid var(--mk-line); border-radius:9px; padding:8px 10px; }
.mk-week { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; height:44px; align-items:end; }
.mk-day { display:flex; flex-direction:column; align-items:center; gap:2px; height:100%; justify-content:flex-end; } .mk-day i { display:block; width:100%; height:0; border-radius:3px 3px 0 0; background:#c9cfdb; } .mk-day.now i { background:#5468ff; }
.go .mk-day i { animation:mk-up .6s ease 1.2s forwards; } @keyframes mk-up { to { height:var(--h); } }
.mk-day small { font-size:7px; color:var(--mk-muted); }
.go .mk-toast-pub { animation-delay:2.6s; }
/* douyin channel strip: the app's seventeen channels, looping */
.mk-dychips { display:flex; overflow:hidden; margin-bottom:8px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.mk-dytrack { display:flex; gap:5px; flex:none; padding-right:5px; }
.go .mk-dytrack { animation:mk-marquee 34s linear infinite; }
.mk-dychips:hover .mk-dytrack { animation-play-state:paused; }
@keyframes mk-marquee { to { transform:translateX(-100%); } }
.mk-dytrack .mk-chip { white-space:nowrap; }
.mk-douyin .mk-dygrid { grid-template-columns:repeat(3,1fr); }
.mk-douyin .mk-dycover { aspect-ratio:9/10; }
/* hero carousel */
.hcar { display:grid; gap:12px; }
.hcar-stage { position:relative; }
.hcar-slide[hidden] { display:none; }
.hcar-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.06); }
.hcar-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#ff2f7b,#8c5cff); }
.hcar.auto .hcar-bar i { animation:hcar-fill 8s linear forwards; }
.hcar.paused .hcar-bar i { animation-play-state:paused; }
@keyframes hcar-fill { to { width:100%; } }
.hcar-tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.hcar-tab { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 10px; text-align:left; cursor:pointer; color:var(--muted); font:inherit; transition:border-color .2s, background .2s; }
.hcar-tab b { display:block; color:var(--text); font-size:12.5px; font-weight:700; } .hcar-tab span { display:block; font-size:11px; line-height:1.3; margin-top:2px; }
.hcar-tab:hover { border-color:rgba(255,47,123,.4); } .hcar-tab.on { background:rgba(255,47,123,.1); border-color:rgba(255,47,123,.55); }
.hcar-tab:focus-visible { outline:2px solid var(--pink); outline-offset:2px; }
/* BEFORE/AFTER proof blocks: the live radar rows, the already-assigned flag, the publish targets */
.swap-proof { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.swap-ph { font-size:10.5px; letter-spacing:.18em; font-weight:700; font-family:var(--font-mono); color:var(--pink); display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.swap-live { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.swap-live li { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; font-size:12.5px; min-width:0; }
.sl-net { font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:1px 5px; white-space:nowrap; }
.swap-live a { color:var(--text); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .swap-live a:hover { color:var(--pink); }
.swap-live b { font-family:var(--font-mono); font-size:11px; color:var(--live); white-space:nowrap; }
.swap-pf { margin-top:8px; font-size:11.5px; color:var(--muted); }
.swap-dup { display:grid; gap:6px; }
.sd-row { display:flex; align-items:center; gap:8px; font-size:12.5px; border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:rgba(255,255,255,.02); min-width:0; }
.sd-row b { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sd-row em { font-style:normal; margin-left:auto; font-size:10.5px; font-weight:700; color:#fff; background:#16a34a; border-radius:6px; padding:3px 7px; white-space:nowrap; }
.sd-search { font-size:12px; color:var(--muted); border:1px dashed var(--line); border-radius:8px; padding:7px 9px; }
.swap-nets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.swap-nets span { width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.swap-btns { display:flex; flex-wrap:wrap; gap:6px; }
.sb { font-size:11.5px; font-weight:700; border:1px solid var(--line); border-radius:8px; padding:6px 10px; color:var(--text); }
.sb.pri { background:linear-gradient(135deg,#ff2f7b,#8c5cff); border-color:transparent; color:#fff; } .sb.eg { color:var(--live); border-color:rgba(53,208,127,.5); }
@media (max-width: 900px) { .hcar-tabs { grid-template-columns:repeat(3,1fr); } .hcar-tab span { display:none; } }
@media (max-width: 640px) {
  .mk-grid2, .mk-pubgrid { grid-template-columns:1fr; }
  .mk-douyin .mk-dygrid { grid-template-columns:repeat(2,1fr); } .mk-douyin .mk-dycard:nth-child(3) { display:block; } .mk-douyin .mk-dycard:nth-child(n+5) { display:none; }
  .hcar-tabs { grid-template-columns:repeat(3,1fr); gap:4px; } .hcar-tab { padding:6px 4px; text-align:center; } .hcar-tab b { font-size:10.5px; }
  .hcar-stage .mk, .hcar-stage .mk.mk-tall { aspect-ratio:auto; max-height:360px; }
}
@media (prefers-reduced-motion: reduce) {
html:not(.demo-motion-enabled) .mk-rrow, html:not(.demo-motion-enabled) .mk-drow, html:not(.demo-motion-enabled) .mk-trow, html:not(.demo-motion-enabled) .mk-dcard, html:not(.demo-motion-enabled) .mk-simstrip { opacity:1 !important; transform:none !important; animation:none !important; }html:not(.demo-motion-enabled) .mk-bar i { width:var(--w) !important; animation:none !important; }html:not(.demo-motion-enabled) .mk-day i { height:var(--h) !important; animation:none !important; }html:not(.demo-motion-enabled) .mk-netpill { color:var(--mk-ink) !important; border-color:var(--c) !important; animation:none !important; }html:not(.demo-motion-enabled) .mk-netpill i { background:var(--c) !important; animation:none !important; }html:not(.demo-motion-enabled) .mk-dytrack { animation:none !important; }html:not(.demo-motion-enabled) .hcar-bar { display:none; }

}
/* dashboard mockup, third pass: the brand switcher in the greeting, the queue rows, the
   member table (Member · Pending · Done, as the real card) and the link chips that stand for
   Stats, Team report and Board. */
.mk-proj { margin-left:auto; font-size:8.5px; font-weight:600; color:var(--mk-ink); border:1px solid var(--mk-line); border-radius:6px; padding:2px 7px; background:#fff; white-space:nowrap; }
.mk-nh em.lnk { color:#3b3fd8; background:transparent; border:1px solid rgba(84,104,255,.35); }
.mk-qrow { display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center; padding:5px 0; border-top:1px solid var(--mk-line); opacity:0; transform:translateY(5px); }
.mk-qrow:first-of-type { border-top:0; }
.go .mk-qrow { animation:mk-in .4s ease forwards; animation-delay:calc(.35s + var(--i) * .09s); }
.mk-qrow > span:first-child { min-width:0; } .mk-qrow b { display:block; font-size:8.5px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-qrow small { font-size:7.5px; color:var(--mk-muted); } .mk-qrow .mk-cat { margin-left:4px; }
.mk-qrow em { font-style:normal; font-size:7.5px; font-weight:700; color:#b45309; background:#fff3e0; border-radius:5px; padding:2px 6px; white-space:nowrap; } .mk-qrow em.ok { color:#166534; background:#e8f7ee; }
.mk-mt { width:100%; border-collapse:collapse; font-size:8.5px; }
.mk-mt th { font-size:7px; letter-spacing:.08em; font-weight:700; color:var(--mk-muted); text-align:left; padding:2px 0 4px; } .mk-mt th:not(:first-child), .mk-mt td:not(:first-child) { text-align:center; }
.mk-mt td { padding:4px 0; border-top:1px solid var(--mk-line); }
.mk-mt tr { opacity:0; transform:translateY(5px); } .go .mk-mt tr { animation:mk-in .4s ease forwards; animation-delay:calc(.9s + var(--i) * .09s); }
.mk-mt td:first-child { display:flex; align-items:center; gap:5px; font-weight:600; }
.mk-mt td b { font-weight:800; } .mk-mt td b.done { color:#166534; }
@media (prefers-reduced-motion: reduce) {
html:not(.demo-motion-enabled) .mk-qrow, html:not(.demo-motion-enabled) .mk-mt tr { opacity:1 !important; transform:none !important; animation:none !important; }
}
.pricing-cmp { text-align:center; margin-top:26px; font-size:14px; color:var(--muted); }
.pricing-cmp a { color:var(--pink); font-weight:600; text-decoration:none; white-space:nowrap; }
/* ── Auto-DM section: the phone (includes/ui-mockups.php vh_mock_dm) and the copy beside it ── */
.dm-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; margin:8px 0 44px; }
.dm-uc-h { font-size:10.5px; letter-spacing:.2em; font-weight:700; font-family:var(--font-mono); color:var(--pink); margin-bottom:12px; }
.dm-uc { list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px; }
.dm-uc li { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.02); }
.dm-uc b { display:block; font-size:14.5px; margin-bottom:3px; } .dm-uc span { color:var(--muted); font-size:13.5px; line-height:1.5; }
.dm-steps { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px; }
.dm-steps li { display:flex; align-items:center; gap:10px; font-size:14.5px; }
.dm-steps span { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#ff2f7b,#8c5cff); color:#fff; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.dm-nets { color:var(--muted); font-size:13px; }
.dm-phone-wrap { display:flex; justify-content:center; }
.mk-phone { width:300px; max-width:100%; border-radius:34px; background:#0b0d14; border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(255,47,123,.08); padding:12px; font:12px/1.35 'Inter', var(--font-body); color:#0e1320; position:relative; }
.mk-phone-screen { background:#fff; border-radius:24px; overflow:hidden; min-height:520px; display:flex; flex-direction:column; }
.mk-ig-top { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #eee; font-weight:700; font-size:12px; }
.mk-ig-top i { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#f09433,#bc1888); }
.mk-ig-top small { color:#6a7384; font-weight:500; margin-left:auto; }
.mk-ig-img { aspect-ratio:4/3; background:radial-gradient(ellipse at 30% 30%, #ffd08a, #c2415a 55%, #2a1230); position:relative; }
.mk-ig-img b { position:absolute; left:12px; bottom:12px; right:12px; color:#fff; font-size:13px; font-weight:800; text-shadow:0 2px 12px rgba(0,0,0,.6); line-height:1.25; }
.mk-ig-acts { display:flex; gap:12px; padding:8px 12px 4px; font-size:14px; } .mk-ig-acts span:last-child { margin-left:auto; }
.mk-ig-cap { padding:0 12px 8px; font-size:11px; color:#3c4250; } .mk-ig-cap b { color:#0e1320; }
.mk-ig-cmts { padding:4px 12px 10px; display:grid; gap:7px; border-top:1px solid #f0f0f0; }
.mk-cmt { display:flex; gap:7px; align-items:flex-start; font-size:11px; opacity:0; transform:translateY(6px); }
.mk-cmt i { width:20px; height:20px; border-radius:50%; background:#c9cfdb; flex:none; } .mk-cmt.me i { background:linear-gradient(135deg,#f09433,#bc1888); }
.mk-cmt b { font-weight:700; margin-right:4px; } .mk-cmt.me { padding-left:14px; }
.mk-cmt em { font-style:normal; font-size:9.5px; color:#6a7384; margin-left:4px; }
.go .mk-cmt:nth-child(1) { animation:mk-in .4s ease .6s forwards; }
.go .mk-cmt:nth-child(2) { animation:mk-in .4s ease 1.5s forwards; }
.go .mk-cmt:nth-child(3) { animation:mk-in .4s ease 2.2s forwards; }
.mk-dm { margin:auto 10px 10px; background:#0e1320; color:#fff; border-radius:14px; padding:9px 11px; font-size:11px; opacity:0; transform:translateY(10px); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.mk-dm b { display:block; font-size:9.5px; letter-spacing:.08em; color:#8fa0ff; margin-bottom:3px; }
.mk-dm a { color:#7cc8ff; text-decoration:underline; }
.go .mk-dm { animation:mk-in .45s cubic-bezier(.2,.7,.2,1) 3s forwards; }
.mk-dm-count { position:absolute; right:-10px; top:22px; background:#16a34a; color:#fff; font-size:10.5px; font-weight:700; border-radius:999px; padding:5px 10px; box-shadow:0 8px 20px rgba(0,0,0,.4); opacity:0; transform:translateY(6px); }
.go .mk-dm-count { animation:mk-in .35s ease 3.6s forwards; }
.dm-cmp { max-width:900px; margin:34px auto 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.dm-cmp-row { display:grid; grid-template-columns:.7fr 1.1fr 1.3fr; gap:0; }
.dm-cmp-row > span { padding:12px 16px; font-size:13.5px; border-top:1px solid var(--line); color:var(--muted); }
.dm-cmp-row > span:first-child { color:var(--text); font-weight:600; }
.dm-cmp-row > span + span { border-left:1px solid var(--line); }
.dm-cmp-head > span { border-top:0; background:rgba(255,255,255,.03); font-weight:700; color:var(--text); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.dm-cmp-row .win { color:var(--text); }
.dm-cmp-row .win::before { content:"✓ "; color:var(--live); font-weight:800; }
@media (max-width: 900px) { .dm-grid { grid-template-columns:1fr; gap:28px; } .dm-cmp-row { grid-template-columns:1fr; } .dm-cmp-row > span + span { border-left:0; } .dm-cmp-head { display:none; } .dm-cmp-row > span:nth-child(2)::before { content:"ManyChat: "; font-weight:700; color:var(--text); } .dm-cmp-row > span:nth-child(3)::before { content:"ViralHunt: "; font-weight:700; color:var(--text); } .dm-cmp-row .win::before { content:"✓ ViralHunt: "; } }
@media (prefers-reduced-motion: reduce) {
html:not(.demo-motion-enabled) .mk-cmt, html:not(.demo-motion-enabled) .mk-dm, html:not(.demo-motion-enabled) .mk-dm-count { opacity:1 !important; transform:none !important; animation:none !important; }
}
/* the phone is a .mk for the observer and the counters only: none of the screen grid, aspect or clipping applies to it */
.mk.mk-phone, .mk.mk-phone.mk-tall { display:block; grid-template-columns:none; aspect-ratio:auto; overflow:visible; container-type:normal; background:#0b0d14; }
@media (max-width: 640px) { .mk.mk-phone { grid-template-columns:none; } }
/* Translated labels are longer than the English ones: Spanish wrapped every item of the desktop nav at 1424px. Nothing wraps now, and the gaps tighten before the burger takes over at 960px. */
.nav-tools-toggle, .lang-switcher, .nav-auth .btn { white-space:nowrap; }
@media (max-width: 1240px) { nav { padding-left:2rem; padding-right:2rem; } .nav-links { gap:1.4rem; } .nav-links a { font-size:.88rem; } .nav-auth { margin-left:.4rem; padding-left:1rem; } }
@media (max-width: 1040px) { .nav-links { gap:1rem; } .nav-links a { font-size:.84rem; } }
.founding-chip { display:inline-block; margin-left:10px; font-size:10px; letter-spacing:.16em; font-weight:700; color:#fff; background:var(--heat); border-radius:999px; padding:3px 9px; vertical-align:middle; }
.pricing-founding { text-align:center; margin-top:22px; color:var(--text); font-size:15px; }
.faq-more { text-align:center; margin-top:22px; }
.vh-ic { display:inline-block; vertical-align:-.125em; }

/* ── Hero carousel: Auto-DM slide + a wider stage on big screens ── */
.hcar-dm { aspect-ratio:1400/1000; background:radial-gradient(ellipse 60% 70% at 72% 50%, rgba(140,92,255,.2), transparent 70%), #0b0d14; display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; padding:16px 32px; overflow:hidden; }
.hcar-dm-steps { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.hcar-dm-steps li { display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:14px; line-height:1.4; }
.hcar-dm-steps b { flex:none; width:22px; height:22px; border-radius:50%; background:rgba(255,47,123,.16); color:var(--pink); font-size:12px; font-weight:700; display:grid; place-items:center; }
.hcar-dm-phone { zoom:.78; }
@media (max-width:640px) { .hcar-dm { grid-template-columns:1fr; padding:12px; } .hcar-dm-steps { display:none; } .hcar-dm-phone { zoom:.5; margin:0 auto; } }


/* ── Hero carousel: hashtags, analytics and agents screens ── */
.mk-badge.mk-bs { background:#1185fe; } .mk-badge.mk-pi { background:#e60023; } .mk-badge.mk-fb { background:#1877f2; }
.mk-thumb.mk-pi { background:linear-gradient(135deg,#e60023,#8a0015); } .mk-thumb.mk-fb { background:linear-gradient(135deg,#1877f2,#0b4fa8); }
.mk-hhead { display:grid; grid-template-columns:18px 1fr 64px 52px 1fr 42px; gap:8px; font-size:8px; letter-spacing:.08em; color:#9aa0ab; font-weight:700; padding:0 8px 4px; }
.mk-hrow { display:grid; grid-template-columns:18px 1fr 64px 52px 1fr 42px; gap:8px; align-items:center; background:#fff; border:1px solid var(--mk-line); border-radius:9px; padding:7px 8px; margin-bottom:5px; opacity:0; transform:translateY(6px); }
.mk-hrow > b { font-size:10px; color:var(--mk-muted); font-weight:700; }
.mk-htag { font-weight:800; font-size:11.5px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-hrow .mk-num { font-size:10.5px; font-weight:700; }
.mk-hrow em { font-style:normal; font-size:10px; font-weight:800; color:#1f9d55; text-align:right; }
.mk.go .mk-hrow { animation:mk-in .45s ease forwards; animation-delay:calc(var(--i) * .09s); }
.mk.go .mk-hrow .mk-bar i, .mk.go .mk-brow .mk-bar i { animation:mk-grow .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(.2s + var(--i) * .09s); background:linear-gradient(90deg,#ff2f7b,#8c5cff); }
.mk-bars { display:grid; gap:6px; }
.mk-brow { display:grid; grid-template-columns:64px 1fr 44px; gap:8px; align-items:center; opacity:0; transform:translateY(4px); }
.mk-brow b { font-size:10px; font-weight:700; text-align:right; }
.mk-brow .mk-bar { height:8px; }
.mk.go .mk-brow { animation:mk-in .4s ease forwards; animation-delay:calc(.3s + var(--i) * .08s); }
.mk-rep .mk-niche + .mk-niche { margin-top:7px; }
.mk-aggrid { display:grid; grid-template-columns:1fr 1.15fr; gap:8px; align-items:start; }
.mk-agcard .mk-nh em { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:8.5px; background:#f1f3f8; border-radius:5px; padding:2px 5px; color:var(--mk-muted); }
.mk-agstep { display:flex; align-items:center; gap:8px; font-size:10.5px; padding:5px 0; border-bottom:1px dashed var(--mk-line); color:var(--mk-muted); }
.mk-agstep i { width:14px; height:14px; border-radius:50%; border:1.5px solid #c9cfdb; flex:none; position:relative; }
.mk.go .mk-agstep { animation:mk-agtick .4s ease forwards; animation-delay:calc(.6s + var(--i) * .9s); }
@keyframes mk-agtick { to { color:var(--mk-ink); } }
.mk.go .mk-agstep i { animation:mk-agcheck .3s ease forwards; animation-delay:calc(.6s + var(--i) * .9s); }
@keyframes mk-agcheck { to { background:#35d07f; border-color:#35d07f; } }
.mk-agstep i::after { content:""; position:absolute; left:4px; top:1.5px; width:3px; height:6px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); opacity:0; }
.mk.go .mk-agstep i::after { animation:mk-in .2s ease forwards; animation-delay:calc(.75s + var(--i) * .9s); }
.mk-agdone { margin-top:8px; font-size:10px; font-weight:700; color:#1f9d55; background:rgba(53,208,127,.12); border-radius:7px; padding:5px 8px; opacity:0; }
.mk.go .mk-agdone { animation:mk-in .4s ease forwards; animation-delay:4.4s; }
.mk-term { background:#0e1320; border-radius:9px; overflow:hidden; color:#c9d1e3; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9px; line-height:1.5; }
.mk-termbar { display:flex; align-items:center; gap:5px; padding:6px 8px; background:#161c2c; font-size:8.5px; color:#7d879c; }
.mk-termbar i { width:8px; height:8px; border-radius:50%; background:#ff5f57; } .mk-termbar i:nth-child(2) { background:#febc2e; } .mk-termbar i:nth-child(3) { background:#28c840; }
.mk-termbar span { margin-left:4px; }
.mk-term pre { margin:0; padding:8px 10px; white-space:pre-wrap; word-break:break-all; font:inherit; }
.mk-term pre b { color:#35d07f; } .mk-term pre em { font-style:normal; color:#ff2f7b; font-weight:700; }
@media (max-width:640px) { .mk-aggrid { grid-template-columns:1fr; } .mk-hhead span:nth-child(5), .mk-hrow .mk-bar { display:none; } .mk-hhead, .mk-hrow { grid-template-columns:18px 1fr 64px 52px 42px; } }

/* ── Plan matrix (includes/plan-matrix.php), on /pricing and folded on the home ── */
.pr-matrix { margin: 3.5rem auto 0; max-width: 1100px; }
.pr-matrix h2 { text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 1.4rem; }
.pm-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.pm { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.pm th, .pm td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pm thead th { font-family: var(--font-display); font-size: 15px; letter-spacing: -.01em; background: rgba(255,255,255,.025); }
.pm thead th small { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .06em; margin-top: 2px; }
.pm thead th:first-child, .pm tbody th { text-align: left; font-weight: 500; color: var(--text); }
.pm tbody th { font-size: 14px; }
.pm tbody tr:last-child th, .pm tbody tr:last-child td { border-bottom: 0; }
.pm .pm-pop { background: rgba(255,47,123,.07); }
.pm thead th.pm-pop { color: var(--pink); }
.pm td { font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pm-yes { color: var(--live); font-weight: 700; } .pm-no { color: rgba(255,255,255,.28); }
.pm-txt { font-family: var(--font-body); font-size: 13px; color: var(--muted); }
.pm-details { margin-top: 22px; }
.pm-details summary { cursor: pointer; list-style: none; text-align: center; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px; border: 1px dashed var(--line); border-radius: 12px; }
.pm-details summary::-webkit-details-marker { display: none; }
.pm-details summary::after { content: " +"; } .pm-details[open] summary::after { content: " –"; }
.pm-details[open] summary { margin-bottom: 14px; }
.pm-more { text-align: center; margin: 12px 0 0; font-size: 14px; } .pm-more a { color: var(--pink); text-decoration: none; }
/* Acquisition pages: a compact introduction and a stable, controllable demo. */
.landing-home .hero { padding: 36px 0 44px; }
.landing-home .hero-grid { gap: 32px; align-items: start; }
.landing-home .hero h1 { font-size: clamp(36px, 4.3vw, 62px); line-height: 1.04; }
.landing-home .hero .lead { font-size: 18px; line-height: 1.55; margin-top: 18px; }
.landing-home .hero .microline { margin-top: 12px; }
.landing-home .hero .cta-row { margin-top: 20px; }
.landing-home .hero-proof { font-size: 14px; }
.landing-home .hero-proof strong { font-size: 16px; }
.landing-home .hero-visual { padding-top: 14px; min-width: 0; }
.landing-home .wire { display: none; }
.landing-home .hero { margin-top: 84px; }
.hcar-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hcar-stage { height: 440px; overflow: hidden; }
.hcar-slide { height: 100%; overflow: auto; }
.hcar-slide .mk, .hcar-slide .mk.mk-tall { min-height: calc(100% - 30px); max-height: none; aspect-ratio: auto; }
.hero-agency-link { font-size:14px; margin:16px 0; }
.hero-agency-link a { color:var(--pink); }
.hcar-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.hcar-toggle { flex-shrink:0; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); padding:8px 12px; cursor:pointer; font:inherit; }
.hcar-toggle:focus-visible, .ag-workflow-link:focus-visible { outline:2px solid var(--pink); outline-offset:4px; }
.agency-decision { max-width: 850px; }
.pr-brands-ex { list-style:none; padding:0; margin:0 auto 26px; max-width:720px; display:grid; gap:8px; font-size:14px; color:var(--muted); text-align:left; line-height:1.5; }
.pr-brands-ex li b { color:var(--text); margin-right:6px; }
.agency-decision h2 { font-size:clamp(30px, 3.5vw, 44px); margin-bottom:16px; }
.agency-decision p { color:var(--muted); line-height:1.7; margin-bottom:24px; }
.ag-related { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:20px; }
.ag-related a, .ag-workflow-link { color:var(--pink); }
.ag-workflow-link { display:inline-block; margin-top:20px; }
@media(max-width: 760px) {
  .landing-home .hero-grid { grid-template-columns:1fr; }
  .landing-home .hero h1 { font-size:clamp(34px, 8.8vw, 54px); }
  .landing-home .hero { padding-top:26px; }
  .landing-home .hero .lead { font-size:16px; }
  .hcar-tab { padding:8px; }
  .hcar-controls { align-items:flex-start; }
  .hcar-stage { height:360px; }
}
@media (prefers-reduced-motion: reduce) {
html:not(.demo-motion-enabled) .mk-hrow, html:not(.demo-motion-enabled) .mk-brow, html:not(.demo-motion-enabled) .mk-agstep, html:not(.demo-motion-enabled) .mk-agdone, html:not(.demo-motion-enabled) .mk-agstep i::after { opacity:1 !important; transform:none !important; animation:none !important; }html:not(.demo-motion-enabled) .mk-agstep i { animation:none !important; }html:not(.demo-motion-enabled) .hcar *, html:not(.demo-motion-enabled) .reveal { transition:none !important; }

}
@media (max-width: 640px) { .pm th, .pm td { padding: 9px 8px; } .pm { font-size: 13px; } }

/* Open-web example: staggered stories and independently measured social signals. */
.mk.mk-web { aspect-ratio:auto; min-height:350px; }
.mk-web-list { display:grid; gap:10px; margin-top:14px; }
.mk-web-story { border:1px solid var(--mk-line); border-radius:10px; padding:12px; background:#fff; }
.mk-web-story header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.mk-web-story h4 { margin:4px 0 10px; font-size:12px; color:var(--mk-ink); line-height:1.4; }
.mk-web-story small { color:var(--mk-muted); font-size:9px; }
.mk-web-score { color:#16834b; font-size:11px; font-weight:700; white-space:nowrap; }
.mk-web-signals { display:flex; flex-wrap:wrap; gap:7px; font-size:9px; color:var(--mk-ink); }
.mk-web-signals span { background:#f1f4f9; border-radius:5px; padding:5px 7px; }
.mk-web-chart { width:100px; height:28px; flex-shrink:0; }
.mk-web-chart polyline { fill:none; stroke:#16a34a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:140; stroke-dashoffset:0; }
.go .mk-web-story { animation:mk-in .55s ease both; animation-delay:calc(var(--i) * .3s); }
.go .mk-web-chart polyline { animation:mk-web-line 1.8s ease both; animation-delay:calc(.4s + var(--i) * .3s); }
@keyframes mk-web-line { from { stroke-dashoffset:140; } to { stroke-dashoffset:0; } }
.demo-replay { display:block; margin:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); padding:8px 12px; font:inherit; font-size:12px; cursor:pointer; }
.demo-replay[hidden] { display:none; }
.demo-replay:focus-visible { outline:2px solid var(--pink); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
 html:not(.demo-motion-enabled) .mk-web-story { animation:none !important; }
 html:not(.demo-motion-enabled) .mk-web-chart polyline { animation:none !important; stroke-dashoffset:0; }
}
@media(max-width:640px) { .mk-web-story { padding:9px; } .mk-web-chart { width:65px; } }

/* ---- Works-with strip (hero), founder block, free-plan box (29 Sep 2026) ---- */
.works-with { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.works-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; color:var(--muted); margin-bottom:10px; }
.works-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.works-list li { font-family:var(--font-mono); font-size:12.5px; color:var(--text); border:1px solid var(--line); background:var(--panel); border-radius:8px; transition:border-color .15s, transform .15s; }
.works-list li a { display:block; padding:6px 11px; color:inherit; text-decoration:none; }
.works-list li:hover { border-color:rgba(255,47,123,.55); transform:translateY(-1px); }
.works-note { margin-top:10px; font-size:12.5px; color:var(--muted); }
.works-note a { color:var(--pink); text-decoration:none; white-space:nowrap; }
.works-note a:hover { color:var(--text); }
.founder-grid { display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center; }
.founder-photo { position:relative; margin:0; max-width:340px; }
.founder-photo img { width:100%; height:auto; border-radius:20px; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.5); display:block; }
.founder-cap { position:absolute; left:18px; bottom:18px; right:18px; background:rgba(10,13,19,.86); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:13px; }
.founder-cap b { display:block; font-size:14.5px; }
.founder-cap span { color:var(--muted); font-size:12px; }
.founder-copy h2 { font-size:clamp(36px,4vw,56px); margin-bottom:18px; }
.founder-copy > p { color:#c3cad8; font-size:16.5px; margin-top:14px; }
.founder-copy .mono-label { margin-bottom:10px; }
.founder-nets-h { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; color:var(--pink); margin:26px 0 12px; }
.founder-nets { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.founder-nets a { display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:10px 12px; text-decoration:none; color:var(--text); transition:border-color .15s, transform .15s; }
.founder-nets a:hover { border-color:rgba(255,47,123,.45); transform:translateY(-2px); }
.founder-nets svg, .founder-nets i { width:18px; height:18px; flex:none; fill:currentColor; color:var(--muted); }
.founder-nets .fn b { font-family:var(--font-mono); font-size:15px; display:block; line-height:1.1; }
.founder-nets .fn span { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.free-box { max-width:900px; margin:26px auto 0; border:1px solid rgba(53,208,127,.35); border-radius:14px; background:rgba(53,208,127,.05); padding:20px 24px; }
.free-box-h { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--live); margin-bottom:10px; }
.free-box ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:6px 18px; }
.free-box li { font-size:14.5px; color:var(--text); padding-left:20px; position:relative; }
.free-box li::before { content:"✓"; position:absolute; left:0; color:var(--live); font-weight:700; }
.free-box-n { margin-top:12px; font-size:13.5px; color:var(--muted); }
@media (max-width: 900px) { .founder-grid { grid-template-columns:1fr; gap:28px; } .founder-photo { max-width:420px; } .founder-nets { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px) { .free-box ul { grid-template-columns:1fr; } .works-list li { font-size:11.5px; padding:5px 9px; } .founder-nets { grid-template-columns:1fr 1fr; } }