/* =========================================================
   NYE — מרכז האדם השלם
   Shared site styles (Hebrew, RTL)
   v3 — Noto Sans Hebrew throughout
   ========================================================= */

@font-face {
  font-family: 'Noto Sans Hebrew';
  src: url('fonts/NotoSansHebrew.ttf') format('truetype-variations'),
       url('fonts/NotoSansHebrew.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --he-font-sans: 'Noto Sans Hebrew', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --he-font-body: 'Noto Sans Hebrew', 'Heebo', -apple-system, 'Segoe UI', sans-serif;
  --he-font-display: 'Noto Sans Hebrew', 'Fraunces', 'Frank Ruhl Libre', Georgia, serif;
  --he-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ===== BRAND BOOK PALETTE (May 2026 — exact hex) ===== */
  /* Primary 7 + black/white from the brand book */
  --b-ink:              #252123;   /* Dark — primary text */
  --b-paper:            #FFFFFF;   /* White */
  --b-yellow:           #F9DA59;   /* Sunny yellow */
  --b-orange:           #E2783A;   /* Terracotta orange */
  --b-magenta:          #872B64;   /* Wine magenta */
  --b-violet:           #572B73;   /* Deep violet */
  --b-blue:             #224D8B;   /* Deep blue */
  --b-sky:              #89CDF1;   /* Sky blue */

  /* Soft complementary tints for backgrounds/hovers */
  --b-yellow-soft:      #FBE89C;
  --b-orange-soft:      #F3C7A6;
  --b-magenta-soft:     #C99BB6;
  --b-violet-soft:      #B3A0C5;
  --b-blue-soft:        #A8C4E0;
  --b-sky-soft:         #C9E7F7;

  /* Brand signature gradient (logo) */
  --b-gradient:         linear-gradient(95deg, var(--b-yellow) 0%, var(--b-orange) 45%, var(--b-magenta) 100%);
  --b-gradient-soft:    linear-gradient(95deg, var(--b-yellow-soft) 0%, var(--b-orange-soft) 50%, var(--b-magenta-soft) 100%);

  /* Layered surfaces */
  --he-base:            #FFFFFF;
  --he-base-2:          #FFFFFF;
  /* Noa/Sapir feedback: pure white site, "טיפה אפרורי עדין" for elegance — no cream */
  /* deeper tint — Noa: more contrast between section backgrounds */
  --he-surface:         #F3EEF2;
  --he-surface-2:       #EFE9EE;
  --he-surface-3:       #EFE9EE;
  --he-paper:           #FFFFFF;
  --he-border:          rgba(37, 33, 35, 0.08);
  --he-border-strong:   rgba(37, 33, 35, 0.18);

  --he-fg-1:            #252123;
  --he-fg-2:            #5C4E55;
  --he-fg-3:            #756369; /* ≥4.5:1 on white (WCAG AA) — was #8B7A82 @4.04 */

  /* === Map legacy variable names to brand colors === */
  --c-flame:            var(--b-orange);
  --c-flame-soft:       var(--b-orange-soft);
  --c-ember:            #C8553A;
  --c-ember-soft:       var(--b-orange-soft);
  --c-magenta:          var(--b-magenta);
  --c-magenta-soft:     var(--b-magenta-soft);
  --c-rose:             var(--b-magenta);
  --c-rose-soft:        var(--b-magenta-soft);
  --c-violet:           var(--b-violet);
  --c-violet-mid:       #7B4090;
  --c-violet-soft:      var(--b-violet-soft);
  --c-amber:            var(--b-yellow);
  --c-amber-soft:       var(--b-yellow-soft);
  --c-peach:            #FCE5C5;
  --c-blue-deep:        var(--b-blue);
  --c-blue-sky:         var(--b-sky);

  --c-clay:             var(--b-orange);
  --c-clay-soft:        var(--b-orange-soft);
  --c-moss:             var(--c-violet-mid);
  --c-moss-deep:        var(--b-violet);
  --c-moss-soft:        var(--b-violet-soft);

  /* Aliases used inline in page markup (orange/purple) */
  --c-orange:           var(--c-clay);
  --c-purple:           var(--c-moss-deep);
  --c-brass:            var(--b-yellow);
  --c-brass-soft:       var(--b-yellow-soft);
  --c-fog:              var(--b-blue);
  --c-fog-soft:         var(--b-sky);

  --c-ink:              var(--b-ink);
  --c-ink-deep:         #181517;
  --c-stone:            #5C4E55;

  --he-accent:          var(--b-violet);
  --he-accent-hover:    #3D1D52;

  /* watercolor texture paths */
  --wc-portrait:        url('textures/watercolor-portrait.jpeg');
  --wc-landscape:       url('textures/watercolor-landscape.jpeg');

  --he-r-sm: 4px;
  --he-r-md: 14px;
  --he-r-lg: 28px;
  --he-r-pill: 999px;

  --he-s-1: 4px; --he-s-2: 8px; --he-s-3: 12px; --he-s-4: 16px;
  --he-s-5: 24px; --he-s-6: 32px; --he-s-7: 48px; --he-s-8: 64px;
  --he-s-9: 96px; --he-s-10: 128px;

  --he-max: 1180px;
  --he-nav-h: 68px;
  --he-topstrip-h: 38px;

  --he-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --he-t-fast: 160ms;
  --he-t-base: 320ms;

  --shadow-soft: 0 1px 2px rgba(58,48,38,0.04), 0 14px 40px -20px rgba(58,48,38,0.14);
  --shadow-lift: 0 1px 2px rgba(58,48,38,0.04), 0 24px 60px -25px rgba(58,48,38,0.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--he-base);
  color: var(--he-fg-1);
  font-family: var(--he-font-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  font-synthesis: none; /* no fake oblique/bold on Hebrew */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* clip (not hidden): hidden makes body a scroll container and kills position:sticky */
  text-rendering: optimizeLegibility;
  /* warm radial tints removed — Sapir: pure white background, no creaminess */
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { direction: rtl; text-align: right; }
html[dir="ltr"] input, html[dir="ltr"] textarea, html[dir="ltr"] select { direction: ltr; text-align: left; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding: 0; margin: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---- LAYOUT ---- */
.container { max-width: var(--he-max); margin: 0 auto; padding: 0 36px; }
/* Canonical section rhythm (polish.css enforces the same clamp over page CSS) */
.section { padding: clamp(38px, 4.6vw, 70px) 0; position: relative; }
.section-sm { padding: 88px 0; }
.section-tight { padding: 64px 0; }

/* ---- TYPE ---- */
.h1 { font-family: var(--he-font-display); font-size: clamp(42px, 5.6vw, 76px); font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; margin: 0; }
.h2 { font-family: var(--he-font-display); font-size: clamp(32px, 4vw, 54px); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.h3 { font-family: var(--he-font-display); font-size: 24px; font-weight: 500; line-height: 1.28; margin: 0; }
.h4 { font-family: var(--he-font-sans); font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; letter-spacing: 0.01em; }
.lead { font-size: 18px; color: var(--he-fg-2); line-height: 1.75; max-width: 640px; font-weight: 400; }
.lead-lg { font-size: 21px; line-height: 1.65; font-weight: 300; }
.text-fg2 { color: var(--he-fg-2); }
.text-fg3 { color: var(--he-fg-3); }
.text-clay { color: var(--c-clay); }
.text-rose { color: var(--c-rose); }
.text-moss { color: var(--c-moss-deep); }
.text-brass { color: var(--c-brass); }
.text-fog { color: var(--c-fog); }
/* legacy aliases */
.text-orange { color: var(--c-clay); }
.text-purple { color: var(--c-moss-deep); }
.text-magenta { color: var(--c-rose); }
.text-blue { color: var(--c-fog); }
.italic { font-style: italic; font-weight: 300; }

.eyebrow {
  font-family: var(--he-font-sans); font-size: 12px;
  color: var(--c-moss-deep); letter-spacing: 0.18em; font-weight: 600;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: var(--he-s-5);
}
.eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 1px;
  background: currentColor; opacity: 0.65;
}
.eyebrow.c-orange, .eyebrow.c-clay { color: var(--c-clay); }
.eyebrow.c-magenta, .eyebrow.c-rose { color: var(--c-rose); }
.eyebrow.c-blue, .eyebrow.c-fog { color: var(--c-fog); }
.eyebrow.c-yellow, .eyebrow.c-brass { color: var(--c-brass); }
.eyebrow.c-purple, .eyebrow.c-moss { color: var(--c-moss-deep); }

.kicker {
  font-family: var(--he-font-sans); font-size: 11px;
  color: var(--c-rose); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 10px;
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--he-r-pill);
  font-family: var(--he-font-sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0;
  line-height: 1.28;
  text-align: center;
  border: 1px solid transparent;
  transition: all var(--he-t-fast) var(--he-ease);
  cursor: pointer; white-space: normal;
}
.btn-lg { padding: 16px 30px; font-size: 15px; }
.btn-primary { background: var(--c-ink); color: var(--he-base); }
.btn-primary:hover { background: var(--c-moss-deep); }
.btn-accent { background: var(--c-moss-deep); color: var(--he-paper); }
.btn-accent:hover { background: var(--c-ink); }
.btn-yellow { background: var(--c-brass); color: var(--c-ink); }
.btn-yellow:hover { background: var(--c-clay); color: #fff; }
.btn-outline { background: transparent; color: var(--he-fg-1); border-color: var(--he-border-strong); }
.btn-outline:hover { border-color: var(--c-ink); background: var(--c-ink); color: var(--he-base); }
.btn-ghost { background: transparent; color: var(--he-fg-2); padding: 8px 0; }
.btn-ghost:hover { color: var(--c-clay); }
.btn .arr { display: inline-block; transition: transform var(--he-t-fast) var(--he-ease); }
.btn:hover .arr { transform: translateX(-3px); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-wa { background: #6B7A5A; color: #fff; }
.btn-wa:hover { background: var(--c-moss-deep); }

/* ---- TOP STRIP ---- */
.topstrip {
  background: var(--c-ink);
  font-family: var(--he-font-sans); font-size: 12px; color: rgba(251,247,238,0.78);
  letter-spacing: 0.04em;
}
.topstrip a { color: inherit; transition: color var(--he-t-fast); }
.topstrip a:hover { color: var(--c-brass); }
.topstrip .sep { color: rgba(251,247,238,0.28); }
.topstrip .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-brass);
  box-shadow: 0 0 0 3px rgba(184,153,104,0.22); display: inline-block; margin-inline-end: 8px; vertical-align: 1px;
  animation: pulse 3.2s ease-in-out infinite;
}
.topstrip .signup { margin-inline-start: auto; color: var(--c-brass); font-weight: 600; }
.topstrip .signup:hover { color: #fff; }
.topstrip-in {
  max-width: var(--he-max); margin: 0 auto; padding: 0 36px;
  height: var(--he-topstrip-h);
  display: flex; align-items: center; gap: 22px;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ---- NAV ---- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--he-nav-h);
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--he-t-base), background var(--he-t-base);
}
.nav.scrolled { border-bottom-color: var(--he-border); background: rgba(255, 255, 255, 0.96); }

/* Mobile menu burger (shown ≤1040px via responsive block) */
.nav-burger {
  display: none; margin-inline-start: auto;
  background: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; padding: 9px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav-burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--c-ink); transition: transform .25s var(--he-ease), opacity .2s;
}
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav dropdowns */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-trigger {
  background: none; border: 0; cursor: pointer; font-family: var(--he-font-sans);
  font-size: 14px; font-weight: 500; color: var(--he-fg-2);
  padding: 4px 0; display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--he-t-fast);
}
.nav-trigger:hover, .nav-item:hover .nav-trigger, .nav-trigger.active { color: var(--c-ink); }
.nav-trigger .caret {
  width: 0; height: 0; border-inline: 4px solid transparent; border-top: 5px solid currentColor;
  opacity: .55; transition: transform var(--he-t-fast);
}
.nav-item:hover .nav-trigger .caret, .nav-item.open .nav-trigger .caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: 100%; inset-inline-end: 0; margin-top: 6px;
  min-width: 224px; background: var(--he-paper);
  border: 1px solid var(--he-border); border-radius: var(--he-r-md);
  box-shadow: 0 18px 44px rgba(42,24,37,0.12);
  padding: 8px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--he-t-fast), transform var(--he-t-fast), visibility var(--he-t-fast);
  z-index: 60;
}
.nav-menu::before { content: ""; position: absolute; top: -8px; inset-inline: 0; height: 8px; }
.nav-item:hover .nav-menu, .nav-item.open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu a {
  padding: 10px 14px; border-radius: 8px; font-size: 14px; color: var(--he-fg-1);
  white-space: nowrap; font-weight: 500;
  transition: background var(--he-t-fast), color var(--he-t-fast);
}
.nav-menu a:hover { background: var(--he-base-2); color: var(--b-magenta); }

