/* ============================================================
   Eka (eka.place)
   Static port of the Framer site. Every measurement below was read
   from the published Framer page's computed styles at 1440, 1000 and
   390px, so keep the numbers literal rather than "tidying" them.

   Breakpoints (Framer): desktop >= 1200, tablet 810-1199.98, phone <= 809.98
   ============================================================ */

/* ---- Fonts (self-hosted; Georgia is a system font in Framer too) ---- */
@font-face {
  font-family: "Aspekta";
  src: url("/assets/fonts/aspekta-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --cream: rgb(255, 255, 252);
  --ink: rgb(58, 67, 76);
  --ink-90: rgba(58, 67, 76, 0.9);
  --ink-quote: rgb(56, 56, 56);
  --white: rgb(255, 255, 255);
  --accent: rgb(255, 96, 56);        /* #FF6038: FAQ icon, step numbers, modal links */
  --btn: rgb(255, 124, 94);          /* hero + nav CTA */
  --btn-shadow: rgba(255, 77, 46, 0.35);
  --pill-circle: rgb(255, 114, 59);
  --pill-text: rgb(255, 114, 60);
  --peach: rgb(254, 155, 125);
  --peach-20: rgba(254, 155, 125, 0.2);
  --slate: rgb(58, 67, 76);
  --card-shadow: 0 28px 60px 0 rgba(205, 205, 205, 0.25);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Aspekta", var(--sans);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --appear: 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  position: relative;
  background: var(--cream);
  color: var(--ink-90);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.modal-open { overflow: hidden; }
h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
main { display: block; position: relative; }

/* Paper grain over the whole page, exactly as Framer layers it
   (8% opacity, 192px tile, above unpositioned content). */
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.08;
  background: url("/assets/img/grain.png") left top / 192px auto repeat;
}

/* Progressive blur pinned to the bottom 22% of the viewport. */
.pblur {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.pblur > div { position: absolute; inset: 0; pointer-events: none; }
.pblur > div:nth-child(1) { z-index: 1; -webkit-backdrop-filter: blur(0.078125px); backdrop-filter: blur(0.078125px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%); }
.pblur > div:nth-child(2) { z-index: 2; -webkit-backdrop-filter: blur(0.15625px); backdrop-filter: blur(0.15625px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%); }
.pblur > div:nth-child(3) { z-index: 3; -webkit-backdrop-filter: blur(0.3125px); backdrop-filter: blur(0.3125px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%); }
.pblur > div:nth-child(4) { z-index: 4; -webkit-backdrop-filter: blur(0.625px); backdrop-filter: blur(0.625px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%); }
.pblur > div:nth-child(5) { z-index: 5; -webkit-backdrop-filter: blur(1.25px); backdrop-filter: blur(1.25px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%); }
.pblur > div:nth-child(6) { z-index: 6; -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); }
.pblur > div:nth-child(7) { z-index: 7; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #000 87.5%, #000 100%); }
.pblur > div:nth-child(8) { z-index: 8; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, #000 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, #000 100%); }

/* ---- Type presets ---- */
.t-body { font-family: var(--sans); font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-90); }
.t-h2 { font-family: var(--serif); font-size: 40px; line-height: 1.2; letter-spacing: 0; color: var(--ink); }
.t-mono { font-family: var(--mono); font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: 0; }
.t-display { font-family: var(--display); font-weight: 400; font-size: 72px; line-height: 1; letter-spacing: -0.02em; }
.stack-p > p + p { margin-top: 10px; }
/* Framer balances only these blocks; everything else wraps greedily. */
.hero .lead, .why .stack-p > p, .exp-text .stack-p > p, .why h2, .sticky-text h2, .how-head h2, .faq-head h2, .err-content h1, .post-head h1 { text-wrap: balance; }

/* Word-by-word appear (hero h1, statement h2) */
.w { display: inline-block; opacity: 0.001; filter: blur(5px); transform: translateY(10px); transition: opacity 1.2s var(--ease-out), filter 1.2s var(--ease-out), transform 1.2s var(--ease-out); }
.is-in .w { opacity: 1; filter: blur(0); transform: none; }

/* Generic appear-on-scroll */
[data-appear] { opacity: 0.001; transform: translateY(10px); transition: opacity var(--appear), transform var(--appear); will-change: opacity, transform; }
[data-appear="fade"] { transform: none; }
[data-appear="up25"] { transform: translateY(25px); }
[data-appear="up32"] { transform: translateY(32px); }
[data-appear].is-in { opacity: 1; transform: none; }

/* ---- Chips ---- */
.chip {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--peach-20);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
}
.chip-dot { width: 8px; height: 8px; border-radius: 100px; background: var(--peach); flex: none; }
.chip--glass { background: rgba(0, 0, 0, 0.2); color: var(--white); }
.chip--card { background: var(--cream); }
.chip-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 24px; }
.chip-row::before, .chip-row::after { content: ""; width: 69px; height: 1px; flex: none; opacity: 0.5; }
.chip-row::before { background: linear-gradient(90deg, rgba(84, 84, 84, 0) 0%, rgba(0, 0, 0, 0.5) 100%); }
.chip-row::after { background: linear-gradient(270deg, rgba(84, 84, 84, 0) 0%, rgba(0, 0, 0, 0.5) 100%); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 17px 10px 20px;
  border: 0;
  border-radius: 100px;
  background: var(--btn);
  box-shadow: 0 4px 20px 0 var(--btn-shadow);
  color: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover { background: rgb(61, 61, 61); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2); }
.btn svg { width: 20px; height: 20px; flex: none; }
.icon-chat { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 5px 24px 5px 5px;
  border: 0;
  border-radius: 50px;
  background: var(--white);
  color: var(--pill-text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out);
}
.btn-pill:hover { transform: translateY(-1px); }
.btn-pill-circle { width: 40px; height: 40px; border-radius: 35px; background: var(--pill-circle); display: flex; align-items: center; justify-content: center; color: var(--white); flex: none; }
.btn-pill-circle svg { width: 18px; height: 18px; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 26px 0;
  color: var(--white);
}
.nav-bg {
  position: absolute;
  inset: 0;
  background: var(--cream);
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-inner {
  position: relative;
  max-width: 1128px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 40px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; border-radius: 32px; }
.nav-mark { width: 40px; height: 40px; display: block; overflow: visible; }
.nav-mark ellipse { stroke-dasharray: 270.32; stroke-dashoffset: 0; animation: eka-knot-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) both; }
.nav-mark ellipse:nth-child(2) { animation-delay: 0.45s; }
.nav-mark ellipse:nth-child(3) { animation-delay: 0.9s; }
.nav-mark ellipse:nth-child(4) { animation-delay: 1.35s; }
@keyframes eka-knot-draw { from { stroke-dashoffset: 270.32; } to { stroke-dashoffset: 0; } }
.nav-wordmark { font-family: var(--sans); font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, 0.8); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  display: block;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap;
}
.nav-cta {
  width: 40px; height: 40px;
  padding: 10px;
  border: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.nav-cta svg { width: 20px; height: 20px; }
.nav-cta:hover { background: var(--btn); }
.nav-menu-btn, .nav .nav-socials { display: none; }

/* Scrolled: fixed, cream scrim, ink text, orange mark + CTA */
.nav.is-scrolled {
  position: fixed;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: var(--ink);
  animation: nav-in 0.3s ease both;
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.nav.is-scrolled .nav-bg { opacity: 1; }
.nav.is-scrolled .nav-mark ellipse { stroke: var(--accent); animation: none; }
.nav.is-scrolled .nav-wordmark { color: var(--ink); }
.nav.is-scrolled .nav-links a { color: var(--ink); }
.nav.is-scrolled .nav-cta { background: var(--btn); }
.nav.is-scrolled .nav-menu-btn span { background: var(--ink); }
.nav--static.is-scrolled { position: absolute; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  padding: 96px 60px 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-40px, 40px) scale(1.2);
  transition: transform 1.2s cubic-bezier(0.44, 0, 0.56, 1);
}
.is-in .hero-bg img { transform: none; }
.hero-shade {
  position: absolute;
  left: 0; top: 28.625%;
  width: 100%; height: 100%;
  z-index: 1;
  background: radial-gradient(50% 17% at 48.8% 26.8%, rgba(25, 65, 85, 0.07) 0% 33.9389%, rgba(25, 65, 85, 0.03) 69.2046%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.hero-text { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: 72px; line-height: 1; letter-spacing: -0.02em; color: var(--white); text-align: center; }
.hero h1 .w { filter: blur(3px); transform: translateY(5px); }
.hero.is-in h1 .w { filter: blur(0); transform: none; }
.hero .lead { max-width: 800px; text-align: center; color: var(--white); }
.hero .chip, .hero .lead, .hero .btn { opacity: 0.001; transition: opacity 1.2s var(--ease-out) 0.1s; }
.hero.is-in .chip, .hero.is-in .lead, .hero.is-in .btn { opacity: 1; }
.hero.is-in .btn { transition: opacity 1.2s var(--ease-out) 0.1s, background-color 0.25s ease, box-shadow 0.25s ease; }

/* ============================================================
   Why
   ============================================================ */
.why {
  position: relative;
  height: 100vh;
  min-height: 640px;
  padding: 120px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgb(242, 246, 255) 0%, rgba(170, 125, 255, 0) 23.0166%, rgba(163, 192, 212, 0) 100%);
  overflow: visible;
}
.why-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0) 16.1402%);
  mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0) 16.1402%);
}
.why-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate(-40px, 40px) scale(1.2); transition: transform 1.2s cubic-bezier(0.44, 0, 0.56, 1); }
.why-bg.is-in img { transform: none; }
.why-content { position: relative; z-index: 4; width: 100%; max-width: 1128px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.why h2 { max-width: 720px; text-align: center; }
.why .stack-p { max-width: 700px; text-align: center; margin-top: 32px; }

/* ============================================================
   Sticky statement
   ============================================================ */
.sticky { position: relative; height: 200vh; }
.sticky-frame {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
}
.sticky-band {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(247, 252, 252, 0) 0%, rgb(255, 154, 125) 44.5632%, rgb(254, 167, 139) 57.2569%, rgba(247, 252, 252, 0) 100%);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.sticky-text { position: relative; width: 100%; height: 126px; }
.sticky-text h2 {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 72px);
  max-width: 1368px;
  text-align: center;
  transition: opacity 0.8s ease, filter 0.8s ease;
}
.sticky-a { color: var(--ink-quote); }
.sticky-b { color: var(--white); opacity: 0; filter: blur(5px); }
.sticky-text .w { transition-duration: 0.9s; }
.sticky.is-second .sticky-band { opacity: 1; }
.sticky.is-second .sticky-a { opacity: 0; filter: blur(5px); }
.sticky.is-second .sticky-b { opacity: 1; filter: blur(0); }
.sticky-trigger { height: 100vh; }

