/* =====================================================
   ELIAN DESIGN SYSTEM — Marketing site
   Connected operations intelligence for distributed sites.
   ===================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/fonts/InterVariable.woff2') format('woff2');
}

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

:root {
  /* Brand */
  --brand-green:        #1D9E75;
  --brand-green-dark:   #137d5b;
  --brand-green-soft:   #d8f1e7;
  --brand-blue:         #378ADD;
  --brand-blue-dark:    #2A6EB5;
  --brand-blue-soft:    #dceaf8;
  --brand-purple:       #534AB7;
  --brand-purple-dark:  #3F388C;
  --brand-purple-soft:  #e2e0f3;

  --brand-gradient:     linear-gradient(135deg, #1D9E75 0%, #378ADD 55%, #534AB7 100%);
  --brand-gradient-soft:linear-gradient(135deg, rgba(29,158,117,0.10) 0%, rgba(55,138,221,0.10) 50%, rgba(83,74,183,0.10) 100%);

  /* Surfaces — light */
  --surface-canvas:     #f5f8fb;
  --surface-1:          #ffffff;
  --surface-2:          #eef2f7;
  --surface-3:          #e3e9f1;
  --surface-overlay:    rgba(255,255,255,0.92);

  /* Surfaces — dark */
  --ink-canvas:         #0B1220;
  --ink-1:              #131C2E;
  --ink-2:              #1B2540;
  --ink-3:              #243056;
  --ink-line:           rgba(255,255,255,0.08);

  /* Foreground */
  --fg-1:               #0C172B;
  --fg-2:               #3B4A66;
  --fg-3:               #5F6F87;
  --fg-4:               #8A98AE;
  --fg-on-dark-1:       #F4F7FB;
  --fg-on-dark-2:       #C9D3E3;
  --fg-on-dark-3:       #8E9BB3;

  /* Borders */
  --border-1:           rgba(12,23,43,0.08);
  --border-2:           rgba(12,23,43,0.14);
  --border-strong:      rgba(12,23,43,0.22);
  --border-on-dark:     rgba(255,255,255,0.10);
  --border-on-dark-strong: rgba(255,255,255,0.18);

  /* Status */
  --success:            #1D9E75;
  --success-soft:       #d8f1e7;
  --warning:            #E08A2B;
  --warning-soft:       #fceedb;
  --danger:             #D8443B;
  --danger-soft:        #fadcd9;
  --info:               #378ADD;
  --info-soft:          #dceaf8;
  --ai:                 #534AB7;
  --ai-soft:            #e2e0f3;

  /* Type families */
  --font-display:       'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:          'Inter', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-display:         clamp(2.4rem, 4.6vw, 3.6rem);
  --fs-h1:              clamp(2rem, 3.4vw, 2.6rem);
  --fs-h2:              clamp(1.5rem, 2.4vw, 1.95rem);
  --fs-h3:              1.25rem;
  --fs-h4:              1.05rem;
  --fs-body:            1rem;
  --fs-body-sm:         0.9rem;
  --fs-caption:         0.8rem;
  --fs-eyebrow:         0.72rem;
  --fs-mono:            0.85rem;

  /* Line-height & tracking */
  --lh-tight:           1.18;
  --lh-snug:            1.35;
  --lh-body:            1.6;
  --tracking-eyebrow:   0.18em;
  --tracking-tight:     -0.02em;
  --tracking-mono:      0.02em;

  /* Spacing (4px grid) */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Radii */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px;

  /* Shadows */
  --shadow-1:           0 1px 2px rgba(12,23,43,0.06), 0 1px 1px rgba(12,23,43,0.04);
  --shadow-2:           0 4px 14px rgba(12,23,43,0.07), 0 1px 2px rgba(12,23,43,0.04);
  --shadow-3:           0 14px 36px rgba(12,23,43,0.10), 0 2px 4px rgba(12,23,43,0.04);
  --shadow-4:           0 28px 72px rgba(8,18,38,0.18);
  --shadow-glow-green:  0 0 0 4px rgba(29,158,117,0.18);
  --shadow-glow-blue:   0 0 0 4px rgba(55,138,221,0.18);
  --shadow-inset:       inset 0 1px 0 rgba(255,255,255,0.6);

  /* Motion */
  --ease-base:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:           120ms;
  --dur-base:           200ms;
  --dur-slow:           360ms;
}