/* Floating WhatsApp button (injected site-wide via i18n.js) */
.wa-float {
  position: fixed; inset-inline-start: 22px; bottom: 22px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(37,211,102,0.42);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.9);
  transition: opacity .3s var(--he-ease), transform .3s var(--he-ease), box-shadow .2s;
}
.wa-float.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.wa-float:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 38px rgba(37,211,102,0.5); }
@media print { .wa-float { display: none !important; } }
.nav-in {
  max-width: var(--he-max); margin: 0 auto; padding: 0 36px; height: 100%;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand .mark {
  display: inline-flex; align-items: center;
  height: 36px;
}
.brand .mark img {
  height: 100%; width: auto; display: block;
  object-fit: contain;
}
.brand .mark .dot {
  display: inline-block; width: 5px; height: 5px;
  background: var(--c-clay); border-radius: 50%;
  margin: 0 4px; transform: translateY(-2px);
}
.brand .sub {
  font-family: var(--he-font-body);
  font-size: 13px; color: var(--he-fg-2); font-weight: 400;
  font-style: normal;
}
.nav-links { display: flex; gap: 26px; font-family: var(--he-font-sans); font-size: 14px; color: var(--he-fg-2); font-weight: 500; }
.nav-links a {
  padding: 4px 0; position: relative;
  transition: color var(--he-t-fast);
}
.nav-links a:hover { color: var(--c-ink); }
.nav-links a.active { color: var(--c-ink); }
.nav-links a.active::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -24px;
  height: 1px; background: var(--c-clay);
}
.nav-cta { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

/* ---- Language toggle ---- */
.lang-toggle {
  background: transparent;
  border: 1px solid var(--he-border-strong);
  color: var(--he-fg-2);
  font-family: var(--he-font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  border-radius: var(--he-r-pill);
  cursor: pointer;
  min-width: 48px; text-align: center;
  transition: all var(--he-t-fast) var(--he-ease);
  line-height: 1;
}
.lang-toggle:hover { color: var(--c-ink); border-color: var(--c-ink); }
.lang-toggle:focus-visible { outline: 2px solid var(--c-magenta); outline-offset: 2px; }

/* Direction-specific tweaks for English mode */
html[dir="ltr"] .breadcrumb .sep { padding: 0 2px; }
html[dir="ltr"] .topstrip-in .sep { padding: 0 6px; }
html[dir="ltr"] .signup .signup-text + * { transform: rotate(180deg); display: inline-block; }
html[dir="ltr"] .btn .arr,
html[dir="ltr"] .nav-links a .arr,
html[dir="ltr"] .cta-actions .info::before { transform: rotate(180deg); display: inline-block; }

.lang-en .he-only { display: none !important; }
.lang-he .en-only { display: none !important; }

/* HE-only article notice (shown only on article body pages when EN active) */
.he-only-notice {
  background: linear-gradient(135deg, rgba(196,42,111,0.06), rgba(240,163,64,0.06));
  border: 1px solid var(--he-border-strong);
  border-radius: var(--he-r-md);
  padding: 22px 28px;
  margin: 0 auto 36px;
  max-width: 720px;
  font-family: var(--he-font-sans);
  font-size: 14px; color: var(--he-fg-2);
  display: none;
  align-items: center; gap: 18px; flex-wrap: wrap;
}
.lang-en .he-only-notice { display: flex; }
.he-only-notice strong { color: var(--c-ink); font-weight: 600; display: block; margin-bottom: 4px; }
.he-only-notice .actions { margin-inline-start: auto; }
.he-only-notice .switch-btn {
  background: var(--c-ink); color: var(--he-paper);
  padding: 9px 18px; border-radius: var(--he-r-pill);
  font-weight: 600; font-size: 13px; cursor: pointer;
  border: 0; font-family: var(--he-font-sans);
}
.he-only-notice .switch-btn:hover { background: var(--c-violet); }

/* ---- HERO base ---- */
.hero {
  position: relative; padding: 78px 0 90px; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 700px 500px at 90% 8%, rgba(196,42,111,0.18), transparent 55%),
    radial-gradient(ellipse 600px 500px at 6% 75%, rgba(240,163,64,0.20), transparent 55%),
    radial-gradient(ellipse 500px 400px at 70% 88%, rgba(107,59,124,0.12), transparent 60%);
}
.hero-in { position: relative; }

/* ---- WATERCOLOR utilities ---- */
.wc-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-size: cover; background-position: center;
  mix-blend-mode: multiply; opacity: 0.55;
}
.wc-bg-portrait { background-image: var(--wc-portrait); }
.wc-bg-landscape { background-image: var(--wc-landscape); }
.wc-bg.soft { opacity: 0.38; filter: saturate(1.05); }
.wc-bg.faint { opacity: 0.22; }