/* ============================================================
   The experience
   ============================================================ */
.experience {
  position: relative;
  max-width: 1128px;
  margin: 0 auto;
  height: 100vh;
  min-height: 640px;
  padding: 100px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: clip;
}
.exp-content { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; }
.exp-text { display: flex; flex-direction: column; align-items: center; gap: 54px; width: 100%; padding: 0 16px 16px; }
.exp-text h2 { max-width: 968px; text-align: center; }
.exp-text .stack-p { max-width: 720px; text-align: center; }

/* ---- Features ---- */
.features { display: flex; flex-direction: column; width: 100%; }
.feature {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}
.feature-media { flex: 1 1 50%; min-width: 0; height: 640px; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-text {
  flex: 1 1 50%;
  min-width: 0;
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
.feature-copy { display: flex; flex-direction: column; gap: 17px; }
.feature-copy > p + p { margin-top: 0; } /* the 17px flex gap is the paragraph spacing here */
.feature-copy h2 { text-align: left; }
.feature-badge { display: flex; }
.feature-detail { width: 100%; height: 21px; } /* empty "Detail" row Framer leaves under features 2 and 3 */
.feature--rails::before, .feature--rails::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(62, 46, 84, 0.1);
}
.feature--rails::before { left: 0; }
.feature--rails::after { right: 0; }

/* ============================================================
   How it works
   ============================================================ */
.how {
  position: relative;
  max-width: 1128px;
  margin: 0 auto;
  padding: 100px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 71px;
}
.how-head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.how-head h2 { max-width: 1000px; text-align: center; }
.steps-wrap { width: 100%; max-width: 1200px; }
.steps {
  position: relative;
  max-width: 543px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 54px;
}
.steps::before {
  content: "";
  position: absolute;
  left: 25px; top: 5px; bottom: 3px;
  width: 1px;
  background: rgba(10, 37, 64, 0.14);
}
.step { position: relative; display: flex; align-items: flex-start; gap: 36px; min-height: 140px; }
.step-num-wrap { padding-top: 3px; flex: none; }
.step-num {
  width: 50px; height: 50px;
  border-radius: 100px;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "cv03", "cv04", "cv09", "cv11";
  color: var(--accent);
}
.step-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
.step-body h3 { font-family: var(--sans); font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: 0; color: var(--ink); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: 100px 10px; display: flex; justify-content: center; }
.faq-contain { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.faq-contain::after { content: ""; display: block; } /* Framer leaves a trailing gap below the list */
.faq-head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.faq-head h2 { max-width: 520px; text-align: left; }
.faq-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.faq-item { background: var(--white); border-radius: 12px; box-shadow: var(--card-shadow); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.faq-q-text { flex: 1 1 auto; padding: 0; font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-90); }
.faq-icon {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 360px;
  background: var(--peach-20);
  transition: transform 0.3s ease;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--accent);
  border-radius: 160px;
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 13px; transform: translate(-50%, -50%); transition: opacity 0.2s ease; }
.faq-item.is-open .faq-q { align-items: flex-start; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a-inner { padding: 4px 16px 16px; }
.faq-a-inner p { font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-90); }
.faq-a-inner p + p { margin-top: 22.4px; }
.faq-a-inner p.tight { margin-top: 0; }

/* ============================================================
   CTA band
   ============================================================ */
.cta { padding: 100px; display: flex; justify-content: center; overflow: hidden; }
.cta-contain {
  width: 100%;
  max-width: 1160px;
  padding: 120px 40px;
  border-radius: 32px;
  background: linear-gradient(rgba(87, 207, 207, 0) 0%, rgb(255, 154, 125) 0%, rgb(254, 167, 139) 45.0919%, rgba(247, 252, 252, 0) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.cta h2 { width: 100%; max-width: 682px; color: var(--white); text-align: center; }
.cta-btn { display: flex; justify-content: center; }
.cta .br-phone { display: none; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--slate); padding: 60px 64px 0; display: flex; justify-content: center; color: var(--white); }
.footer-inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 62px; }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 408px; }
.footer-logo img { height: 24px; width: auto; opacity: 0.8; }
.footer-tag { font-size: 14px; line-height: 1; letter-spacing: -0.01em; color: var(--white); }
.socials { display: flex; align-items: center; gap: 6px; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 0.7px solid rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  transition: background-color 0.2s ease;
}
.socials a:hover { background: rgba(255, 255, 255, 0.3); }
.socials .ig { width: 18px; height: 18px; }
.socials .tt { width: 20px; height: 20px; }
.footer-cols { display: flex; align-items: flex-start; gap: 62px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer-col h4 { font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.5); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; line-height: 1; }
.footer-col a { position: relative; display: block; font-size: 14px; line-height: 1; letter-spacing: -0.01em; color: var(--white); white-space: nowrap; }
.footer-col a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--white); transition: width 0.3s var(--ease-out); }
.footer-col a:hover::after { width: 100%; }
.footer-bottom { min-height: 60px; padding: 18px 0; border-top: 0.75px dashed rgba(255, 255, 255, 0.1); }

