/* ============================================================
   landing-shopify.css — Shopify-grade marketing system for Matjar Jo.
   Loaded LAST on templates/landing/base.html, scoped to `.landing--marketing`.
   Mirrors Shopify's measured standards (Inter, huge light-weight display type,
   near-black + white surfaces, pill CTAs that invert by surface, 24px cards,
   Polaris shadows + ease-out motion) — but the ONLY accent is Matjar Jo's own
   brand green: #0B6E66 on light, #2F9A8C on dark. Green seasons, never dominates.
   Does not touch the dashboard, storefront, or auth pages.
   ============================================================ */

.landing--marketing {
  /* --- Surfaces (near-black is faintly teal-tinted, echoing the brand) --- */
  --mk-dark:        #04110E;
  --mk-dark-alt:    #0A1917;
  --mk-dark-card:   #12211F;
  --mk-light:       #FFFFFF;
  --mk-light-alt:   #F1F4F3;
  --mk-ink:         #171A19;   /* text on light — near-black, not pure #000 */
  --mk-ink-soft:    #45514E;
  --mk-ink-mute:    #5B6A68;   /* AA-passing on white AND #F1F4F3 (was #6B7B79, ~4.4:1 — failed) */
  --mk-on-dark:     #FFFFFF;
  --mk-on-dark-mute:#9AA6A4;
  --mk-hairline:    #E4EAE8;
  --mk-hairline-dark: rgba(255,255,255,.10);

  /* --- Brand accent (own green, both surfaces) --- */
  --mk-accent:        #0B6E66;   /* on light */
  --mk-accent-strong: #095A53;
  --mk-accent-tint:   #E1F5EE;
  --mk-accent-ink:    #0F6E56;   /* text on the tint */
  --mk-accent-ondark: #2F9A8C;   /* on near-black */

  /* --- Buttons (black/white invert; teal is NOT a default button color) --- */
  --mk-btn-dark:  #1A1A1A;
  --mk-btn-dark-h:#000000;

  /* --- Radius --- */
  --mk-r-pill:  9999px;
  --mk-r-card:  24px;
  --mk-r-input: 8px;
  --mk-r-chip:  8px;

  /* --- Shadow (Polaris elevation) --- */
  --mk-sh-sm:   0 1px 0 0 rgba(26,26,26,.07);
  --mk-sh-card: 0 4px 6px -2px rgba(26,26,26,.14);
  --mk-sh-pop:  0 12px 20px -8px rgba(26,26,26,.24);
  --mk-sh-lg:   0 20px 40px -12px rgba(26,26,26,.28);

  /* --- Motion --- */
  --mk-ease:      cubic-bezier(.19,.91,.38,1);
  --mk-ease-expo: cubic-bezier(.16,1,.3,1);
  --mk-dur:       .22s;

  /* --- Type --- */
  --mk-font: 'Inter', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  font-family: var(--mk-font);
  color: var(--mk-ink);
  background: var(--mk-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Arabic: lead with the Arabic superfamily, Inter only for Latin fragments. */
.landing--marketing:lang(ar),
[dir="rtl"] .landing--marketing,
.landing--marketing[dir="rtl"] {
  --mk-font: 'IBM Plex Sans Arabic', 'Inter', system-ui, 'Segoe UI', Tahoma, sans-serif;
}

/* ============================================================
   Section frame + display type
   ============================================================ */
.landing--marketing .mk-section { padding: clamp(48px, 6vw, 96px) 0; }
.landing--marketing .mk-section--tight { padding: clamp(36px, 4.5vw, 64px) 0; }

.mk-dark  { background: var(--mk-dark);  color: var(--mk-on-dark); }
.mk-dark-alt { background: var(--mk-dark-alt); color: var(--mk-on-dark); }
.mk-light { background: var(--mk-light); color: var(--mk-ink); }
.mk-light-alt { background: var(--mk-light-alt); color: var(--mk-ink); }

.mk-section-head { max-width: 720px; margin: 0 auto clamp(28px, 3.5vw, 48px); text-align: center; }
.mk-section-head--start { text-align: start; margin-inline: 0; }

.mk-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--mk-accent);
  margin-bottom: 14px;
}
.mk-dark .mk-eyebrow, .mk-dark-alt .mk-eyebrow { color: var(--mk-accent-ondark); }