/* ============== Reset + base ============== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--ease-base), background-color .2s var(--ease-base), border-color .2s var(--ease-base), opacity .2s var(--ease-base);
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  transition: color .2s var(--ease-base), background-color .2s var(--ease-base), border-color .2s var(--ease-base), opacity .2s var(--ease-base), transform .2s var(--ease-base);
}

/* Global smooth motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, button, .btn, .mw-nav__cta, .mw-nav__link, .mw-nav__login,
  .mw-nav__dd-btn, .mw-nav__dd-item, .mw-pillar, .mw-pillar__icon,
  .mw-usecase, .mw-usecase__bar, .mw-cap, .mw-pricing__tier,
  .mw-price, .mw-fcard, .mw-irow__shot, .mw-irow__shot img,
  .mw-footer a, .mw-footer__link, .mw-form input, .mw-form textarea,
  .mw-form select, .mw-header__logo, .mw-header__logo img,
  .mw-nav__dd-menu {
    transition:
      color .22s var(--ease-base),
      background .28s var(--ease-base),
      background-color .28s var(--ease-base),
      border-color .28s var(--ease-base),
      box-shadow .3s var(--ease-base),
      transform .35s var(--ease-base),
      opacity .28s var(--ease-base),
      filter .28s var(--ease-base);
  }
  .mw-header__logo:hover { opacity: 0.9; }
  .mw-header__logo:hover img { transform: rotate(-6deg) scale(1.06); }
  .mw-footer a:hover { color: #fff; transform: translateX(2px); }
  .mw-irow__shot:hover img { transform: scale(1.02); }

  body { animation: mwPageIn .4s var(--ease-base) both; }
  @keyframes mwPageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Scroll-reveal: fade in sections as they enter the viewport (no translate) */
  .mw-reveal {
    opacity: 0;
    transition: opacity .6s var(--ease-base);
    will-change: opacity;
  }
  .mw-reveal.is-visible {
    opacity: 1;
  }

  /* Linked overview cards (a.mw-fcard): subtle hover lift to indicate clickability */
  a.mw-fcard {
    transition: transform .25s var(--ease-base), border-color .25s var(--ease-base), box-shadow .25s var(--ease-base);
  }
  a.mw-fcard:hover {
    transform: translateY(-2px);
    border-color: var(--brand-blue);
    box-shadow: 0 12px 28px rgba(15,23,42,0.08);
  }
  a.mw-fcard:hover .mw-fcard__num { color: var(--brand-blue-dark); }
}

.container { width: min(92%, 1200px); margin-inline: auto; }
.is-hidden { display: none !important; }

/* ============== Header ============== */
.mw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink-canvas);
  color: var(--fg-on-dark-1);
  border-bottom: 1px solid var(--ink-line);
}
.mw-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 14px 0;
}
.mw-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.mw-header__mark { height: 32px; width: auto; display: block; }
.mw-header__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1;
}
.mw-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}
.mw-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-on-dark-2);
  padding: 8px 4px;
  transition: color .12s var(--ease-base);
}
.mw-nav__link:hover,
.mw-nav__link.is-active { color: var(--fg-on-dark-1); }

.mw-nav__dd { position: relative; }
.mw-nav__dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-on-dark-2);
  padding: 8px 4px;
}
.mw-nav__dd-btn:hover { color: var(--fg-on-dark-1); }
.mw-nav__dd-btn .mw-chev {
  width: 14px; height: 14px;
  transition: transform .2s var(--ease-base);
}
.mw-nav__dd.open .mw-nav__dd-btn .mw-chev { transform: rotate(180deg); }