/* ============================================================
   Signup modal (EkaSignupFlow)
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.modal-backdrop.is-open { display: flex; }
.modal-card {
  position: relative;
  line-height: normal;
  width: 100%;
  min-width: 280px;
  max-width: 440px;
  margin: auto;
  padding: 28px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: Inter, sans-serif;
  color: #1a1a1a;
  letter-spacing: 0;
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f5f5f5;
  color: #555;
  font-size: 16px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.modal-form { display: flex; flex-direction: column; gap: 18px; }
.modal-form[hidden] { display: none; }
.modal-h2 { font-size: 20px; font-weight: 700; line-height: 1.2; color: #1a1a1a; }
.modal-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #555; }
.modal-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.modal-input {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  color: #1a1a1a;
  outline: none;
  background: #fff;
}
.modal-input.is-invalid { border-color: rgb(220, 38, 38); }
.modal-terms { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 400; cursor: pointer; }
.modal-terms input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; }
.modal-terms span { color: #333; line-height: 1.4; }
.modal-terms a { color: var(--accent); text-decoration: underline; }
.modal-error { color: rgb(220, 38, 38); font-size: 12px; font-weight: 500; }
.modal-cta {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 100px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #d9d9d9;
  cursor: not-allowed;
  pointer-events: none;
  transition: background 0.2s ease;
}
.modal-cta.is-live { background: var(--accent); cursor: pointer; pointer-events: auto; }
.modal-warn {
  background: #fff3ee;
  border: 1px solid #ffd8cb;
  border-radius: 14px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #8a3b22;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-outline {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.modal-open-chrome { padding: 8px 16px; align-self: flex-start; }
.modal-linkish { border: 0; background: none; color: #777; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; font-family: inherit; align-self: flex-start; }
.modal-copy-box { border: 1px solid #eee; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.modal-copy-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.modal-copy-label { font-size: 11px; color: #999; font-weight: 600; }
.modal-copy-value { font-size: 14px; font-weight: 600; }
.modal-copy-divider { height: 1px; background: #eee; }
.modal-copy-msg-wrap { display: flex; flex-direction: column; gap: 8px; }
.modal-copy-msg { background: #f5f5f5; border-radius: 14px; padding: 12px; font-size: 13px; line-height: 1.4; }
.modal-copy-msg-wrap .modal-outline { align-self: flex-start; }
.modal-expiry { font-size: 12px; color: #999; }
[hidden] { display: none !important; }

/* ============================================================
   Secondary pages: pay, 404, legal, blog
   ============================================================ */
.page-hero-bg { position: absolute; top: 0; left: 0; right: 0; height: 100vh; min-height: 640px; z-index: 0; overflow: hidden; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.pay-main {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  height: 100vh;
  min-height: 640px;
  padding: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pay-card {
  width: 100%;
  max-width: 570px;
  padding: 48px 64px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.pay-spinner { width: 52px; height: 52px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; animation: pay-spin 1.6s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
.pay-card h2 { width: 100%; font-size: 40px; line-height: 48px; text-align: center; }
.pay-card p { font-size: 18px; line-height: 1.6; color: var(--ink); letter-spacing: 0; }

/* /subscribed: the checkout return card. Same pill as /pay but 810 wide; the
   success check is 52px peach, the canceled/expired/error circle-x is 72px white. */
.sub-card { max-width: 810px; }
.sub-card p { width: 100%; max-width: 634px; }
.sub-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex: none; }
.sub-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sub-icon .sub-icon-success { stroke: var(--peach); }
.sub-icon .sub-icon-problem { stroke: var(--white); display: none; }
.sub-card.is-problem .sub-icon { width: 72px; height: 72px; }
.sub-card.is-problem .sub-icon .sub-icon-success { display: none; }
.sub-card.is-problem .sub-icon .sub-icon-problem { display: block; }

.err-main {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  height: 100vh;
  min-height: 640px;
  padding: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.err-bg {
  position: absolute;
  inset: 0;
  background: rgb(147, 198, 225);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.776) 62.6448%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.776) 62.6448%, rgba(0, 0, 0, 0) 100%);
}
.err-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.err-content h1 { max-width: 710px; color: var(--white); text-align: center; }
.err-content h3 { max-width: 800px; font-family: var(--sans); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--white); }

.legal-page { position: relative; }
.legal-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgb(147, 198, 225);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0) 100%);
}
.legal-main { position: relative; max-width: 1200px; margin: 0 auto; }
.legal {
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.legal-title { padding: 0 0 48px; text-align: center; }
.legal-title h1 { color: var(--white); text-align: center; }
.legal-card { border-radius: 16px; padding: 32px; background: var(--white); }
.legal-card--intro { background: rgb(247, 252, 252); }
.legal-card p { font-family: var(--sans); font-size: 16px; line-height: 1.2; letter-spacing: 0; color: #000; }
.legal-card p:empty::before { content: ""; display: inline-block; }
.legal-card a { color: rgb(0, 153, 255); text-decoration: underline; }

.post {
  background: var(--slate);
  padding: 140px 20px 120px;
  display: flex;
  justify-content: center;
  color: var(--white);
}
.post-inner { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 32px; }
.post-back, .post-nav a { font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.8); }
.post-head { display: flex; flex-direction: column; gap: 12px; }
.post-head h1 { color: var(--white); }
.post-date { font-size: 14px; line-height: 1; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.8); opacity: 0.5; }
.post-cover { width: 100%; height: 400px; border-radius: 16px; object-fit: cover; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; }
.post-nav a { line-height: 1; }
.post-nav .next { margin-left: auto; text-align: right; }

/* ============================================================
   Tablet: 810 to 1199.98
   ============================================================ */
@media (max-width: 1199.98px) {
  .sub-main { padding: 24px; }
  .sub-card, .sub-card p { max-width: none; }
  .nav { padding: 16px 0; }
  .nav-inner { padding: 0 20px; height: 33px; }
  .nav-logo { gap: 10px; }
  .nav-wordmark { font-size: 16px; color: rgba(255, 255, 255, 0.9); }
  .nav-links, .nav-cta { display: none; }
  .nav-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 32px; height: 33px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .nav-menu-btn span { display: block; width: 20px; height: 2px; margin: 0 auto; border-radius: 1px; background: var(--white); transition: transform 0.3s ease, background-color 0.2s ease; }
  .nav-socials { display: none; }

  /* Open menu: translucent panel over the page */
  .nav.is-open {
    position: fixed;
    background: rgba(10, 14, 20, 0.2);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--white);
    animation: none;
  }
  .nav.is-open .nav-bg { opacity: 0; }
  .nav.is-open .nav-inner { padding: 0 24px; height: auto; flex-wrap: wrap; gap: 24px; }
  .nav.is-open .nav-logo { height: 33px; }
  .nav.is-open .nav-mark ellipse { stroke: var(--white); }
  .nav.is-open .nav-wordmark { color: rgba(255, 255, 255, 0.8); }
  .nav.is-open .nav-menu-btn { order: 1; }
  .nav.is-open .nav-menu-btn span { background: var(--white); }
  .nav.is-open .nav-menu-btn span:nth-child(1) { transform: translateY(4px) rotate(-45deg); }
  .nav.is-open .nav-menu-btn span:nth-child(2) { transform: translateY(-4px) rotate(45deg); }
  .nav.is-open .nav-links { order: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 8px 0; }
  .nav.is-open .nav-links a { color: var(--white); }
  .nav.is-open .nav-socials { order: 3; display: flex; justify-content: center; width: 100%; padding: 0 0 8px; }

  .why { height: auto; min-height: 0; }
  .how { min-height: 100vh; justify-content: center; }
  .steps::before { left: 20px; bottom: 5px; }
  .step { gap: 20px; min-height: 200px; }
  .step-num { width: 40px; height: 40px; }
  .footer { padding: 60px 32px 0; }
  .faq { padding: 60px 24px; }
  .faq-contain { gap: 50px; }
  .cta { padding: 100px 24px; }
  .cta-contain { padding: 80px 40px; }
  .cta h2 { max-width: 467px; }
}

/* ============================================================
   Phone: up to 809.98
   ============================================================ */