/* watercolor splotch — painted circle accent */
.wc-splotch {
  position: absolute; border-radius: 50%; pointer-events: none;
  background-size: cover; background-position: center;
  filter: blur(2px) saturate(1.1);
  mix-blend-mode: multiply; opacity: 0.85;
}
.wc-splotch.s-1 { background-image: var(--wc-portrait); }
.wc-splotch.s-2 { background-image: var(--wc-landscape); }

/* gradient text in the sunset palette */
.wc-text-gradient {
  background: linear-gradient(135deg, var(--c-flame) 0%, var(--c-magenta) 55%, var(--c-violet) 100%); /* starts orange — yellow never lands on white */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding: 0 0.04em;
}
.wc-text-flame {
  background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-flame) 50%, var(--c-ember) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wc-text-magenta {
  background: linear-gradient(135deg, var(--c-magenta) 0%, var(--c-violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* watercolor divider — thin painted line */
.wc-divider {
  height: 2px; border: 0; max-width: 120px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--c-flame), var(--c-magenta), var(--c-violet), transparent);
}

/* section with watercolor wash */
.wc-section {
  position: relative; overflow: hidden;
}
.wc-section::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--wc-landscape);
  background-size: cover; background-position: center;
  opacity: 0.18; mix-blend-mode: multiply;
  pointer-events: none; z-index: 0;
}
.wc-section > * { position: relative; z-index: 1; }