.mw-nav__dd-menu {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 10px;
  min-width: 240px;
  background: #fff;
  color: var(--fg-1);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border-1);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s var(--ease-base), transform .16s var(--ease-base);
}
/* Invisible bridge so the cursor doesn't lose hover when crossing the gap */
.mw-nav__dd-menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 16px;
}
.mw-nav__dd.open .mw-nav__dd-menu,
.mw-nav__dd:hover .mw-nav__dd-menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mw-nav__dd-item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.mw-nav__dd-item:hover { background: var(--surface-2); }
.mw-nav__dd-item-label { display: block; font-weight: 600; color: var(--fg-1); }
.mw-nav__dd-item-desc  { display: block; font-size: 12px; color: var(--fg-3); margin-top: 2px; }

/* Login pill (subtle) and CTA (filled green) */
.mw-nav__login {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background .16s var(--ease-base), border-color .16s var(--ease-base);
}
.mw-nav__login:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
}
.mw-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--brand-green);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: background .12s var(--ease-base);
}
.mw-nav__cta:hover { background: var(--brand-green-dark); }

.mw-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  align-items: center;
  justify-content: center;
}
.mw-nav__toggle span { display: block; width: 18px; height: 2px; background: #fff; position: relative; }
.mw-nav__toggle span::before,
.mw-nav__toggle span::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #fff;
}
.mw-nav__toggle span::before { top: -6px; }
.mw-nav__toggle span::after  { top:  6px; }

/* ============== Hero (landing) ============== */
.mw-hero {
  background: var(--ink-canvas);
  color: var(--fg-on-dark-1);
  padding: 96px 0 112px;
  position: relative;
  overflow: hidden;
  min-height: 600px;
}
.mw-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.mw-hero__bg-img {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 70%;
  object-fit: cover;
  object-position: left center;
  opacity: 0;
  transition: opacity 1.2s var(--ease-base);
}
.mw-hero__bg-img.is-active { opacity: 1; }
.mw-hero__bg-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink-canvas) 0%, var(--ink-canvas) 28%, rgba(11,18,32,0.92) 42%, rgba(11,18,32,0.55) 60%, rgba(11,18,32,0.15) 88%, rgba(11,18,32,0) 100%),
    linear-gradient(180deg, rgba(11,18,32,0.45) 0%, rgba(11,18,32,0) 30%, rgba(11,18,32,0) 70%, rgba(11,18,32,0.55) 100%);
}
.mw-hero__inner { position: relative; }
.mw-hero__copy { max-width: 620px; }
.mw-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
  text-wrap: balance;
}
.mw-hero h1 em { font-style: normal; color: #6ee7b7; }
.mw-hero__lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg-on-dark-2);
  max-width: 520px;
  margin: 0 0 32px;
}
.mw-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============== Trust strip ============== */
.mw-trust {
  background: #fff;
  border-bottom: 1px solid var(--border-1);
  padding: 28px 0;
}
.mw-trust__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.mw-trust__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.mw-trust__items { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.mw-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-2);
}

/* ============== Sections ============== */
.mw-section { padding: var(--space-16) 0; }
.mw-section--shaded { background: var(--surface-2); }
.mw-section--ink { background: var(--ink-canvas); color: var(--fg-on-dark-1); }
.mw-section--ink .mw-section__heading h2 { color: #fff; }
.mw-section--ink .mw-section__heading p  { color: var(--fg-on-dark-2); }
.mw-section__heading {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin-bottom: var(--space-10);
}
.mw-section__heading .eyebrow,
.mw-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-green-dark);
  margin: 0;
}
.mw-section--ink .mw-section__heading .eyebrow { color: #6ee7b7; }
.mw-section__heading h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
  color: var(--fg-1);
  text-wrap: balance;
}
.mw-section__heading p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