@media (max-width: 809.98px) {
  .t-h2, .why h2, .exp-text h2, .feature-copy h2, .how-head h2, .faq-head h2, .cta h2 { font-size: 36px; }
  .hero { padding: 96px 16px 72px; }
  .hero h1 { font-size: 68px; }
  .why { height: 100vh; min-height: 640px; padding: 80px 16px; }
  .sticky-text h2 { width: calc(100% - 20px); }
  .experience { height: auto; min-height: 0; padding: 80px 16px; }
  .exp-content { gap: 60px; }

  .feature { flex-direction: column; }
  .feature-media { flex: none; width: 100%; height: 400px; order: 2; }
  .feature-text { flex: none; width: 100%; padding: 64px 24px; order: 1; }

  .how { padding: 80px 16px; }
  .steps { gap: 32px; }

  .faq { padding: 50px 16px; }
  .faq-contain { gap: 30px; }
  .faq-head h2 { text-align: center; }

  .cta { padding: 80px 16px; }
  .cta-contain { padding: 80px 20px; }
  .cta h2 { max-width: none; }
  .cta .br-phone { display: inline; }
  .btn-pill { padding: 5px 16px 5px 5px; gap: 8px; }
  .btn-pill-circle { width: 34px; height: 34px; }

  .footer { padding: 60px 20px 0; }
  .footer-top { flex-direction: column; align-items: center; gap: 62px; }
  .footer-brand { align-items: center; gap: 24px; max-width: none; }
  .footer-tag { color: rgba(255, 255, 255, 0.8); }
  .socials { gap: 12px; }
  .footer-cols { flex-direction: column; align-items: center; }
  .footer-col { align-items: center; }
  .footer-col ul { align-items: center; }

  .pay-main, .err-main { padding: 80px 16px; }
  .legal { padding: 80px 20px; }
  .legal-card { padding: 20px; }
  .post-cover { height: 400px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 60px; }
  .legal-title h1, .err-content h1, .post-head h1 { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .w, [data-appear], .hero-bg img, .why-bg img, .nav-mark ellipse { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero .chip, .hero .lead, .hero .btn { opacity: 1; }
}

/* Word-animated headlines keep their container visible; only the words move. */
[data-appear="words"] { opacity: 1; transform: none; }
.br-desk { display: inline; }
@media (max-width: 809.98px) { .br-desk { display: none; } }

/* ============================================================
   Homepage (body.hp) — "Eka for Newcomers" design, 2026-09-13.
   Scoped to body.hp with an hp- prefix so the Framer port above
   keeps driving every other page. Values are taken literally from
   the design artboards (1440px Desktop, 390px Main).
   ============================================================ */
/* Self-hosted homepage fonts (GLOW-834). These were loaded from
   fonts.googleapis.com with display=swap, which flashed the fallback face on the
   hero headline before Bricolage arrived. Files are the latin subsets Google
   serves, saved in assets/fonts/ (see LICENSE.md there). Both are variable, so
   one file covers every weight the page uses and font-optical-sizing: auto
   drives Bricolage's opsz axis from the font size, as it did before. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Size-adjusted local fallbacks, so the brief moment before the webfont paints
   holds the same line box and line breaks instead of reflowing. Measured against
   Helvetica Neue Regular with fontTools: size-adjust is the ratio of the
   frequency-weighted average advance width, the overrides restate the webfont's
   own hhea metrics at that adjusted size. Bricolage was measured at wght 500
   opsz 96, the hero headline's instance; Hanken at wght 400. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 95.60%;
  ascent-override: 97.28%;
  descent-override: 28.24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 100.31%;
  ascent-override: 99.69%;
  descent-override: 30.21%;
  line-gap-override: 0%;
}

body.hp {
  --hp-ink: #141b3d;
  --hp-mute: #465a70;
  --hp-orange: #ff6038;
  --hp-orange-dark: #d64a24;
  --hp-kicker: #7f95a6;
  --hp-hair: rgba(20, 27, 61, 0.14);
  --hp-card-shadow: 0 18px 50px rgba(20, 27, 61, 0.08), 0 2px 6px rgba(20, 27, 61, 0.04);
  --hp-head: "Bricolage Grotesque", "Bricolage Fallback", "Helvetica Neue", Arial, sans-serif;
  --hp-body: "Hanken Grotesk", "Hanken Fallback", "Helvetica Neue", Arial, sans-serif;
  --hp-pad: 64px;
  /* Backgrounds run edge to edge; only the content is constrained. At 1440 this
     is the artboard's 64px gutter, wider than that it centres 1312px. */
  --hp-content: 1312px;
  --hp-gutter: max(var(--hp-pad), calc((100% - var(--hp-content)) / 2));
  --hp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Height of the skyline band. The hero spacer is derived from it, so the
     copy centres against the top of the city rather than a magic number. */
  --hp-city-h: clamp(220px, 30vh, 320px);
  background: linear-gradient(180deg, #f4f9fd 0%, #f4f9fd 16%, #ffffff 32%, #eaf5fb 50%, #ffffff 66%, #edf6fc 84%, #ffffff 100%);
  color: var(--hp-ink);
  font-family: var(--hp-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: normal;
  overflow-x: hidden;
}
body.hp a { color: inherit; }
body.hp a:hover { color: var(--hp-orange-dark); }
body.hp main { width: 100%; }
body.hp img { max-width: 100%; }
.hp-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.hp [id] { scroll-margin-top: 96px; }

/* Hold the hero copy until the webfonts are ready, so "Find your people."
   never paints in the fallback face. html.fonts-ready is added by the inline
   script in index.html, or by its 1500ms timeout, whichever comes first; a
   noscript rule in the same head covers JavaScript being off. The rest of the
   page keeps the existing [data-appear] reveal. */
body.hp .hp-hero-copy > * { opacity: 0; }
html.fonts-ready body.hp .hp-hero-copy > * {
  opacity: 1;
  transition: opacity 0.32s var(--hp-ease);
}
@media (prefers-reduced-motion: reduce) {
  html.fonts-ready body.hp .hp-hero-copy > * { transition: none; }
}

/* ---- shared type ---- */
.hp-h1 { font-family: var(--hp-head); font-size: 96px; line-height: 0.96; letter-spacing: -0.025em; font-weight: 500; color: var(--hp-ink); text-wrap: balance; }
.hp-h2 { font-family: var(--hp-head); font-size: 56px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 500; color: var(--hp-ink); text-wrap: balance; }
.hp-h3 { font-family: var(--hp-head); font-size: 36px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 500; color: var(--hp-ink); text-wrap: balance; }
.hp-p { font-size: 18px; line-height: 1.6; color: var(--hp-mute); text-wrap: pretty; max-width: 560px; }
.hp-eyebrow {
  display: flex; align-self: flex-start; align-items: center; gap: 10px;
  font-family: var(--hp-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-mute);
}
.hp-eyebrow--center { align-self: center; }
.hp-dot { display: block; width: 8px; height: 8px; background: var(--hp-orange); border-radius: 999px; flex: none; }
.hp-tint { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hp-tint--right { background: radial-gradient(50% 42% at 88% 42%, rgba(95, 189, 230, 0.2) 0%, rgba(95, 189, 230, 0) 70%); }
.hp-tint--left  { background: radial-gradient(50% 42% at 10% 58%, rgba(95, 189, 230, 0.18) 0%, rgba(95, 189, 230, 0) 70%); }
.hp-tint--warm  { background: radial-gradient(44% 42% at 90% 58%, rgba(255, 150, 112, 0.22) 0%, rgba(255, 150, 112, 0) 70%); }

/* ---- Text Eka button ---- */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 21px;
  background: var(--hp-orange); color: #ffffff;
  border: 0; border-radius: 999px;
  font-family: var(--hp-body); font-size: 15px; font-weight: 600; letter-spacing: 0.005em;
  white-space: nowrap; flex: none; cursor: pointer;
  transition: background-color 0.2s ease;
}
.hp-btn:hover { background: var(--hp-orange-dark); color: #ffffff; }
.hp-btn svg { display: block; flex: none; width: 17px; height: 17px; }
.hp-btn--lg { height: 56px; padding: 0 26px; font-size: 17px; }
.hp-btn--lg svg { width: 19px; height: 19px; }
.hp-btn--md { height: 52px; padding: 0 24px; font-size: 15px; }
.hp-btn--md svg { width: 18px; height: 18px; }
.hp-btn--block { width: 100%; }

/* ---- Nav ---- */
body.hp .nav {
  position: sticky; top: 0; left: auto; right: auto;
  z-index: 20; padding: 0; color: var(--hp-ink);
  background: transparent; border: 0; box-shadow: none;
}
/* The blur and tint live on a pseudo-element so the mask that softens the
   bar's bottom edge cannot fade the nav's own content. No border, no shadow:
   the bar dissolves into the page instead of drawing a line. */
body.hp .nav::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  transition: background-color 0.25s ease;
}
body.hp .nav.is-scrolled { position: sticky; animation: none; background: transparent; box-shadow: none; }
body.hp .nav.is-scrolled::before { background: rgba(255, 255, 255, 0.35); }
body.hp .nav .hp-nav-inner { position: relative; z-index: 1; }
.hp-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 80px; padding: 0 var(--hp-gutter);
}
.hp-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--hp-ink); }
.hp-logo:hover { color: var(--hp-ink); }
.hp-logo-word { font-family: var(--hp-head); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--hp-ink); }
.hp-nav-links { display: flex; gap: 32px; font-size: 15px; font-weight: 500; color: var(--hp-mute); }
.hp-nav-links a { color: var(--hp-mute); }
.hp-btn--nav { height: 46px; }