/* ---- TWO-COL ---- */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; }
.split.split-2-3 { grid-template-columns: 1fr 1.4fr; }
.split.split-3-2 { grid-template-columns: 1.4fr 1fr; }
.split.split-even { grid-template-columns: 1fr 1fr; }

/* ---- ORB / MANDALA ---- */
.mandala {
  position: relative; aspect-ratio: 1 / 1;
}
.mandala svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- METRICS BAR ---- */
.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px; padding: 32px 0; border-top: 1px solid var(--he-border);
  font-family: var(--he-font-sans); font-size: 13px; color: var(--he-fg-3); letter-spacing: 0.04em;
}
.metrics strong {
  display: block; font-family: var(--he-font-display); font-style: italic;
  color: var(--c-ink); font-size: 34px; font-weight: 400;
  letter-spacing: -0.01em; margin-bottom: 4px;
}

/* ---- CARDS ---- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card {
  background: var(--he-paper); border-radius: var(--he-r-lg);
  padding: 40px 34px;
  border: 1px solid var(--he-border);
  transition: transform var(--he-t-base) var(--he-ease), box-shadow var(--he-t-base);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.card .step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--he-surface-2); color: var(--c-ink);
  font-family: var(--he-font-display); font-size: 18px; font-weight: 400;
  font-style: italic;
}
.card.c-orange .step, .card.c-clay .step { background: rgba(181,112,73,0.10); color: var(--c-clay); }
.card.c-purple .step, .card.c-moss .step { background: rgba(107,122,90,0.12); color: var(--c-moss-deep); }
.card.c-blue .step, .card.c-fog .step { background: rgba(143,165,171,0.16); color: var(--c-fog); }
.card.c-magenta .step, .card.c-rose .step { background: rgba(181,133,121,0.14); color: var(--c-rose); }
.card.c-yellow .step, .card.c-brass .step { background: rgba(184,153,104,0.16); color: var(--c-brass); }

.card .icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--he-surface-2); color: var(--c-moss-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.card.c-orange .icon, .card.c-clay .icon { background: rgba(181,112,73,0.10); color: var(--c-clay); }
.card.c-purple .icon, .card.c-moss .icon { background: rgba(107,122,90,0.12); color: var(--c-moss-deep); }
.card.c-blue .icon, .card.c-fog .icon { background: rgba(143,165,171,0.18); color: var(--c-fog); }
.card.c-magenta .icon, .card.c-rose .icon { background: rgba(181,133,121,0.14); color: var(--c-rose); }
.card.c-yellow .icon, .card.c-brass .icon { background: rgba(184,153,104,0.18); color: var(--c-brass); }
.card h3, .card .ch {
  font-family: var(--he-font-display); font-size: 26px;
  font-weight: 400; font-style: italic; letter-spacing: -0.005em;
  line-height: 1.22; margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.card p { color: var(--he-fg-2); font-size: 16px; line-height: 1.75; margin: 0; }
.card .corner-glow { display: none; }

/* ---- FEATURE LIST ---- */
.feature-list { display: grid; gap: 18px; grid-template-columns: 1fr; }
.feature-list-2 { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.feature {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 26px; background: var(--he-paper); border-radius: var(--he-r-md);
  border: 1px solid var(--he-border);
}
.feature .num {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--he-base); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--he-font-display); font-style: italic; font-weight: 400; font-size: 16px;
}
.feature .num.c-orange, .feature .num.c-clay { background: rgba(181,112,73,0.10); color: var(--c-clay); }
.feature .num.c-purple, .feature .num.c-moss { background: rgba(107,122,90,0.12); color: var(--c-moss-deep); }
.feature .num.c-blue, .feature .num.c-fog { background: rgba(143,165,171,0.18); color: var(--c-fog); }
.feature .num.c-magenta, .feature .num.c-rose { background: rgba(181,133,121,0.14); color: var(--c-rose); }
.feature h4 { font-family: var(--he-font-sans); font-size: 16px; font-weight: 600; margin: 0 0 6px; letter-spacing: 0.01em; }
.feature p { color: var(--he-fg-2); font-size: 15px; line-height: 1.65; margin: 0; }