/* ============== Pillars ============== */
.mw-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mw-pillar {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-1);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 0;
  align-items: center;
}
.mw-pillar__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  background: var(--brand-green-soft);
  color: var(--brand-green-dark);
  flex-shrink: 0;
}
.mw-pillar:nth-child(2) .mw-pillar__icon { background: var(--brand-blue-soft);   color: var(--brand-blue-dark); }
.mw-pillar:nth-child(3) .mw-pillar__icon { background: var(--brand-purple-soft); color: var(--brand-purple-dark); }
.mw-pillar h3 {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  color: var(--fg-1);
}
.mw-pillar p,
.mw-pillar ul {
  grid-column: 1 / -1;
}
.mw-pillar p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 14px 0;
}
.mw-pillar ul {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.mw-pillar li {
  font-size: 13px;
  color: var(--fg-3);
  display: flex;
  gap: 8px;
}
.mw-pillar li::before { content: '→'; color: var(--brand-blue); font-weight: 700; }

/* ============== Use cases (4-up dark) ============== */
.mw-usecases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
.mw-usecase {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 22px;
}
.mw-usecase__bar {
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-green);
  margin-bottom: 16px;
}
.mw-usecase:nth-child(2) .mw-usecase__bar { background: var(--brand-blue); }
.mw-usecase:nth-child(3) .mw-usecase__bar { background: #E08A2B; }
.mw-usecase:nth-child(4) .mw-usecase__bar { background: var(--brand-purple); }
.mw-usecase h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}
.mw-usecase p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-on-dark-2);
  margin: 0;
}

/* ============== Capability gallery ============== */
.mw-capability {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-10) 0;
  border-bottom: 1px dashed var(--border-1);
}
.mw-capability:last-child { border-bottom: 0; }
.mw-capability--flip > :first-child { order: 2; }
.mw-capability__copy h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  margin: 12px 0 12px;
  letter-spacing: -0.01em;
}
.mw-capability__copy .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue-dark);
  margin: 0;
}
.mw-capability__copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 16px;
}
.mw-capability__copy ul {
  list-style: none;
  padding: 0; margin: 0 0 18px;
  display: grid; gap: 8px;
}
.mw-capability__copy li {
  font-size: 14px;
  color: var(--fg-2);
  display: flex; gap: 10px;
}
.mw-capability__copy li::before { content: '✓'; color: var(--brand-green); font-weight: 800; }
.mw-capability__shot {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.mw-capability__shot img { width: 100%; height: auto; display: block; }

/* ============== Pricing ============== */
.mw-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mw-price {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s var(--ease-base), box-shadow .25s var(--ease-base), border-color .25s var(--ease-base);
}
.mw-price:hover {
  transform: translateY(-4px);
  border-color: var(--brand-green);
  box-shadow: 0 18px 36px rgba(15,23,42,0.08);
}
.mw-price.featured {
  border-color: var(--brand-green);
  box-shadow: 0 24px 50px rgba(29,158,117,0.12);
  position: relative;
}
.mw-price.featured::before {
  content: attr(data-badge);
  position: absolute;
  top: 12px; right: 12px;
  background: var(--brand-green);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mw-price__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-green-dark);
  margin: 0;
}
.mw-price h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--fg-1);
}
.mw-price__amount {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-1);
}
.mw-price__amount small {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-3);
}
.mw-price__desc {
  font-size: 14px;
  color: var(--fg-3);
  margin: 0;
}
.mw-price ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
}
.mw-price li {
  font-size: 13.5px;
  color: var(--fg-2);
  display: flex;
  gap: 10px;
}
.mw-price li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--brand-green);
  margin-top: 7px;
  flex-shrink: 0;
}
.mw-price .btn { width: 100%; justify-content: center; }

.mw-price__setup {
  font-size: 12px;
  color: var(--fg-3);
  margin: -10px 0 0;
  line-height: 1.45;
}