/* knot mark: stroke draw + fade/scale in + slow rotate drift (Framer component) */
.hp-knot { width: 32px; height: 33px; display: block; flex: none; overflow: visible; transform-origin: 50% 50%; animation: hp-knot-fade 0.9s var(--hp-ease) both, hp-knot-drift 14s ease-in-out 1.6s infinite; }
.hp-knot--sm { width: 24px; height: 25px; }
.hp-knot ellipse { stroke-dasharray: 270.3231085646602; stroke-dashoffset: 0; animation: hp-knot-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) both; }
.hp-knot ellipse:nth-child(2) { animation-delay: 0.45s; }
.hp-knot ellipse:nth-child(3) { animation-delay: 0.9s; }
.hp-knot ellipse:nth-child(4) { animation-delay: 1.35s; }
@keyframes hp-knot-fade { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes hp-knot-draw { from { stroke-dashoffset: 270.3231085646602; } to { stroke-dashoffset: 0; } }
@keyframes hp-knot-drift { 0% { transform: rotate(0deg); } 25% { transform: rotate(2deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } }

/* ---- Hero ---- */
.hp-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: -80px; padding-top: 80px;
  background:
    radial-gradient(64% 40% at 72% 78%, rgba(255, 150, 112, 0.5) 0%, rgba(255, 150, 112, 0) 70%),
    radial-gradient(46% 32% at 12% 76%, rgba(255, 190, 168, 0.5) 0%, rgba(255, 190, 168, 0) 70%),
    linear-gradient(180deg, #ffffff 0%, #f1f8fd 18%, #cfe8f7 54%, #e8f3fb 80%, #f4f9fd 100%);
}
/* paper grain, reusing the site's existing tile */
.hp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.06; background: url("/assets/img/grain.png") left top / 192px auto repeat;
}
.hp-hero-glow { position: absolute; border-radius: 999px; filter: blur(26px); pointer-events: none; }
.hp-hero-glow--a { left: 4%; top: 20%; width: 260px; height: 64px; background: rgba(255, 255, 255, 0.9); }
.hp-hero-glow--b { left: 56%; top: 10%; width: 340px; height: 74px; background: rgba(255, 255, 255, 0.75); }
.hp-hero-glow--c { left: 76%; top: 28%; width: 300px; height: 60px; background: rgba(255, 255, 255, 0.85); }
.hp-hero-glow--d { left: 28%; top: 42%; width: 420px; height: 66px; background: rgba(255, 255, 255, 0.55); }
.hp-hero-sun {
  position: absolute; left: 66%; bottom: 316px; width: 380px; height: 380px; margin-left: -190px;
  border-radius: 999px; pointer-events: none; mix-blend-mode: screen; filter: blur(8px);
  background: radial-gradient(circle at 50% 50%, rgba(255, 178, 150, 1) 0%, rgba(255, 150, 112, 0.6) 28%, rgba(255, 150, 112, 0) 68%);
}
.hp-birds { position: absolute; right: 8%; top: 104px; width: 170px; height: 45px; pointer-events: none; animation: hp-flock 96s ease-in-out infinite; will-change: transform; }
@keyframes hp-flock {
  0%   { transform: translate(0, 0); }
  22%  { transform: translate(-140px, 26px); }
  48%  { transform: translate(-230px, -18px); }
  74%  { transform: translate(-90px, -40px); }
  100% { transform: translate(0, 0); }
}

/* The skyline is pinned to the hero's bottom edge at any viewport height; the
   sky simply grows above it. assets/img/skyline-city.png is the Framer image
   cropped to the city band and flipped, so the buildings sit along its bottom
   edge and object-position: center bottom holds them there at any width. */
.hp-city {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--hp-city-h);
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 30%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 30%);
}
.hp-city-in { position: absolute; inset: 0; animation: hp-city-in 1.4s var(--hp-ease) both; }
.hp-city img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
@keyframes hp-city-in { from { opacity: 0; transform: translate(-40px, 40px) scale(1.2); } to { opacity: 1; transform: none; } }
/* Soft exit lives BELOW the hero, not over it, so the buildings stay sharp:
   a strip holding the city mirrored and blurred, dissolving into #f4f9fd,
   which is also the colour the next section starts with. No seam either side. */
.hp-strip {
  position: relative; height: 200px; overflow: hidden; pointer-events: none;
  /* the last 30% is flat #f4f9fd, the exact colour the next section starts on,
     and the 1px overlap kills sub-pixel rounding at the join */
  background: linear-gradient(to bottom, #cdd9e2 0%, #e4eef5 40%, #f4f9fd 70%, #f4f9fd 100%);
  margin-bottom: -1px;
}
/* The mask lives on this wrapper, not on the image: a mask set on the <img>
   would be flipped by its own scaleY(-1) and leave residue at the bottom of
   the strip, which is exactly what put a line on the boundary. */
.hp-strip-mirror {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 60%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 60%);
}
.hp-strip-mirror img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  transform: scaleY(-1);
  opacity: 0.55; filter: blur(6px);
}

.hp-hero-copy {
  position: relative; top: 30px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
  padding: 28px var(--hp-gutter) 0;
  /* Centre the block in the sky between the nav and the city. Auto margins on a
     flex item absorb the main-axis free space before flex-grow gets any, so the
     spacer below stays at its minimum and the leftover height splits evenly
     above and below. The padding-top is the floor: the gap under the nav when
     the viewport is too short for any free space at all. */
  margin-block: auto;
}
.hp-hero-sub { font-size: 19px; line-height: 1.6; color: var(--hp-mute); text-wrap: pretty; max-width: 640px; }
.hp-brk { display: inline; }
@media (max-width: 760px) { .hp-brk { display: none; } }
.hp-hero-cta { padding-top: 4px; }
/* No flex-grow: flexible lengths are resolved before auto margins get any free
   space, so a growing spacer would swallow it and leave the copy pinned to the
   top. Height is the city band plus the 40px the button keeps clear of the
   roofline, which is the floor when the viewport is too short to centre. */
.hp-hero-spacer { flex: 0 0 auto; min-height: calc(var(--hp-city-h) + 40px); }