.mk-h1 {
  font-size: clamp(40px, 7.4vw, 88px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0 0 20px;
}
.mk-h2 {
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0 0 18px;
}
.mk-h3 {
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}
/* Explicit heading colors — beat the global `h1/h2 { color: var(--color-text) }`. */
.landing--marketing .mk-h1,
.landing--marketing .mk-h2,
.landing--marketing .mk-h3 { color: var(--mk-ink); }
.mk-dark .mk-h1, .mk-dark .mk-h2, .mk-dark .mk-h3,
.mk-dark-alt .mk-h1, .mk-dark-alt .mk-h2, .mk-dark-alt .mk-h3 { color: #fff; }
.mk-accent-word { color: var(--mk-accent); }
.mk-dark .mk-accent-word, .mk-dark-alt .mk-accent-word { color: var(--mk-accent-ondark); }

.mk-lead {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--mk-ink-soft);
  margin: 0;
}
.mk-dark .mk-lead, .mk-dark-alt .mk-lead { color: var(--mk-on-dark-mute); }

/* Arabic headlines need a touch more line-height + slightly less negative tracking. */
[dir="rtl"] .mk-h1 { line-height: 1.12; letter-spacing: -.01em; }
[dir="rtl"] .mk-h2 { line-height: 1.15; letter-spacing: -.01em; }

/* ============================================================
   Buttons — pill, invert by surface. Teal is not a default CTA color.
   ============================================================ */
.landing--marketing .mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mk-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--mk-r-pill);
  padding: 12px 22px;
  transition: background-color var(--mk-dur) var(--mk-ease),
              color var(--mk-dur) var(--mk-ease),
              border-color var(--mk-dur) var(--mk-ease),
              transform var(--mk-dur) var(--mk-ease);
  white-space: nowrap;
}
.landing--marketing .mk-btn:hover { transform: translateY(-1px); }
.landing--marketing .mk-btn:active { transform: translateY(0); }
.landing--marketing .mk-btn--lg { padding: 15px 28px; font-size: 16px; }

/* Primary — dark fill on light surfaces */
.landing--marketing .mk-btn--primary { background: var(--mk-btn-dark); color: #fff; border-color: var(--mk-btn-dark); }
.landing--marketing .mk-btn--primary:hover { background: var(--mk-btn-dark-h); border-color: var(--mk-btn-dark-h); }
/* Primary inverts to white fill on dark surfaces */
.mk-dark .mk-btn--primary, .mk-dark-alt .mk-btn--primary { background: #fff; color: #111; border-color: #fff; }
.mk-dark .mk-btn--primary:hover, .mk-dark-alt .mk-btn--primary:hover { background: #ededed; border-color: #ededed; }

/* Ghost — outline that inverts by surface */
.landing--marketing .mk-btn--ghost { background: transparent; color: var(--mk-ink); border-color: var(--mk-ink); }
.landing--marketing .mk-btn--ghost:hover { background: var(--mk-ink); color: #fff; }
.mk-dark .mk-btn--ghost, .mk-dark-alt .mk-btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.mk-dark .mk-btn--ghost:hover, .mk-dark-alt .mk-btn--ghost:hover { background: #fff; color: #111; border-color: #fff; }

[dir="rtl"] .landing--marketing .mk-btn svg { transform: scaleX(-1); }

/* ============================================================
   Inline text link with arrow
   ============================================================ */
.landing--marketing .mk-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mk-accent);
  text-decoration: none;
  transition: gap var(--mk-dur) var(--mk-ease);
}
.landing--marketing .mk-link:hover { gap: 10px; }
.mk-dark .mk-link, .mk-dark-alt .mk-link { color: var(--mk-accent-ondark); }
[dir="rtl"] .landing--marketing .mk-link svg { transform: scaleX(-1); }

/* Small pill badge (teal on light, teal-on-dark inside dark sections) */
.landing--marketing .mk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: var(--mk-r-pill);
  background: var(--mk-accent-tint);
  color: var(--mk-accent-ink);
}
.mk-dark .mk-badge, .mk-dark-alt .mk-badge {
  background: rgba(47,154,140,.12);
  color: var(--mk-accent-ondark);
  border: .5px solid rgba(47,154,140,.24);
}

/* ============================================================
   Focus ring — accessible + surface-aware. base.css:74 zeroes the outline,
   paints a faint 35% box-shadow ring, and forces border-radius:6px (which
   squares off our 9999px pills). Restore a solid outline, kill the box-shadow,
   and hand each element back its own radius. Static (no transition) so it needs
   no reduced-motion carve-out. WCAG 2.4.7.
   ============================================================ */
.landing--marketing :is(.mk-btn, .mk-link, .nav-link, .navbar .btn-primary,
  .mk-faq-item summary, .lang-switch-btn, .lang-switch-opt,
  .footer-section a, .nav-brand):focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 2px;
  box-shadow: none;
}
.landing--marketing .mk-btn:focus-visible,
.landing--marketing .navbar .btn-primary:focus-visible,
.landing--marketing .lang-switch-btn:focus-visible { border-radius: var(--mk-r-pill); }
.landing--marketing .mk-faq-item summary:focus-visible { border-radius: 13px; }
.landing--marketing :is(.mk-link, .nav-link, .footer-section a,
  .nav-brand, .lang-switch-opt):focus-visible { border-radius: 5px; }
/* Neutralise base.css's ring on the round hero swatches (landing-marketing.css
   already gives them their own --demo-accent ring). */
.landing--marketing .lpm-swatch:focus-visible { box-shadow: none; border-radius: 50%; }
/* Light ring on every dark surface: hero, final CTA, dark band, nav, footer. */
.mk-dark :is(.mk-btn, .mk-link):focus-visible,
.mk-dark-alt :is(.mk-btn, .mk-link):focus-visible,
.landing--marketing .navbar :is(.nav-link, .btn-primary, .lang-switch-btn, .nav-brand):focus-visible,
.landing--marketing .footer :is(.footer-section a, .nav-brand):focus-visible {
  outline-color: #fff;
}

/* ============================================================
   Card surface — shared base. shops.html/contact.html use `.mk-card` and rely
   on this; home/pricing/faq define an identical inline copy. Unscoped so a page's
   own `.mk-shop-card`/`.ct-card` overrides (e.g. padding:0) still win by source order.
   ============================================================ */
.mk-card {
  background: var(--mk-light);
  border: 1px solid var(--mk-hairline);
  border-radius: var(--mk-r-card);
  padding: 28px;
  transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease), border-color var(--mk-dur) var(--mk-ease);
}
a.mk-card { text-decoration: none; }
a.mk-card:hover { transform: translateY(-3px); box-shadow: var(--mk-sh-card); }