.mw-pricing--4up { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mw-pricing--4up .mw-price { padding: 22px; gap: 16px; }
@media (max-width: 1240px) {
  .mw-pricing--4up { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .mw-pricing--4up .mw-price { padding: 28px; gap: 18px; }
}
@media (max-width: 760px) {
  .mw-pricing--4up { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

/* ============== Enterprise banner (the "fourth plan" presented as a wide call-out) ============== */
.mw-price-banner {
  margin-top: 28px;
  background: var(--ink-canvas);
  color: var(--fg-on-dark-1);
  border-radius: 18px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-on-dark);
}
.mw-price-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 100% 50%, rgba(83,74,183,0.22), transparent 70%);
  pointer-events: none;
}
.mw-price-banner__copy { position: relative; }
.mw-price-banner__copy .mw-price__tag { color: #c4b5fd; margin: 0; }
.mw-price-banner__copy h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 6px 0 8px;
  color: #fff;
  letter-spacing: -0.01em;
}
.mw-price-banner__copy > p {
  margin: 0 0 14px;
  color: var(--fg-on-dark-2);
  max-width: 620px;
  font-size: 15px;
  line-height: 1.55;
}
.mw-price-banner__copy ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.mw-price-banner__copy li {
  font-size: 13.5px;
  color: var(--fg-on-dark-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mw-price-banner__copy li::before {
  content: '✓';
  color: #6ee7b7;
  font-weight: 700;
}
.mw-price-banner__cta { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.mw-price-banner__cta .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .mw-price-banner { grid-template-columns: 1fr; padding: 24px; }
  .mw-price-banner__cta { align-items: stretch; }
  .mw-price-banner__cta .btn { width: 100%; justify-content: center; }
}

.mw-pricing__note {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--fg-3);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.55;
}
.mw-pricing__note a {
  color: var(--brand-blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mw-pricing__note a:hover { color: var(--brand-blue); }

/* ============== Footer ============== */
.mw-footer {
  background: var(--ink-canvas);
  color: var(--fg-on-dark-2);
  padding: 64px 0 32px;
  position: relative;
}
.mw-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-blue), transparent);
  opacity: 0.5;
}
.mw-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
}
.mw-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.mw-footer__mark { width: 56px; height: 56px; }
.mw-footer__word {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1;
}
.mw-footer__brand p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 360px;
  margin: 16px 0 0;
  color: var(--fg-on-dark-3);
}
.mw-footer h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  margin: 0 0 14px;
}
.mw-footer ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 10px;
}
.mw-footer ul a {
  font-size: 14px;
  color: var(--fg-on-dark-2);
  transition: color .12s var(--ease-base);
}
.mw-footer ul a:hover { color: #fff; }
.mw-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mw-footer__bottom small {
  font-size: 12px;
  color: var(--fg-on-dark-3);
}
.mw-footer__legal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.mw-footer__legal a {
  font-size: 12px;
  color: var(--fg-on-dark-3);
}
.mw-footer__legal a:hover { color: #fff; }

/* ============== Buttons ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14.5px;
  transition: all .16s var(--ease-base);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--brand-green); color: #fff; }
.btn-primary:hover { background: var(--brand-green-dark); }
.btn-outline-light {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-color: rgba(255,255,255,0.20);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}
.btn-outline {
  background: #fff;
  color: var(--fg-1);
  border-color: var(--border-2);
}
.btn-outline:hover { border-color: var(--brand-blue); color: var(--brand-blue-dark); }
.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg-1); }

/* ============== Page hero (smaller) ============== */
.mw-phero {
  background: var(--ink-canvas);
  color: var(--fg-on-dark-1);
  padding: 80px 0 64px;
  position: relative;
  overflow: hidden;
}
.mw-phero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 80% 30%, rgba(29,158,117,0.18), transparent 70%);
  pointer-events: none;
}
.mw-phero--blue::before {
  background: radial-gradient(50% 50% at 80% 30%, rgba(55,138,221,0.20), transparent 70%);
}
.mw-phero--purple::before {
  background: radial-gradient(50% 50% at 80% 30%, rgba(83,74,183,0.22), transparent 70%);
}
.mw-phero__inner { position: relative; }
.mw-phero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  text-wrap: balance;
  max-width: 820px;
}
.mw-phero__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6ee7b7;
  margin-bottom: 16px;
}
.mw-phero--blue .mw-phero__eyebrow   { color: #93c5fd; }
.mw-phero--purple .mw-phero__eyebrow { color: #c4b5fd; }
.mw-phero__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-on-dark-2);
  margin: 0;
  max-width: 620px;
}

