/* The homepage sections that used to be built in Instant (For businesses, FAQ,
   the sign up banner, the footer), plus For investors and Contact.

   Instant's own styling left with Shopify, so these take their look from the
   three blocks above them: the same ink, surfaces, hairlines, eyebrow, headline
   and lede as blocks/problem.html and blocks/how-it-works.html, and the same red
   pill as the hero's Open LetsNavi. Every class is ns- prefixed and every rule
   is scoped under .ns, so nothing reaches the blocks. */

.ns {
  --ns-red: #ff1238;
  --ns-red-soft: #ff4e6c;
  --ns-ink: #0a0a0a;
  --ns-surface: #151515;
  --ns-raised: #1b1b1b;
  --ns-line: #232323;
  --ns-text: #e8e8e8;
  --ns-muted: #8a8a8a;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  /* No overflow clip here. A clipped section holding the pitch iframe drew
     hairline white edges on iPhone Safari around the whole section; nothing
     in these sections is wider than the screen, and the page clips once in
     assets/site.css. */
  background: var(--ns-ink);
  color: var(--ns-text);
  padding: clamp(56px, 9vw, 116px) clamp(16px, 5vw, 48px);
}

.ns *,
.ns *::before,
.ns *::after { box-sizing: border-box; }

.ns button { font-family: inherit; }

.ns .ns-wrap { max-width: 1040px; margin: 0 auto; }
.ns .ns-wrap--narrow { max-width: 760px; }
.ns .ns-center { text-align: center; }

.ns .ns-eyebrow {
  margin: 0 0 clamp(16px, 2.4vw, 26px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ns-muted);
}

.ns .ns-headline {
  margin: 0;
  font-size: clamp(26px, 4.6vw, 44px);
  line-height: 1.13;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}

.ns .ns-headline em { font-style: normal; color: var(--ns-red); }

.ns .ns-lede {
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  max-width: 58ch;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.62;
  color: var(--ns-muted);
}

.ns .ns-center .ns-lede { margin-left: auto; margin-right: auto; }

/* ---------- The red pill: the hero's Open LetsNavi ---------- */

.ns .ns-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 34px;
  border: 1px solid var(--ns-red);
  border-radius: 999px;
  background: var(--ns-red);
  box-shadow: 0 10px 34px rgba(255, 18, 56, 0.34);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 100ms ease;
}

.ns .ns-cta:hover {
  background: var(--ns-red-soft);
  border-color: var(--ns-red-soft);
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(255, 18, 56, 0.44);
}

.ns .ns-cta svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }

/* The quiet pill: the replay buttons and the header's Log in. */
.ns .ns-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ns-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}

.ns .ns-ghost:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }

.ns .ns-cta:focus-visible,
.ns .ns-ghost:focus-visible,
.ns a:focus-visible,
.ns summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ns .ns-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(26px, 3.4vw, 38px);
}

.ns .ns-center .ns-actions { justify-content: center; }

.ns .ns-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ns-muted);
}

/* ---------- Cards with ticks (For businesses) ---------- */

.ns .ns-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(36px, 5vw, 56px);
}

.ns .ns-card {
  padding: clamp(22px, 3vw, 30px);
  border-radius: 18px;
  background: var(--ns-surface);
  border: 1px solid var(--ns-line);
}

.ns .ns-card--accent {
  background: linear-gradient(180deg, rgba(255, 18, 56, 0.1), rgba(255, 18, 56, 0.03)), var(--ns-surface);
  border-color: rgba(255, 18, 56, 0.34);
}

.ns .ns-card-label {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ns-red-soft);
}

.ns .ns-card-title {
  margin: 10px 0 0;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.ns .ns-ticks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ns .ns-ticks li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ns-text);
}

.ns .ns-ticks svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: var(--ns-red);
}

/* ---------- The pitch frame (For investors) ---------- */