/* ---- Why Eka ---- */
.hp-why { position: relative; display: flex; flex-direction: column; gap: 64px; padding: 96px var(--hp-gutter); }
.hp-strip + section { padding-top: 72px; background: linear-gradient(180deg, #f4f9fd 0%, rgba(244, 249, 253, 0) 260px); }
.hp-why-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.hp-why-head { display: flex; flex-direction: column; gap: 18px; }
.hp-why-head .hp-h2 { max-width: 600px; }
.hp-why-body { display: flex; flex-direction: column; gap: 16px; padding-top: 44px; }
.hp-who { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; }
.hp-who-head { display: flex; flex-direction: column; gap: 12px; }
.hp-who-head .hp-h3 { max-width: 700px; }
.hp-who-head .hp-p { max-width: 640px; }
.hp-who-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
/* The five cards are buttons that open signup, like the sixth element tile.
   Everything below resets the button defaults so they look unchanged. */
.hp-card {
  display: flex; flex-direction: column; gap: 14px; padding: 22px;
  background: rgba(255, 255, 255, 0.85); border: 0; border-radius: 22px;
  box-shadow: var(--hp-card-shadow);
  margin: 0; width: 100%; font: inherit; color: inherit; text-align: left;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hp-card:hover { transform: translateY(-2px); box-shadow: 0 26px 60px rgba(20, 27, 61, 0.14), 0 3px 8px rgba(20, 27, 61, 0.06); }
body.hp .hp-card:focus,
body.hp .hp-card:focus-visible { outline: none; }
.hp-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, #141b3d 0%, #26346a 100%); flex: none; }
.hp-card-icon svg { display: block; width: 20px; height: 20px; }
.hp-card-title { display: block; font-family: var(--hp-head); font-size: 21px; line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; color: var(--hp-ink); }
.hp-card-copy { font-size: 14.5px; line-height: 1.55; color: var(--hp-mute); }

/* ---- Our promise ---- */
.hp-promise { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 80px; align-items: center; padding: 96px var(--hp-gutter); }
.hp-promise-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.hp-promise-text .hp-h2 { max-width: 600px; }
.hp-promise-text .hp-eyebrow + .hp-h2 { margin-top: -4px; }
.hp-elements { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.hp-el-grid { display: grid; grid-template-columns: repeat(4, 118px); grid-template-rows: repeat(2, 164px); gap: 12px; }
.hp-el--1 { grid-row: 1; grid-column: 1; }
.hp-el--2 { grid-row: 1; grid-column: 2; }
.hp-el--3 { grid-row: 1; grid-column: 3; }
.hp-el--4 { grid-row: 2; grid-column: 2; }
.hp-el--5 { grid-row: 2; grid-column: 3; }
.hp-el--6 { grid-row: 2; grid-column: 4; }
.hp-el {
  display: flex; flex-direction: column; width: 118px; height: 164px; padding: 12px;
  background: #ffffff; border: 0; border-radius: 14px; color: var(--hp-ink);
  box-shadow: var(--hp-card-shadow);
}
.hp-el--orange { background: var(--hp-orange); color: #ffffff; box-shadow: 0 16px 32px rgba(255, 96, 56, 0.26); }
.hp-el--ink { background: linear-gradient(135deg, #141b3d 0%, #26346a 100%); color: #ffffff; box-shadow: none; }
.hp-el--ghost { background: transparent; border: 1.5px dashed rgba(20, 27, 61, 0.38); box-shadow: none; }
/* The sixth tile is the one interactive element in the grid: it opens signup. */
button.hp-el { margin: 0; text-align: left; font: inherit; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
button.hp-el:hover { border-color: var(--hp-orange); transform: translateY(-2px); }
button.hp-el:hover .hp-el-dot--dim { opacity: 1; }
body.hp button.hp-el:focus,
body.hp button.hp-el:focus-visible { outline: none; }
.hp-el-top { display: flex; justify-content: space-between; align-items: center; height: 14px; font-family: var(--hp-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--hp-mute); }
.hp-el--orange .hp-el-top { color: rgba(255, 255, 255, 0.82); }
.hp-el--ink .hp-el-top { color: rgba(255, 255, 255, 0.72); }
.hp-el-dot { display: block; width: 6px; height: 6px; border-radius: 999px; background: var(--hp-orange); opacity: 0.9; }
.hp-el--orange .hp-el-dot { background: #ffffff; }
.hp-el-dot--dim { opacity: 0.5; }
.hp-el-sym { height: 48px; display: flex; align-items: flex-end; font-family: var(--hp-head); font-size: 38px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; color: inherit; }
.hp-el-sym--q { font-style: italic; }
.hp-el-name { height: 20px; margin-top: 10px; font-family: var(--hp-body); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; color: inherit; }
.hp-el-note { font-family: var(--hp-body); font-size: 11px; line-height: 1.3; color: var(--hp-mute); text-wrap: pretty; }
.hp-el--orange .hp-el-note { color: rgba(255, 255, 255, 0.82); }
.hp-el--ink .hp-el-note { color: rgba(255, 255, 255, 0.72); }

/* ---- How it works ---- */
.hp-how { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 96px; align-items: start; padding: 96px var(--hp-gutter); }
/* The step rhythm is tightened so this column finishes level with the phone
   beside it: eyebrow to the end of step 03 is the phone's height. */
.hp-how-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; }
.hp-how-head { display: flex; flex-direction: column; gap: 14px; }
.hp-how-head .hp-h2 { max-width: 640px; }
.hp-steps { display: flex; flex-direction: column; gap: 16px; }
.hp-step { display: flex; flex-direction: column; gap: 4px; padding: 16px 0 0; border-top: 1px solid var(--hp-hair); }
.hp-step-num { font-family: var(--hp-head); font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; color: var(--hp-orange); }
.hp-step-title { font-family: var(--hp-head); font-size: 27px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; color: var(--hp-ink); }
.hp-step-copy { font-size: 16.5px; line-height: 1.5; color: var(--hp-mute); text-wrap: pretty; }

/* iPhone mockup */
.hp-phone-wrap { position: relative; z-index: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.hp-phone { width: 340px; padding: 9px; background: #101012; border-radius: 50px; box-shadow: 0 30px 70px rgba(20, 27, 61, 0.24), inset 0 0 0 2px #2a2a2e; flex: none; }
/* Real phone proportions, not the artboard's: the screen is a 9:19 box, so a
   340px frame lands at ~698px tall. The chat fills what is left and is pinned
   to the bottom, cropping at the top the way a scrolled thread does. */
.hp-phone-screen { --hp-hdr: 98px; position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 19; background: #ffffff; border-radius: 40px; overflow: hidden; font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1c1c1e; }
/* iOS status bar: time left, Dynamic Island centred, cellular / Wi-Fi /
   battery right. No carrier text, as on a real device. */
.hp-phone-status { flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 26px 0 30px; }
.hp-phone-time { font-size: 15.5px; font-weight: 600; letter-spacing: 0.01em; color: #1c1c1e; }
.hp-phone-notch { position: absolute; left: 50%; top: 12px; width: 108px; height: 32px; margin-left: -54px; border-radius: 999px; background: #0c0c0e; }
.hp-phone-sig { display: flex; align-items: center; gap: 5px; }
.hp-phone-sig svg { display: block; }
.hp-ios-cell { width: 17px; height: 11px; }
.hp-ios-wifi { width: 16px; height: 12px; }
.hp-ios-batt { width: 25px; height: 12px; }

/* Messages navigation bar. It floats over the thread rather than sitting above
   it, so the previous message shows through the blur the way iOS draws it. */
.hp-phone-head {
  position: absolute; top: 54px; left: 0; right: 0; z-index: 2;
  height: var(--hp-hdr);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 4px 12px 0;
  background: none; border: 0; box-shadow: none;
}
/* Gradient blur, built the way .hp-pblur is: four stacked backdrop-filter
   layers, each masked to an overlapping band, so the glass is strongest behind
   the avatar and almost clear by the bottom where the bubble's text sits. */
.hp-phone-glass { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hp-phone-glass > span { position: absolute; inset: 0; display: block; }
.hp-phone-glass > span:nth-child(1) {
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 24%, rgba(0,0,0,0) 52%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 24%, rgba(0,0,0,0) 52%);
}
.hp-phone-glass > span:nth-child(2) {
  -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 14%, #000 40%, #000 58%, rgba(0,0,0,0) 82%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 14%, #000 40%, #000 58%, rgba(0,0,0,0) 82%);
}
.hp-phone-glass > span:nth-child(3) {
  -webkit-backdrop-filter: blur(0.6px); backdrop-filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 46%, #000 70%, #000 86%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 46%, #000 70%, #000 86%, rgba(0,0,0,0) 100%);
}
.hp-phone-glass > span:nth-child(4) {
  -webkit-backdrop-filter: blur(0.25px); backdrop-filter: blur(0.25px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 74%, #000 94%, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 74%, #000 94%, #000 100%);
}
/* the tint paints last, over the blur layers, and grades lighter downward */
.hp-phone-glass::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(249, 249, 249, 0.30) 0%, rgba(249, 249, 249, 0.22) 55%, rgba(249, 249, 249, 0.10) 100%);
}
.hp-phone-head > * { position: relative; z-index: 1; text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.7); }
.hp-phone-head > .hp-phone-glass { position: absolute; z-index: 0; text-shadow: none; }
.hp-phone-nav-left { flex: none; display: inline-flex; align-items: center; gap: 3px; margin-top: 15px; }
.hp-phone-back { display: block; width: 11px; height: 18px; flex: none; }
.hp-phone-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 999px; background: rgba(120, 120, 128, 0.16);
  color: #1c1c1e; font-size: 12px; font-weight: 600; line-height: 1;
}
.hp-phone-id { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.hp-phone-avatar { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 999px; overflow: hidden; background: #ffffff; }
.hp-phone-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-phone-name { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1; font-weight: 600; color: #1c1c1e; }
.hp-phone-chev { display: block; width: 5px; height: 9px; }
.hp-phone-video { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; margin-top: 16px; }
.hp-phone-video svg { display: block; width: 23px; height: 15px; }
.hp-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; padding: calc(var(--hp-hdr) - 26px) 12px 8px; overflow: hidden; }
/* The one element allowed to be partly hidden. Its whole text line sits behind
   the glass and reads through it; only the bubble's bottom rounded edge shows
   below the hairline, so the line is never cut in half. */
.hp-msg--under { flex: none; }
.hp-msg--under .hp-bubble { padding-bottom: 10px; }
.hp-chat-time { flex: none; align-self: center; padding: 3px 0 1px; font-size: 11px; color: #8e8e93; }
.hp-chat-time b { font-weight: 600; }
.hp-msg { display: flex; }
.hp-msg--them { justify-content: flex-start; padding-right: 40px; }
.hp-msg--me { justify-content: flex-end; padding-left: 40px; }
.hp-bubble { padding: 7px 12px; border-radius: 18px; font-size: 14px; line-height: 1.28; background: #e9e9eb; color: #1c1c1e; }
.hp-msg--me .hp-bubble { background: #4f97c6; color: #ffffff; }
.hp-phone-gap { display: none; }
/* iOS typing indicator: three dots pulsing in sequence, so the thread reads
   as Eka composing the next message. */
.hp-typing { display: inline-flex; align-items: center; gap: 5px; padding: 11px 14px; }
.hp-typing span { display: block; width: 8px; height: 8px; border-radius: 999px; background: #8e8e93; opacity: 0.35; animation: hp-typing 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
/* on the outgoing side the bubble is blue, so the dots go light */
.hp-msg--me .hp-typing span { background: #ffffff; }
.hp-typing span:nth-child(2) { animation-delay: 0.2s; }
.hp-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes hp-typing {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.hp-phone-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 6px; }
.hp-phone-plus { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: #eeeef0; color: #3a3a3c; font-size: 22px; line-height: 1; }
.hp-phone-input { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; height: 40px; padding: 0 12px; border: 1px solid #d1d1d6; border-radius: 999px; }
.hp-phone-input svg { display: block; width: 18px; height: 18px; }
.hp-phone-home { flex: none; height: 14px; }

/* ---- Start here ---- */
.hp-start { position: relative; display: flex; flex-direction: column; gap: 48px; padding: 96px var(--hp-gutter); }
.hp-start-head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }
.hp-start-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hp-start-row .hp-h2 { max-width: 900px; }
.hp-start-cta { display: none; }
.hp-prices { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hp-price { display: flex; flex-direction: column; gap: 18px; padding: 16px; background: #ffffff; border-radius: 26px; box-shadow: var(--hp-card-shadow); }
.hp-price-img { display: block; width: 100%; height: auto; border-radius: 12px; background: #c9d2e6; }
.hp-price-body { display: flex; flex-direction: column; gap: 10px; padding: 6px 12px 16px; }
.hp-price-kicker { height: 16px; line-height: 16px; font-family: var(--hp-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-kicker); }
.hp-price-title { min-height: 48px; font-family: var(--hp-head); font-size: 21px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; color: var(--hp-ink); }
.hp-price-title--accent { color: var(--hp-orange-dark); }
.hp-price-copy { font-size: 15.5px; line-height: 1.6; color: var(--hp-mute); text-wrap: pretty; }

/* ---- Questions ---- */
.hp-faq { position: relative; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 80px; align-items: start; padding: 96px var(--hp-gutter) 112px; }
.hp-faq-head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }
.hp-faq-head .hp-h2 { font-size: 52px; }
body.hp .faq-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0; width: 100%; border-bottom: 1px solid var(--hp-hair); }
/* The item owns the vertical rhythm so nothing snaps on toggle: closed is
   26px + question + 26px, open adds 10px + answer inside the animated panel. */
body.hp .faq-item { background: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--hp-hair); padding: 26px 0; }
body.hp .faq-q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; cursor: pointer; }
body.hp .faq-q-text { flex: 1 1 auto; padding: 0; font-family: var(--hp-head); font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; color: var(--hp-ink); }

/* Icon: two white bars in the orange circle. Closed the second bar stands
   upright (a plus); open it rotates 90deg onto the first one (a minus). */
body.hp .faq-icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--hp-orange); transition: none; }
body.hp .faq-item.is-open .faq-icon { transform: none; }
body.hp .faq-icon::before,
body.hp .faq-icon::after { width: 14px; height: 1.8px; background: #ffffff; border-radius: 2px; opacity: 1; }
body.hp .faq-icon::before { transform: translate(-50%, -50%); }
body.hp .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
body.hp .faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Panel: main.js sets an inline max-height (scrollHeight on open, 0 on close),
   so the height animation rides that property. The inner fades with the class. */
body.hp .faq-a { max-height: 0; overflow: hidden; transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1); }
body.hp .faq-a-inner { padding: 10px 0 0; opacity: 0; transform: translateY(-4px); transition: opacity 240ms ease, transform 240ms ease; }
body.hp .faq-item.is-open .faq-a-inner { opacity: 1; transform: none; }
body.hp .faq-a-inner p { font-family: var(--hp-body); font-size: 16.5px; line-height: 1.6; letter-spacing: normal; color: var(--hp-mute); text-wrap: pretty; max-width: 720px; }

/* ---- Closing band + footer ---- */
.hp-foot {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 96px;
  padding: 104px var(--hp-gutter) 40px;
  background: linear-gradient(135deg, #141b3d 0%, #1c2f66 48%, #0b6d9c 100%);
  color: #ffffff;
}
.hp-foot-top { position: relative; display: flex; align-items: flex-end; }
/* "One billion real human connections." must not wrap: the size follows the
   viewport so the sentence stays on one line from 1000px up. */
.hp-foot-h2 { font-family: var(--hp-head); font-size: clamp(30px, calc((100vw - 140px) / 14.9), 64px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 500; color: #ffffff; max-width: none; }
.hp-foot-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.hp-foot-bar .hp-foot-links { margin-left: auto; }
.hp-foot-logo { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; }
.hp-foot-logo:hover { color: #ffffff; }
.hp-foot-word { font-family: var(--hp-head); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #ffffff; }
.hp-foot-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.hp-foot-legal { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
.hp-foot-links a, .hp-foot-legal a, .hp-foot-legal span { color: rgba(255, 255, 255, 0.62); }
.hp-foot-links a:hover, .hp-foot-legal a:hover { color: #ffffff; }

/* ---- Reveal on scroll (main.js drives [data-appear]) ---- */
body.hp [data-appear] { opacity: 0.001; transform: translateY(10px); transition: opacity 0.7s var(--hp-ease), transform 0.7s var(--hp-ease); }
body.hp [data-appear].is-in { opacity: 1; transform: none; }

/* ============================================================
   Homepage: tablet
   ============================================================ */
@media (max-width: 1180px) {
  body.hp { --hp-pad: 40px; }
  .hp-h1 { font-size: 78px; }
  .hp-h2 { font-size: 46px; }
  .hp-faq-head .hp-h2 { font-size: 44px; }
  .hp-promise { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; }
  .hp-el-grid { grid-template-columns: repeat(3, 118px); grid-template-rows: repeat(2, 164px); }
  .hp-el--1 { grid-row: 1; grid-column: 1; }
  .hp-el--2 { grid-row: 1; grid-column: 2; }
  .hp-el--3 { grid-row: 1; grid-column: 3; }
  .hp-el--4 { grid-row: 2; grid-column: 1; }
  .hp-el--5 { grid-row: 2; grid-column: 2; }
  .hp-el--6 { grid-row: 2; grid-column: 3; }
  .hp-how { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
  .hp-faq { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
  .hp-who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   Homepage: phone (390px artboard)
   ============================================================ */
@media (max-width: 809.98px) {
  body.hp { --hp-pad: 24px; }
  .hp-nav-inner { height: 64px; }
  .hp-nav-links { display: none; }
  .hp-logo-word { font-size: 22px; }
  .hp-knot { width: 28px; height: 29px; }
  .hp-btn--nav { height: 42px; padding: 0 19px; font-size: 14px; }

  .hp-hero { margin-top: -64px; padding-top: 64px; min-height: 100vh; min-height: 100svh;
    background:
      radial-gradient(90% 26% at 70% 78%, rgba(255, 150, 112, 0.5) 0%, rgba(255, 150, 112, 0) 70%),
      linear-gradient(180deg, #ffffff 0%, #f1f8fd 20%, #cfe8f7 58%, #e8f3fb 82%, #f4f9fd 100%);
  }
  .hp-hero-glow--a { left: -10%; top: 22%; width: 220px; height: 50px; background: rgba(255, 255, 255, 0.85); }
  .hp-hero-glow--b { left: 50%; top: 12%; width: 240px; height: 54px; background: rgba(255, 255, 255, 0.7); }
  .hp-hero-glow--c { left: 58%; top: 36%; width: 260px; height: 48px; background: rgba(255, 255, 255, 0.6); }
  .hp-hero-glow--d { display: none; }
  .hp-hero-sun { left: 62%; bottom: 226px; width: 240px; height: 240px; margin-left: -120px; }
  .hp-birds { right: 6%; top: 92px; width: 110px; height: 29px; animation-name: hp-flock-sm; }
  @keyframes hp-flock-sm { 0% { transform: translate(0,0); } 22% { transform: translate(-60px, 14px); } 48% { transform: translate(-110px, -8px); } 74% { transform: translate(-40px, -20px); } 100% { transform: translate(0,0); } }
  body.hp { --hp-city-h: clamp(170px, 25vh, 240px); }
  .hp-city img { object-position: 46% bottom; }
  .hp-strip { height: 140px; }
  .hp-strip-mirror img { object-position: 46% bottom; filter: blur(5px); }
  .hp-hero-copy { gap: 18px; padding: 60px var(--hp-gutter) 0; }
  .hp-h1 { font-size: 54px; line-height: 0.98; }
  .hp-hero-sub { font-size: 16.5px; }
  .hp-hero-cta { padding-top: 2px; }
  .hp-hero-cta .hp-btn { height: 54px; padding: 0 28px; font-size: 16px; }
  .hp-hero-cta .hp-btn svg { width: 18px; height: 18px; }

  .hp-h2 { font-size: 36px; }
  .hp-h3 { font-size: 30px; }
  .hp-p { font-size: 16px; max-width: none; }

  .hp-why { gap: 0; padding: 40px var(--hp-gutter) 56px; }
  .hp-why-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hp-why-head { gap: 14px; }
  .hp-why-head .hp-h2 br + br { display: none; }
  .hp-why-body { padding-top: 0; gap: 14px; }
  .hp-who { gap: 18px; padding-top: 30px; }
  .hp-who-head { gap: 10px; }
  .hp-who-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hp-card-title { font-size: 22px; }
  .hp-card-copy { font-size: 15px; }

  .hp-promise { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 56px var(--hp-gutter); }
  .hp-promise-text { gap: 14px; }
  .hp-elements { justify-content: center; padding-top: 8px; }
  .hp-el-grid { grid-template-columns: repeat(3, minmax(0, 106px)); grid-template-rows: auto auto; gap: 12px; }
  .hp-el--1, .hp-el--2, .hp-el--3, .hp-el--4, .hp-el--5, .hp-el--6 { grid-row: auto; grid-column: auto; }
  .hp-el { width: 106px; height: 150px; padding: 10px; }
  .hp-el-sym { height: 40px; font-size: 30px; }
  .hp-el-name { height: 18px; margin-top: 8px; font-size: 11.5px; }
  .hp-el-note { font-size: 10.5px; }

  .hp-how { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 56px var(--hp-gutter); }
  .hp-how-text { gap: 28px; }
  .hp-how-head { gap: 14px; }
  .hp-steps { gap: 24px; }
  .hp-step { padding-top: 24px; }
  .hp-step-num { font-size: 40px; }
  .hp-step-title { font-size: 26px; }
  .hp-step-copy { font-size: 15.5px; }
  .hp-phone-wrap { padding-top: 12px; }
  .hp-phone { width: 100%; max-width: 320px; }
  .hp-bubble { font-size: 13.5px; }
  /* tighter header on the small frame so the whole thread still fits */
  .hp-phone-screen { --hp-hdr: 88px; }
  .hp-phone-status { height: 48px; padding: 0 22px 0 26px; }
  .hp-phone-head { top: 48px; padding: 4px 10px 0; }
  .hp-phone-nav-left { margin-top: 11px; }
  .hp-phone-video { margin-top: 12px; }
  .hp-phone-avatar { width: 42px; height: 42px; }
  .hp-chat { gap: 2px; padding: calc(var(--hp-hdr) - 26px) 10px 3px; }
  .hp-chat-time { padding: 1px 0 0; }
  .hp-typing { padding: 8px 12px; gap: 4px; }
  .hp-typing span { width: 7px; height: 7px; }

  .hp-start { gap: 24px; padding: 56px var(--hp-gutter); }
  .hp-start-head { gap: 14px; }
  .hp-start-row { display: block; }
  .hp-start-row .hp-btn { display: none; }
  .hp-start-cta { display: block; position: relative; z-index: 1; }
  .hp-prices { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hp-price { padding: 14px; }
  .hp-price-body { padding: 4px 8px 12px; }
  .hp-price-title { min-height: 44px; font-size: 19px; }
  .hp-price-copy { font-size: 15px; }

  .hp-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 56px var(--hp-gutter); }
  .hp-faq-head { gap: 14px; }
  .hp-faq-head .hp-h2 { font-size: 36px; }
  body.hp .faq-item { padding: 20px 0; }
  body.hp .faq-q-text { font-size: 20px; }
  body.hp .faq-a-inner p { font-size: 15.5px; }

  .hp-foot { gap: 36px; padding: 56px var(--hp-gutter) 32px; }
  .hp-foot-top { flex-direction: column; align-items: flex-start; }
  .hp-foot-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hp-foot-bar .hp-foot-links { margin-left: 0; }
}

/* ---- Progressive blur band pinned to the bottom of the viewport ----
   Ported from the live eka.place Framer page: eight stacked backdrop-filter
   layers whose blur doubles, each masked to a band, so the blur ramps from
   nothing at the top of the strip to 10px at the very bottom. z-index 5 keeps
   it under the sticky nav (20) and well under the signup modal (100). */
.hp-pblur {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 250ms ease;
}
.hp-pblur > div { position: absolute; inset: 0; pointer-events: none; }
.hp-pblur > div:nth-child(1) { z-index: 1; -webkit-backdrop-filter: blur(0.078125px); backdrop-filter: blur(0.078125px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%); }
.hp-pblur > div:nth-child(2) { z-index: 2; -webkit-backdrop-filter: blur(0.15625px); backdrop-filter: blur(0.15625px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%); }
.hp-pblur > div:nth-child(3) { z-index: 3; -webkit-backdrop-filter: blur(0.3125px); backdrop-filter: blur(0.3125px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%); }
.hp-pblur > div:nth-child(4) { z-index: 4; -webkit-backdrop-filter: blur(0.625px); backdrop-filter: blur(0.625px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%); }
.hp-pblur > div:nth-child(5) { z-index: 5; -webkit-backdrop-filter: blur(1.25px); backdrop-filter: blur(1.25px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%); }
.hp-pblur > div:nth-child(6) { z-index: 6; -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); }
.hp-pblur > div:nth-child(7) { z-index: 7; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #000 87.5%, #000 100%); }
.hp-pblur > div:nth-child(8) { z-index: 8; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, #000 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, #000 100%); }

/* Very narrow phones: the frame shrinks faster than the copy reflows, so the
   chat needs one more step down to keep the whole thread inside the screen. */
@media (max-width: 479.98px) {
  .hp-hero-cta { width: 100%; }
  .hp-hero-cta .hp-btn { display: flex; width: 100%; padding: 0 25px; }
}

@media (max-width: 359.98px) {
  .hp-phone-screen { --hp-hdr: 73px; }
  .hp-phone-status { height: 42px; padding: 0 18px 0 22px; }
  .hp-phone-time { font-size: 14px; }
  .hp-phone-head { top: 42px; padding: 3px 8px 0; }
  .hp-phone-nav-left { margin-top: 8px; }
  .hp-phone-video { margin-top: 9px; }
  .hp-phone-avatar { width: 34px; height: 34px; }
  .hp-phone-name { font-size: 11px; }
  .hp-phone-badge { min-width: 16px; height: 16px; font-size: 10.5px; padding: 0 5px; }
  .hp-chat-time { font-size: 10px; }
  .hp-chat { gap: 1px; padding: calc(var(--hp-hdr) - 22px) 8px 2px; }
  .hp-msg--under .hp-bubble { padding-bottom: 9px; }
  .hp-chat-time { padding: 0; }
  .hp-bubble { font-size: 12px; padding: 6px 10px; border-radius: 16px; }
  .hp-typing { padding: 7px 10px; }
  .hp-msg--them { padding-right: 28px; }
  .hp-msg--me { padding-left: 28px; }
  .hp-phone-bar { padding: 6px 10px 4px; }
  .hp-phone-plus, .hp-phone-input { height: 34px; }
  .hp-phone-plus { width: 34px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-birds { animation: none; }
  .hp-knot, .hp-knot ellipse, .hp-city-in { animation: none !important; }
  body.hp [data-appear] { transition: none !important; }
  body.hp .faq-a, body.hp .faq-a-inner, body.hp .faq-icon::after { transition: none !important; }
  .hp-typing span { animation: none !important; opacity: 0.7; }
}