/* ============== Feature grid (numbered) ============== */
.mw-fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mw-fgrid--4up { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mw-fgrid--4up .mw-fcard { padding: 22px; }
@media (max-width: 1100px) {
  .mw-fgrid--4up { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .mw-fgrid--4up .mw-fcard { padding: 26px; }
}
.mw-fcard {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 26px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: baseline;
}
.mw-fcard__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-blue);
  margin: 0;
  letter-spacing: 0.08em;
}
.mw-fcard h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--fg-1);
}
.mw-fcard p {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 12px 0 0;
}

/* ============== Image row ============== */
.mw-section--alt { background: var(--surface-2); }
.mw-irow {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-10);
  align-items: center;
}
.mw-irow--flip {
  grid-template-columns: 1.1fr 1fr;
  direction: rtl;
}
.mw-irow--flip > * { direction: ltr; }
.mw-irow__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 14px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.mw-irow__copy p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
}
.mw-irow__shot {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-1);
  box-shadow: 0 12px 30px rgba(15,23,42,0.06);
  background: #fff;
}
.mw-irow__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============== CTA section ============== */
.mw-cta {
  background: var(--ink-canvas);
  color: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.mw-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 100%, rgba(29,158,117,0.20), transparent 70%);
}
.mw-cta__inner { position: relative; text-align: center; }
.mw-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  margin: 0 0 28px;
  color: #fff;
  letter-spacing: -0.01em;
}
.mw-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============== Stats ============== */
.mw-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.mw-stat__num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--brand-green);
  line-height: 1;
  margin-bottom: 8px;
}
.mw-stat__label {
  font-size: 13px;
  color: var(--fg-3);
  font-weight: 500;
}

/* ============== Pricing comparison table ============== */
.mw-ptable {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mw-ptable table { width: 100%; border-collapse: collapse; min-width: 540px; }
.mw-ptable th,
.mw-ptable td {
  padding: 14px 18px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--border-1);
}
.mw-ptable th {
  background: var(--surface-2);
  font-weight: 700;
  color: var(--fg-1);
  font-size: 13px;
}
.mw-ptable td:not(:first-child),
.mw-ptable th:not(:first-child) { text-align: center; }
.mw-ptable td.yes { color: var(--brand-green); font-weight: 700; }
.mw-ptable tr:last-child td { border-bottom: 0; }

/* ============== Contact form ============== */
.mw-form {
  display: grid;
  gap: 16px;
  max-width: 560px;
}
.mw-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}
.mw-form input,
.mw-form textarea,
.mw-form select {
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--fg-1);
  transition: border-color .16s var(--ease-base), box-shadow .16s var(--ease-base);
}
.mw-form input:focus,
.mw-form textarea:focus,
.mw-form select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(55,138,221,0.18);
}
.mw-form textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-body);
}
.mw-form .form-status {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--fg-2);
}
.mw-form .form-status[data-state="success"] { background: var(--success-soft); color: var(--brand-green-dark); }
.mw-form .form-status[data-state="error"]   { background: var(--danger-soft);  color: var(--danger); }
.mw-form .form-status[data-state="pending"] { background: var(--info-soft);    color: var(--brand-blue-dark); }

/* ============== About panel ============== */
.mw-about {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.mw-about h2 {
  font-family: var(--font-display);
  font-size: 32px;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.mw-about p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0 0 14px;
}
.mw-about__side {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 28px;
}
.mw-about__side h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  margin: 0 0 14px;
}
.mw-about__side dl {
  margin: 0;
  display: grid;
  gap: 12px;
}
.mw-about__side dt { font-size: 12px; color: var(--fg-3); }
.mw-about__side dd { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--fg-1); }

