/* Extracted from templates/marketing_base.html (redesign 2026-05-31). */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: var(--ff-body);
      color: var(--txt);
      background: var(--bg);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      line-height: 1.65;
      display: flex; flex-direction: column;
      /* Reserve space for sticky mobile CTA (mobile only) */
      padding-bottom: 0;
    }
    @media (max-width: 720px) {
      body { padding-bottom: 64px; }
    }

    /* ── HEADER ─────────────────────────────────────────────────── */
    .mkt-hdr {
      position: sticky; top: 0; z-index: 50;
      display: flex; align-items: center; gap: 14px;
      padding: 14px 32px; height: 64px;
      background: color-mix(in oklab, var(--bg) 85%, transparent);
      backdrop-filter: saturate(140%) blur(12px);
      -webkit-backdrop-filter: saturate(140%) blur(12px);
      border-bottom: 1px solid var(--line);
    }
    .mkt-hdr a.brand {
      display: inline-flex; align-items: center; gap: 11px;
      text-decoration: none; color: var(--txt);
    }
    .mkt-hdr .brand img { height: 28px; }
    .mkt-hdr .brand-wm {
      font-family: var(--ff-display); font-size: 19px; font-weight: 500;
      letter-spacing: -0.012em;
    }
    .mkt-hdr .brand-wm em {
      font-style: italic;
      background: var(--grad-text);
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }
    .mkt-hdr nav.mkt-nav { display: flex; gap: 4px; margin-left: 24px; }
    .mkt-hdr nav.mkt-nav a {
      font-family: var(--ff-body); font-size: 14px; font-weight: 500;
      color: var(--txt-muted); text-decoration: none;
      padding: 8px 14px; border-radius: 999px;
      transition: all 0.18s;
    }
    .mkt-hdr nav.mkt-nav a:hover {
      background: color-mix(in oklab, var(--txt) 5%, transparent);
      color: var(--txt);
    }
    .mkt-hdr nav.mkt-nav a.is-active {
      background: color-mix(in oklab, var(--c-brand-soft) 12%, transparent);
      color: var(--txt);
    }
    .mkt-hdr .spacer { flex: 1; }
    .mkt-hdr .lang-tog {
      display: inline-flex; padding: 3px;
      background: color-mix(in oklab, var(--txt) 5%, transparent);
      border: 1px solid var(--line);
      border-radius: 999px;
    }
    .mkt-hdr .lang-tog a {
      font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.08em;
      padding: 4px 12px; border-radius: 999px;
      text-decoration: none;
      color: var(--txt-faint);
      transition: all 0.18s;
    }
    .mkt-hdr .lang-tog a.is-on {
      background: var(--bg-elev); color: var(--txt);
    }

    /* Prominent CTA — desktop header right edge */
    .mkt-hdr a.cta {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--ff-body); font-size: 14px; font-weight: 600;
      color: #fff; text-decoration: none;
      padding: 10px 18px; border-radius: 999px;
      background: var(--grad-app-accent);
      box-shadow: var(--sh-glow), 0 6px 18px -8px var(--c-app-accent-soft, color-mix(in srgb, var(--c-app-accent) 60%, transparent));
      transition: all 0.18s;
    }
    .mkt-hdr a.cta:hover {
      transform: translateY(-1px);
      box-shadow: var(--sh-glow), 0 10px 28px -10px var(--c-app-accent-soft, color-mix(in srgb, var(--c-app-accent) 70%, transparent));
    }

    @media (max-width: 880px) {
      .mkt-hdr { padding: 12px 16px; }
      .mkt-hdr nav.mkt-nav { display: none; }
    }
    @media (max-width: 720px) {
      /* Hide header CTA on mobile — sticky bottom bar takes over */
      .mkt-hdr a.cta { display: none; }
    }

    /* ── MAIN CONTENT ─────────────────────────────────────────── */
    main.mkt-main { flex: 1; }

    /* ── STICKY MOBILE CTA BAR ─────────────────────────────────── */
    .mkt-sticky-cta {
      display: none;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      background: color-mix(in oklab, var(--bg-elev) 96%, transparent);
      backdrop-filter: saturate(140%) blur(16px);
      -webkit-backdrop-filter: saturate(140%) blur(16px);
      border-top: 1px solid var(--line);
    }
    .mkt-sticky-cta a {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      font-family: var(--ff-body); font-size: 15px; font-weight: 600;
      color: #fff; text-decoration: none;
      width: 100%; padding: 14px 18px; border-radius: 14px;
      background: var(--grad-app-accent);
      box-shadow: var(--sh-glow);
    }
    @media (max-width: 720px) {
      .mkt-sticky-cta { display: block; }
    }

    /* ── FOOTER ─────────────────────────────────────────────── */
    .mkt-foot {
      margin-top: 80px;
      padding: 56px 32px 28px;
      background: var(--bg-elev);
      border-top: 1px solid var(--line);
    }
    .mkt-foot__grid {
      max-width: 1120px; margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px 32px;
    }
    @media (max-width: 880px) {
      .mkt-foot__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
    }
    @media (max-width: 520px) {
      .mkt-foot__grid { grid-template-columns: 1fr; }
    }
    .mkt-foot__brand .brand-wm {
      font-family: var(--ff-display); font-size: 22px; font-weight: 500;
      letter-spacing: -0.012em; color: var(--txt);
      display: inline-block; margin-bottom: 12px;
    }
    .mkt-foot__brand em {
      font-style: italic;
      background: var(--grad-text);
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }
    .mkt-foot__cta-card {
      margin-top: 14px; padding: 16px 18px;
      background: color-mix(in oklab, var(--c-brand-soft) 8%, transparent);
      border: 1px solid color-mix(in oklab, var(--c-brand-soft) 18%, transparent);
      border-radius: 14px;
    }
    .mkt-foot__cta-card p {
      font-size: 13px; color: var(--txt-muted); margin-bottom: 10px;
    }
    .mkt-foot__cta-card a {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--ff-body); font-size: 13px; font-weight: 600;
      color: #fff; text-decoration: none;
      padding: 9px 16px; border-radius: 999px;
      background: var(--grad-app-accent);
    }
    .mkt-foot__col h4 {
      font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: var(--txt-faint); margin-bottom: 18px;
    }
    .mkt-foot__col ul { list-style: none; padding: 0; }
    .mkt-foot__col li { margin-bottom: 10px; }
    .mkt-foot__col a {
      color: var(--txt-muted); text-decoration: none;
      font-size: 14px;
      transition: color 0.18s;
    }
    .mkt-foot__col a:hover { color: var(--c-brand-soft); }
    .mkt-foot__col .cross-domain {
      display: block; margin-top: 8px;
      font-family: var(--ff-mono); font-size: 10px;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--txt-faint);
    }

    .mkt-foot__legal {
      max-width: 1120px; margin: 48px auto 0;
      padding-top: 24px; border-top: 1px solid var(--line);
      display: flex; flex-wrap: wrap; gap: 14px 28px;
      align-items: center;
      font-family: var(--ff-mono); font-size: 11px;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--txt-faint);
    }
    .mkt-foot__legal .spacer { flex: 1; }