@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

  :root {
    /* Colour tokens — match bluesky-agent-flow-v2 */
    --bg-primary: #f9f9f7;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f7f7f5;
    --border: #e8e8e5;
    --border-light: #d5d5d0;
    --text-primary: #1a1a1a;
    --text-secondary: #6b6b6b;
    --text-muted: #999999;
    --accent: #39594D;
    --accent-light: #476b5e;
    --accent-dark: #2d4a3f;
    --btn: #C6F04A;
    --btn-hover: #b5e035;
    --btn-text: #1a1a1a;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Layout */
    --container: 1120px;
    --gutter: 32px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    /* Scroll-linked background: grey at top, dark green by the time the
       hero is fully scrolled past. The hero and #what both sit on this
       shared backdrop, so the green section feels like it fades in over
       the hero rather than looking like a hard scroll boundary. */
    background: color-mix(in srgb,
                          var(--bg-primary),
                          var(--accent) calc(var(--hero-out, 0) * 100%));
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Mono for headings, labels, buttons */
  h1, h2, h3, h4, h5, h6,
  .eyebrow,
  .nav-brand,
  .btn,
  .form-label {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.03em; }
  h2 { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.15; letter-spacing: -0.02em; }
  h3 { font-size: 20px; line-height: 1.3; }

  p { color: var(--text-secondary); font-size: 17px; line-height: 1.6; }

  a { color: inherit; text-decoration: none; }

  img, svg { display: block; max-width: 100%; }

  .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  /* ── Navigation ──
     Two elements:
     1. .nav — sits at the top of the hero, full-width with 5% side padding.
        Absolute so it scrolls away with the hero. Fades out as hero-out rises.
     2. .nav-float — fixed floating pill that appears once the user scrolls
        into the green section. Darker green, inset from both sides, 20px
        from top, with a slide-down + fade spring animation on first appear. */
  .nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    opacity: calc(1 - var(--hero-out, 0) * 1.6);
    pointer-events: auto;
    transition: opacity 0.2s linear;
  }

  .nav-inner {
    max-width: none;
    margin: 0;
    padding: 28px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-brand {
    display: inline-flex;
    align-items: center;
    height: 32px;
  }

  .nav-logo {
    display: block;
    height: 28px;
    width: auto;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .nav-links a {
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.15s;
  }

  .nav-links a:hover { color: var(--text-primary); }

  .nav-cta {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    padding: 11px 20px;
    background: var(--btn);
    color: var(--btn-text);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0,0,0,0.04);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background 0.15s, transform 0.15s;
  }

  .nav-cta:hover { background: var(--btn-hover); transform: translateY(-1px); }

  /* Floating header — appears once the green section starts fading in.
     Sits 20px below the top, inset from both sides, darker green than the
     body accent so it reads against the full-width green backdrop. */
  .nav-float {
    position: fixed;
    bottom: 24px;
    left: 50%;
    width: max-content;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 28px) scale(0.98);
    transition:
      opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 0.65s cubic-bezier(0.2, 0.9, 0.25, 1.15);
  }

  .nav-float.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
  }

  .nav-float-inner {
    display: flex;
    align-items: center;
    gap: 56px;
    padding: 7px 8px 7px 22px;
    background: rgba(36, 58, 50, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.28),
      0 2px 8px rgba(0, 0, 0, 0.18);
  }

  .nav-float .nav-brand { height: 22px; }
  .nav-float .nav-logo { height: 22px; }

  .nav-float .nav-cta {
    background: var(--btn);
    color: var(--btn-text);
  }
  .nav-float .nav-cta:hover { background: var(--btn-hover); }

  @media (max-width: 720px) {
    .nav-links a:not(.nav-cta) { display: none; }
    .nav-float { bottom: 16px; }
    .nav-float-inner { gap: 24px; padding: 7px 8px 7px 16px; }
  }

  /* ── Buttons ── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    padding: 14px 22px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    text-align: center;
    white-space: nowrap;
  }

  .btn-primary {
    background: var(--btn);
    color: var(--btn-text);
    box-shadow: var(--shadow-sm);
  }
  .btn-primary:hover {
    background: var(--btn-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border);
  }
  .btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-light); }

  .btn-ghost {
    background: transparent;
    color: var(--text-primary);
  }
  .btn-ghost:hover { background: var(--bg-card-hover); }

  /* ── Eyebrow label ── */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    background: rgba(57, 89, 77, 0.08);
    border-radius: 999px;
    margin-bottom: 24px;
  }

  .eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }

  /* ── Hero ── */
  .hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    --scroll-progress: 0;
  }

  /* Floating image stage */
  .hero-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .hero-card {
    position: absolute;
    left: var(--x);
    top: var(--y);
    /* Base width scales with viewport beyond 1440px so hero cards grow
       on larger monitors. At 1440vw = base. At 2560vw, cards are ~112px
       larger than their base (so 140 → 252, 205 → 317). Clamped at both
       ends for mobile and ultrawide sanity. */
    width: clamp(100px,
                 calc(var(--w, 160px) + (100vw - 1440px) * 0.1),
                 360px);
    transform-origin: center center;
    will-change: transform, opacity;
    transform:
      translate(
        calc(var(--ex, 0vw) * var(--scroll-progress)),
        calc(var(--ey, 0vh) * var(--scroll-progress))
      )
      rotate(var(--rot, 0deg))
      scale(calc(1 + var(--scroll-progress) * 1.8));
    opacity: calc(1 - var(--scroll-progress) * 1.4);
  }

  .hero-card-inner {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  .hero-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .hero-card-tags {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }

  .hero-card-tag {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    padding: 3px 7px;
    background: rgba(26, 26, 26, 0.72);
    color: #ffffff;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
  }

  .hero-card-tag--accent {
    background: var(--btn);
    color: var(--btn-text);
  }

  /* Centre tagline */
  .hero-tagline {
    position: relative;
    z-index: 5;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--gutter);
    pointer-events: none;
    text-align: center;
  }

  .hero-tagline-inner {
    opacity: calc(1 - var(--scroll-progress) * 1.2);
    transform: translateY(calc(var(--scroll-progress) * -40px));
    text-align: center;
  }

  .hero-tagline h1 {
    font-size: clamp(36px, 5.6vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    max-width: 15ch;
    margin: 0 auto;
    color: var(--text-primary);
  }

  .hero-tagline-sub {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 22px;
  }

  .hero-tagline-sub::before,
  .hero-tagline-sub::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    background: var(--border-light);
    vertical-align: middle;
    margin: 0 12px;
  }

  /* Sticky hero footer bar */
  .hero-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px var(--gutter);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    opacity: calc(1 - var(--scroll-progress) * 1.6);
  }

  .hero-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .hero-footer-left::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: hero-pulse 2.2s ease-in-out infinite;
  }

  @keyframes hero-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
  }

  .hero-footer-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero-footer-center .btn {
    padding: 11px 22px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hero-footer-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .hero-footer-right .arrow {
    display: inline-block;
    animation: hero-bounce 2.2s ease-in-out infinite;
  }

  @keyframes hero-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
  }

  @media (max-width: 720px) {
    .hero-footer { font-size: 10px; padding: 14px 16px; }
    .hero-footer-center { position: static; transform: none; }
    .hero-footer-right { display: none; }
    .hero-card { transform-origin: center; }
  }

  /* Reused form styles (also used by the final CTA section) */
  .hero-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 520px;
  }

  .hero-form input[type="email"] {
    flex: 1 1 260px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    padding: 14px 16px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .hero-form input[type="email"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(57, 89, 77, 0.1);
  }

  .hero-form .btn { padding: 14px 24px; }

  /* ── Section ── */
  section { padding: 96px 0; }

  .section-header {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
  }

  .section-header h2 { margin-bottom: 16px; }

  /* ── Feature grid ── */
  .features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  @media (min-width: 720px) {
    .features { grid-template-columns: repeat(3, 1fr); }
  }

  .feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 32px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  }

  .feature-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(57, 89, 77, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    color: var(--accent);
  }

  .feature-card h3 { margin-bottom: 10px; }
  .feature-card p { font-size: 15px; }

  /* ── How it works ── */
  .how {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    counter-reset: step;
  }

  @media (min-width: 720px) {
    .steps { grid-template-columns: repeat(3, 1fr); }
  }

  .step {
    position: relative;
    padding: 28px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--accent);
    display: block;
    margin-bottom: 16px;
  }

  .step h3 { margin-bottom: 8px; }
  .step p { font-size: 15px; }

  /* ── Animated dark panel ── */
  .tab-visual--dark {
    background:
      radial-gradient(ellipse at 15% 0%, rgba(198,240,74,0.12) 0%, transparent 50%),
      radial-gradient(ellipse at 85% 15%, rgba(168,229,52,0.08) 0%, transparent 45%),
      radial-gradient(ellipse at 50% 85%, rgba(57,89,77,0.25) 0%, transparent 55%),
      radial-gradient(ellipse at 90% 90%, rgba(26,58,42,0.3) 0%, transparent 50%),
      linear-gradient(160deg, #1a2e24 0%, #0e1a14 30%, #0a0f0c 60%, #0e0e0e 100%) !important;
    border-top: none !important;
    border-radius: 16px;
    padding: 48px 40px !important;
    position: relative;
    overflow: hidden;
  }

  .tab-visual--dark .blur-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease 0.2s;
  }
  .tab-visual--dark.is-visible .blur-blob { opacity: 1; }

  .tab-visual--dark .blur-blob--1 {
    width: 400px; height: 400px;
    top: -140px; right: -100px;
    background: #C6F04A;
  }
  .tab-visual--dark.is-visible .blur-blob--1 { opacity: 0.15; }

  .tab-visual--dark .blur-blob--2 {
    width: 350px; height: 350px;
    bottom: -120px; left: -80px;
    background: #39594D;
  }
  .tab-visual--dark.is-visible .blur-blob--2 { opacity: 0.3; }

  .tab-visual--dark .blur-blob--3 {
    width: 260px; height: 260px;
    top: 35%; left: 55%;
    transform: translateX(-50%);
    background: #C6F04A;
  }
  .tab-visual--dark.is-visible .blur-blob--3 { opacity: 0.06; }

  /* 3D card entrance — .mk.mk--animated for higher specificity
     so it overrides the base .mk white background. */
  .mk.mk--animated {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: perspective(1000px) rotateY(6deg) translateY(30px) scale(0.94);
    transition:
      opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  }

  .tab-visual--dark.is-visible .mk.mk--animated {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg) translateY(0) scale(1);
  }

  .mk.mk--animated .mk-bar {
    background: transparent;
    border-bottom-color: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
  }
  .mk.mk--animated .mk-bar .d { background: rgba(255,255,255,0.15); }
  .mk.mk--animated .mk-body { background: transparent; color: #fff; }

  /* Override all dark-text elements inside animated cards for legibility */
  .mk.mk--animated .mk-ratio { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
  .mk.mk--animated .mk-cfg-tag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
  .mk.mk--animated .mk-cfg-text { color: rgba(255,255,255,0.7); }
  .mk.mk--animated .mk-neg { color: rgba(255,255,255,0.6); border-bottom-color: rgba(255,255,255,0.06); }
  .mk.mk--animated .mk-neg strong { color: #fff; }
  .mk.mk--animated .mk-tag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); }
  .mk.mk--animated .mk-tag--g { background: rgba(198,240,74,0.15); color: #C6F04A; }
  .mk.mk--animated .mk-badge { color: rgba(255,255,255,0.85); }
  .mk.mk--animated .mk-badge--g { background: rgba(198,240,74,0.2) !important; color: #C6F04A !important; }
  .mk.mk--animated .mk-badge--r { background: rgba(255,90,74,0.2) !important; color: #ff7b6b !important; }
  .mk.mk--animated .mk-badge--b { background: rgba(100,180,255,0.2) !important; color: #7bbfff !important; }
  .mk.mk--animated .mk-rec { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); }
  .mk.mk--animated .mk-rec h4 { color: #fff; }
  .mk.mk--animated .mk-rec p { color: rgba(255,255,255,0.55); }
  .mk.mk--animated .mk-metric-v { color: #C6F04A; }
  .mk.mk--animated .mk-metric-l { color: rgba(255,255,255,0.4); }
  .mk.mk--animated .mk-brief-col li { color: rgba(255,255,255,0.6); border-bottom-color: rgba(255,255,255,0.05); }
  .mk.mk--animated .mk-brief-col h5 { color: #fff; }
  .mk.mk--animated .mk-concept-title { color: #fff; }
  .mk.mk--animated .mk-concept-desc { color: rgba(255,255,255,0.55); }
  .mk.mk--animated .mk-concept-meta { color: rgba(255,255,255,0.4); }
  .mk.mk--animated .mk-concept { border-bottom-color: rgba(255,255,255,0.06); }
  .mk.mk--animated .mk-city-name { color: #fff; }
  .mk.mk--animated .mk-city-row { border-bottom-color: rgba(255,255,255,0.06); }
  .mk.mk--animated .mk-asset-thumb { border-color: rgba(255,255,255,0.08); }
  .mk.mk--animated .mk-asset-thumb--selected { border-color: #C6F04A; }
  .mk.mk--animated .mk-btn { background: #C6F04A; color: #1a1a1a; }
  .mk.mk--animated .mk-ft td { color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.05); }
  .mk.mk--animated .mk-ft th { color: rgba(255,255,255,0.35); border-bottom-color: rgba(255,255,255,0.08); }
  .mk.mk--animated .mk-heat td { color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.05); }
  .mk.mk--animated .mk-heat th { color: rgba(255,255,255,0.4); border-bottom-color: rgba(255,255,255,0.08); }
  .mk.mk--animated p { color: rgba(255,255,255,0.55); }
  .mk.mk--animated h4 { color: #fff; }

  /* Asset creation ac- elements on dark */
  .mk.mk--animated .ac-tag { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.1); }
  .mk.mk--animated .ac-tag--hi { background: rgba(198,240,74,0.12); color: #C6F04A; border-color: rgba(198,240,74,0.2); }
  .mk.mk--animated .ac-bar-group { border-top-color: rgba(255,255,255,0.06); }
  .mk.mk--animated .ac-loc-bar { border-bottom-color: rgba(255,255,255,0.06); }
  .mk.mk--animated .ac-loc-bar-label { color: #fff; }
  .mk.mk--animated .ac-loc-bar-desc { color: rgba(255,255,255,0.45); }
  .mk.mk--animated .ac-ratio-pill { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
  .mk.mk--animated .ac-ratio-icon { border-color: rgba(255,255,255,0.4); }
  .mk.mk--animated .ac-gen-section { border-top-color: rgba(255,255,255,0.06); }
  .mk.mk--animated .ac-gen-title { color: #C6F04A; }
  .mk.mk--animated .ac-gen-pill { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
  .mk.mk--animated .ac-gen-prompt-wrap { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #fff; }

  /* Staggered card reveal — cards appear one by one and stay */
  .mk-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.2,0.8,0.2,1), transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
  }
  .tab-visual--dark.is-visible .mk-reveal { opacity: 1; transform: none; }
  .tab-visual--dark.is-visible .mk-reveal:nth-child(1) { transition-delay: 0.6s; }
  .tab-visual--dark.is-visible .mk-reveal:nth-child(2) { transition-delay: 1.4s; }
  .tab-visual--dark.is-visible .mk-reveal:nth-child(3) { transition-delay: 2.2s; }
  .tab-visual--dark.is-visible .mk-reveal:nth-child(4) { transition-delay: 3.0s; }

  /* Rec header bar */
  .mk-rec-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; font-size: 10px;
    font-family: 'Space Mono', monospace; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.35);
  }

  /* Conversational prompt */
  .mk-conv {
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .mk-conv-label {
    font-family: 'Space Mono', monospace; font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3); margin-bottom: 10px; text-align: center;
  }
  .mk-conv-input {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 14px 18px; gap: 10px;
  }
  .mk-conv-text {
    flex: 1; font-size: 13px; color: rgba(255,255,255,0.45);
    font-style: italic; overflow: hidden; white-space: nowrap;
  }
  .mk-conv-text .mk-prompt-cursor { vertical-align: middle; }

  /* Slideshow — stages cycle sequentially, one at a time.
     15s total: each slide visible ~4s with 0.5s crossfades. */
  .mk-slideshow {
    position: relative;
    min-height: 340px;
  }

  .mk-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px);
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-play-state: paused;
  }

  .tab-visual--dark.is-visible .mk-slide {
    animation-play-state: running;
  }

  .mk-slide:nth-child(1) { animation-name: slide-cycle-1; animation-delay: 0.9s; }
  .mk-slide:nth-child(2) { animation-name: slide-cycle-2; animation-delay: 0.9s; }
  .mk-slide:nth-child(3) { animation-name: slide-cycle-3; animation-delay: 0.9s; }

  @keyframes slide-cycle-1 {
    0%       { opacity: 0; transform: translateY(12px); }
    3%, 28%  { opacity: 1; transform: translateY(0); }
    33%      { opacity: 0; transform: translateY(-8px); }
    100%     { opacity: 0; transform: translateY(12px); }
  }
  @keyframes slide-cycle-2 {
    0%, 30%  { opacity: 0; transform: translateY(12px); }
    36%, 61% { opacity: 1; transform: translateY(0); }
    66%      { opacity: 0; transform: translateY(-8px); }
    100%     { opacity: 0; transform: translateY(12px); }
  }
  @keyframes slide-cycle-3 {
    0%, 63%  { opacity: 0; transform: translateY(12px); }
    69%, 94% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(-8px); }
  }

  /* Staggered children (used by asset creation panel) */
  .mk--animated .mk-stage {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .tab-visual--dark.is-visible .mk--animated .mk-stage { opacity: 1; transform: none; }
  .tab-visual--dark.is-visible .mk--animated .mk-stage:nth-child(1) { transition-delay: 0.4s; }
  .tab-visual--dark.is-visible .mk--animated .mk-stage:nth-child(2) { transition-delay: 0.7s; }
  .tab-visual--dark.is-visible .mk--animated .mk-stage:nth-child(3) { transition-delay: 1.0s; }
  .tab-visual--dark.is-visible .mk--animated .mk-stage:nth-child(4) { transition-delay: 1.3s; }
  .tab-visual--dark.is-visible .mk--animated .mk-stage:nth-child(5) { transition-delay: 1.6s; }

  /* Image thumbnails row */
  .mk-thumb-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }

  .mk-thumb {
    flex: 1;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
  }

  .mk-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mk-thumb--selected {
    border-color: #C6F04A;
    box-shadow: 0 0 0 2px rgba(198,240,74,0.3);
  }

  .mk-thumb-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #C6F04A;
    color: #1a1a1a;
    padding: 3px 8px;
    border-radius: 4px;
  }

  /* Prompt bar */
  .mk-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
  }

  .mk-prompt-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(198,240,74,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #C6F04A;
  }

  .mk-prompt-text {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    line-height: 1.4;
    overflow: hidden;
  }

  .mk-prompt-text strong {
    color: rgba(255,255,255,0.9);
  }

  .mk-prompt-cursor {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: #C6F04A;
    margin-left: 2px;
    vertical-align: middle;
    animation: cursor-blink 1s step-end infinite;
  }

  @keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
  }

  /* Video player area */
  .mk-video-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
  }

  .mk-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mk-video-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
  }

  .mk-video-playing {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #C6F04A;
  }

  .mk-video-playing::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C6F04A;
    animation: pulse-playing 1.5s ease-in-out infinite;
  }

  @keyframes pulse-playing {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
  }

  /* Generate button in dark context */
  .mk-btn--dark {
    background: #C6F04A;
    color: #1a1a1a;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
  }

  .mk-tags-dark {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
  }

  .mk-tag-dark {
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.65);
  }

  .mk-tag-dark--g {
    background: rgba(198,240,74,0.15);
    color: #C6F04A;
  }

  /* Override stagger for cursor-driven stages — only stage 1 (images) auto-appears */
  #ac-stage-tags,
  #ac-stage-prompt,
  #ac-stage-btn,
  #ac-stage-loading,
  #ac-stage-video {
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    transition-delay: 0s !important;
  }
  .tab-visual--dark.is-visible #ac-stage-images {
    transition-delay: 0.4s;
  }

  #ac-prompt-text {
    font-size: 13px;
    color: #fff;
    line-height: 1.4;
    min-height: 18px;
    overflow: hidden;
  }

  #assetCreationPanel .mk-prompt {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
  }

  #assetCreationPanel .mk-prompt-text {
    color: #fff;
  }

  #assetCreationPanel .mk-prompt-text strong {
    color: #fff;
  }

  #ac-prompt-cursor {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: #C6F04A;
    margin-left: 2px;
    vertical-align: middle;
    animation: cursor-blink 1s step-end infinite;
  }

  .mk-thumb--clicking {
    transform: scale(0.96);
    transition: transform 0.1s !important;
  }

  /* Asset Creation tags — readable on white */
  .ac-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
  }

  .ac-tag {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 4px;
    background: #f0f0ed;
    color: #6b6b6b;
    border: 1px solid #e0e0dc;
  }

  .ac-tag--hi {
    background: rgba(57, 89, 77, 0.1);
    color: #39594D;
    border-color: rgba(57, 89, 77, 0.2);
  }

  /* Bar group — stacked rows with line separators */
  .ac-bar-group {
    border-top: 1px solid #e8e8e5;
    margin-top: 8px;
  }

  .ac-loc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e8e8e5;
  }

  .ac-loc-bar:last-child {
    border-bottom: none;
  }

  /* Ratio pills */
  .ac-ratio-pills {
    display: flex;
    gap: 8px;
  }

  .ac-ratio-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b6b6b;
    padding: 5px 12px;
    border: 1px solid #e0e0dc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
  }

  .ac-ratio-icon {
    display: inline-block;
    border: 1.5px solid #999;
    border-radius: 1px;
  }

  /* Generate Video section */
  .ac-gen-section {
    border-top: 1px solid #e8e8e5;
    padding-top: 14px;
    margin-top: 4px;
  }

  .ac-gen-title {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #39594D;
    margin-bottom: 10px;
  }

  .ac-gen-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }

  .ac-gen-pill {
    font-size: 12px;
    color: #1a1a1a;
    padding: 5px 12px;
    border: 1px solid #e0e0dc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
  }

  .ac-gen-prompt-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .ac-gen-prompt-wrap {
    flex: 1;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid #e0e0dc;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.5;
  }

  .ac-gen-submit {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    padding: 14px 24px;
    background: var(--btn);
    color: var(--btn-text);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    align-self: stretch;
  }

  .ac-gen-submit:hover {
    background: var(--btn-hover);
  }

  .ac-loc-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .ac-loc-bar-label {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    color: #1a1a1a;
  }

  .ac-loc-bar-desc {
    font-size: 12px;
    color: #999;
  }

  .ac-loc-bar-btn {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    padding: 8px 18px;
    background: var(--btn);
    color: var(--btn-text);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
  }

  .ac-loc-bar-btn:hover {
    background: var(--btn-hover);
  }

  /* Fixed-height card body — normal flow, fixed height, overflow hidden */
  #assetCreationPanel .mk-body {
    position: relative;
    min-height: 700px;
    overflow: hidden;
  }

  /* Stages use normal flow — hidden stages still occupy space for consistent height */
  #assetCreationPanel .mk-stage {
    position: relative;
  }

  /* Video stage overlays everything when visible */
  #ac-stage-video {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* Video — 9:16 vertically and horizontally centred within the fixed card */
  #ac-stage-video {
    top: 0 !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .ac-video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .ac-video-inner {
    position: relative;
    aspect-ratio: 9 / 16;
    height: 95%;
    max-height: 680px;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  }

  .ac-video-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center 30%;
  }

  @media (max-width: 720px) {
    .tab-visual--dark { padding: 24px 20px !important; border-radius: 12px; }
    .mk-thumb-row { gap: 6px; }
  }

  /* ── Dark panel — data dashboard elements ── */
  .mk-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Space Mono', monospace; font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.3); margin-bottom: 16px;
  }
  .mk-breadcrumb .active { color: rgba(255,255,255,0.75); }
  .mk-breadcrumb-sep::after { content: '\2192'; margin: 0 2px; }

  .mk-section-label {
    font-family: 'Space Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35); margin-bottom: 6px;
  }
  .mk-section-title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 16px; }

  .mk-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  @media (max-width: 720px) { .mk-channels { grid-template-columns: 1fr; } }

  .mk-channel {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; padding: 16px;
  }
  .mk-channel-head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
  }
  .mk-channel-name {
    font-family: 'Space Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5);
  }
  .mk-channel-trend { font-family: 'Space Mono', monospace; font-size: 10px; color: #C6F04A; }
  .mk-channel-proas {
    font-family: 'Space Mono', monospace; font-size: 30px; font-weight: 700;
    color: #C6F04A; line-height: 1; margin-bottom: 12px;
  }
  .mk-channel-stats { display: flex; gap: 16px; font-size: 11px; color: rgba(255,255,255,0.45); }
  .mk-channel-stat-val {
    font-family: 'Space Mono', monospace; color: rgba(255,255,255,0.75);
    font-weight: 600; display: block;
  }

  .mk-spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; margin-top: 10px; }
  .mk-spark-bar { flex: 1; border-radius: 2px 2px 0 0; background: rgba(198,240,74,0.25); }
  .mk-spark-bar:last-child { background: #C6F04A; }

  .mk-loc-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .mk-loc-row:last-child { border-bottom: none; }
  .mk-loc-name { width: 100px; font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0; }
  .mk-loc-bar-track { flex: 1; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
  .mk-loc-bar-fill { height: 100%; border-radius: 4px; background: #C6F04A; }
  .mk-loc-bar-fill--warn { background: #ff5a4a; }
  .mk-loc-val {
    font-family: 'Space Mono', monospace; font-size: 15px; font-weight: 700;
    width: 50px; text-align: right; flex-shrink: 0;
  }
  .mk-loc-val--ok { color: #C6F04A; }
  .mk-loc-val--warn { color: #ff5a4a; }
  .mk-loc-badge {
    font-family: 'Space Mono', monospace; font-size: 8px; text-transform: uppercase;
    letter-spacing: 0.06em; padding: 2px 8px; border-radius: 3px; flex-shrink: 0;
  }
  .mk-loc-badge--ok { background: rgba(198,240,74,0.12); color: #C6F04A; }
  .mk-loc-badge--warn { background: rgba(255,90,74,0.12); color: #ff5a4a; }

  .mk-prod-row {
    display: grid; grid-template-columns: 1.2fr 80px 60px 1fr;
    gap: 12px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 12px;
  }
  .mk-prod-row:last-child { border-bottom: none; }
  @media (max-width: 720px) { .mk-prod-row { grid-template-columns: 1fr 70px 50px; } .mk-prod-row > :last-child { display: none; } }
  .mk-prod-name { font-weight: 600; color: #fff; }
  .mk-prod-gp { font-family: 'Space Mono', monospace; color: #C6F04A; font-weight: 700; }
  .mk-prod-margin { font-family: 'Space Mono', monospace; color: rgba(255,255,255,0.45); }
  .mk-prod-bar-track { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
  .mk-prod-bar-fill { height: 100%; border-radius: 3px; background: #C6F04A; }

  .mk-divider { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 16px 0; }

  /* Season tabs */
  .mk-season-tabs {
    display: flex; gap: 0; margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .mk-season-tab {
    font-family: 'Space Mono', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 10px 20px; color: rgba(255,255,255,0.35);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .mk-season-tab--active {
    color: #fff; border-bottom-color: #C6F04A;
  }

  /* Config section card */
  .mk-cfg-section {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 14px 16px; margin-bottom: 10px;
  }
  .mk-cfg-section-label {
    font-family: 'Space Mono', monospace; font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35); margin-bottom: 6px;
  }
  .mk-cfg-section-text { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.55; }

  /* Negative prompt items */
  .mk-neg-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .mk-neg-item:last-child { border-bottom: none; }
  .mk-neg-x { color: #ff5a4a; font-size: 14px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
  .mk-neg-text { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.55; }
  .mk-neg-text strong { color: #fff; }

  /* Model card */
  .mk-model-card {
    display: flex; gap: 20px; align-items: flex-start;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 16px; margin-top: 12px;
  }
  .mk-model-thumb {
    width: 90px; height: 90px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Mono', monospace; font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
  }
  .mk-model-info { flex: 1; }
  .mk-model-name {
    font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px;
  }
  .mk-model-active {
    font-family: 'Space Mono', monospace; font-size: 8px;
    text-transform: uppercase; letter-spacing: 0.06em;
    background: rgba(198,240,74,0.15); color: #C6F04A;
    padding: 2px 8px; border-radius: 3px;
  }
  .mk-model-desc { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 10px; }
  .mk-model-meta {
    display: flex; gap: 24px; font-size: 11px; color: rgba(255,255,255,0.35);
  }
  .mk-model-meta-val { color: rgba(255,255,255,0.65); display: block; }

  /* Working / Avoid two-column insight panel */
  .mk-insight-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
  }
  @media (max-width: 720px) { .mk-insight-cols { grid-template-columns: 1fr; } }
  .mk-insight-col {
    background: rgba(255,255,255,0.03); border-radius: 8px; padding: 16px;
    border-left: 3px solid transparent;
  }
  .mk-insight-col--green { border-left-color: #C6F04A; }
  .mk-insight-col--red { border-left-color: #ff5a4a; }
  .mk-insight-col h5 {
    font-family: 'Space Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
  }
  .mk-insight-col--green h5 { color: #C6F04A; }
  .mk-insight-col--red h5 { color: #ff5a4a; }
  .mk-insight-col ul { list-style: none; padding: 0; margin: 0; }
  .mk-insight-col li {
    font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.5;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative; padding-left: 10px;
  }
  .mk-insight-col li::before {
    content: '·'; position: absolute; left: 0; color: rgba(255,255,255,0.25);
  }
  .mk-insight-col li:last-child { border-bottom: none; }

  /* Concept detail card */
  .mk-concept-detail {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 20px;
  }
  .mk-concept-detail-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  }
  .mk-concept-detail-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.06); display: flex;
    align-items: center; justify-content: center;
    font-family: 'Space Mono', monospace; font-size: 11px;
    color: rgba(255,255,255,0.5); flex-shrink: 0;
  }
  .mk-concept-detail-title { font-size: 16px; font-weight: 600; color: #fff; }
  .mk-concept-detail-sub {
    font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 14px;
    font-family: 'Space Mono', monospace;
  }
  .mk-concept-detail-body {
    font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; margin-bottom: 16px;
  }
  .mk-concept-detail-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 16px;
  }
  .mk-concept-detail-field {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.3); font-family: 'Space Mono', monospace;
    margin-bottom: 4px;
  }
  .mk-concept-detail-val {
    font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.5;
  }
  .mk-concept-detail-val strong { color: #C6F04A; font-weight: 600; }

  /* Big KPI row */
  .mk-kpi-row {
    display: flex; gap: 32px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .mk-kpi-block { }
  .mk-kpi-big {
    font-family: 'Space Mono', monospace; font-size: 22px;
    font-weight: 700; color: #fff; line-height: 1;
  }
  .mk-kpi-label {
    font-family: 'Space Mono', monospace; font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.3); margin-top: 4px;
  }

  /* ── Ad mockups — phone frames with video ── */
  .ad-phones {
    padding: 80px 0 100px;
    text-align: center;
  }

  .ad-phones .section-header {
    max-width: var(--container);
    margin: 0 auto 48px;
    padding: 0 var(--gutter);
  }

  .ad-phones-grid {
    display: flex;
    justify-content: center;
    gap: 56px;
    flex-wrap: wrap;
    padding: 0 var(--gutter);
  }

  .ad-phone-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .ad-phone-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
  }

  .ad-phone {
    position: relative;
    width: 340px;
    height: 700px;
    border-radius: 52px;
    background: #0a0a0a;
    padding: 12px;
    box-shadow:
      0 0 0 2px #1f2028,
      0 0 0 3px #2a2b35,
      0 40px 80px -20px rgba(0,0,0,0.5);
  }

  .ad-phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    overflow: hidden;
    background: #000;
  }

  .ad-phone-island {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 32px;
    background: #000;
    border-radius: 20px;
    z-index: 50;
  }

  .ad-phone-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #11121a;
  }

  .ad-phone-video[data-type="instagram"] {
    object-position: 65% center;
  }

  .ad-phone-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 40%);
  }

  .ad-phone-overlay-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
  }

  .ad-phone-overlay-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
  }

  .ad-phone-overlay-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 16px;
    border-radius: 6px;
    width: fit-content;
  }

  .ad-phone-overlay-cta--tt {
    background: #fe2c55;
    color: #fff;
  }

  .ad-phone-overlay-cta--ig {
    background: #fff;
    color: #1a1a1a;
  }

  .ad-phone-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
  }

  .ad-phone-tag {
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
  }

  .ad-phone-tag--score {
    background: #C6F04A;
    color: #1a1a1a;
  }

  @media (max-width: 720px) {
    .ad-phone { width: 280px; height: 575px; border-radius: 44px; }
    .ad-phone-screen { border-radius: 34px; }
    .ad-phones-grid { gap: 32px; }
  }

  /* ── Deep-dive tabbed scroll (Modal-style sticky-stack) ──
     Two columns: sticky sidebar (tabs + text) on the left,
     sticky-stacking visual panels on the right. Each panel is
     position:sticky inside a tall scroll spacer, so it pins at
     the top and gets overlapped by the next panel sliding up. */
  .how-deep {
    background: var(--bg-primary);
    border-top: none;
    padding: 120px 0 0;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .how-deep.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .how-deep .section-header { margin-bottom: 0; }

  .how-tabs {
    display: grid;
    grid-template-columns: 180px 300px 1fr;
    gap: 0 40px;
    margin-top: 56px;
    align-items: start;
    max-width: none;
    padding: 0 5%;
  }

  /* Column 1 — tab nav */
  .how-tabs-nav {
    position: sticky;
    top: 80px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid var(--border);
  }

  /* Column 2 — text */
  .how-tabs-text {
    position: sticky;
    top: 80px;
    align-self: start;
  }

  .how-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 8px 16px;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.35s, border-color 0.35s;
    text-align: left;
    white-space: nowrap;
  }

  .how-tab-btn.is-active {
    color: var(--text-primary);
    border-left-color: var(--accent);
  }

  .how-tab-desc { display: none; }
  .how-tab-desc.is-active { display: block; }
  .how-tab-desc h3 { font-size: 26px; color: var(--text-primary); margin-bottom: 14px; line-height: 1.25; }
  .how-tab-desc p { font-size: 16px; color: var(--text-secondary); line-height: 1.65; }

  /* Right — sticky-stacking panels.
     Each .tab-panel is a tall scroll spacer (min-height: 100vh).
     Inside it, .tab-visual is position:sticky so it pins at the top.
     As the next spacer scrolls in, its sticky visual slides up and
     covers the previous one — the "card stack" overlap effect. */
  .how-tabs-panels {
    display: flex;
    flex-direction: column;
  }

  .tab-panel {
    min-height: 100vh;
    position: relative;
  }

  .tab-panel:last-child {
    min-height: auto;
  }

  .tab-visual {
    position: sticky;
    top: 80px;
    padding: 40px 0;
    margin-bottom: 40px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    width: 100%;
  }

  .tab-panel:first-child .tab-visual {
    border-top: none;
  }

  .tab-visual .mk {
    position: relative;
    z-index: 1;
  }

  .tab-panel-mobile-title { display: none; }

  .tab-panel-mobile-desc {
    display: none;
  }

  @media (max-width: 960px) {
    .how-tabs { grid-template-columns: 1fr; gap: 24px; padding: 0 var(--gutter); }
    .how-tabs-nav { position: static; display: none; }
    .how-tabs-text { position: static; display: none; }
    .tab-panel { min-height: auto; }
    .tab-visual { position: relative; top: auto; border-top: 1px solid var(--border); overflow: hidden; }
    .tab-visual--dark { overflow: hidden !important; }
    .tab-panel-mobile-title {
      display: block;
      font-family: 'Space Mono', monospace;
      font-size: 14px;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 12px;
    }
    .tab-panel-mobile-desc {
      display: block;
      font-size: 15px;
      color: var(--text-secondary);
      margin-bottom: 20px;
      line-height: 1.6;
    }
  }

  /* Mockup card */
  .mk {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    color: #1a1a1a;
    font-size: 13px;
  }

  .mk-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid #eee;
    font-family: 'Space Mono', monospace;
    font-size: 10px; color: #999;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .mk-bar .d { width: 7px; height: 7px; border-radius: 50%; background: #ddd; }
  .mk-bar .t { margin-left: 6px; }

  .mk-body { padding: 20px; }

  /* KPI row */
  .mk-kpis { display: flex; gap: 24px; margin-bottom: 16px; }
  .mk-kpi-l { font-size: 9px; color: #999; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
  .mk-kpi-v { font-family: 'Space Mono', monospace; font-size: 18px; font-weight: 700; }

  /* Bars */
  .mk-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-bottom: 8px; }
  .mk-bar-item { flex: 1; border-radius: 3px 3px 0 0; background: #e8e8e5; transition: background 0.3s; }
  .mk-bar-item--hi { background: var(--btn); }
  .mk-bar-labels { display: flex; gap: 8px; font-size: 9px; color: #999; text-transform: uppercase; letter-spacing: 0.04em; }
  .mk-bar-labels span { flex: 1; text-align: center; }

  /* Location table */
  .mk-loc-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 11px; }
  .mk-loc-table th { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; padding: 6px 8px; text-align: left; border-bottom: 1px solid #eee; }
  .mk-loc-table td { padding: 6px 8px; border-bottom: 1px solid #f5f5f5; }
  .mk-loc-table td:nth-child(n+2) { font-family: 'Space Mono', monospace; }

  /* Heatmap */
  .mk-heat { width: 100%; border-collapse: collapse; font-size: 11px; }
  .mk-heat th { font-family: 'Space Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; padding: 6px 8px; text-align: center; border-bottom: 1px solid #eee; }
  .mk-heat th:first-child, .mk-heat th:nth-child(2) { text-align: left; }
  .mk-heat td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #f7f7f7; }
  .mk-heat td:first-child { font-weight: 600; text-align: left; }
  .mk-heat td:nth-child(2) { color: #999; text-align: left; font-size: 10px; }
  .mk-sc { display: inline-block; min-width: 32px; padding: 3px 6px; border-radius: 4px; font-weight: 600; font-size: 11px; }
  .mk-sc--h { background: #d4edda; color: #1a5c2e; }
  .mk-sc--m { background: #fff3cd; color: #856404; }
  .mk-sc--l { background: #f8d7da; color: #721c24; }

  /* Rec cards */
  .mk-recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  @media (max-width: 720px) { .mk-recs { grid-template-columns: 1fr; } }
  .mk-rec { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 14px; }
  .mk-badge { display: inline-block; font-family: 'Space Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 3px; margin-bottom: 8px; }
  .mk-badge--g { background: #d4edda; color: #1a5c2e; }
  .mk-badge--r { background: #f8d7da; color: #721c24; }
  .mk-badge--b { background: #cce5ff; color: #004085; }
  .mk-rec h4 { font-size: 12px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
  .mk-rec p { font-size: 10px; color: #666; line-height: 1.5; margin-bottom: 10px; }
  .mk-metrics { display: flex; gap: 12px; }
  .mk-metric-v { font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; display: block; }
  .mk-metric-l { font-size: 8px; color: #999; text-transform: uppercase; letter-spacing: 0.06em; }

  /* Config */
  .mk-cfg-label { font-family: 'Space Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #999; margin-bottom: 4px; }
  .mk-cfg-text { font-size: 12px; color: #333; line-height: 1.5; margin-bottom: 14px; }
  .mk-cfg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .mk-cfg-tag { font-family: 'Space Mono', monospace; font-size: 9px; padding: 3px 8px; background: #f5f5f5; border-radius: 4px; color: #555; }
  .mk-neg { font-size: 11px; color: #555; line-height: 1.5; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
  .mk-neg strong { color: #1a1a1a; }

  /* Brief */
  .mk-brief-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
  .mk-brief-header h4 { font-size: 14px; font-weight: 600; }
  .mk-brief-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 720px) { .mk-brief-cols { grid-template-columns: 1fr; } }
  .mk-brief-col h5 { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
  .mk-brief-col h5 .dot { width: 6px; height: 6px; border-radius: 50%; }
  .mk-brief-col ul { list-style: none; padding: 0; margin: 0; }
  .mk-brief-col li { font-size: 11px; color: #555; line-height: 1.5; padding: 4px 0; border-bottom: 1px solid #f7f7f7; }

  /* Concept list */
  .mk-concept { padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
  .mk-concept:last-child { border-bottom: none; }
  .mk-concept-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .mk-concept-title { font-weight: 600; font-size: 13px; }
  .mk-concept-meta { font-family: 'Space Mono', monospace; font-size: 11px; color: #999; }
  .mk-concept-desc { font-size: 11px; color: #666; line-height: 1.5; margin-bottom: 6px; }
  .mk-concept-tags { display: flex; flex-wrap: wrap; gap: 4px; }
  .mk-tag { font-family: 'Space Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 3px; background: #f0f0f0; color: #555; }
  .mk-tag--g { background: #C6F04A; color: #1a1a1a; }

  /* Asset creation */
  .mk-asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  .mk-asset-thumb { aspect-ratio: 4/5; background: #f0ede8; border-radius: 6px; position: relative; overflow: hidden; }
  .mk-asset-thumb--main { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
  .mk-asset-approved { position: absolute; top: 8px; right: 8px; font-family: 'Space Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; background: #C6F04A; color: #1a1a1a; padding: 3px 8px; border-radius: 4px; }
  .mk-ratios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .mk-ratio { font-family: 'Space Mono', monospace; font-size: 9px; padding: 4px 10px; border: 1px solid #ddd; border-radius: 4px; color: #555; }
  .mk-city-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; flex-wrap: wrap; }
  .mk-city-name { font-weight: 600; font-size: 12px; min-width: 80px; }
  .mk-btn { display: inline-block; font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; background: #C6F04A; color: #1a1a1a; padding: 8px 18px; border-radius: 6px; margin-top: 12px; }

  /* Fatigue */
  .mk-fatigue-chart { height: 110px; position: relative; background: linear-gradient(to right, #f0fff0, #fff5f5); border-radius: 6px; margin-bottom: 16px; overflow: hidden; }
  .mk-fatigue-threshold { position: absolute; top: 30%; left: 0; right: 0; border-top: 2px dashed rgba(220,53,69,0.35); }
  .mk-fatigue-threshold span { position: absolute; right: 4px; top: -14px; font-size: 8px; color: #dc3545; font-family: 'Space Mono', monospace; text-transform: uppercase; }
  .mk-fatigue-lines { position: absolute; inset: 0; }
  .mk-fatigue-line { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; }
  .mk-ft { width: 100%; border-collapse: collapse; font-size: 10px; }
  .mk-ft th { font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; padding: 5px 6px; text-align: left; border-bottom: 1px solid #eee; }
  .mk-ft td { padding: 5px 6px; border-bottom: 1px solid #f7f7f7; }
  .mk-ft-crit { font-family: 'Space Mono', monospace; font-size: 8px; color: #dc3545; text-transform: uppercase; background: #f8d7da; padding: 2px 6px; border-radius: 3px; }
  .mk-ft-delta--neg { color: #dc3545; }

  /* Animated SVG chart lines */
  .mk-chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2.5s ease;
  }
  .tab-visual--dark.is-visible .mk-chart-line { stroke-dashoffset: 0; }
  .tab-visual--dark.is-visible .mk-chart-line:nth-child(1) { transition-delay: 0.8s; }
  .tab-visual--dark.is-visible .mk-chart-line:nth-child(2) { transition-delay: 1.0s; }
  .tab-visual--dark.is-visible .mk-chart-line:nth-child(3) { transition-delay: 1.2s; }
  .tab-visual--dark.is-visible .mk-chart-line:nth-child(4) { transition-delay: 1.4s; }
  .tab-visual--dark.is-visible .mk-chart-line:nth-child(5) { transition-delay: 1.6s; }
  .tab-visual--dark.is-visible .mk-chart-line:nth-child(6) { transition-delay: 1.8s; }

  .mk-chart-grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
  .mk-chart-threshold { stroke: rgba(255,90,74,0.4); stroke-width: 1.5; stroke-dasharray: 6 4; }
  .mk-chart-axis-label {
    font-family: 'Space Mono', monospace; font-size: 9px;
    fill: rgba(255,255,255,0.3); text-anchor: middle;
  }
  .mk-chart-y-label {
    font-family: 'Space Mono', monospace; font-size: 9px;
    fill: rgba(255,255,255,0.25); text-anchor: end;
  }
  .mk-chart-title {
    font-family: 'Space Mono', monospace; font-size: 12px;
    fill: #fff; text-anchor: middle; letter-spacing: 0.04em;
  }
  .mk-chart-sub {
    font-family: 'DM Sans', sans-serif; font-size: 9px;
    fill: rgba(255,255,255,0.35); text-anchor: middle;
  }

  /* Legend */
  .mk-chart-legend {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px;
    justify-content: center;
  }
  .mk-legend-item {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Space Mono', monospace; font-size: 8px;
    color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .mk-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

  /* ── Creative showcase — dual marquee rows ── */
  .showcase {
    padding: 100px 0 80px;
    overflow: hidden;
    text-align: center;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    position: relative;
  }

  .showcase .section-header {
    max-width: var(--container);
    margin: 0 auto 48px;
    padding: 0 var(--gutter);
  }

  .showcase-row {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 8px 0;
    position: relative;
    z-index: 2;
  }

  .showcase-row--left {
    animation: marquee-l 50s linear infinite;
  }

  .showcase-row--right {
    animation: marquee-r 55s linear infinite;
    margin-top: 16px;
  }

  @keyframes marquee-l {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @keyframes marquee-r {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
  }

  .showcase-row:hover {
    animation-play-state: paused;
  }

  .showcase-item {
    position: relative;
    flex-shrink: 0;
    width: 280px;
  }

  .showcase-item img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
  }

  .showcase-prompt {
    position: absolute;
    bottom: 12px;
    left: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 10px;
    font-family: 'Space Mono', monospace;
    color: var(--text-secondary);
    line-height: 1.45;
    text-align: left;
    letter-spacing: 0.01em;
  }

  .showcase-prompt strong {
    color: var(--text-primary);
    font-weight: 600;
  }

  .showcase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
  }

  .showcase-tag {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(57, 89, 77, 0.08);
    color: var(--accent);
  }

  .showcase-tag--score {
    background: #C6F04A;
    color: #1a1a1a;
  }

  @media (max-width: 720px) {
    .showcase-item { width: 200px; }
    .showcase-prompt { font-size: 9px; padding: 8px 10px; }
  }

  /* ── Final CTA — cream bg with noisy morphing green blobs ── */
  .cta {
    text-align: center;
    padding: 140px 0 140px;
    position: relative;
    overflow: visible;
    background: var(--bg-primary);
  }

  /* Morphing blobs with SVG noise texture */
  .cta-blob {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    will-change: transform, border-radius;
    /* Noise texture overlay via inline SVG */
    background-blend-mode: overlay;
  }

  /* Blob that lives in the showcase section, bleeds behind gallery images */
  .showcase-blob {
    position: absolute;
    bottom: -120px;
    right: 5%;
    width: 500px;
    height: 500px;
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"),
      #C6F04A;
    background-blend-mode: soft-light;
    filter: blur(80px);
    opacity: 0.35;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blob-morph-1 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }

  @media (max-width: 720px) {
    .showcase-blob { width: 280px; height: 280px; filter: blur(60px); bottom: -80px; }
  }

  .cta-blob--1 {
    width: 600px;
    height: 600px;
    top: -350px;
    right: 5%;
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"),
      #C6F04A;
    background-blend-mode: soft-light;
    filter: blur(60px);
    opacity: 0.4;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blob-morph-1 20s ease-in-out infinite;
  }

  .cta-blob--2 {
    width: 400px;
    height: 400px;
    bottom: -80px;
    left: 8%;
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"),
      #b8e83a;
    background-blend-mode: soft-light;
    filter: blur(70px);
    opacity: 0.3;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: blob-morph-2 25s ease-in-out infinite;
  }

  .cta-blob--3 {
    width: 320px;
    height: 320px;
    top: 40%;
    left: 45%;
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),
      #d4f060;
    background-blend-mode: soft-light;
    filter: blur(50px);
    opacity: 0.2;
    border-radius: 50% 60% 40% 70% / 55% 40% 65% 45%;
    animation: blob-morph-3 28s ease-in-out infinite;
  }

  @keyframes blob-morph-1 {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(0, 0) scale(1); }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translate(-40px, 30px) scale(1.06); }
    50% { border-radius: 50% 60% 30% 60% / 40% 70% 50% 30%; transform: translate(15px, -20px) scale(0.94); }
    75% { border-radius: 40% 30% 60% 50% / 60% 40% 30% 70%; transform: translate(25px, 15px) scale(1.03); }
  }

  @keyframes blob-morph-2 {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translate(0, 0) scale(1); }
    33% { border-radius: 70% 30% 50% 60% / 30% 60% 40% 70%; transform: translate(30px, -25px) scale(1.08); }
    66% { border-radius: 50% 40% 60% 30% / 60% 40% 50% 70%; transform: translate(-20px, 30px) scale(0.92); }
  }

  @keyframes blob-morph-3 {
    0%, 100% { border-radius: 50% 60% 40% 70% / 55% 40% 65% 45%; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    33% { border-radius: 40% 70% 55% 45% / 65% 35% 50% 60%; transform: translate(-50%, -50%) scale(1.12) rotate(20deg); }
    66% { border-radius: 65% 35% 50% 55% / 40% 60% 45% 70%; transform: translate(-50%, -50%) scale(0.88) rotate(-15deg); }
  }

  @media (max-width: 720px) {
    .cta-blob--1 { width: 300px; height: 300px; filter: blur(50px); }
    .cta-blob--2 { width: 240px; height: 240px; filter: blur(50px); }
    .cta-blob--3 { width: 180px; height: 180px; filter: blur(40px); }
  }

  /* CTA content — no card, just centered text + form on the cream bg */
  .cta-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
  }

  .cta-content h2 {
    color: var(--text-primary);
    margin-bottom: 16px;
  }

  .cta-content p {
    color: var(--text-secondary);
    margin-bottom: 40px;
    font-size: 17px;
  }

  .cta-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .cta-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  @media (max-width: 720px) {
    .cta-name-row { grid-template-columns: 1fr; }
  }

  .cta-fields input {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .cta-fields input::placeholder {
    color: var(--text-muted);
  }

  .cta-fields input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(57, 89, 77, 0.1);
  }

  .cta-phone-row {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .cta-phone-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(57, 89, 77, 0.1);
  }

  .cta-phone-row select {
    width: 90px;
    padding: 14px 8px 14px 14px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    border: none;
    border-right: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 22px;
  }

  .cta-phone-row input[type="tel"] {
    flex: 1;
    padding: 14px 18px;
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    border: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
  }

  .cta-phone-row input[type="tel"]::placeholder {
    color: var(--text-muted);
  }

  @media (max-width: 720px) {
    .cta-phone-row select { width: 80px; padding: 12px 6px 12px 10px; font-size: 13px; }
    .cta-phone-row input[type="tel"] { padding: 12px 14px; font-size: 14px; }
  }

  .cta-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--btn);
    color: var(--btn-text);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
  }

  .cta-submit:hover {
    background: var(--btn-hover);
    transform: translateY(-1px);
  }

  @media (max-width: 720px) {
    .cta { padding: 80px 0; }
    .cta-content { padding: 0 var(--gutter); }
    .cta-fields input { padding: 12px 14px; font-size: 14px; }
  }

  /* ── Footer ── */
  footer {
    padding: 32px 0;
    background: var(--bg-primary);
    text-align: center;
    font-size: 12px;
    color: #ccc;
  }

  /* ────────────────────────────────────────────────────────── */
  /*  "Why Krative" block — sits inside #what, above the        */
  /*  convergence visual. Circular loop, profit grounding,      */
  /*  three signal cards.                                       */
  /* ────────────────────────────────────────────────────────── */

  .why-block {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .why-block .section-header {
    margin-bottom: 0;
  }

  .why-loop {
    max-width: 380px;
    margin: 48px auto 20px;
  }

  .why-loop-svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .why-loop-svg .why-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1.5;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 2s cubic-bezier(.55,.05,.25,1) 0.4s;
  }

  #what.in-view .why-loop-svg .why-ring {
    stroke-dashoffset: 0;
  }

  .why-loop-svg .why-node-bg {
    fill: rgba(255, 255, 255, 0.04);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
  }

  .why-loop-svg .why-node-text {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    fill: rgba(255, 255, 255, 0.88);
  }

  .why-loop-svg .why-center-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    fill: rgba(255, 255, 255, 0.45);
  }

  .why-loop-svg .why-center-value {
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    letter-spacing: 0.08em;
    fill: #C6F04A;
  }

  .why-loop-svg .why-chevron {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .why-loop-svg .why-pulse {
    fill: #C6F04A;
    filter: drop-shadow(0 0 8px #C6F04A);
    opacity: 0;
    transition: opacity 0.6s ease 1.4s;
  }

  #what.in-view .why-loop-svg .why-pulse {
    opacity: 1;
  }

  .why-loop-svg .why-node-group {
    opacity: 0;
    transition: opacity 0.8s ease;
  }

  #what.in-view .why-loop-svg .why-node-group:nth-child(1) { opacity: 1; transition-delay: 0.6s; }
  #what.in-view .why-loop-svg .why-node-group:nth-child(2) { opacity: 1; transition-delay: 0.9s; }
  #what.in-view .why-loop-svg .why-node-group:nth-child(3) { opacity: 1; transition-delay: 1.2s; }
  #what.in-view .why-loop-svg .why-node-group:nth-child(4) { opacity: 1; transition-delay: 1.5s; }

  .why-loop-svg .why-center-group {
    opacity: 0;
    transition: opacity 1s ease 1.8s;
  }

  #what.in-view .why-loop-svg .why-center-group {
    opacity: 1;
  }

  .why-tagline {
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.02em;
    margin-bottom: 64px;
    color: rgba(198, 240, 74, 0);
    transition: color 1s ease 1.6s;
  }

  #what.in-view .why-tagline {
    color: rgba(198, 240, 74, 0.8);
  }

  .why-profit {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
  }

  .why-profit h3 { margin-bottom: 16px; }

  #what.in-view .why-profit h3 { color: #ffffff; }
  #what.in-view .why-profit p { color: rgba(255, 255, 255, 0.78); }
  #what.in-view .why-profit p strong { color: var(--btn); font-weight: inherit; }

  .why-closing {
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.02em;
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0);
    transition: color 1s ease 0.6s;
  }

  #what.in-view .why-closing {
    color: rgba(255, 255, 255, 0.55);
  }

  .section-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0 auto 64px;
    max-width: var(--container);
    padding: 0 var(--gutter);
  }

  /* ────────────────────────────────────────────────────────── */
  /*  Convergence visual (Ease Health × racetrack adaptation)   */
  /* ────────────────────────────────────────────────────────── */

  .convergence {
    position: relative;
    /* Scales up to 2200px on wider monitors — everything inside the SVG
       scales proportionally via its viewBox, so the loop, asset card,
       input labels, and pulses all grow together. */
    max-width: 2200px;
    margin: 24px auto 80px;
    padding: 16px 40px 32px;
    box-sizing: border-box;
    overflow: hidden;
  }

  @media (max-width: 720px) {
    .convergence { padding: 16px 16px 24px; margin-bottom: 56px; }
  }

  .convergence-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .convergence-svg .input-line,
  .convergence-svg .loop-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    transition: stroke-dashoffset 1.8s cubic-bezier(.55,.05,.25,1);
  }

  .convergence.in-view .convergence-svg .input-line,
  .convergence.in-view .convergence-svg .loop-path {
    stroke-dashoffset: 0;
  }

  .convergence-svg .input-label {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    fill: rgba(255, 255, 255, 0);
    text-transform: uppercase;
    transition: fill 1.2s ease 0.5s;
  }

  .convergence.in-view .convergence-svg .input-label {
    fill: rgba(255, 255, 255, 0.72);
  }

  /* Centre label inside the loop — "Centralised Data / An endless loop" */
  .convergence-svg .loop-center-label,
  .convergence-svg .loop-center-sub {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 1s ease 1.6s;
  }

  .convergence-svg .loop-center-label {
    font-size: 16px;
    letter-spacing: 0.12em;
    fill: rgba(255, 255, 255, 0.92);
  }

  .convergence-svg .loop-center-sub {
    font-size: 11px;
    letter-spacing: 0.14em;
    fill: rgba(198, 240, 74, 0.75);
  }

  .convergence.in-view .convergence-svg .loop-center-label,
  .convergence.in-view .convergence-svg .loop-center-sub {
    opacity: 1;
  }

  .convergence-svg .convergence-pulse {
    fill: var(--btn);
    filter: drop-shadow(0 0 8px var(--btn));
    opacity: 0;
    transition: opacity 0.6s ease 1.2s;
  }

  .convergence.in-view .convergence-svg .convergence-pulse {
    opacity: 1;
  }

  /* Generated creative assets (three stacked cards — Sydney / Melbourne / Brisbane) */
  .convergence-svg .convergence-asset {
    opacity: 0;
    transition: opacity 1s ease 1.4s;
  }

  .convergence.in-view .convergence-svg .convergence-asset--primary {
    opacity: 1;
  }

  .convergence-svg .asset-card-bg {
    fill: rgba(255, 255, 255, 0.97);
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 1;
  }

  .convergence-svg .asset-card-img {
    /* image is rendered via <image> — no fill/stroke needed */
  }

  /* Asset keyword pills — rounded rects overlapping the right edge of
     the image. Each variation has 5 pills: 4 keyword/location pills
     (white bg, dark green text) + 1 winner score pill (fluro green bg,
     dark text, slightly taller). */
  .convergence-svg .asset-pill rect {
    fill: rgba(255, 255, 255, 0.97);
    stroke: rgba(0, 0, 0, 0.04);
    stroke-width: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
  }

  .convergence-svg .asset-pill text {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    fill: var(--accent);
    text-transform: uppercase;
  }

  .convergence-svg .asset-pill--win rect {
    fill: #C6F04A;
    stroke: none;
    filter: drop-shadow(0 2px 10px rgba(198, 240, 74, 0.35));
  }

  .convergence-svg .asset-pill--win text {
    fill: #1a1a1a;
  }

  .convergence-svg .asset-card-tag {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: rgba(255, 255, 255, 0.55);
  }

  /* Variation cycling removed — the three creative variations are now
     shown simultaneously as three stacked cards (Sydney / Melbourne /
     Brisbane), rather than one card cycling through variations over time. */

  /* ───── Fatigue state ─────────────────────────────────────────
     During the last ~1.7s of each 8s variation window, the loop
     "detects creative fatigue" — loop stroke flashes fluro red, the
     orbit pulse turns red, and a REPLACE FATIGUED badge + PROAS stat
     appear over the card. Then the image swaps and the state resets.
     All elements share the same 24s clock (3 fatigue flashes per cycle).
  ──────────────────────────────────────────────────────────────── */

  .convergence-svg .fatigue-metric {
    opacity: 0;
    animation-name: fatigue-show;
    animation-duration: 24s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }

  .convergence.in-view .convergence-svg .fatigue-metric {
    animation-play-state: running;
  }

  /* Red card drops a soft red glow so it feels like a live alert element */
  .convergence-svg .fatigue-metric rect {
    filter: drop-shadow(0 4px 16px rgba(255, 90, 74, 0.42));
  }

  @keyframes fatigue-show {
    0%, 24%   { opacity: 0; }
    26%, 32%  { opacity: 1; }
    34%, 57%  { opacity: 0; }
    59%, 65%  { opacity: 1; }
    67%, 90%  { opacity: 0; }
    92%, 98%  { opacity: 1; }
    100%      { opacity: 0; }
  }

  /* Loop stroke flashes fluro red during the fatigue windows */
  .convergence-svg .loop-path {
    animation-name: fatigue-stroke;
    animation-duration: 24s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }

  .convergence.in-view .convergence-svg .loop-path {
    animation-play-state: running;
  }

  @keyframes fatigue-stroke {
    0%, 25%   { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
    28%, 32%  { stroke: #ff5a4a;                    stroke-width: 2.5; }
    34%, 58%  { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
    61%, 65%  { stroke: #ff5a4a;                    stroke-width: 2.5; }
    67%, 91%  { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
    94%, 98%  { stroke: #ff5a4a;                    stroke-width: 2.5; }
    100%      { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
  }

  /* Loop pulse turns fluro red during fatigue windows */
  .convergence-svg .convergence-pulse {
    animation-name: fatigue-pulse;
    animation-duration: 24s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }

  .convergence.in-view .convergence-svg .convergence-pulse {
    animation-play-state: running;
  }

  @keyframes fatigue-pulse {
    0%, 25%   { fill: #C6F04A; filter: drop-shadow(0 0 8px #C6F04A); }
    28%, 32%  { fill: #ff5a4a; filter: drop-shadow(0 0 12px #ff5a4a); }
    34%, 58%  { fill: #C6F04A; filter: drop-shadow(0 0 8px #C6F04A); }
    61%, 65%  { fill: #ff5a4a; filter: drop-shadow(0 0 12px #ff5a4a); }
    67%, 91%  { fill: #C6F04A; filter: drop-shadow(0 0 8px #C6F04A); }
    94%, 98%  { fill: #ff5a4a; filter: drop-shadow(0 0 12px #ff5a4a); }
    100%      { fill: #C6F04A; filter: drop-shadow(0 0 8px #C6F04A); }
  }

  /* Visible connector line — a solid white stroke wiring the asset card
     back into the loop. The gen pulses below travel this exact path.
     Draws in subtly after the main loop + input lines have landed. */
  .convergence-svg .connector-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1.5;
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    transition: stroke-dashoffset 1s ease 0.8s;
  }

  .convergence.in-view .convergence-svg .connector-line {
    stroke-dashoffset: 0;
  }

  /* Label pulses — fire three times per 24s cycle, once per 8s orbit.
     Travel card → loop along the solid connector, arriving at the loop's
     rightmost point (the "intersection") exactly when the orbit pulse
     passes through it. Three staggered pulses per burst, clustered tightly
     around the intersection moment.

     Orbit pulse timing math: stadium path ≈ 1491 units, rightmost point
     at ~38.4% of path length → orbit pulse visits (1110, 210) at
     3.07s into each 8s orbit. Across 24s that's at 12.8% / 46.1% / 79.5%
     of the CSS animation cycle. Pulses are timed to arrive at those
     moments ±0.5%. */
  .convergence-svg .gen-pulse {
    offset-path: path('M 947 210 L 880 210');
    offset-distance: 0%;
    offset-rotate: 0deg;
    fill: #C6F04A;
    filter: drop-shadow(0 0 6px #C6F04A);
    opacity: 0;
    animation-duration: 24s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }

  .convergence.in-view .convergence-svg .gen-pulse {
    animation-play-state: running;
  }

  .convergence-svg .gen-pulse-1 { animation-name: gen-pulse-fire-1; }
  .convergence-svg .gen-pulse-2 { animation-name: gen-pulse-fire-2; }
  .convergence-svg .gen-pulse-3 { animation-name: gen-pulse-fire-3; }

  /* Pulse 1 — arrives at 12% / 45% / 79% (slightly before each intersection) */
  @keyframes gen-pulse-fire-1 {
    0%, 6.5%     { offset-distance: 0%;   opacity: 0; }
    7%           { offset-distance: 0%;   opacity: 1; }
    12%          { offset-distance: 100%; opacity: 1; }
    12.5%        { offset-distance: 100%; opacity: 0; }
    13%, 39.5%   { offset-distance: 0%;   opacity: 0; }
    40%          { offset-distance: 0%;   opacity: 1; }
    45%          { offset-distance: 100%; opacity: 1; }
    45.5%        { offset-distance: 100%; opacity: 0; }
    46%, 73.5%   { offset-distance: 0%;   opacity: 0; }
    74%          { offset-distance: 0%;   opacity: 1; }
    79%          { offset-distance: 100%; opacity: 1; }
    79.5%        { offset-distance: 100%; opacity: 0; }
    80%, 100%    { offset-distance: 0%;   opacity: 0; }
  }

  /* Pulse 2 — arrives at 12.5% / 45.5% / 79.5% (on each intersection) */
  @keyframes gen-pulse-fire-2 {
    0%, 7%       { offset-distance: 0%;   opacity: 0; }
    7.5%         { offset-distance: 0%;   opacity: 1; }
    12.5%        { offset-distance: 100%; opacity: 1; }
    13%          { offset-distance: 100%; opacity: 0; }
    13.5%, 40%   { offset-distance: 0%;   opacity: 0; }
    40.5%        { offset-distance: 0%;   opacity: 1; }
    45.5%        { offset-distance: 100%; opacity: 1; }
    46%          { offset-distance: 100%; opacity: 0; }
    46.5%, 74%   { offset-distance: 0%;   opacity: 0; }
    74.5%        { offset-distance: 0%;   opacity: 1; }
    79.5%        { offset-distance: 100%; opacity: 1; }
    80%          { offset-distance: 100%; opacity: 0; }
    80.5%, 100%  { offset-distance: 0%;   opacity: 0; }
  }

  /* Pulse 3 — arrives at 13% / 46% / 80% (slightly after each intersection) */
  @keyframes gen-pulse-fire-3 {
    0%, 7.5%     { offset-distance: 0%;   opacity: 0; }
    8%           { offset-distance: 0%;   opacity: 1; }
    13%          { offset-distance: 100%; opacity: 1; }
    13.5%        { offset-distance: 100%; opacity: 0; }
    14%, 40.5%   { offset-distance: 0%;   opacity: 0; }
    41%          { offset-distance: 0%;   opacity: 1; }
    46%          { offset-distance: 100%; opacity: 1; }
    46.5%        { offset-distance: 100%; opacity: 0; }
    47%, 74.5%   { offset-distance: 0%;   opacity: 0; }
    75%          { offset-distance: 0%;   opacity: 1; }
    80%          { offset-distance: 100%; opacity: 1; }
    80.5%        { offset-distance: 100%; opacity: 0; }
    81%, 100%    { offset-distance: 0%;   opacity: 0; }
  }

  /* Three-column labels (left / mid / right) */
  .convergence-label--mid {
    text-align: center;
    flex: 0 0 auto;
  }

  .convergence-label--mid::before,
  .convergence-label--mid::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    vertical-align: middle;
    margin: 0 8px;
  }

  /* ────────────────────────────────────────────────────────── */
  /*  Section 3 — dark theme                                    */
  /*  Full-screen dark green background, fades in on scroll     */
  /*  past the hero. Text inverts to white. Feature cards       */
  /*  become transparent with white borders.                    */
  /* ────────────────────────────────────────────────────────── */

  /* #what itself is transparent — body bg handles the green fade so the
     hero and this section share the same scroll-linked backdrop.
     Content fades in via scroll-linked opacity so the section's
     header / diagram / cards appear as the hero's content fades out,
     with no gap between them. */
  #what {
    position: relative;
    z-index: 1;
    background: transparent;
    opacity: var(--hero-out, 0);
  }

  #what .section-header h2,
  #what .section-header p,
  #what .feature-card h3,
  #what .feature-card p,
  #what .feature-icon {
    transition: color 1.2s ease, background 1.2s ease;
  }

  #what.in-view .section-header h2 {
    color: #ffffff;
  }

  #what.in-view .section-header p {
    color: rgba(255, 255, 255, 0.78);
  }

  #what.in-view .section-header p strong {
    color: var(--btn);
    font-weight: inherit;
  }

  #what.in-view .section-header p em {
    color: #ffffff;
    font-style: normal;
    border-bottom: 1px solid rgba(198, 240, 74, 0.6);
    padding-bottom: 1px;
  }

  #what.in-view .eyebrow {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
  }

  #what.in-view .eyebrow::before {
    background: var(--btn);
  }

  /* Feature cards on dark — transparent with white border */
  #what .feature-card {
    transition: background 1.2s ease, border-color 1.2s ease, transform 0.15s, box-shadow 0.15s;
  }

  #what.in-view .feature-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
  }

  #what.in-view .feature-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
  }

  #what.in-view .feature-card h3 {
    color: #ffffff;
  }

  #what.in-view .feature-card p {
    color: rgba(255, 255, 255, 0.72);
  }

  #what.in-view .feature-card p em {
    color: var(--btn);
    font-style: normal;
  }

  #what.in-view .feature-icon {
    background: rgba(255, 255, 255, 0.08);
    color: var(--btn);
  }

  .convergence-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 32px 0 0;
    padding: 0 8px;
    box-sizing: border-box;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0);
    transition: color 1.2s ease 0.6s;
  }

  .convergence.in-view .convergence-labels {
    color: rgba(255, 255, 255, 0.7);
  }

  .convergence-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .convergence-label--left::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
  }

  .convergence-label--right::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--btn);
    box-shadow: 0 0 0 0 rgba(198, 240, 74, 0.7);
    animation: pulse-dot 2.2s ease-in-out infinite;
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
  }

  @media (max-width: 720px) {
    .convergence { padding: 40px 16px 32px; }
    .convergence-labels { font-size: 9px; flex-direction: column; gap: 12px; align-items: flex-start; }
  }

  /* ────────────────────────────────────────────────────────── */
  /*  Section 5 — "How it works"                                */
  /*  Step 01 hero with curved connector arc + Looker mockup    */
  /*  (Wisprflow icon-flow adaptation)                          */
  /* ────────────────────────────────────────────────────────── */

  .how-step-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 72px;
    padding: 16px 0 8px;
  }

  @media (min-width: 960px) {
    .how-step-hero { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
  }

  .step-num-large {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding: 6px 12px;
    background: rgba(57, 89, 77, 0.08);
    border-radius: 999px;
  }

  .how-step-hero-copy h3 {
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }

  .how-step-hero-copy p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 16px;
  }

  /* Curved connector icon flow */
  .connector-arc {
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 200;
    margin-top: 36px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }

  .connector-arc-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .connector-arc-svg .arc-guide {
    fill: none;
    stroke: var(--border-light);
    stroke-width: 1;
    stroke-dasharray: 3 6;
    opacity: 0.7;
  }

  .connector-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    margin-top: -23px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    offset-path: path('M 0 180 Q 300 -40 600 180');
    offset-distance: 0%;
    offset-rotate: 0deg;
    animation: connector-flow 32s linear infinite;
    will-change: offset-distance;
  }

  @keyframes connector-flow {
    from { offset-distance: 0%; }
    to   { offset-distance: 100%; }
  }

  .connector-icon:nth-child(1)  { animation-delay:    0s; }
  .connector-icon:nth-child(2)  { animation-delay: -3.2s; }
  .connector-icon:nth-child(3)  { animation-delay: -6.4s; }
  .connector-icon:nth-child(4)  { animation-delay: -9.6s; }
  .connector-icon:nth-child(5)  { animation-delay: -12.8s; }
  .connector-icon:nth-child(6)  { animation-delay:  -16s; }
  .connector-icon:nth-child(7)  { animation-delay: -19.2s; }
  .connector-icon:nth-child(8)  { animation-delay: -22.4s; }
  .connector-icon:nth-child(9)  { animation-delay: -25.6s; }
  .connector-icon:nth-child(10) { animation-delay: -28.8s; }

  /* Looker dashboard mockup */
  .how-mockup {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: visible;
    font-family: 'Space Mono', monospace;
  }

  .how-mockup-frame { overflow: hidden; }

  .how-mockup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
  }

  .how-mockup-header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-light);
  }

  .how-mockup-header .title {
    margin-left: 12px;
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .how-mockup-body { padding: 22px 22px 28px; }

  .kpi-row {
    display: flex;
    gap: 28px;
    margin-bottom: 24px;
  }

  .kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .kpi-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }

  .kpi-value {
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-family: 'DM Sans', sans-serif;
  }

  .chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 92px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .chart .bar {
    flex: 1;
    height: var(--h);
    background: var(--accent);
    opacity: 0.85;
  }

  .chart .bar.bar--win {
    background: var(--btn);
    opacity: 1;
  }

  .chart-x {
    display: flex;
    gap: 10px;
    margin-top: 8px;
  }

  .chart-x span {
    flex: 1;
    text-align: center;
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* Looker badge — overlapping the bottom-right corner of the dashboard */
  .how-mockup-badge {
    position: absolute;
    bottom: -16px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: var(--accent);
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-lg);
    z-index: 2;
  }

  .how-mockup-badge .badge-mark {
    width: 12px;
    height: 12px;
    background: var(--btn);
    display: inline-block;
  }

  /* "How" Step 02 + 03 — simpler row below the hero step */
  .how-secondary-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  @media (min-width: 720px) {
    .how-secondary-steps { grid-template-columns: 1fr 1fr; }
  }

  .how-secondary-steps .step::before {
    counter-increment: step;
  }

  /* ── Mobile vertical convergence diagram ── */
  .convergence-mobile {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 var(--gutter);
    margin: 24px auto 48px;
    max-width: 360px;
  }

  .cm-sources {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0;
  }

  .cm-source {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.65);
    padding: 5px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
  }

  .cm-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.15));
  }

  .cm-loop {
    width: 100%;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 60px;
    padding: 28px 20px;
    text-align: center;
    position: relative;
    overflow: visible;
  }

  .cm-loop-label {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 4px;
  }

  .cm-loop-sub {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(198,240,74,0.7);
  }

  .cm-loop-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
  }

  .cm-loop-svg .cm-svg-pulse {
    fill: #C6F04A;
    filter: drop-shadow(0 0 8px rgba(198,240,74,0.6));
  }

  .cm-connector {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.3);
  }

  .cm-asset {
    width: 100%;
    text-align: center;
  }

  .cm-asset-tag {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.45);
    margin-bottom: 10px;
  }

  .cm-asset-img {
    width: 140px;
    height: 210px;
    margin: 0 auto;
    border: 2px solid rgba(255,255,255,0.2);
    overflow: hidden;
  }

  .cm-asset-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cm-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
  }

  .cm-pill {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.9);
    color: var(--accent);
  }

  .cm-pill--win {
    background: #C6F04A;
    color: #1a1a1a;
  }

  .cm-labels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.5);
    align-items: center;
  }

  /* ══════════════════════════════════════════════════════════
     MOBILE RESPONSIVE OVERRIDES
     ══════════════════════════════════════════════════════════ */

  /* Small phones — tighter gutters */
  @media (max-width: 480px) {
    :root { --gutter: 16px; }
  }

  @media (max-width: 720px) {

    /* ── Global spacing ── */
    section { padding-top: 56px; padding-bottom: 56px; }

    /* ── Hero ── */
    .hero-tagline h1 { font-size: clamp(28px, 7vw, 40px); }
    .hero-tagline-sub { font-size: 11px; }
    .hero-footer { font-size: 11px; padding: 14px var(--gutter); }
    .hero-form input[type="email"] { flex: 1 1 180px; }

    /* Hero — reposition 8 cards around the tagline on mobile.
       Cards at edges, some partially off-screen for depth. */
    .hero-stage { z-index: 1; }
    .hero-tagline { z-index: 5; }

    .hero-card {
      width: 100px !important;
      opacity: calc(1 - var(--scroll-progress) * 1.4) !important;
    }
    .hero-card-tags { display: none; }

    /* Reposition all 8 cards around the edges */
    .hero-card:nth-child(1) { left: -8% !important; top: 12% !important; --rot: -4deg; }
    .hero-card:nth-child(2) { left: auto !important; right: -5%; top: 2% !important; --rot: 5deg; }
    .hero-card:nth-child(3) { left: 42% !important; top: -3% !important; --rot: 2deg; }
    .hero-card:nth-child(4) { left: -6% !important; top: 38% !important; --rot: -3deg; }
    .hero-card:nth-child(5) { left: auto !important; right: -8%; top: 35% !important; --rot: 4deg; }
    .hero-card:nth-child(6) { left: 2% !important; top: auto !important; bottom: 14%; --rot: -5deg; }
    .hero-card:nth-child(7) { left: 40% !important; top: auto !important; bottom: 10%; --rot: 3deg; }
    .hero-card:nth-child(8) { left: auto !important; right: -4%; top: auto !important; bottom: 16%; --rot: -4deg; }

    /* Centre the footer text */
    .hero-footer { justify-content: center; text-align: center; }
    .hero-footer-right { display: none; }

    /* ── Nav ── */
    .nav-inner { padding: 20px var(--gutter); }
    .nav-brand { height: 24px; }
    .nav-logo { height: 24px; }
    .nav-cta { font-size: 10px; padding: 8px 14px; }

    .nav-float {
      left: 20px !important;
      right: 20px !important;
      bottom: 20px !important;
      width: auto !important;
      transform: translateY(28px) !important;
    }
    .nav-float.is-visible {
      transform: translateY(0) !important;
    }
    .nav-float-inner {
      gap: 0;
      padding: 10px 10px 10px 18px;
      justify-content: space-between;
    }
    .nav-float .nav-brand { height: 22px; }
    .nav-float .nav-logo { height: 22px; }
    .nav-float .nav-cta { font-size: 10px; padding: 10px 20px; }

    /* ── Section headers ── */
    h2 { font-size: clamp(22px, 5.5vw, 32px); }
    .section-header p { font-size: 15px; }

    /* ── Feature cards ── */
    .features { grid-template-columns: 1fr; }
    .feature-card { padding: 20px; }
    .feature-card h3 { font-size: 17px; }
    .feature-card p { font-size: 14px; }

    /* ── Convergence diagram ── */
    /* Hide desktop SVG diagram on mobile */
    .convergence { display: none; }

    /* Show vertical mobile version */
    .convergence-mobile { display: flex; }
    .convergence-labels { font-size: 9px; flex-direction: column; gap: 8px; align-items: flex-start; padding: 0; }

    /* ── Ad phone mockups ── */
    .ad-phones { padding: 48px 0 64px; }
    .ad-phones-grid { gap: 24px; flex-direction: column; align-items: center; }
    .ad-phone { width: 260px; height: 535px; border-radius: 44px; padding: 10px; }
    .ad-phone-screen { border-radius: 34px; }
    .ad-phone-overlay { padding: 16px; }
    .ad-phone-overlay-title { font-size: 14px; }
    .ad-phone-overlay-label { font-size: 9px; }
    .ad-phone-tags { gap: 3px; }
    .ad-phone-tag { font-size: 7px; padding: 2px 5px; }

    /* ── How-it-works section ── */
    .how-deep { padding: 64px 0 0; overflow-x: hidden; }
    .how-tabs { padding: 0 var(--gutter); overflow: hidden; }
    .how-tabs-panels { overflow: hidden; }

    /* ── Dark panel mockups ── */
    .tab-visual--dark { padding: 16px 12px !important; border-radius: 12px; max-width: 100%; box-sizing: border-box; }
    .mk.mk--animated { border-radius: 8px; max-width: 100%; overflow: hidden; }
    .mk-body { padding: 14px !important; overflow: hidden; }
    .mk-bar { padding: 6px 10px; font-size: 8px; }
    .mk-slideshow { min-height: 260px; overflow: hidden; }

    /* Channel cards stack */
    .mk-channels { grid-template-columns: 1fr; gap: 8px; }
    .mk-channel { padding: 12px; }
    .mk-channel-proas { font-size: 22px; }
    .mk-channel-stats { font-size: 10px; gap: 12px; }

    /* Location rows */
    .mk-loc-row { gap: 8px; flex-wrap: wrap; }
    .mk-loc-name { width: 80px; font-size: 12px; }
    .mk-loc-val { font-size: 13px; width: 40px; }
    .mk-loc-badge { font-size: 7px; padding: 2px 6px; }

    /* Product rows */
    .mk-prod-row { grid-template-columns: 1fr 60px 45px; gap: 8px; font-size: 11px; }
    .mk-prod-row > :last-child { display: none; }
    .mk-prod-name { font-size: 11px; }

    /* Breadcrumb + section titles */
    .mk-breadcrumb { font-size: 8px; flex-wrap: wrap; }
    .mk-section-title { font-size: 14px; }

    /* Heatmap tables — horizontal scroll */
    .mk-heat, .mk-ft, .mk-loc-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .mk-heat th, .mk-heat td { padding: 5px 6px; font-size: 10px; }
    .mk-sc { min-width: 28px; font-size: 10px; padding: 2px 4px; }
    .mk-ft th, .mk-ft td { padding: 4px 5px; font-size: 9px; }

    /* Recommendation cards */
    .mk-recs { grid-template-columns: 1fr; gap: 8px; }
    .mk-rec { padding: 12px; overflow: hidden; }
    .mk-rec h4 { font-size: 12px; word-break: break-word; }
    .mk-rec p { font-size: 10px; word-break: break-word; }
    .mk-metrics { gap: 8px; flex-wrap: wrap; }
    .mk-metric-v { font-size: 13px; }
    .mk-rec-header { flex-wrap: wrap; gap: 6px; }

    /* Insight columns stack */
    /* Creative brief insights — cycle working/avoid on mobile */
    .mk-insight-cols {
      grid-template-columns: 1fr;
      gap: 0;
      position: relative;
      min-height: 220px;
    }
    .mk-insight-col {
      padding: 12px;
      position: absolute;
      top: 0; left: 0; right: 0;
    }
    .mk-insight-col h5 { font-size: 9px; margin-bottom: 6px; }
    .mk-insight-col li { font-size: 10px; padding: 3px 0; }
    .mk-insight-col li:nth-child(n+4) { display: none; }

    .mk-insight-col--green {
      animation: insight-cycle-1 8s ease infinite;
    }
    .mk-insight-col--red {
      animation: insight-cycle-2 8s ease infinite;
    }

    @keyframes insight-cycle-1 {
      0%, 5%   { opacity: 0; transform: translateY(8px); }
      10%, 42% { opacity: 1; transform: translateY(0); }
      48%, 100%{ opacity: 0; transform: translateY(-8px); }
    }
    @keyframes insight-cycle-2 {
      0%, 48%  { opacity: 0; transform: translateY(8px); }
      55%, 90% { opacity: 1; transform: translateY(0); }
      95%, 100%{ opacity: 0; transform: translateY(-8px); }
    }

    /* Concept detail */
    .mk-concept-detail { padding: 14px; }
    .mk-concept-detail-title { font-size: 14px; }
    .mk-concept-detail-body { font-size: 12px; }
    .mk-concept-detail-row { grid-template-columns: 1fr; gap: 12px; }
    .mk-kpi-row { gap: 16px; flex-wrap: wrap; }
    .mk-kpi-big { font-size: 18px; }

    /* Brand config */
    .mk-season-tabs { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mk-season-tab { padding: 8px 14px; font-size: 10px; white-space: nowrap; }
    .mk-cfg-section { padding: 10px 12px; }
    .mk-cfg-section-text { font-size: 12px; }
    .mk-model-card { flex-direction: column; gap: 12px; padding: 12px; }
    .mk-model-thumb { width: 60px; height: 60px; }
    .mk-model-meta { flex-wrap: wrap; gap: 12px; font-size: 10px; }

    /* Negative prompts */
    .mk-neg-text { font-size: 12px; }

    /* Slideshow min-height */
    .mk-slideshow { min-height: 280px; }

    /* Chart legend */
    .mk-chart-legend { gap: 8px; }
    .mk-legend-item { font-size: 7px; }

    /* Conversational prompt */
    .mk-conv-input { padding: 10px 14px; }
    .mk-conv-text { font-size: 12px; }

    /* Showcase section */
    .showcase { padding: 56px 0 64px; }
    .showcase-item { width: 180px; }
    .showcase-prompt { font-size: 9px; padding: 8px; bottom: 8px; left: 6px; right: 6px; }

    /* CTA */
    .cta { padding: 64px 0; }
    .cta-card { padding: 40px 20px; }
    .cta-card h2 { font-size: clamp(20px, 5vw, 28px); }

    /* Footer */
    .footer-inner { flex-direction: column; text-align: center; gap: 12px; }
    .footer-links { justify-content: center; }

    /* Thumb row in asset creation */
    .mk-thumb-row { gap: 6px; }
    .mk-thumb { border-radius: 6px; }
    .mk-tags-dark { gap: 4px; }
    .mk-tag-dark { font-size: 7px; padding: 2px 5px; }

    /* Video wrap */
    .mk-video-wrap { border-radius: 8px; }

    /* Asset creation — fixed height, stages swap in-place */
    #assetCreationPanel .mk-body {
      min-height: 520px !important;
      height: 520px !important;
      overflow: hidden !important;
      position: relative !important;
      padding: 10px !important;
    }

    #assetCreationPanel .mk-stage {
      position: absolute !important;
      top: 0; left: 0; right: 0;
      padding: 10px !important;
      box-sizing: border-box;
    }

    /* Asset creation image thumbs — stack vertically, larger */
    .mk-thumb-row { gap: 8px; flex-direction: column; align-items: center; }
    .mk-thumb { border-radius: 6px; width: 70%; max-width: 220px; aspect-ratio: 4/3; }
    #ac-stage-images .mk-thumb-row { max-height: none; overflow: visible; }

    /* Ratio pills — hide icon, horizontal scroll */
    .ac-ratio-pills { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 6px; padding-bottom: 4px; margin-top: 8px; }
    .ac-ratio-pill { font-size: 9px; padding: 4px 8px; white-space: nowrap; flex-shrink: 0; }
    .ac-ratio-icon { display: none; }

    /* Location bar — stack vertically */
    .ac-bar-group { margin-top: 8px; }
    .ac-loc-bar { padding: 8px 0; flex-direction: column; align-items: flex-start; gap: 6px; }
    .ac-loc-bar-label { font-size: 10px; }
    .ac-loc-bar-desc { font-size: 9px; }
    .ac-loc-bar-btn { font-size: 9px; padding: 5px 10px; }

    /* Tags — smaller, below ratios with clear spacing */
    .ac-tags { gap: 4px; margin-bottom: 0; margin-top: 10px; }
    .ac-tag { font-size: 8px; padding: 3px 6px; }

    /* Prompt area — stack button below field */
    .ac-gen-section { padding-top: 8px; margin-top: 2px; }
    .ac-gen-title { font-size: 9px; margin-bottom: 6px; }
    .ac-gen-suggestions { gap: 4px; margin-bottom: 8px; }
    .ac-gen-pill { font-size: 9px; padding: 3px 8px; }
    .ac-gen-prompt-row { flex-direction: column; gap: 8px; }
    .ac-gen-prompt-wrap { min-height: 36px; padding: 8px 10px; font-size: 12px; }
    .ac-gen-submit { padding: 10px 14px; font-size: 10px; width: 100%; text-align: center; }

    /* Compact video */
    .mk-video-wrap { aspect-ratio: 16/9; border-radius: 6px; }

    /* Connector arc — hide on mobile (too complex) */
    .connector-arc { display: none; }
  }

  /* Tablet tweaks */
  @media (min-width: 721px) and (max-width: 960px) {
    .how-tabs { grid-template-columns: 160px 220px 1fr; gap: 0 24px; }
    .how-tab-desc h3 { font-size: 20px; }
    .how-tab-desc p { font-size: 14px; }
    .ad-phones-grid { gap: 32px; }
    .ad-phone { width: 300px; height: 616px; }
  }