/* ============== Language switcher (flags) ============== */
.mw-lang { position: relative; }
.mw-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-on-dark-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
}
.mw-lang__btn:hover { color: #fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.mw-lang__flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
}
.mw-lang__flag svg { width: 100%; height: 100%; display: block; }
.mw-lang__menu {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 10px;
  min-width: 180px;
  background: #fff;
  color: var(--fg-1);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border-1);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s var(--ease-base), transform .16s var(--ease-base);
}
.mw-lang__menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 16px;
}
.mw-lang.open .mw-lang__menu,
.mw-lang:hover .mw-lang__menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.mw-lang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  text-decoration: none;
}
.mw-lang__item:hover { background: var(--surface-2); }
.mw-lang__item[aria-current="true"] { color: var(--brand-blue-dark); font-weight: 700; }

/* Footer locale row */
.mw-footer__langs {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.mw-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-on-dark-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.mw-footer__lang:hover { color: #fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); }
.mw-footer__lang[aria-current="true"] { color: #fff; border-color: rgba(255,255,255,0.30); }

/* ============== Legal pages ============== */
.mw-legal {
  padding: var(--space-12) 0 var(--space-16);
  background: var(--surface-canvas);
}
.mw-legal__inner {
  max-width: 780px;
  margin: 0 auto;
}
.mw-legal h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.mw-legal .last-updated {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 32px;
}
.mw-legal section { margin-bottom: var(--space-8); }
.mw-legal h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--fg-1);
}
.mw-legal h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--fg-1);
}
.mw-legal p,
.mw-legal li,
.mw-legal dd {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
}
.mw-legal p { margin: 0 0 12px; }
.mw-legal ul, .mw-legal ol {
  margin: 0 0 14px;
  padding-left: 1.2em;
}
.mw-legal li { margin-bottom: 6px; }
.mw-legal li::marker { color: var(--fg-4); }
.mw-legal dl { display: grid; gap: 12px; margin: 0 0 16px; }
.mw-legal dt { font-weight: 700; color: var(--fg-1); font-size: 15px; }
.mw-legal dd { margin: 0; }
.mw-legal a { color: var(--brand-blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.mw-legal a:hover { color: var(--brand-blue); }
.mw-legal strong { color: var(--fg-1); font-weight: 700; }
.mw-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14px;
}
.mw-legal th, .mw-legal td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-1);
}
.mw-legal th { background: var(--surface-2); font-weight: 700; color: var(--fg-1); }

/* ============== Cookie banner ============== */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 80;
  background: var(--ink-1);
  color: var(--fg-on-dark-1);
  border: 1px solid var(--border-on-dark);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: var(--shadow-4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s var(--ease-base), transform .25s var(--ease-base);
  max-width: 720px;
  margin: 0 auto;
}
.cookie-banner.visible { opacity: 1; transform: none; }
.cookie-banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cookie-banner-content p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-on-dark-2);
  flex: 1;
  min-width: 240px;
}
.cookie-banner-content a { color: #6ee7b7; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; }
.cookie-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-on-dark);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
}
.cookie-btn-accept { background: var(--brand-green); border-color: var(--brand-green); }
.cookie-btn-accept:hover { background: var(--brand-green-dark); }
.cookie-btn-decline:hover { background: rgba(255,255,255,0.12); }

