@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&display=swap");

:root {
  font-family: "Nunito Sans", sans-serif;
  color: #111;
  background: #fff;
}

* {
  box-sizing: border-box;
}

/* IMPORTANT: do not put overflow: hidden / auto / scroll on BOTH html and body.
   When both have it, body becomes its own scroll container and every
   position: sticky element on the site (the homepage card carousel and the
   About page "Why We Built" heading) stops sticking. `clip` hides sideways
   overflow without creating a scroll container. */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: #111;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
}

button,
a {
  font: inherit;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease,
    transform 0.18s ease;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.privacy-card {
  max-width: 1100px;
  padding: 0 48px 64px;
}

.privacy-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #d6d6d6;
}

.privacy-home-link,
.privacy-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-content {
  padding-top: 40px;
  color: #444;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.privacy-content h1,
.privacy-content h2,
.privacy-content h3 {
  color: #111;
  line-height: 1.3;
}

.privacy-content h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 36px);
}

.privacy-content h2 {
  margin: 36px 0 14px;
  font-size: 22px;
}

.privacy-content h3 {
  margin: 26px 0 10px;
  font-size: 18px;
}

.privacy-content ul {
  padding-left: 24px;
}

.privacy-content li {
  margin: 6px 0;
}

.privacy-content table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
}

.privacy-content th,
.privacy-content td {
  padding: 10px;
  border: 1px solid #d6d6d6;
  text-align: left;
  vertical-align: top;
}

.page-shell {
  min-height: 100vh;
  background: #fff;
  padding: 0;
}

.site-card {
  position: relative;
  max-width: none;
  margin: auto;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
}

/* Pages with sticky sections must not have an overflow: hidden ancestor, or
   the sticky part stops sticking. overflow-x: clip still stops sideways
   spill without turning this into a scroll container. */
.site-card:has(.feature-carousel),
.site-card.has-scroll-story {
  overflow: visible;
  overflow-x: clip;
}

.topbar {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  border-bottom: 1px solid #d6d6d6;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #000;
  color: white;
}

.brand strong {
  display: block;
  font-size: 25px;
  letter-spacing: -0.08em;
  line-height: 1;
  color: #111;
}

.brand strong span {
  color: #000;
}

.brand small {
  display: block;
  margin-top: 5px;
  color: #555;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 13px;
  color: #555;
}

.topbar nav .active {
  color: #000;
}

.dashboard-topbar {
  position: fixed;
  top: 28px;
  right: 32px;
  left: 32px;
  z-index: 10;
  height: 90px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(248, 250, 247, 0.84);
  box-shadow: 0 12px 30px rgba(3, 19, 31, 0.14);
  backdrop-filter: blur(14px);
  transition: opacity var(--nav-fade, 0.25s) ease-out;
  will-change: opacity;
}

.dashboard-topbar .brand,
.dashboard-topbar nav,
.dashboard-topbar .account-actions {
  position: relative;
  z-index: 1;
}

.dashboard-topbar + .search-panel {
  position: fixed;
  top: 126px;
  z-index: 11;
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.account-actions button,
.account-actions .login,
.account-actions .create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 21px;
  border: 1px solid #94a3b8;
  background: transparent;
  color: #555;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.account-actions .create {
  background: #000;
  border-color: #000;
  color: white;
}

.account-actions .search-toggle {
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #26313e;
}

.search-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.search-panel {
  position: absolute;
  top: 96px;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(640px, calc(100% - 32px));
  max-height: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  transform: translateX(-50%);
  transition: max-height 0.22s ease, padding 0.22s ease;
}

.search-panel.is-open {
  max-height: 90px;
  padding: 16px 0;
}

.search-panel input {
  flex: 1;
  min-width: 0;
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 12px 16px;
  background: #fff;
  color: #111;
  font-size: 12px;
  outline: none;
}

.search-panel input::placeholder {
  color: #888;
}

.search-panel input:focus {
  border-color: #000;
}

.search-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #eee;
  color: #111;
  font-size: 18px;
  line-height: 1;
}

.dashboard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: white;
  padding: 170px 32px 80px;
}

.hero > img,
.sunset-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(1.1);
}

.hero > img {
  object-position: center 45%;
  opacity: 0.85;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000 0%, #000d 58%, #0005);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 820px;
  text-align: center;
}

.hero-copy > p,
.hero h1 em,
.hero-description,
.market-list {
  color: #fff;
}

.hero h1 {
  margin: 0;
  font-size: clamp(52px, 7vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.05em;
}

.hero h1 em {
  font-style: normal;
}

.hero-description {
  max-width: 650px;
  margin: 26px auto 0;
  font-size: 16px;
  line-height: 1.6;
}

.market-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 700;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: transparent;
  padding: 15px 28px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
}

.primary-button::after {
  content: "→";
  transition: transform 0.18s ease;
}

.primary-button:hover {
  background: white;
  border-color: white;
  color: #000;
  opacity: 1;
  transform: translateY(-2px);
}

.primary-button:hover::after {
  transform: translateX(5px);
}

/* Eyebrow label + two-button CTA row, for a page hero using the .hero image
   layout (e.g. Investments) instead of the homepage's single primary-button */
.hero-eyebrow {
  display: block;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hero-btn-solid {
  background: #fff;
  border-color: #fff;
  color: #111;
}

.hero-btn-solid:hover {
  background: #e2e2e2;
  border-color: #e2e2e2;
  transform: translateY(-2px);
}

.hero-btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
}

.hero-btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* About page hero: left-aligned photo banner with a pill badge,
   reusing .hero/.hero-shade for the image + gradient overlay */
.about-hero {
  justify-content: flex-start;
  padding-left: 64px;
  padding-right: 64px;
}

.about-hero .hero-copy {
  max-width: 640px;
  margin: 0;
  text-align: left;
}