/* ============================================================
   NAV — permanent dark bar, white text, teal brand mark, white pill CTA
   ============================================================ */
.landing--marketing .navbar {
  position: sticky;
  top: 0;
  /* Above the .nav-overlay (z-index 998 at root). The mobile menu lives INSIDE
     this navbar, so if the bar sat below the overlay, the full-screen overlay
     would paint over the menu and swallow every tap on the links. */
  z-index: 1000;
  background: var(--mk-dark);
  border-bottom: 1px solid var(--mk-hairline-dark);
  backdrop-filter: none;
}
.landing--marketing .navbar .container {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
}
.landing--marketing .nav-brand.mk-brand,
.landing--marketing .mk-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
}
.landing--marketing .mk-brand-mark { width: 22px; height: 22px; color: var(--mk-accent-ondark); flex-shrink: 0; }
.landing--marketing .mk-brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; }
.landing--marketing .mk-brand-word { color: #fff; }

.landing--marketing .nav-collapse { display: flex; align-items: center; gap: 18px; flex: 1; background: transparent; border: 0; box-shadow: none; padding: 0; }
.landing--marketing .nav-menu { display: flex; align-items: center; gap: 16px; background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.landing--marketing .nav-link {
  color: #B7C2C0;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--mk-dur) var(--mk-ease);
}
.landing--marketing .nav-link:hover { color: #fff; }
.landing--marketing .nav-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }

.landing--marketing .navbar .btn-primary {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #111;
  border: none;
  border-radius: var(--mk-r-pill);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease);
}
.landing--marketing .navbar .btn-primary:hover { background: #ededed; transform: translateY(-1px); }

/* Lang switch on dark nav */
.landing--marketing .navbar .lang-switch-btn {
  color: #C9D2D0;
  border-color: rgba(255,255,255,.18);
  background: transparent;
}
.landing--marketing .navbar .lang-switch-btn:hover { color: #fff; border-color: rgba(255,255,255,.36); }

/* Mobile menu toggle */
.landing--marketing .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.landing--marketing .nav-toggle .toggle-bar { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; margin: 0; transition: transform var(--mk-dur) var(--mk-ease), opacity var(--mk-dur) var(--mk-ease); }

@media (max-width: 900px) {
  .landing--marketing .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; }
  .landing--marketing .nav-collapse {
    position: fixed;
    inset: 64px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Solid full-height sheet. Explicitly kill the old styles.css mobile rule
       (translucent white bg + blur(20px) + shadow) that muddied this menu and
       made the light links read as invisible on the blurred hero behind. */
    background: var(--mk-dark);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: 0;
    padding: 16px 20px 28px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--mk-dur) var(--mk-ease), opacity var(--mk-dur) var(--mk-ease);
    overflow-y: auto;
  }
  .landing--marketing .nav-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4,17,14,.7); }
  .landing--marketing .nav-collapse.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .landing--marketing .nav-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .landing--marketing .nav-menu .nav-link { padding: 14px 4px; font-size: 17px; color: #EAF0EF; border-bottom: 1px solid var(--mk-hairline-dark); }
  .landing--marketing .nav-actions { margin: 16px 0 0; flex-direction: column; align-items: stretch; gap: 10px; }
  .landing--marketing .navbar .btn-primary { justify-content: center; padding: 13px 18px; font-size: 15px; }
  .landing--marketing .nav-toggle.open .toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .landing--marketing .nav-toggle.open .toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .landing--marketing .nav-toggle.open .toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   FOOTER — dark anchor on every page
   ============================================================ */
.landing--marketing .footer {
  background: var(--mk-dark);
  color: var(--mk-on-dark-mute);
  border-top: 1px solid var(--mk-hairline-dark);
  padding: clamp(48px, 6vw, 80px) 0 40px;
}
.landing--marketing .footer-content {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px 32px;
}
.landing--marketing .footer-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.landing--marketing .footer-tagline { font-size: 14px; line-height: 1.6; color: var(--mk-on-dark-mute); max-width: 30ch; }
.landing--marketing .footer-section h4 { color: #fff; font-size: 13px; font-weight: 500; margin: 0 0 14px; letter-spacing: .01em; }
.landing--marketing .footer-section a { display: block; color: var(--mk-on-dark-mute); font-size: 14px; text-decoration: none; padding: 5px 0; transition: color var(--mk-dur) var(--mk-ease); }
.landing--marketing .footer-section a:hover { color: #fff; }
.landing--marketing .footer-bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--mk-hairline-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: center;
  justify-content: space-between;
}
.landing--marketing .footer-bottom p { margin: 0; font-size: 13px; color: var(--mk-on-dark-mute); }
@media (max-width: 900px) {
  .landing--marketing .footer { padding: 44px 0 28px; }
  .landing--marketing .footer-content { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .landing--marketing .footer-brand-section { grid-column: 1 / -1; }
  .landing--marketing .footer-tagline { max-width: none; }
  .landing--marketing .footer-section a { padding: 9px 0; }   /* ~40px tap target */
  .landing--marketing .footer-bottom { justify-content: center; text-align: center; margin-top: 34px; }
}
/* Keep the four link groups as two columns even on small phones — one long
   stacked list is a lot to scroll past and loses the visual grouping. */
@media (max-width: 480px) {
  .landing--marketing .footer-content { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .landing--marketing .footer-section h4 { margin-bottom: 10px; }
}

/* ============================================================
   Mobile sticky "Start free trial" bar — keeps the primary action in reach on
   long marketing pages (the site has no mobile bottom nav otherwise). Appears
   after the hero scrolls away, hides over the footer. Below the nav/overlay.
   ============================================================ */
.landing--marketing .mk-mobilecta { display: none; }
@media (max-width: 900px) {
  .landing--marketing .mk-mobilecta {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
    background: rgba(4, 17, 14, .9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--mk-hairline-dark);
    transform: translateY(130%);
    transition: transform var(--mk-dur) var(--mk-ease);
  }
  .landing--marketing .mk-mobilecta.is-shown { transform: translateY(0); }
  .landing--marketing .mk-mobilecta .mk-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .landing--marketing .mk-mobilecta { transition: none; }
}

/* ============================================================
   Scroll reveal (observed by base.html JS: .reveal / .reveal-scale)
   ============================================================ */
.landing--marketing .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--mk-ease-expo), transform .6s var(--mk-ease-expo); }
.landing--marketing .reveal.visible { opacity: 1; transform: none; }
.landing--marketing .reveal-scale { opacity: 0; transform: scale(.97); transition: opacity .6s var(--mk-ease-expo), transform .6s var(--mk-ease-expo); }
.landing--marketing .reveal-scale.visible { opacity: 1; transform: none; }
.landing--marketing [data-reveal-stagger] > * { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .landing--marketing .reveal,
  .landing--marketing .reveal-scale { opacity: 1; transform: none; transition: none; }
  .landing--marketing .mk-btn:hover { transform: none; }
}