/* ============== Responsive ============== */
@media (max-width: 1024px) {
  .mw-hero { padding: 72px 0 88px; min-height: 520px; }
  .mw-hero__bg-img { width: 90%; opacity: .35 !important; }
  .mw-hero__bg-fade {
    background: linear-gradient(180deg, var(--ink-canvas) 0%, rgba(11,18,32,0.6) 60%, var(--ink-canvas) 100%);
  }
  .mw-pillars { grid-template-columns: repeat(2, 1fr); }
  .mw-usecases { grid-template-columns: repeat(2, 1fr); }
  .mw-pricing { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .mw-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .mw-footer__brand { grid-column: 1 / -1; }
  .mw-fgrid { grid-template-columns: repeat(2, 1fr); }
  .mw-stats { grid-template-columns: repeat(2, 1fr); }
  .mw-irow, .mw-irow--flip { grid-template-columns: 1fr; direction: ltr; }
  .mw-about { grid-template-columns: 1fr; }
}
/* Nav drawer: kicks in earlier than content stacking so tablets get the drawer */
@media (max-width: 960px) {
  .mw-nav { display: none; }
  .mw-nav.is-open {
    display: flex;
    position: fixed;
    inset: 60px 0 0;
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    background: var(--ink-1);
    gap: 4px;
    overflow-y: auto;
    z-index: 49;
  }
  .mw-nav.is-open .mw-nav__link,
  .mw-nav.is-open .mw-nav__dd-btn {
    width: 100%;
    padding: 14px 8px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    justify-content: space-between;
  }
  .mw-nav.is-open .mw-nav__dd,
  .mw-nav.is-open .mw-lang { width: 100%; }
  .mw-nav.is-open .mw-nav__dd-menu,
  .mw-nav.is-open .mw-lang__menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: transparent;
    box-shadow: none;
    border: 0;
    margin: 0;
    padding: 4px 0 8px 12px;
    color: var(--fg-on-dark-1);
    display: none;
    min-width: 0;
  }
  .mw-nav.is-open .mw-nav__dd.open .mw-nav__dd-menu,
  .mw-nav.is-open .mw-lang.open .mw-lang__menu { display: block; }
  .mw-nav.is-open .mw-nav__dd-item-label { color: #fff; }
  .mw-nav.is-open .mw-nav__dd-item-desc  { color: var(--fg-on-dark-3); }
  .mw-nav.is-open .mw-nav__dd-item:hover,
  .mw-nav.is-open .mw-lang__item:hover { background: rgba(255,255,255,0.06); }
  .mw-nav.is-open .mw-lang__item { color: var(--fg-on-dark-1); padding: 10px 12px; }
  .mw-nav.is-open .mw-lang__btn {
    width: 100%;
    padding: 14px 8px;
    font-size: 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: var(--fg-on-dark-2);
    justify-content: space-between;
    border-radius: 0;
  }
  .mw-nav.is-open .mw-nav__cta,
  .mw-nav.is-open .mw-nav__login { margin-top: 12px; width: 100%; justify-content: center; }
  .mw-nav__toggle { display: inline-flex; }
}

/* Content stacking on phone-sized viewports */
@media (max-width: 760px) {
  .mw-section { padding: var(--space-12) 0; }
  .mw-hero { padding: 48px 0 64px; }
  .mw-pillars { grid-template-columns: 1fr; }
  .mw-capability,
  .mw-capability--flip { grid-template-columns: 1fr; }
  .mw-capability--flip > :first-child { order: 0; }
  .mw-trust__inner { justify-content: flex-start; }
  .mw-fgrid { grid-template-columns: 1fr; }
  .mw-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .mw-usecases { grid-template-columns: 1fr; }
  .mw-footer__grid { grid-template-columns: 1fr; }
  .mw-hero h1 { font-size: clamp(30px, 9vw, 40px); }
  .mw-phero h1 { font-size: clamp(26px, 7.5vw, 34px); }
  .mw-section__heading h2 { font-size: clamp(22px, 6.5vw, 32px); }
  .btn { padding: 11px 16px; font-size: 14px; }
  /* Trim hero side padding so the lead text isn't cramped */
  .mw-hero { padding: 40px 0 56px; min-height: 0; }
  .mw-hero__lead { font-size: 16px; }
  /* Cookie banner: stack the actions when very narrow so buttons don't squeeze */
  .cookie-banner-actions { width: 100%; justify-content: stretch; }
  .cookie-banner-actions .cookie-btn { flex: 1; }
}