.about-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 12px 22px 12px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  .about-hero-badge {
    animation: about-badge-float 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

@keyframes about-badge-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.about-hero-badge svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

.about-hero .hero-description {
  margin: 26px 0 0;
  max-width: 560px;
}

@media (max-width: 720px) {
  .about-hero {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.about-cta {
  max-width: 1040px;
  margin: 88px auto 0;
  padding: 0 56px;
  text-align: center;
}

.about-cta h2 {
  margin: 0;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.about-cta p {
  margin: 22px auto 0;
  max-width: 860px;
  color: #444;
  font-size: 19px;
  line-height: 1.7;
}

.about-cta .hero-btn {
  margin-top: 34px;
}

@media (max-width: 600px) {
  .about-cta {
    padding: 0 24px;
  }
}

/* Split hero: image framed alongside the copy instead of a full-bleed
   background photo. Used on interior pages (e.g. Investments) so they read
   differently from the homepage hero while keeping the same b/w theme. */
.split-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
  background: #000;
  color: #fff;
  padding: 120px 56px 90px;
  overflow: hidden;
}

.split-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-top: 110px;
}

@media (prefers-reduced-motion: no-preference) {
  .split-hero-copy {
    animation: split-hero-copy-in 3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes split-hero-copy-in {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.split-hero-copy .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  background: #fff;
  color: #444;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}

.split-hero-copy .hero-eyebrow svg {
  width: 16px;
  height: 16px;
  color: #111;
}

.split-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.split-hero-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.split-hero-stats strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.split-hero-stats span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
}

@media (prefers-reduced-motion: no-preference) {
  .split-hero-copy .hero-eyebrow {
    animation: learn-badge-float 4.5s ease-in-out infinite;
  }
}

@keyframes learn-badge-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.split-hero-copy h1 {
  margin: 0;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.rotating-heading {
  position: relative;
  height: 3.3em;
}

.rotating-heading span {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .rotating-heading span {
    animation: rotating-heading-fade 18s ease-in-out infinite;
  }
  .rotating-heading span:nth-child(1) {
    animation-delay: 0s;
  }
  .rotating-heading span:nth-child(2) {
    animation-delay: 6s;
  }
  .rotating-heading span:nth-child(3) {
    animation-delay: 12s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rotating-heading span {
    position: static;
    opacity: 1;
  }

  @media (max-width: 700px) {
    .privacy-card {
      padding: 0 20px 40px;
    }

    .privacy-header {
      min-height: 76px;
    }

    .privacy-header .brand small {
      letter-spacing: 0.1em;
    }

    .privacy-content table {
      display: block;
      overflow-x: auto;
    }
  }
  .rotating-heading span:nth-child(2),
  .rotating-heading span:nth-child(3) {
    display: none;
  }
  .rotating-heading {
    height: auto;
  }
}

@keyframes rotating-heading-fade {
  0%,
  100% {
    opacity: 0;
  }
  3%,
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}

.split-hero-copy .hero-description {
  margin: 22px 0 0;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.split-hero-copy .hero-actions {
  justify-content: flex-start;
  margin-top: 34px;
}

.split-hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.split-hero-media img,
.split-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.92;
}

.split-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, #000c 100%);
}

.split-hero-tag {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}

.split-hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

@media (max-width: 1000px) {
  .split-hero {
    padding: 130px 32px 70px;
  }
}

@media (max-width: 600px) {
  .split-hero {
    grid-template-columns: 1fr;
    padding: 116px 20px 50px;
    gap: 32px;
  }
  .split-hero-copy {
    max-width: none;
  }
  .split-hero-copy h1 {
    font-size: 34px;
  }
  .split-hero-media {
    aspect-ratio: 16 / 11;
  }
  .split-hero-copy .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Second section: intro statement + checklist panel */
.start-section {
  padding: 120px 56px 100px;
  background: #fff;
  text-align: center;
}

.start-section h2 {
  max-width: 1100px;
  margin: 0 auto;
  color: #111;
  font-size: clamp(40px, 6.4vw, 88px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.start-lead {
  max-width: 720px;
  margin: 28px auto 0;
  color: #444;
  font-size: 18px;
  line-height: 1.6;
  text-wrap: balance;
}

.start-button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
  padding: 20px 40px;
  border: 1px solid #c8c8c8;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 5px #ececec;
  color: #111;
  font-size: 18px;
  font-weight: 700;
}

.start-button svg {
  width: 34px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.start-button:hover {
  border-color: #000;
  background: #000;
  box-shadow: 0 0 0 5px #d8d8d8;
  color: #fff;
  transform: translateY(-2px);
}

.start-button:hover svg {
  transform: translateX(5px);
}

.start-button:focus-visible {
  outline: 3px solid #000;
  outline-offset: 6px;
}

.checklist-panel {
  max-width: 1240px;
  margin: 96px auto 0;
  padding: 48px 56px 24px;
  border-radius: 36px;
  background: #f3f3f3;
  text-align: left;
}

.checklist-panel h3 {
  margin: 0 0 32px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  padding: 26px 0 30px;
  border-top: 1px solid #cfcfcf;
}

.checklist strong {
  display: block;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.checklist p {
  max-width: 460px;
  margin: 8px 0 0;
  color: #555;
  font-size: 15px;
  line-height: 1.55;
}

.feature-carousel {
  position: relative;
  min-height: 185vh;
  min-height: 185svh;
  overflow: visible;
  background: #000;
  color: white;
}

.feature-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #000;
  background-image: linear-gradient(160deg, rgba(38, 38, 38, 0.72), rgba(0, 0, 0, 0.82)), url("white.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 72px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Dark tint over the background photo (sits behind the message and cards) */
.feature-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
}

.feature-message,
.feature-gallery-viewport {
  position: relative;
  z-index: 1;
}

.feature-message {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(820px, calc(100% - 64px));
  text-align: center;
  transform: translate(-50%, calc(-50% - (var(--text-progress, 0) * 58vh)));
  opacity: calc(1 - (var(--text-progress, 0) * 1.2));
  will-change: transform, opacity;
}

.feature-eyebrow {
  margin: 0 0 16px;
  color: #d0d0d0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.feature-message h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 70px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.feature-message h2 em {
  color: #ffffff;
  font-style: normal;
  border-bottom: 2px solid #ffffff;
}

.feature-description {
  max-width: 520px;
  margin: 24px auto 0;
  color: #e1e1e1;
  font-size: 16px;
  line-height: 1.6;
}

.feature-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 14px 24px;
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.feature-button:after {
  content: "→";
  transition: transform 0.18s ease;
}

.feature-button:hover {
  background: white;
  color: #111;
  transform: translateY(-2px);
}

.feature-button:hover:after {
  transform: translateX(5px);
}

/* 3D Rotating Feature Gallery Container */
.feature-gallery-viewport {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 480px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  opacity: var(--gallery-progress, 0);
  pointer-events: none;
  transform: translateY(calc(-50% + ((1 - var(--gallery-progress, 0)) * 58vh)));
  will-change: transform, opacity;
}

.feature-gallery-viewport.is-ready {
  pointer-events: auto;
  /* Let the page scroll up/down normally; sideways finger moves go to the
     swipe handler in script.js */
  touch-action: pan-y;
}

.feature-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Brighter High-Contrast Cards */
.feature-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 390px;
  margin-top: -195px;
  margin-left: -125px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #2a2a2a, #101010);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  backface-visibility: hidden;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.4s ease;
  will-change: transform, opacity;
}

/* Cheap dimming layer for the side cards (--dim is set in script.js) */
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--dim, 0);
  pointer-events: none;
  transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}

.feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.feature-card.is-active {
  border-color: #ffffff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 255, 255, 0.35);
}

.feature-card-content {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 22px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  color: #fff;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
  pointer-events: none;
}

.feature-card.is-active .feature-card-content {
  opacity: 1;
  transform: translateY(0);
}

.feature-card-content h3 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.feature-card-content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #f0f0f0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.feature-card-controls {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 22px;
  opacity: var(--gallery-progress, 0);
  pointer-events: none;
  transform: translateX(-50%);
}

.feature-card-controls.is-ready {
  pointer-events: auto;
}

.feature-card-arrow,
.feature-card-dot {
  border: 0;
  background: transparent;
  color: white;
}

.feature-card-arrow {
  padding: 6px 12px;
  font-size: 22px;
  opacity: 0.85;
  border-radius: 50%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.feature-card-arrow:hover {
  opacity: 1;
  transform: scale(1.15);
}

.feature-card-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-card-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.3s ease, transform 0.3s ease;
}

.feature-card-dot.is-active {
  background: #ffffff;
  transform: scale(1.4);
}

.learn-section {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 42px;
  padding: 70px 56px;
}

.learn-section > div > h2 {
  margin: 0;
  font-size: 40px;
  letter-spacing: -0.055em;
}

.learn-section > div > p {
  max-width: 860px;
  margin: 14px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  margin-top: 44px;
}

.benefits article > b {
  font-size: 26px;
  color: #000;
}

.benefits h3 {
  margin: 10px 0;
  font-size: 16px;
  line-height: 1.45;
}

.benefits p {
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}

.sunset-card {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 12px;
  color: white;
}

.sunset-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.4));
}

.sunset-card > div {
  position: relative;
  z-index: 1;
  max-width: 280px;
  padding: 32px;
}

.sunset-card h3 {
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.sunset-card p {
  font-size: 16px;
  line-height: 1.5;
  color: #e2e8f0;
}

.sunset-card button,
.sunset-card-link {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  background: #000;
  padding: 12px 22px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.login:hover,
.primary-button:hover,
.create:hover {
  transform: translateY(-1px);
  opacity: 0.91;
}

.login:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

.create:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

@media (max-width: 1000px) {
  .page-shell {
    padding: 16px;
  }
  .topbar nav {
    display: none;
  }
  .dashboard-topbar {
    top: 16px;
    right: 16px;
    left: 16px;
  }
  .dashboard,
  .learn-section {
    grid-template-columns: 1fr;
  }
  .learn-section {
    padding: 30px;
  }
  .sunset-card {
    min-height: 190px;
  }
  .benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .page-shell {
    padding: 0;
  }
  .topbar {
    padding: 0 16px;
  }
  .dashboard-topbar {
    height: 72px;
  }
  .brand small,
  .account-actions .login {
    display: none;
  }
  .brand strong {
    font-size: 17px;
  }
  .account-actions .create {
    padding: 8px 11px;
  }
  .hero {
    min-height: 600px;
    padding: 120px 20px 50px;
  }
  .hero h1 {
    font-size: 46px;
  }
  .hero-description {
    font-size: 14px;
  }
  .feature-carousel {
    min-height: 195vh;
    min-height: 195svh;
  }
  .feature-stage {
    min-height: 100vh;
    min-height: 100svh;
    padding: 58px 0;
  }
  .feature-message {
    width: calc(100% - 40px);
  }
  .feature-message h2 {
    font-size: 38px;
  }
  .feature-description {
    font-size: 14px;
  }
  .feature-gallery-viewport {
    height: 400px;
  }
  .feature-card {
    width: 180px;
    height: 300px;
    margin-top: -150px;
    margin-left: -90px;
  }
  .feature-card-content h3 {
    font-size: 20px;
  }
  .feature-card-content p {
    font-size: 12px;
  }
  .feature-card-controls {
    bottom: 20px;
  }
  .learn-section {
    padding: 28px 24px;
  }
  .benefits {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .learn-section > div > h2 {
    font-size: 24px;
  }
}

@media (max-width: 1000px) {
  .start-section {
    padding: 90px 30px 80px;
  }
  .checklist-panel {
    margin-top: 72px;
    padding: 36px 32px 16px;
    border-radius: 28px;
  }
}

@media (max-width: 600px) {
  .start-section {
    padding: 72px 20px 64px;
  }
  .start-section h2 {
    font-size: 40px;
  }
  .start-lead {
    font-size: 16px;
  }
  .start-button {
    padding: 16px 30px;
    font-size: 16px;
  }
  .checklist-panel {
    margin-top: 56px;
    padding: 28px 22px 12px;
    border-radius: 24px;
  }
  .checklist-panel h3 {
    margin-bottom: 20px;
    font-size: 22px;
  }
  .checklist {
    grid-template-columns: 1fr;
  }
}


/* FAQ section */
.faq-section {
  padding: 88px 56px 96px;
  background: #f3f3f3;
  color: #111;
}

.faq-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.faq-section h2 {
  margin: 0 0 40px;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.faq-item {
  border-bottom: 1px solid #111;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

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

.faq-item summary:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px;
  border-radius: 8px;
}

.faq-icon {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  transition: background 0.18s ease;
}

.faq-item summary:hover .faq-icon {
  background: #333;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  max-width: 760px;
  margin: 0;
  padding: 0 64px 32px 0;
  color: #444;
  font-size: 17px;
  line-height: 1.65;
  animation: faq-reveal 0.3s ease;
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  padding: 14px 26px;
  border: 1px solid #111;
  border-radius: 999px;
  color: #111;
  font-size: 14px;
  font-weight: 700;
}

.faq-more svg {
  width: 22px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.faq-more:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}

.faq-more:hover svg {
  transform: translateX(4px);
}

.faq-more:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer {
    animation: none;
  }
  .faq-icon,
  .faq-icon::before,
  .faq-icon::after {
    transition: none;
  }
}

@media (max-width: 1000px) {
  .faq-section {
    padding: 64px 30px 72px;
  }
}

@media (max-width: 600px) {
  .faq-section {
    padding: 56px 20px 64px;
  }
  .faq-section h2 {
    margin-bottom: 28px;
  }
  .faq-item summary {
    padding: 22px 0;
  }
  .faq-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .faq-answer {
    padding-right: 0;
    font-size: 15px;
  }
}

/* Footer */
.site-footer {
  padding: 96px 56px 56px;
  background: #000;
  color: #fff;
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
}

.site-footer .brand {
  justify-self: start;
  align-self: start;
  color: #fff;
}

.site-footer .brand-mark {
  background: #fff;
  color: #000;
  filter: invert(1);
}

.site-footer .brand strong,
.site-footer .brand strong span {
  color: #fff;
}

.site-footer .brand small {
  color: #a3a3a3;
}

.footer-column h3 {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
}

.footer-column ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column a {
  display: inline-block;
  padding: 10px 0;
  color: #d9d9d9;
  font-size: 16px;
}

.footer-column a:hover,
.footer-contact a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 28px;
  margin-top: 88px;
  font-size: 15px;
}

.footer-contact a,
.footer-contact address {
  color: #fff;
  font-style: normal;
}

.footer-contact > a,
.footer-contact address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  margin: 0;
}

.footer-contact-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.footer-social {
  display: flex;
  gap: 8px;
  margin: 0 0 0 -9px; /* aligns the icons with the text edge */
  padding: 0;
  list-style: none;
}

.footer-contact .footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.footer-contact .footer-social a:hover {
  color: #bdbdbd;
  text-decoration: none;
  transform: translateY(-2px);
}

.footer-social svg {
  width: 22px;
  height: 22px;
}

.site-footer a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

.footer-legal {
  margin-top: 40px;
  padding-top: 56px;
  border-top: 1px solid #3a3a3a;
}

.footer-legal p {
  max-width: 1080px;
  margin: 0 0 24px;
  color: #e6e6e6;
  font-size: 13px;
  line-height: 1.85;
}

.footer-legal .footer-copy {
  margin: 64px 0 0;
  color: #b5b5b5;
  font-size: 12px;
}

@media (max-width: 1000px) {
  .site-footer {
    padding: 72px 30px 44px;
  }
  .footer-top {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-top .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .footer-contact {
    margin-top: 64px;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 56px 20px 36px;
  }
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .footer-column h3 {
    margin-bottom: 10px;
  }
  .footer-contact {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 48px;
  }
  .footer-legal {
    padding-top: 40px;
  }
  .footer-legal .footer-copy {
    margin-top: 40px;
  }
}

/* Dark floating bar for white pages (add the dashboard-topbar--dark class) */
.dashboard-topbar--dark {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.9);
  box-shadow: none;
}

.dashboard-topbar--dark .brand {
  color: #fff;
}

.dashboard-topbar--dark .brand-mark {
  background: #fff;
  color: #000;
}

.dashboard-topbar--dark .brand strong,
.dashboard-topbar--dark .brand strong span {
  color: #fff;
}

.dashboard-topbar--dark .brand small {
  color: #a3a3a3;
}

.dashboard-topbar--dark nav {
  color: #b5b5b5;
}

.dashboard-topbar--dark nav a:hover,
.dashboard-topbar--dark nav .active {
  color: #fff;
}

.dashboard-topbar--dark .account-actions button,
.dashboard-topbar--dark .account-actions .login,
.dashboard-topbar--dark .account-actions .create,
.dashboard-topbar--dark .search-back {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.dashboard-topbar--dark .account-actions .create {
  border-color: #fff;
  background: #fff;
  color: #000;
}

.dashboard-topbar--dark .account-actions .search-toggle {
  border: 0;
  color: #fff;
}

.dashboard-topbar--dark .login:hover,
.dashboard-topbar--dark .search-back:hover {
  border-color: #fff;
  background: #fff;
  color: #000;
}

.dashboard-topbar--dark .create:hover {
  border-color: #d9d9d9;
  background: #d9d9d9;
  color: #000;
}

/* Bar that stays at the top of the page and scrolls away with it (not fixed) */
.dashboard-topbar--static {
  position: absolute;
}

.search-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 21px;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  color: #555;
  font-size: 12px;
  font-weight: 700;
}

.search-back::before {
  content: "←";
}

/* Search results page */
.search-results-page {
  max-width: 1240px;
  min-height: 80vh;
  margin: 0 auto;
  padding: 0 56px 120px;
}

.search-results-page .content-hero {
  padding-top: 180px;
}

.search-results-page .content-hero > p {
  margin: 0 0 20px;
  color: #666;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.search-results-page .content-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(38px, 5.6vw, 76px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.search-results-page .results-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 40px 0 0;
  padding: 8px 8px 8px 24px;
  border: 1px solid #cfcfcf;
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-results-page .results-search:focus-within {
  border-color: #000;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

.search-results-page .results-search input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #111;
  font-size: 16px;
}

.search-results-page .results-search input::placeholder {
  color: #8a8a8a;
}

.search-results-page .results-search .primary-button {
  margin-top: 0;
  padding: 14px 30px;
  border-color: #000;
  background: #000;
  color: #fff;
}

.search-results-page .results-search .primary-button::after {
  content: none;
}

.search-results-page .results-search .primary-button:hover {
  border-color: #333;
  background: #333;
  color: #fff;
}

.search-results-page .results-summary {
  margin-top: 72px;
  padding-bottom: 20px;
  border-bottom: 1px solid #111;
}

.search-results-page .results-summary h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.search-results-page .results-summary p {
  margin: 8px 0 0;
  color: #666;
  font-size: 15px;
}

.search-results-page .search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid #e3e3e3;
}

.search-results-page .search-result > div {
  max-width: 720px;
}

.search-results-page .search-result h3 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.search-results-page .search-result p {
  margin: 12px 0 0;
  color: #555;
  font-size: 16px;
  line-height: 1.65;
}

.search-results-page .search-result .result-section {
  margin: 0 0 10px;
  color: #777;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.search-results-page .result-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid #111;
  border-radius: 999px;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.search-results-page .result-link span {
  display: inline-block;
  transition: transform 0.18s ease;
}

.search-results-page .result-link:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}

.search-results-page .result-link:hover span {
  transform: translateX(4px);
}

.search-results-page .result-link:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px;
}

.search-results-page mark {
  padding: 0;
  border-radius: 2px;
  background: #e9e9e9;
  box-shadow: inset 0 -2px 0 #000;
  color: #000;
}

.search-results-page .no-results {
  margin: 40px 0 0;
  padding: 56px 32px;
  border-radius: 28px;
  background: #f3f3f3;
  color: #444;
  font-size: 18px;
  text-align: center;
}

@media (max-width: 1000px) {
  .search-results-page {
    padding: 0 30px 96px;
  }
  .search-results-page .content-hero {
    padding-top: 150px;
  }
  .search-results-page .results-summary {
    margin-top: 56px;
  }
  .search-results-page .search-result {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .search-results-page {
    padding: 0 20px 80px;
  }
  .search-results-page .content-hero {
    padding-top: 128px;
  }
  .search-results-page .content-hero h1 {
    font-size: 40px;
  }
  .search-results-page .results-search {
    margin-top: 28px;
    padding-left: 18px;
  }
  .search-results-page .results-search .primary-button {
    padding: 12px 20px;
  }
  .search-results-page .search-result {
    padding: 28px 0;
  }
  .search-results-page .no-results {
    padding: 40px 20px;
    font-size: 16px;
  }
}

/* Carousel dots: same look, bigger tap area */
.feature-card-dot {
  position: relative;
}

.feature-card-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
}

/* Mobile menu button (shown below 1000px) */
.account-actions .menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #111;
}

.menu-toggle span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.menu-toggle span:nth-child(1) {
  top: 15px;
}

.menu-toggle span:nth-child(2) {
  top: 21px;
}

.menu-toggle span:nth-child(3) {
  top: 27px;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

.menu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.menu-account {
  display: none;
}

@media (max-width: 1000px) {
  .account-actions .menu-toggle {
    display: block;
  }

  .account-actions .search-toggle {
    width: 40px;
    height: 40px;
  }

  .account-actions button,
  .account-actions .login,
  .account-actions .create,
  .search-back {
    min-height: 40px;
  }

  .search-panel input {
    font-size: 16px; /* under 16px makes iPhones zoom in when you tap the box */
  }

  /* The open menu becomes a full-screen overlay: the header itself expands to
     fill the viewport, with the logo and close button as its own top row
     (grid areas let them share that row with nav placed below, full width,
     even though brand/nav/account-actions are just plain siblings in the HTML). */
  .dashboard-topbar.is-menu-open {
    position: fixed;
    inset: 0;
    display: grid;
    align-items: stretch; /* .topbar's own align-items:center would otherwise center nav instead of filling the row */
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas: "brand actions" "nav nav";
    height: 100vh;
    height: 100svh;
    padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    border: 0;
    background: #f8faf7;
    box-shadow: none;
    backdrop-filter: none;
  }

  .dashboard-topbar.is-menu-open .brand {
    grid-area: brand;
  }

  .dashboard-topbar.is-menu-open .account-actions {
    grid-area: actions;
  }

  /* Only the close button stays visible in that top row; search and login
     move into the menu itself, like the reference. */
  .dashboard-topbar.is-menu-open .account-actions .search-toggle,
  .dashboard-topbar.is-menu-open .account-actions .login,
  .dashboard-topbar.is-menu-open .account-actions .create {
    display: none;
  }

  .dashboard-topbar.is-menu-open nav {
    grid-area: nav;
    position: static;
    display: flex;
    flex-direction: column;
    margin-top: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 16px;
    overflow-y: auto;
  }

  /* Row of main links styled as scrollable pill tabs, like the app bar in the reference */
  .menu-tabs {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0; /* without this, a flex item with nowrap content refuses to shrink and overflows the panel */
    max-width: 100%;
    box-sizing: border-box;
    gap: 8px;
    padding: 2px 2px 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e6e6e6;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .menu-tabs::-webkit-scrollbar {
    display: none;
  }

  .menu-tabs > a,
  .menu-tabs > .nav-item > a {
    flex: none;
    padding: 12px 18px;
    border-radius: 999px;
    color: #444;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* The desktop dropdown never opens on mobile (the flat .menu-sublist below
     covers the same links), so its toggle button is hidden here. */
  .menu-tabs .nav-caret-btn {
    display: none;
  }

  .menu-tabs > a.active,
  .menu-tabs > .nav-item:has(> a.active) > a {
    background: #ececec;
    color: #000;
  }

  /* Flat list with a trailing arrow, shown for whichever tab has sub-pages (currently only Learn) */
  .menu-sublist {
    flex: none;
    flex-direction: column;
    padding: 2px 2px 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e6e6e6;
  }

  .dashboard-topbar.is-menu-open nav:has(.menu-tabs .nav-item > a.active) .menu-sublist {
    display: flex;
  }

  .menu-sublist a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 14px;
    border-radius: 14px;
    color: #111;
    font-size: 17px;
    font-weight: 700;
  }

  .menu-sublist a:hover {
    background: #ececec;
  }

  .menu-sublist-arrow {
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid #9a9a9a;
    border-bottom: 2px solid #9a9a9a;
    transform: rotate(-45deg);
  }

  /* Log In / Register, pinned to the bottom of the overlay */
  .dashboard-topbar.is-menu-open .menu-account {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
  }

  .menu-account button,
  .menu-account .menu-login,
  .menu-account .menu-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    border: 1px solid #94a3b8;
    border-radius: 999px;
    background: transparent;
    color: #111;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }

  .menu-account .menu-register {
    border-color: #000;
    background: #000;
    color: #fff;
  }

  .dashboard-topbar--dark.is-menu-open {
    background: #0a0a0a;
  }

  .dashboard-topbar--dark .menu-tabs,
  .dashboard-topbar--dark .menu-sublist {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  .dashboard-topbar--dark .menu-tabs > a,
  .dashboard-topbar--dark .menu-tabs > .nav-item > a {
    color: #bdbdbd;
  }

  .dashboard-topbar--dark .menu-tabs > a.active,
  .dashboard-topbar--dark .menu-tabs > .nav-item:has(> a.active) > a {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .dashboard-topbar--dark .menu-sublist a {
    color: #e5e5e5;
  }

  .dashboard-topbar--dark .menu-sublist a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .dashboard-topbar--dark .menu-sublist-arrow {
    border-color: #777;
  }

  .dashboard-topbar--dark.is-menu-open .menu-account button,
  .dashboard-topbar--dark.is-menu-open .menu-account .menu-login,
  .dashboard-topbar--dark.is-menu-open .menu-account .menu-register {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
  }

  .dashboard-topbar--dark.is-menu-open .menu-account .menu-register {
    border-color: #fff;
    background: #fff;
    color: #000;
  }
}

@media (max-width: 600px) {
  /* Log In / Register move into the menu so the bar fits small screens */
  .account-actions .create,
  .search-back {
    display: none;
  }

  .dashboard-topbar {
    padding: 0 14px;
  }

  .dashboard-topbar.is-menu-open {
    padding-left: 20px;
    padding-right: 20px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .brand {
    gap: 10px;
  }

  .account-actions {
    gap: 8px;
  }

  .feature-card-dots {
    gap: 14px;
  }
}

@media (max-width: 360px) {
  .brand strong {
    font-size: 15px;
  }
}

/* Nav dropdown (e.g. Learn) */
/* At desktop widths these are just transparent wrappers: .menu-tabs holds the
   real nav links (laid out exactly like the old flat nav) and .menu-sublist
   is unused (the hover dropdown handles that instead). The mobile menu
   restyles both further down. */
.menu-tabs {
  display: flex;
  align-items: center;
  gap: 34px;
}

.menu-sublist {
  display: none;
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nav-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nav-caret-btn:hover,
.nav-caret-btn:focus-visible {
  background: rgba(17, 17, 17, 0.06);
}

.nav-caret {
  width: 10px;
  height: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.nav-dropdown {
  display: none;
}

@media (min-width: 1001px) {
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 44px;
    width: max-content;
    max-width: min(820px, calc(100vw - 64px)); /* wide enough for the intro column + both link lists */
    margin-top: 12px;
    padding: 34px 44px;
    border: 1px solid #ececec;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 28px 60px rgba(15, 23, 20, 0.16);
    opacity: 0;
    transform: translate(-50%, 6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .nav-item.is-open .nav-dropdown,
  .nav-item:focus-within .nav-dropdown {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }

  .nav-item.is-open .nav-caret,
  .nav-item:focus-within .nav-caret {
    transform: rotate(180deg);
  }

  .nav-dropdown-intro {
    flex: none;
    width: 200px;
  }

  .nav-dropdown-intro h3 {
    margin: 0 0 12px;
    color: #111;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .nav-dropdown-intro p {
    margin: 0;
    color: #666;
    font-size: 13.5px;
    line-height: 1.65;
  }

  .nav-dropdown-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(185px, 1fr));
    gap: 6px 60px;
    padding-left: 44px;
    border-left: 1px solid #e6e6e6;
  }

  .nav-dropdown-col {
    display: grid;
    gap: 2px;
    align-content: start;
  }

  .nav-dropdown-col h3 {
    margin: 0 0 10px;
    padding: 0 10px;
    color: #9a9a9a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .nav-dropdown-col a {
    padding: 9px 10px;
    border-radius: 10px;
    color: #222;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
  }

  .nav-dropdown-col a:hover,
  .nav-dropdown-col a:focus-visible {
    background: #f2f2f2;
    color: #000;
  }
}

.dashboard-topbar--dark .nav-dropdown {
  border-color: rgba(255, 255, 255, 0.12);
  background: #0a0a0a;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
}

.dashboard-topbar--dark .nav-dropdown-intro h3 {
  color: #fff;
}

.dashboard-topbar--dark .nav-dropdown-intro p {
  color: #9a9a9a;
}

.dashboard-topbar--dark .nav-dropdown-lists {
  border-left-color: rgba(255, 255, 255, 0.14);
}

.dashboard-topbar--dark .nav-dropdown-col h3 {
  color: #8a8a8a;
}

.dashboard-topbar--dark .nav-dropdown-col a {
  color: #e5e5e5;
}

.dashboard-topbar--dark .nav-dropdown-col a:hover,
.dashboard-topbar--dark .nav-dropdown-col a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Base layout for simple content pages (Learn, Investments, Resources, About Us) */
.content-page {
  max-width: 1240px;
  min-height: 70vh;
  margin: 0 auto;
  padding: 0 56px 120px;
}

.content-hero {
  padding-top: 190px;
}

.content-hero > p {
  margin: 0 0 20px;
  color: #666;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.content-hero h1 {
  max-width: 880px;
  margin: 0;
  font-size: clamp(36px, 5.4vw, 72px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.content-hero > div {
  max-width: 620px;
  margin: 28px 0 0;
  color: #444;
  font-size: 17px;
  line-height: 1.65;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 72px;
}

.content-card {
  padding: 36px 30px;
  border-radius: 28px;
  background: #f3f3f3;
  scroll-margin-top: 130px;
}

.content-card strong {
  display: block;
  margin-bottom: 18px;
  color: #9a9a9a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.content-card h2 {
  margin: 0 0 12px;
  font-size: 21px;
  letter-spacing: -0.03em;
}

.content-card p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.6;
}

.content-note {
  max-width: 760px;
  margin: 64px 0 0;
  padding-top: 28px;
  border-top: 1px solid #e3e3e3;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

/* Feature rows: image beside a headline + emphasised keyword callouts,
   used on the Investments page to break down each asset class. */
.feature-rows {
  display: flex;
  flex-direction: column;
  gap: 96px;
  margin-top: 72px;
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.feature-row-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
}

.feature-row-reverse .feature-row-media {
  order: 2;
}

.feature-row-reverse .feature-row-copy {
  order: 1;
}

.feature-row-media {
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  background: #f3f3f3;
}

.feature-row-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-row-copy h2 {
  margin: 0 0 28px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.feature-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.feature-point {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}

.feature-point strong {
  display: block;
  margin: 6px 0;
  color: #111;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.feature-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero-btn-solid-dark {
  background: #111;
  border-color: #111;
  color: #fff;
}

.hero-btn-solid-dark:hover {
  background: #333;
  border-color: #333;
  transform: translateY(-2px);
}

.hero-btn-outline-dark {
  background: transparent;
  border-color: #111;
  color: #111;
}

.hero-btn-outline-dark:hover {
  background: #111;
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 1000px) {
  .feature-row,
  .feature-row-reverse {
    grid-template-columns: 1fr;
  }
  .feature-row-media,
  .feature-row-reverse .feature-row-media {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
  }
  .feature-rows {
    gap: 72px;
  }
}

@media (max-width: 600px) {
  .feature-points {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .feature-row-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 1000px) {
  .content-page {
    padding: 0 30px 96px;
  }
  .content-hero {
    padding-top: 156px;
  }
  .content-grid {
    grid-template-columns: 1fr;
    margin-top: 56px;
  }
}

@media (max-width: 600px) {
  .content-page {
    padding: 0 20px 80px;
  }
  .content-hero {
    padding-top: 132px;
  }
  .content-hero h1 {
    font-size: 38px;
  }
  .content-note {
    margin-top: 48px;
  }
}

/* ---- Contact page: details + socials beside a photo with a floating location card ---- */
.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: start;
  gap: 64px;
  margin-top: 64px;
}

.contact-panel-copy {
  padding-top: 4px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 44px;
  padding: 0;
  list-style: none;
}

.contact-details li > a,
.contact-details address {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px 4px;
  border-top: 1px solid #e3e3e3;
  color: #111;
  font-style: normal;
}

.contact-details li:last-child > a,
.contact-details li:last-child address {
  border-bottom: 1px solid #e3e3e3;
}

.contact-details strong {
  display: block;
  margin-bottom: 5px;
  color: #9a9a9a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.contact-details li > a span:last-child,
.contact-details address span:last-child {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.contact-details li > a:hover {
  color: #555;
}

.contact-detail-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #111;
  color: #fff;
}

.contact-detail-icon svg {
  width: 21px;
  height: 21px;
}

.contact-social {
  margin: 12px 0 0;
  gap: 28px;
}

.contact-social a {
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: #111;
}

.contact-social svg {
  width: 52px;
  height: 52px;
}

.contact-social a:hover {
  background: none;
  color: #555;
  transform: translateY(-2px);
}

.contact-panel-media {
  position: relative;
}

.contact-panel-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  object-fit: cover;
}

@media (max-width: 1000px) {
  .contact-panel {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 56px;
  }
  .contact-panel-media {
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .contact-details li > a,
  .contact-details address {
    gap: 14px;
    padding: 16px 2px;
  }
  .contact-detail-icon {
    width: 38px;
    height: 38px;
  }
  .contact-details li > a span:last-child,
  .contact-details address span:last-child {
    font-size: 15px;
  }
}

/* ---- Learn page: FAQ category cards + slide-over answer panel ---- */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
}

.faq-card {
  display: flex;
  flex-direction: column;
  padding: 36px 30px 30px;
  border-radius: 28px;
  background: #f3f3f3;
}

.faq-card h2 {
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.faq-card-preview {
  flex: 1;
  margin-bottom: 26px;
}

.faq-card-preview strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.faq-card-preview p {
  margin: 0;
  color: #555;
  font-size: 13.5px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.faq-view-all {
  align-self: flex-start;
  padding: 11px 22px;
  border: 1px solid #c8c8c8;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 700;
}

.faq-view-all:hover {
  border-color: #000;
  background: #000;
  color: #fff;
}

/* Slide-over panel */
.faq-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.faq-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.faq-panel {
  width: min(680px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 64px 64px 60px;
  background: #fff;
  box-shadow: -30px 0 60px rgba(15, 23, 20, 0.18);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.faq-overlay.is-open .faq-panel {
  transform: translateX(0);
}

.faq-panel-close {
  position: fixed;
  top: 28px;
  right: 28px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #f0f0f0;
  color: #111;
  font-size: 20px;
  line-height: 1;
}

.faq-panel-close:hover {
  background: #e2e2e2;
}

.faq-panel h2 {
  margin: 0 0 8px;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.faq-panel-list {
  margin-top: 32px;
  border-top: 1px solid #e6e6e6;
}

.faq-item {
  border-bottom: 1px solid #e6e6e6;
}

.faq-item-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 26px 4px;
  border: 0;
  background: transparent;
  color: #111;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.faq-chevron {
  flex: none;
  width: 12px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-item-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.faq-item.is-open .faq-item-answer {
  grid-template-rows: 1fr;
}

.faq-item-answer p {
  margin: 0;
  padding: 0 4px 0;
  overflow: hidden;
  color: #555;
  font-size: 14.5px;
  line-height: 1.65;
}

.faq-item-answer > p {
  min-height: 0;
}

.faq-item.is-open .faq-item-answer p {
  padding-bottom: 24px;
}

@media (max-width: 1000px) {
  .faq-grid {
    grid-template-columns: 1fr 1fr;
  }
  .faq-panel {
    padding: 56px 32px 48px;
  }
}

@media (max-width: 600px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .faq-panel {
    width: 100%;
    padding: 88px 22px 48px;
  }
  .faq-panel-close {
    top: 18px;
    right: 18px;
  }
}

/* ---- Learn page: hero (badge, heading, search) ---- */
.learn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 64px;
  align-items: center;
  padding-top: 150px;
}

.learn-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  background: #fff;
  color: #444;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(15, 23, 20, 0.14);
}

@media (prefers-reduced-motion: no-preference) {
  .learn-badge {
    animation: learn-badge-float 4.5s ease-in-out infinite;
  }
}

.learn-badge svg {
  width: 16px;
  height: 16px;
  color: #111;
}

.learn-hero-copy h1 {
  max-width: 540px;
  margin: 0;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.learn-hero-lead {
  max-width: 460px;
  margin: 20px 0 0;
  color: #444;
  font-size: 16px;
  line-height: 1.6;
}

.learn-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  margin-top: 32px;
  padding: 6px 6px 6px 20px;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  background: #fff;
}

.learn-search:focus-within {
  border-color: #111;
}

.learn-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #111;
}

.learn-search input::placeholder {
  color: #888;
}

.learn-search button {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #111;
  color: #fff;
}

.learn-search button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.learn-search-hint {
  min-height: 20px;
  margin: 12px 2px 0;
  color: #666;
  font-size: 13px;
}

.learn-hero-visual {
  position: relative;
}

.learn-hero-art {
  overflow: hidden;
  border-radius: 32px;
}

.learn-hero-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.learn-hero-chip {
  position: absolute;
  left: -20px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 250px;
  padding: 16px 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 40px rgba(15, 23, 20, 0.16);
}

.learn-hero-chip-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.learn-hero-chip strong {
  display: block;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.learn-hero-chip span {
  display: block;
  margin-top: 2px;
  color: #777;
  font-size: 12px;
}

.section-heading {
  margin: 96px 0 0;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.section-heading p {
  max-width: 560px;
  margin: 10px 0 0;
  color: #555;
  font-size: 15px;
  line-height: 1.6;
}

.section-heading + .faq-grid {
  margin-top: 32px;
}

.faq-item-category {
  display: block;
  padding: 22px 4px 0;
  color: #9a9a9a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.faq-item-category + .faq-item-question {
  padding-top: 8px;
}

@media (max-width: 1000px) {
  .learn-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 156px;
  }
  .learn-hero-visual {
    max-width: 380px;
    margin: 0 auto;
  }
  .learn-hero-chip {
    left: 16px;
    bottom: -18px;
  }
}

@media (max-width: 600px) {
  .learn-hero {
    padding-top: 132px;
  }
  .learn-hero-chip {
    position: static;
    margin-top: 16px;
    max-width: none;
    box-shadow: none;
    border: 1px solid #ececec;
  }
  .section-heading {
    margin-top: 64px;
  }
}

/* Smooth in-page anchor scrolling (e.g. nav dropdown links to a #section) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Scroll reveal: sections and cards fade up into place the first time they
   enter the viewport (see the IntersectionObserver in script.js). */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variant: slides in from the right instead of rising from below (used for
   the About page's trust globe). */
.reveal-right {
  opacity: 0;
  transform: translateX(64px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* On narrow screens, rise up instead of sliding in from the right: a
   64px sideways offset makes the page wider than the screen and pushes
   everything to the right. */
@media (max-width: 900px) {
  .reveal-right {
    transform: translateY(20px);
  }
  .reveal-right.is-visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Scroll story: a pinned heading on the left that stays in view while a
   column of paragraphs scrolls past it on the right. */
.scroll-story {
  padding: 100px 56px 60px;
}

.scroll-story-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
}

.scroll-story-sticky {
  position: sticky;
  top: 130px;
  align-self: start;
  height: fit-content;
}

.scroll-story-sticky h2 {
  max-width: 420px;
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.scroll-story-copy p {
  max-width: 560px;
  margin: 0 0 32px;
  color: #444;
  font-size: 18px;
  line-height: 1.7;
}

.scroll-story-copy p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .scroll-story {
    padding: 64px 24px 40px;
  }
  .scroll-story-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .scroll-story-sticky,
  .scroll-story-copy {
    min-width: 0;
    width: 100%;
  }
  .scroll-story-sticky {
    position: static;
  }
  .scroll-story-sticky h2 {
    margin: 0 auto;
  }
  .scroll-story-copy p {
    margin: 0 auto 16px;
    text-indent: 0;
  }
}
/* ---- About page: "Designed for Trust" section with an interactive globe ---- */
.trust-section {
  padding: 88px 64px;
  background: #000;
  color: #fff;
}

.trust-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: center;
  gap: 64px;
  max-width: 1320px;
  margin: 0 auto;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 10px 20px 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.trust-badge svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

.trust-copy h2 {
  margin: 0;
  max-width: 480px;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.03em;
}

.trust-lead {
  max-width: 460px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15.5px;
  line-height: 1.7;
}

.trust-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14.5px;
  line-height: 1.55;
}

.trust-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #fff;
  color: #000;
}

.trust-check svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.6;
}

.home-trust .trust-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
}

.home-trust .trust-copy h2 {
  max-width: 560px;
}

.home-trust .feature-eyebrow {
  color: rgba(255, 255, 255, 0.62);
}

.home-trust-aside {
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
}

.home-trust-label {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.home-trust-aside h3 {
  margin: 18px 0 14px;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.home-trust-aside ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.55;
}

.home-trust-aside p {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  line-height: 1.6;
}

.home-trust-aside > a {
  display: inline-flex;
  gap: 8px;
  margin-top: 22px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.trust-cta {
  margin-top: 34px;
}

.trust-globe-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.trust-globe-stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  touch-action: none;
  cursor: grab;
}

.trust-globe-stage:active {
  cursor: grabbing;
}

.trust-globe-glow {
  position: absolute;
  inset: -18%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
  filter: blur(6px);
  pointer-events: none;
}

.trust-globe-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.trust-globe-caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
}

@media (max-width: 900px) {
  .trust-section {
    padding: 56px 32px;
  }
  .trust-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .home-trust .trust-inner {
    grid-template-columns: 1fr;
  }
  .trust-copy h2,
  .trust-lead,
  .trust-list {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .trust-list li {
    text-align: left;
  }
  .home-trust-aside {
    width: 100%;
    max-width: 520px;
    text-align: left;
  }
  .trust-globe-wrap {
    order: -1;
  }
  .trust-globe-stage {
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  .trust-section {
    padding: 48px 22px;
  }
}

/* ---- About page: closing CTA band before the footer ---- */
.closing-cta {
  padding: 120px 64px;
  background: #fff;
  color: #111;
  text-align: center;
}

.closing-cta-inner {
  max-width: 760px;
  margin: 0 auto;
}

.closing-cta h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.closing-cta p {
  max-width: 640px;
  margin: 22px auto 0;
  color: #444;
  font-size: 16px;
  line-height: 1.7;
}

.closing-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
}

.closing-cta-arrow {
  transition: transform 0.18s ease;
}

.closing-cta-btn:hover .closing-cta-arrow {
  transform: translateX(5px);
}

@media (max-width: 900px) {
  .closing-cta {
    padding: 96px 40px;
  }
}

@media (max-width: 600px) {
  .closing-cta {
    padding: 72px 22px;
  }
}

/* Testimonials (last section before the footer) */
.testimonials {
  padding: 112px 56px;
  background: #f3f3f3;
  color: #111;
}

.testimonials-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.testimonials-head {
  max-width: 760px;
  margin-bottom: 60px;
}

.testimonials-head h2 {
  margin: 0;
  font-size: clamp(34px, 4.8vw, 62px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.testimonials-head p {
  max-width: 560px;
  margin: 22px 0 0;
  color: #555;
  font-size: 17px;
  line-height: 1.6;
}

.testimonials-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
}

.testimonial-photos {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 28px;
  background: #d9d9d9;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.14);
}

.testimonial-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center 25%);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s ease, transform 0.9s ease;
}

.testimonial-photo.is-active {
  opacity: 1;
  transform: scale(1);
}

/* All quotes share one grid cell, so the box keeps the height of the
   longest quote and nothing jumps when you switch. */
.testimonial-panels {
  display: grid;
}

.testimonial-panel {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.testimonial-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.12s, 0.12s, 0s;
}

.testimonial-panel blockquote {
  margin: 0;
  padding-top: 30px;
  border-top: 2px solid #111;
}

.testimonial-panel blockquote p {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.testimonial-panel figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
}

.testimonial-panel figcaption strong {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.testimonial-panel figcaption span {
  color: #666;
  font-size: 14px;
}

.testimonial-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 44px;
}

.testimonial-tab {
  width: 60px;
  height: 60px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: #d9d9d9;
  opacity: 0.6;
  filter: grayscale(0.6);
  transition: opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

.testimonial-tab img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-tab:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.testimonial-tab.is-active {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 3px #f3f3f3, 0 0 0 5px #111;
}

.testimonial-tab:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

.testimonials-note {
  margin: 56px 0 0;
  color: #777;
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .testimonials {
    padding: 84px 32px;
  }
  .testimonials-head {
    margin-bottom: 40px;
  }
  .testimonials-stage {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .testimonial-photos {
    aspect-ratio: 4 / 4.4;
    max-width: 520px;
  }
}

@media (max-width: 600px) {
  .testimonials {
    padding: 64px 20px;
  }
  .testimonial-photos {
    border-radius: 22px;
  }
  .testimonial-tab {
    width: 52px;
    height: 52px;
  }
  .testimonial-tabs {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-photo,
  .testimonial-panel,
  .testimonial-tab {
    transition: none;
  }
}