/* ---- PILLARS ---- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.pillars::before {
  content: ""; position: absolute; inset-inline: 28px; top: 26px; height: 1px;
  background: var(--he-border-strong); z-index: 0;
}
.pillar { position: relative; padding: 0 18px; z-index: 1; }
.pillar .dot {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-ink); color: var(--he-paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--he-font-display); font-style: italic; font-weight: 400;
  font-size: 22px; margin-bottom: 24px;
  box-shadow: 0 0 0 10px var(--he-base);
}
.pillar:nth-child(1) .dot { background: var(--c-clay); }
.pillar:nth-child(2) .dot { background: var(--c-rose); }
.pillar:nth-child(3) .dot { background: var(--c-moss-deep); }
.pillar:nth-child(4) .dot { background: var(--c-fog); }
.pillar h3 {
  font-family: var(--he-font-display); font-size: 26px; font-weight: 400;
  font-style: italic; letter-spacing: -0.005em; margin: 0 0 12px;
}
.pillar p { color: var(--he-fg-2); font-size: 15px; line-height: 1.7; margin: 0; }

/* ---- QUOTE ---- */
.quote-block {
  padding: 44px 50px; border-radius: var(--he-r-lg);
  background: var(--he-paper);
  border: 1px solid var(--he-border);
  border-inline-start: 3px solid var(--c-clay);
  font-family: var(--he-font-display); font-size: 24px;
  line-height: 1.5; color: var(--c-ink);
  font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  max-width: 760px;
  position: relative;
}
.quote-block.c-purple, .quote-block.c-moss { border-inline-start-color: var(--c-moss-deep); }
.quote-block.c-magenta, .quote-block.c-rose { border-inline-start-color: var(--c-rose); }
.quote-block.c-orange, .quote-block.c-clay { border-inline-start-color: var(--c-clay); }
.quote-block .attrib {
  display: block; margin-top: 22px;
  font-family: var(--he-font-sans); font-style: normal; font-weight: 600;
  font-size: 12px; color: var(--he-fg-3); letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---- TESTIMONIAL ---- */
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.test-card {
  border-radius: var(--he-r-lg); padding: 40px 34px 30px;
  background: var(--he-paper);
  border: 1px solid var(--he-border);
  display: flex; flex-direction: column;
}
.test-card.tone-yellow { background: linear-gradient(180deg, rgba(184,153,104,0.10), var(--he-paper) 70%); }
.test-card.tone-blue { background: linear-gradient(180deg, rgba(143,165,171,0.12), var(--he-paper) 70%); }
.test-card.tone-orange { background: linear-gradient(180deg, rgba(181,112,73,0.08), var(--he-paper) 70%); }
.test-card.tone-purple { background: linear-gradient(180deg, rgba(107,122,90,0.10), var(--he-paper) 70%); }
.test-card .stars { color: var(--c-clay); font-size: 12px; letter-spacing: 0.4em; margin-bottom: 22px; }
.test-card blockquote {
  margin: 0 0 24px; font-family: var(--he-font-display); font-size: 20px;
  line-height: 1.55; color: var(--c-ink); flex: 1; font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.test-card .who { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--he-border); }
.test-card .who .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--he-font-display); font-size: 15px; font-weight: 400; font-style: italic;
  color: var(--he-paper); background: var(--c-moss-deep);
}
.test-card.tone-yellow .avatar { background: var(--c-brass); }
.test-card.tone-blue .avatar { background: var(--c-fog); }
.test-card.tone-orange .avatar { background: var(--c-clay); }
.test-card .who .name { font-family: var(--he-font-sans); font-size: 14px; font-weight: 600; color: var(--c-ink); }
.test-card .who .meta { font-size: 12px; color: var(--he-fg-3); margin-top: 2px; letter-spacing: 0.02em; }