.ns .ns-pitch {
  margin-top: clamp(32px, 4.6vw, 52px);
  border-radius: 22px;
  padding: 10px;
  background: linear-gradient(160deg, #2a2a2e 0%, #101012 46%, #26262a 100%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.ns .ns-pitch-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ns-ink);
}

.ns .ns-pitch--tall .ns-pitch-screen { min-height: min(78svh, 760px); }

/* The deck draws its own chapter progress as a red bar along its top edge,
   which inside this frame read as a stray red line in the corner. A strip of
   the frame's ink covers it; it takes no taps. */
.ns .ns-pitch-screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: var(--ns-ink);
  pointer-events: none;
  z-index: 1;
}

.ns .ns-pitch iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ns .ns-pitch-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ns-muted);
}

.ns .ns-pitch-bar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ns-text);
  text-decoration: none;
  letter-spacing: 0.08em;
}

.ns .ns-pitch-bar svg,
.ns .ns-ghost svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }
.ns .ns-pitch-bar svg { width: 14px; height: 14px; }

.ns .ns-pitch-bar a:hover { color: #fff; }

/* ---------- FAQ ---------- */

.ns .ns-faq {
  margin-top: clamp(32px, 4.6vw, 52px);
  border-top: 1px solid var(--ns-line);
}

.ns .ns-faq details { border-bottom: 1px solid var(--ns-line); }

.ns .ns-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 2px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(15.5px, 1.8vw, 18px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.ns .ns-faq summary::-webkit-details-marker { display: none; }

.ns .ns-faq summary svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: var(--ns-red);
  transition: transform 200ms ease;
}

.ns .ns-faq details[open] summary svg { transform: rotate(45deg); }

.ns .ns-faq .ns-answer {
  padding: 0 2px 24px;
  max-width: 62ch;
}

.ns .ns-faq .ns-answer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ns-muted);
}

.ns .ns-faq .ns-answer p + p { margin-top: 6px; }
.ns .ns-faq .ns-answer p:first-child { color: var(--ns-text); margin-bottom: 12px; }
.ns .ns-faq .ns-answer strong { color: #fff; font-weight: 700; }

/* ---------- Sign up banner ---------- */

.ns.ns--banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 70% at 50% 100%, rgba(255, 18, 56, 0.16), transparent 70%);
  pointer-events: none;
}

.ns.ns--banner .ns-wrap { position: relative; }

/* ---------- Contact ---------- */

.ns .ns-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(32px, 4.6vw, 52px);
}

.ns .ns-contact a.ns-card {
  display: block;
  text-decoration: none;
  transition: border-color 160ms ease;
}

.ns .ns-contact a.ns-card:hover { border-color: #3a3a3a; }

.ns .ns-contact .ns-card p:last-child {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ns-muted);
}

/* ---------- Footer ---------- */

.ns.ns--footer {
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: 32px;
  border-top: 1px solid var(--ns-line);
}

.ns .ns-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  justify-content: space-between;
  align-items: flex-start;
}

.ns .ns-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ns .ns-brand img { width: 40px; height: 40px; display: block; }

.ns .ns-tag { margin: 12px 0 0; font-size: 14px; color: var(--ns-muted); }

.ns .ns-cols { display: flex; flex-wrap: wrap; gap: 32px 56px; }

.ns .ns-col p {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ns-muted);
}

.ns .ns-col a {
  display: block;
  padding: 5px 0;
  font-size: 14.5px;
  color: var(--ns-text);
  text-decoration: none;
}

.ns .ns-col a:hover { color: var(--ns-red-soft); }

.ns .ns-social { display: flex; gap: 10px; margin-top: 18px; }

.ns .ns-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ns-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}

.ns .ns-social a:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.ns .ns-social svg { width: 18px; height: 18px; fill: currentColor; }

.ns .ns-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--ns-line);
  font-size: 12.5px;
  color: var(--ns-muted);
}

.ns .ns-legal a { color: var(--ns-muted); text-decoration: none; }
.ns .ns-legal a:hover { color: var(--ns-text); }
.ns .ns-legal nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 560px) {
  .ns .ns-actions { flex-direction: column; align-items: stretch; }
  .ns .ns-cta,
  .ns .ns-ghost { justify-content: center; }
  .ns .ns-pitch-screen { min-height: 0; aspect-ratio: 9 / 14; }
}

@media (prefers-reduced-motion: reduce) {
  .ns *,
  .ns *::before,
  .ns *::after { transition: none !important; animation: none !important; }
}