/* ---- FAQ ---- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--he-border);
  padding: 26px 4px;
}
.faq details[open] summary .pl::before { transform: rotate(45deg); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 18px;
  font-family: var(--he-font-display); font-size: 21px; font-weight: 400; font-style: italic;
  color: var(--c-ink); letter-spacing: -0.005em; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pl {
  position: relative; flex-shrink: 0; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 6px;
}
.faq summary .pl::before, .faq summary .pl::after {
  content: ""; position: absolute; background: var(--c-clay);
  border-radius: 1px; transition: transform var(--he-t-base) var(--he-ease);
}
.faq summary .pl::before { width: 14px; height: 1.5px; }
.faq summary .pl::after { width: 1.5px; height: 14px; }
.faq .answer {
  padding: 18px 40px 0;
  color: var(--he-fg-2); font-size: 16px; line-height: 1.85;
}
.faq .answer a { color: var(--c-clay); border-bottom: 1px solid currentColor; }

/* ---- CTA BAND ---- */
.cta-band {
  background:
    radial-gradient(ellipse 900px 700px at 88% 12%, rgba(196,42,111,0.45), transparent 50%),
    radial-gradient(ellipse 800px 600px at 8% 88%, rgba(240,163,64,0.40), transparent 50%),
    radial-gradient(ellipse 600px 500px at 65% 50%, rgba(229,93,44,0.25), transparent 55%),
    linear-gradient(135deg, #4A1F3C 0%, #2A1825 60%, #1A0E16 100%);
  color: var(--he-paper); border-radius: var(--he-r-lg); padding: 88px 72px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center;
  position: relative; overflow: hidden;
}
.cta-band > * { position: relative; }
.cta-band h2 {
  font-family: var(--he-font-display); font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
  margin: 16px 0 20px; color: var(--he-paper);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.cta-band h2 .y { color: var(--c-amber-soft); font-style: italic; font-weight: 400; }
.cta-band p { color: rgba(251,247,238,0.78); font-size: 17px; line-height: 1.75; margin: 0; max-width: 540px; }
.cta-band .eyebrow { color: var(--c-brass-soft) !important; }
.cta-band .eyebrow::before { background: var(--c-brass-soft); opacity: 0.7; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }
.cta-actions .btn-yellow:hover { background: var(--he-paper); color: var(--c-moss-deep); }
.cta-actions .btn-outline { color: var(--he-paper); border-color: rgba(251,247,238,0.35); }
.cta-actions .btn-outline:hover { background: rgba(251,247,238,0.10); border-color: var(--he-paper); color: var(--he-paper); }
.cta-actions .info {
  font-size: 13px; color: rgba(251,247,238,0.6);
  margin-top: 6px; line-height: 1.7;
}
.cta-actions .info a { color: var(--c-brass-soft); }

/* ---- FORM ---- */
.form-card {
  background: var(--he-paper);
  border-radius: var(--he-r-lg);
  border: 1px solid var(--he-border);
  padding: 44px;
  max-width: 540px;
  margin: 0 auto;
}
.form-card h3 {
  font-family: var(--he-font-display); font-size: 28px; font-weight: 400;
  font-style: italic; letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.form-card .sub { color: var(--he-fg-2); font-size: 15px; margin-bottom: 28px; }
.form-card .field { margin-bottom: 16px; }
.form-card label {
  display: block; font-family: var(--he-font-sans); font-size: 12px; font-weight: 600;
  color: var(--he-fg-3); margin-bottom: 8px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.form-card input,
.form-card textarea,
.form-card select {
  width: 100%; background: var(--he-base);
  border: 1px solid var(--he-border-strong); border-radius: var(--he-r-md);
  padding: 14px 18px; font-family: var(--he-font-body); font-size: 16px;
  color: var(--c-ink); transition: border var(--he-t-fast);
}
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
  outline: none; border-color: var(--c-moss-deep);
}
.form-card textarea { resize: vertical; min-height: 96px; }
.form-card .consent { font-size: 13px; color: var(--he-fg-3); display: flex; gap: 10px; margin: 16px 0 20px; line-height: 1.55; }
.form-card .consent input { width: auto; }
.form-card .btn { width: 100%; justify-content: center; }

/* ---- COMPARISON ---- */
.compare {
  background: var(--he-paper); border-radius: var(--he-r-lg);
  border: 1px solid var(--he-border);
  overflow: hidden;
}
.compare .compare-head, .compare .compare-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0;
}
.compare .compare-head {
  background: var(--he-surface-2);
  font-family: var(--he-font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.08em;
}
.compare .compare-head > div, .compare .compare-row > div {
  padding: 20px 24px; border-bottom: 1px solid var(--he-border);
}
.compare .compare-head > div:not(:first-child) { font-family: var(--he-font-display); font-style: italic; font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.compare .compare-row > div:first-child { font-family: var(--he-font-sans); font-weight: 600; color: var(--c-ink); font-size: 13px; background: var(--he-surface); letter-spacing: 0.04em; }
.compare .compare-row > div:not(:first-child) { font-size: 14px; color: var(--he-fg-2); line-height: 1.65; }
.compare .compare-row.price > div:not(:first-child) {
  font-family: var(--he-font-display); font-style: italic; font-weight: 400;
  font-size: 24px; color: var(--c-ink);
}
.compare .compare-row:last-child > div { border-bottom: 0; }

/* ---- PRODUCT ---- */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.products-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product {
  background: var(--he-paper); border-radius: var(--he-r-lg);
  border: 1px solid var(--he-border);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--he-t-base) var(--he-ease), box-shadow var(--he-t-base);
}
.product:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.product .cover {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
}
.product .cover .type {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--he-font-sans); font-size: 10px; font-weight: 600;
  color: var(--he-paper); padding: 5px 12px; border-radius: 999px;
  background: rgba(43,37,32,0.55); backdrop-filter: blur(8px);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.product .cover .price-tag {
  position: absolute; bottom: 16px; left: 16px;
  font-family: var(--he-font-display); font-style: italic; font-weight: 400;
  color: var(--he-paper); padding: 6px 14px; border-radius: 999px;
  background: rgba(43,37,32,0.55); backdrop-filter: blur(8px);
  font-size: 17px;
}
.product .cover .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.product .cover .art svg { width: 50%; height: 50%; }
.product .body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product h3 {
  font-family: var(--he-font-display); font-size: 22px; font-weight: 400; font-style: italic;
  letter-spacing: -0.005em; line-height: 1.25; margin: 0;
}
.product .desc { color: var(--he-fg-2); font-size: 14px; line-height: 1.65; margin: 0; flex: 1; }
.product .foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--he-border);
}
.product .foot .price {
  font-family: var(--he-font-display); font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--c-ink);
}
.product .foot .add {
  font-family: var(--he-font-sans); font-size: 12px; font-weight: 600;
  color: var(--c-ink); padding: 8px 16px; border-radius: 999px;
  background: var(--he-surface-2);
  letter-spacing: 0.06em;
  transition: all var(--he-t-fast);
}
.product:hover .foot .add { background: var(--c-ink); color: var(--he-paper); }

/* Product cover variants — earthy gradients */
.cover-yellow, .cover-brass { background: radial-gradient(circle at 30% 30%, rgba(220,201,160,0.55), transparent 55%), linear-gradient(135deg, var(--c-brass-soft), var(--c-brass)); }
.cover-orange, .cover-clay { background: radial-gradient(circle at 35% 35%, rgba(220,201,160,0.4), transparent 55%), linear-gradient(135deg, var(--c-clay-soft), var(--c-clay)); }
.cover-magenta, .cover-rose { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 55%), linear-gradient(135deg, var(--c-rose-soft), var(--c-rose)); }
.cover-purple, .cover-moss { background: radial-gradient(circle at 70% 30%, rgba(184,192,168,0.4), transparent 55%), linear-gradient(135deg, var(--c-moss-soft), var(--c-moss-deep)); }
.cover-blue, .cover-fog { background: radial-gradient(circle at 50% 30%, rgba(220,201,160,0.3), transparent 55%), linear-gradient(135deg, var(--c-fog-soft), var(--c-fog)); }
.cover-purple-sky { background: radial-gradient(circle at 30% 70%, rgba(184,192,168,0.4), transparent 55%), linear-gradient(135deg, var(--c-moss-deep), var(--c-fog)); }

/* ---- DARK SECTION ---- */
.dark {
  background: var(--c-ink-deep); color: var(--he-paper);
  position: relative; overflow: hidden;
}
.dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 700px at 90% 10%, rgba(196,42,111,0.32), transparent 50%),
    radial-gradient(ellipse 800px 600px at 6% 88%, rgba(240,163,64,0.28), transparent 50%),
    radial-gradient(ellipse 500px 500px at 50% 50%, rgba(107,59,124,0.18), transparent 60%);
}
.dark > * { position: relative; }
.dark .lead { color: rgba(251,247,238,0.75); }
.dark .h2, .dark .h1 { color: var(--he-paper); }
.dark .eyebrow { color: var(--c-brass-soft); }
.dark .eyebrow::before { background: var(--c-brass-soft); }

/* ---- ICON ROW ---- */
.perks {
  display: flex; gap: 36px; flex-wrap: wrap;
  font-family: var(--he-font-sans); font-size: 13px; color: var(--he-fg-2); letter-spacing: 0.02em;
}
.perks span { display: inline-flex; align-items: center; gap: 10px; }
.perks svg { color: var(--c-clay); }

/* ---- BULLETS ---- */
.bullets { display: grid; gap: 10px; }
.bullets li {
  display: block; position: relative; padding-inline-start: 27px;
  font-size: 16px; color: var(--he-fg-2); line-height: 1.7;
}
.bullets li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 6px;
  width: 14px; height: 1px; background: var(--c-clay);
}

/* ---- FOOTER ---- */
.footer { border-top: 1px solid var(--he-border); padding: 88px 0 32px; background: var(--he-surface); }
.footer-top { display: grid; grid-template-columns: 1.4fr 2fr; gap: 64px; padding-bottom: 52px; border-bottom: 1px solid var(--he-border); }
.footer-brand p { color: var(--he-fg-2); font-size: 15px; margin: 20px 0 24px; max-width: 340px; line-height: 1.75; }
.footer-brand .hours {
  font-family: var(--he-font-sans); font-size: 13px; color: var(--he-fg-3); margin-top: 20px; line-height: 1.85;
}
.footer-brand .hours strong { color: var(--c-ink); font-weight: 600; }
.footer-brand .socials { display: flex; gap: 10px; margin-bottom: 18px; }
.footer-brand .socials a {
  width: 38px; height: 38px; background: var(--he-base); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--he-fg-2); transition: all var(--he-t-fast); border: 1px solid var(--he-border);
}
.footer-brand .socials a:hover { background: var(--c-ink); color: var(--he-paper); border-color: var(--c-ink); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-cols h5 {
  font-family: var(--he-font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-moss-deep); margin: 0 0 18px; font-weight: 600;
}
.footer-cols a, .footer-cols span {
  display: block; color: var(--he-fg-2); font-size: 15px;
  padding: 5px 0; transition: color var(--he-t-fast);
}
.footer-cols a:hover { color: var(--c-clay); }
.footer-bottom {
  padding-top: 26px; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; font-family: var(--he-font-sans); font-size: 12px; color: var(--he-fg-3); letter-spacing: 0.02em;
}

/* ---- BREADCRUMB ---- */
.breadcrumb {
  font-family: var(--he-font-sans); font-size: 12px; color: var(--he-fg-3); letter-spacing: 0.1em;
  padding: 22px 0 0; text-transform: uppercase;
}
.breadcrumb a { color: var(--he-fg-2); }
.breadcrumb a:hover { color: var(--c-clay); }
.breadcrumb .sep { margin: 0 10px; opacity: 0.5; }

/* ---- DIVIDER ---- */
.divider {
  height: 1px; background: var(--he-border);
  margin: 0 auto; border: 0; max-width: var(--he-max);
}

/* ---- PRESS ---- */
.press-row {
  display: flex; gap: 44px; flex-wrap: wrap; justify-content: center; align-items: center;
  padding: 24px 0;
  font-family: var(--he-font-display); font-style: italic; font-size: 24px; font-weight: 400;
  color: var(--he-fg-3); opacity: 0.9;
}

/* ---- MEETING / BIG NUMBER ---- */
.meeting {
  background: var(--he-paper); border-radius: var(--he-r-lg);
  border: 1px solid var(--he-border);
  padding: 36px 34px; position: relative;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
.meeting .head {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--he-font-sans); font-size: 11px; color: var(--he-fg-3); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.meeting .head .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-moss-deep); color: var(--he-paper);
  font-family: var(--he-font-display); font-style: italic; font-weight: 400; font-size: 16px;
}
.meeting h4 {
  font-family: var(--he-font-display); font-size: 24px;
  font-weight: 400; font-style: italic; letter-spacing: -0.005em;
  line-height: 1.25; margin: 0;
}
.meeting p { color: var(--he-fg-2); font-size: 16px; line-height: 1.75; margin: 0; }

/* ---- SECTION HEAD ---- */
.section-head {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 56px; align-items: end;
  margin-bottom: 64px;
}
.section-head h2 { max-width: 14ch; margin-top: 14px; }
.section-head .lead { max-width: 560px; }

/* ---- FLOWCHART ---- */
.flowchart { position: relative; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1040px) {
  .hero { padding: 48px 0 58px; }
  .split, .split.split-2-3, .split.split-3-2, .split.split-even { grid-template-columns: 1fr; gap: 36px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; inset-inline: 0;
    background: var(--he-paper); border-top: 1px solid var(--he-border);
    box-shadow: 0 24px 48px rgba(0,0,0,0.10);
    padding: 6px 28px 18px; max-height: calc(100vh - var(--he-nav-h)); overflow-y: auto;
  }
  .nav.open .nav-links a {
    padding: 15px 2px; font-size: 16px;
    border-bottom: 1px solid var(--he-border);
  }
  .nav.open .nav-links a:last-child { border-bottom: 0; }
  /* Dropdowns inside mobile menu */
  .nav.open .nav-links .nav-item { width: 100%; flex-direction: column; align-items: stretch; }
  .nav.open .nav-links .nav-trigger {
    width: 100%; justify-content: space-between; padding: 15px 2px;
    border-bottom: 1px solid var(--he-border); font-size: 16px; color: var(--c-ink);
  }
  .nav.open .nav-links .nav-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; box-shadow: none; border: 0; border-radius: 0; margin: 0;
    min-width: 0; padding: 4px 0 10px; background: transparent;
  }
  .nav.open .nav-links .nav-item.open .nav-menu { display: flex; }
  .nav.open .nav-links .nav-menu::before { display: none; }
  .nav.open .nav-links .nav-menu a {
    padding: 11px 0 11px 18px; font-size: 15px; color: var(--he-fg-2);
    border-bottom: 1px solid var(--he-border); border-radius: 0;
  }
  .nav.open .nav-links .nav-item.open .nav-trigger .caret { transform: rotate(180deg); }
  .cards-3, .cards-4, .test-grid, .products, .products-4, .feature-list-2 { grid-template-columns: 1fr; }
  .cards-2 { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 22px; }
  .pillars::before { display: none; }
  .pillar { padding: 0; }
  .cta-band { grid-template-columns: 1fr; padding: 56px 36px; }
  .section-head { grid-template-columns: 1fr; gap: 22px; }
  .footer-top, .footer-cols { grid-template-columns: 1fr; }
  .compare { overflow-x: auto; }
  .compare .compare-head, .compare .compare-row { grid-template-columns: 1.2fr 1fr 1fr 1fr; min-width: 720px; }
  .topstrip-in { gap: 14px; font-size: 11px; }
  .topstrip-in .signup-text { display: none; }
  .form-card { padding: 32px; }
  .container { padding: 0 24px; }
}
@media (max-width: 640px) {
  .h1 { font-size: 40px; }
  .h2 { font-size: 32px; }
  .lead { font-size: 17px; }
  .cta-band h2 { font-size: 28px; }
  .quote-block { padding: 32px 28px; font-size: 20px; }
}


/* === v2 ambiance === */
:root { --he-base: #FFFFFF; --he-base-2: #FFFFFF; }
body {
  background-color: var(--he-base);
  background-image:
    radial-gradient(58vw 38vh at 88% -6%, rgba(135,43,100,0.07), transparent 60%),
    radial-gradient(52vw 34vh at 2% 5%, rgba(226,120,58,0.055), transparent 60%),
    radial-gradient(64vw 48vh at 99% 104%, rgba(87,43,115,0.05), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.nav-links { flex-wrap: nowrap; gap: 20px; }
.nav-links > a, .nav-trigger { white-space: nowrap; }

/* === v2 nav tighten === */
.nav-links{ gap:14px; font-size:13px; }
.section-head{ margin-bottom:44px; }
@media (max-width:1200px){ .brand .sub{ display:none; } }