/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #F5F4F0;
  background-image: url('Images/tile.png.jpeg');
  background-repeat: repeat;
  background-size: 50px 50px;
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  color: #1A1918;
}

/* ─── Splash Screen ─── */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: #F5F4F0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.splash-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 3rem;
  letter-spacing: -0.02em;
  color: #1A1918;
}

/* ─── Top Bar ─── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.top-bar-left {
  flex: 1;
}

.logo {
  display: inline-block;
  text-decoration: none;
}

.logo-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 30px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.01em;
  line-height: 1;
}

.top-bar-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* ─── Glass Navigation Bar ─── */
.glass-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 16px;
  padding: 6px 24px;
  height: 48px;
  z-index: 10;
}

.glass-nav::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 16px;
  box-shadow:
    rgba(0, 0, 0, 0.08) 0px 2px 4px -2px,
    rgba(0, 0, 0, 0.03) 0px 8px 16px -8px,
    rgba(255, 255, 255, 0.5) 0px -5px 6px 0px inset,
    rgba(255, 255, 255, 0.12) 0px -8px 24px 0px inset;
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  background: linear-gradient(
    rgba(255, 255, 255, 0.8) 7%,
    rgba(255, 255, 255, 0) 86%
  ) rgba(255, 255, 255, 0.12);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Expanded state when dropdown is open */
.glass-nav.panel-open::before {
  width: var(--panel-width, 100%);
  height: var(--panel-height, 100%);
  border-radius: 16px;
  background: linear-gradient(
    rgba(255, 255, 255, 0.92) 7%,
    rgba(255, 255, 255, 0.85) 86%
  ) rgba(255, 255, 255, 0.45);
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 4px 12px -2px,
    rgba(0, 0, 0, 0.05) 0px 12px 24px -8px,
    rgba(255, 255, 255, 0.6) 0px -5px 6px 0px inset,
    rgba(255, 255, 255, 0.2) 0px -8px 24px 0px inset;
}

.nav-item {
  position: relative;
}

.nav-link {
  padding: 6px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1A1918;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  transition: all 0.2s;
}

.nav-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.nav-link:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* ─── Dropdown Panels ─── */
.dropdown-panels {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 20;
}

.dropdown-panel {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  padding: 16px 20px;
  white-space: nowrap;
}

.dropdown-panel.active {
  opacity: 1;
  pointer-events: auto;
}

/* Dropdown layout — flex columns */
.dropdown-layout {
  display: flex;
  gap: 8px;
}

.dropdown-col {
  display: flex;
  flex-direction: column;
}

.dropdown-layout-product,
.dropdown-layout-using-vony {
  gap: 20px;
  align-items: stretch;
}

.dropdown-layout-company {
  gap: 20px;
  align-items: stretch;
}

.dropdown-layout-releases {
  gap: 20px;
  align-items: stretch;
}

/* Dropdown image placeholder */
.dropdown-img {
  width: 160px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}

.dropdown-img svg {
  display: block;
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #1A1918;
  transition: background 0.15s;
  white-space: nowrap;
}

.dropdown-link:hover {
  background: rgba(0, 0, 0, 0.05);
}

.dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1A1918;
}

.dropdown-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #787776;
  line-height: 1.3;
}

/* ─── Buttons ─── */
.btn-signin {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1918;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 10px;
  transition: all 0.2s;
}

.btn-signin:hover {
  background: rgba(0, 0, 0, 0.06);
}

.btn-getstarted {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #1A1918;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 10px;
  transition: all 0.2s;
}

.btn-getstarted:hover {
  background: #333;
}

/* ─── Hero ─── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px 40px;
  z-index: 2;
}

/* Floating messy items layer */
.floating-items {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.float-item {
  position: absolute;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

.float-item-inner {
  animation: floatSlideIn 0.7s ease-out backwards;
}

@keyframes floatSlideIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
}

/* Individual item positions — pushed to edges, clearing center hero text and top bar */
/* Top-left — below nav */
.float-imessage {
  top: 14%;
  left: -1%;
  transform: rotate(-4deg);
}
.float-imessage .float-item-inner { animation-delay: 0.2s; }

/* Mid-right — between reminder1 (top-right) and whatsapp (bottom-right) */
.float-notification {
  top: 52%;
  right: -1%;
  transform: rotate(-2deg);
}
.float-notification .float-item-inner { animation-delay: 0.4s; }

/* Mid-left */
.float-postit {
  top: 42%;
  left: 2%;
  transform: rotate(5deg);
}
.float-postit .float-item-inner { animation-delay: 0.35s; }

/* Mid-left */
.float-reminder1 {
  top: 16%;
  right: -1%;
  transform: rotate(-3deg);
}
.float-reminder1 .float-item-inner { animation-delay: 0.6s; }

/* Mid-right */
.float-calculator {
  top: 34%;
  right: 1%;
  transform: rotate(6deg);
}
.float-calculator .float-item-inner { animation-delay: 0.7s; }

/* Bottom-right corner */
.float-whatsapp {
  bottom: -1%;
  right: -1%;
  transform: rotate(2deg);
}
.float-whatsapp .float-item-inner { animation-delay: 0.3s; }

/* Bottom-left */
.float-excel {
  bottom: -2%;
  left: -1%;
  transform: rotate(-3deg);
}
.float-excel .float-item-inner { animation-delay: 0.55s; }

/* Bottom-center-left */
.float-notes {
  bottom: -2%;
  left: 22%;
  transform: rotate(-2deg);
}
.float-notes .float-item-inner { animation-delay: 0.5s; }

/* Bottom-center */
.float-reminder2 {
  bottom: 6%;
  left: 38%;
  transform: rotate(2deg);
}
.float-reminder2 .float-item-inner { animation-delay: 0.65s; }

/* Bottom, between reminder2 and whatsapp */
.float-postit2 {
  bottom: 3%;
  right: 20%;
  transform: rotate(-3deg);
}
.float-postit2 .float-item-inner { animation-delay: 0.58s; }

/* Dashboard card pile in hero */
.hero-card-pile {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 140px;
  z-index: 1;
  pointer-events: none;
}

.pile-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) rotate(var(--rotate, 0deg));
  background: #fff;
  padding: 12px 20px 12px 16px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1A1918;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-left: 3px solid #7EC0EA;
  opacity: 0.85;
  animation: floatSlideIn 0.7s ease-out backwards;
}

.pile-card:nth-child(1) .pile-card-dot, .pile-card:nth-child(1) { animation-delay: 0.8s; }
.pile-card:nth-child(2) { animation-delay: 0.85s; }
.pile-card:nth-child(3) { animation-delay: 0.9s; }
.pile-card:nth-child(4) { animation-delay: 0.95s; }
.pile-card:nth-child(5) { animation-delay: 1.0s; }
.pile-card:nth-child(6) { animation-delay: 1.05s; }
.pile-card:nth-child(7) { animation-delay: 1.1s; }
.pile-card:nth-child(8) { animation-delay: 1.15s; }

.pile-card-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #7EC0EA;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* Hero content (on top of floating items) */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 600;
  line-height: 1.15;
  color: #1A1918;
  letter-spacing: -0.02em;
}

.hero-title em,
#typewriter-word {
  font-style: italic;
}

.typewriter-cursor {
  font-style: normal;
  font-weight: 400;
  color: #1A1918;
  animation: cursorBlink 1.06s step-end infinite;
  margin-left: 2px;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-cta {
  display: inline-block;
  margin-top: 32px;
  padding: 14px 36px;
  background: #1A1918;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s;
}

.hero-cta:hover {
  background: #333;
}

/* ─── Dashboard Scroll Section ─── */
.dashboard-section {
  position: relative;
  padding: 0px 40px 80px;
  overflow: visible;
  z-index: 1;
}

.dashboard-container {
  max-width: 1100px;
  margin: 0 auto;
  overflow: visible;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.card-small {
  min-height: 160px;
}

.card-wide {
  min-height: 160px;
}

.card-tall {
  min-height: 340px;
  grid-row: span 2;
}

.card-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #A8A7A5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Placeholder for future images */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* ─── Portal Dashboard Box (homepage) ─── */
.pdb-box {
  grid-column: 1 / -1;
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  overflow: hidden;
}

.pdb-layout {
  display: grid;
  grid-template-columns: 2fr 0.82fr;
  gap: 16px;
  align-items: start;
}

.pdb-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pdb-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Inbox bar */
.pdb-inbox {
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  height: 40px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 0 18px rgba(0,0,0,0.13),
    0 2px 8px rgba(0,0,0,0.09);
}

.pdb-inbox-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(3,172,234,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pdb-inbox-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(6, 18, 54, 0.79);
}

/* Paired row */
.pdb-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── New VonyPortal home layout ── */

/* Top: 3 summary cards */
.pdb-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* Aurora glow cards */
.pdb-aurora {
  position: relative !important;
  background: transparent !important;
  overflow: visible !important;
}
.pdb-aurora-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  filter: blur(1.5px) saturate(1.1);
  opacity: 0.9;
  border-radius: 15px;
  z-index: 0;
  pointer-events: none;
}
/* Due — soft pastel lavender/lilac */
.pdb-aurora-glow--due {
  background: linear-gradient(135deg, rgb(196,213,255) 0%, rgb(220,210,255) 35%, rgb(230,205,245) 70%, rgb(200,215,245) 100%);
}
/* Incoming — soft pastel cyan/mint */
.pdb-aurora-glow--incoming {
  background: linear-gradient(135deg, rgb(200,238,252) 0%, rgb(205,240,240) 40%, rgb(210,242,235) 70%, rgb(200,238,252) 100%);
}
.pdb-aurora-inner {
  position: relative;
  z-index: 1;
  padding: 14px 20px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(245,251,255,0.93) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.08);
  backdrop-filter: blur(16px) saturate(1.8) brightness(1.08);
  border: 1.5px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 16px rgba(29,91,148,0.10), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(200,220,240,0.3);
}
.pdb-aurora--incoming .pdb-aurora-inner {
  background: linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(240,252,255,0.93) 100%);
  box-shadow: 0 2px 16px rgba(3,172,234,0.10), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(180,230,245,0.3);
}

/* Section headers (new portal style) */
.pdb-section-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.pdb-section-icon {
  width: 20px; height: 20px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pdb-section-icon--blue { background: rgba(29,91,148,0.12); }
.pdb-section-icon--cyan { background: rgba(3,172,234,0.12); }
.pdb-section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #9B9A98;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pdb-section-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #9B9A98;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Portal card header with border-bottom */
.pdb-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* Notification bar */
.pdb-notif-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9px;
  background: rgba(3,172,234,0.06);
  border: 1px solid rgba(3,172,234,0.15);
  margin-bottom: 16px;
}
.pdb-notif-bar .pdb-section-icon {
  width: 20px; height: 20px;
}
.pdb-notif-bar-text {
  flex: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1A1918;
}
.pdb-notif-bar-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #03ACEA;
  padding: 3px 10px;
  border-radius: 6px;
  background: white;
  border: 1px solid rgba(3,172,234,0.2);
  flex-shrink: 0;
}

/* Overview card */
.pdb-overview-card {
  padding: 14px 20px;
  background: white !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pdb-overview-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.pdb-overview-metric {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pdb-overview-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #787776;
}
.pdb-overview-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pdb-overview-val--cyan { color: #03ACEA; }
.pdb-overview-val--dark { color: #1A1918; }

/* Masonry 2-column layout */
.pdb-masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pdb-masonry-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Progress section (How month is going) */
.pdb-progress-section {
  padding: 6px 0;
}
.pdb-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #1A1918;
}
.pdb-progress-val {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pdb-progress-val--cyan { color: #03ACEA; }
.pdb-progress-val--navy { color: #1D5B94; }

/* Predicted bars */
.pdb-bar--predicted { opacity: 0.3; }
.pdb-legend-dot--predicted { background: rgba(3,172,234,0.25); }
.pdb-chart-label--future { color: #C5C3C0; }

/* Date row tweak for aurora cards */
.pdb-sub--right {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 13px;
  color: #787776;
}

/* Your Friends row */
.pdb-friends-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.pdb-friend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pdb-friend .pdb-avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
  border-radius: 8px;
}
.pdb-friend-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #4B4A48;
}

/* Invite Friends card */
.pdb-invite-card {
  background: linear-gradient(135deg, rgba(3,172,234,0.06) 0%, rgba(124,58,237,0.06) 100%) !important;
  border: 1px solid rgba(3,172,234,0.15) !important;
}
.pdb-invite-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pdb-invite-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdb-invite-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1A1918;
}
.pdb-invite-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #787776;
}
.pdb-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #03ACEA;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.pdb-invite-btn:hover { background: #029CD5; }
.pdb-invite-menu {
  display: none;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  flex-direction: column;
  gap: 4px;
}
.pdb-invite-menu.open { display: flex; }
.pdb-invite-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #1A1918;
  text-align: left;
  transition: background 0.15s;
}
.pdb-invite-option:hover { background: rgba(0,0,0,0.03); }
.pdb-invite-option-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Avatar circles */
.pdb-avatar {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.pdb-avatar--purple { background: #7C3AED; }
.pdb-avatar--blue { background: #3B82F6; }
.pdb-avatar--pink { background: #EC4899; }
.pdb-avatar--green { background: #16A34A; }

/* Upcoming purpose text */
.pdb-upcoming-purpose {
  color: #9B9A98;
}

/* Badge cyan variant */
.pdb-badge--cyan {
  background: rgba(3,172,234,0.10);
  color: #03ACEA;
}

/* Responsive: stack cards vertically on mobile, scrollable box */
@media (max-width: 900px) {
  .pdb-box {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y proximity;
  }
  .pdb-summary-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pdb-masonry {
    grid-template-columns: 1fr;
  }
  .pdb-masonry-col {
    gap: 10px;
  }
  .pdb-masonry {
    gap: 12px;
  }
  .pdb-masonry-col {
    gap: 12px;
  }
}
@media (max-width: 600px) {
  .dashboard-section {
    padding: 0 12px 40px;
  }
  .pdb-box {
    padding: 12px;
    border-radius: 14px;
  }
  .pdb-summary-row {
    gap: 8px;
    margin-bottom: 10px;
  }
  .pdb-masonry {
    gap: 8px;
  }
  .pdb-masonry-col {
    gap: 8px;
  }
  .pdb-card {
    padding: 12px 14px;
  }
  .pdb-aurora-inner {
    padding: 12px 14px;
  }
}

/* Card shell */
.pdb-card {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  padding: 14px 18px;
  overflow: hidden;
}

.pdb-card--blue {
  background: #03ACEA;
}

.pdb-card-header {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #9B9A98;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pdb-card-header--blue {
  color: rgba(255,255,255,0.75);
}

.pdb-header-right {
  font-size: 11px;
  font-weight: 500;
  color: #9B9A98;
  text-transform: none;
  letter-spacing: 0;
}

.pdb-card-body {
  background: transparent;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}

.pdb-card-body--pad {
  padding: 0;
}

.pdb-card-inner {
  padding: 14px 14px 18px;
  position: relative;
}

/* Date + badge row */
.pdb-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.pdb-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1A1918;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pdb-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}

.pdb-badge--neutral {
  color: #5C5B5A;
  background: rgba(0,0,0,0.05);
}

.pdb-badge--late {
  color: #E8726E;
  background: rgba(232,114,110,0.12);
}

.pdb-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #9B9A98;
  position: absolute;
  bottom: 6px;
  right: 14px;
}

/* Amount display */
.pdb-amount {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 18px;
}

.pdb-amount--blue { color: #54A6CF; }
.pdb-amount--dark { color: #1A1918; }

/* Upcoming payments rows */
.pdb-upcoming-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(0,0,0,0.05);
}

.pdb-upcoming-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pdb-upcoming-row:first-child {
  padding-top: 0;
}

.pdb-upcoming-info {
  flex: 1;
  min-width: 0;
}

.pdb-upcoming-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #1A1918;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdb-upcoming-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #9B9A98;
  margin-top: 1px;
}

.pdb-upcoming-amt {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1A1918;
  flex-shrink: 0;
}

.pdb-upcoming-amt--in { color: #54A6CF; }

/* Bar chart */
.pdb-chart { display: flex; flex-direction: column; gap: 8px; }

.pdb-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 80px;
  gap: 4px;
}

.pdb-bar-group {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1;
  height: 100%;
}

.pdb-bar {
  width: 8px;
  flex-shrink: 0;
  border-radius: 3px 3px 0 0;
}

.pdb-bar--owed { background: #03ACEA; }
.pdb-bar--owe  { background: #1D5B94; }

.pdb-chart-labels {
  display: flex;
  justify-content: space-around;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: #787776;
}

.pdb-chart-label--current { font-weight: 700; color: #5C5B5A; }

.pdb-chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.pdb-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #787776;
}

.pdb-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pdb-legend-dot--owed { background: #03ACEA; }
.pdb-legend-dot--owe  { background: #1D5B94; }

/* Active loans */
.pdb-loan-row {
  margin-bottom: 14px;
}

.pdb-loan-row:last-child { margin-bottom: 0; }

.pdb-loan-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}

.pdb-loan-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1A1918;
  text-align: left;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdb-loan-pct {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #787776;
}

.pdb-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
}

.pdb-progress-track--lent   { background: rgba(3,172,234,0.1); }
.pdb-progress-track--borrow { background: rgba(29,91,148,0.1); }

.pdb-progress-fill {
  height: 100%;
  border-radius: 4px;
}

.pdb-progress-fill--lent   { background: #03ACEA; }
.pdb-progress-fill--borrow { background: #1D5B94; }

.pdb-loan-detail {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #9B9A98;
  margin-top: 3px;
  text-align: left;
}

/* Month grid */
.pdb-month-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pdb-month-col {
  text-align: center;
  padding: 0 10px;
}

.pdb-month-col--left { border-right: 1px solid rgba(0,0,0,0.06); }

.pdb-month-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #9B9A98;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pdb-month-amt {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pdb-month-amt--blue { color: #54A6CF; }
.pdb-month-amt--dark { color: #1A1918; }

.pdb-mini-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.pdb-mini-track--blue  { background: rgba(84,166,207,0.15); }
.pdb-mini-track--light { background: rgba(126,192,234,0.20); }

.pdb-mini-fill {
  height: 100%;
  border-radius: 2px;
}

.pdb-mini-fill--blue  { background: #54A6CF; }
.pdb-mini-fill--light { background: #7EC0EA; }

.pdb-month-exp {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: #9B9A98;
  margin-top: 4px;
}

/* Recent activity */
.pdb-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(0,0,0,0.05);
}

.pdb-activity-row:first-child { padding-top: 0; }
.pdb-activity-row:last-child { border-bottom: none; padding-bottom: 0; }

.pdb-activity-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pdb-activity-info { flex: 1; min-width: 0; }

.pdb-activity-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #1A1918;
}

.pdb-activity-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #787776;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 900px) {
  .pdb-layout {
    grid-template-columns: 1fr;
  }
  .pdb-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .pdb-pair {
    grid-template-columns: 1fr;
  }
  .pdb-right {
    grid-template-columns: 1fr;
  }
}

/* ===================== Loan Details Dashboard ===================== */
.ldd-box { background: #E5E2DF; border-radius: 18px; padding: 16px; }
.ldd-layout { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; }
.ldd-nav { display: flex; flex-direction: column; gap: 2px; }
.ldd-nav-item { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; color: #9B9A98; padding: 6px 8px; border-radius: 8px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ldd-nav-item.ldd-active { background: white; color: #1A1918; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.ldd-main { display: flex; flex-direction: column; gap: 10px; }
.ldd-loan-header { background: white; border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ldd-loan-header-icon { width: 22px; height: 22px; border-radius: 6px; background: rgba(3,172,234,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ldd-loan-header-text { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; color: #1A1918; }
.ldd-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.ldd-col { display: flex; flex-direction: column; gap: 10px; }
.ldd-progress-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.ldd-stacked { display: flex; flex-direction: column; gap: 8px; }
.ldd-card--highlight { background: rgba(84,166,207,0.06); border: 1px solid rgba(84,166,207,0.15); border-radius: 14px; overflow: hidden; box-shadow: 0px 10px 30px rgba(0,0,0,0.04), 0px 2px 8px rgba(0,0,0,0.07); }
.ldd-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ldd-stat-item { text-align: center; }
.ldd-stat-label { font-family: 'DM Sans', sans-serif; font-size: 9px; color: #787776; font-weight: 500; margin-bottom: 2px; }
.ldd-stat-value { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; color: #1A1918; }
.ldd-stat-sub { font-family: 'DM Sans', sans-serif; font-size: 8px; color: #787776; margin-top: 1px; }
.ldd-chart-wrap { display: flex; flex-direction: column; gap: 0; }
.ldd-chart-area { display: flex; align-items: flex-end; gap: 6px; }
.ldd-chart-yaxis { display: flex; flex-direction: column; justify-content: space-between; height: 80px; padding-right: 4px; flex-shrink: 0; }
.ldd-chart-yaxis span { font-family: 'DM Sans', sans-serif; font-size: 9px; color: #787776; }
.ldd-chart-main { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ldd-chart-bars { display: flex; align-items: stretch; gap: 4px; height: 80px; }
.ldd-chart-labels { display: flex; gap: 4px; }
.ldd-chart-col { flex: 1; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.ldd-chart-labels .ldd-chart-col { justify-content: center; text-align: center; }
.ldd-chart-bar { width: 14px; border-radius: 3px 3px 0 0; }
.ldd-chart-bar-partial { width: 14px; }
.ldd-chart-bar--done { background: #03ACEA; }
.ldd-chart-bar--proj { background: rgba(3,172,234,0.28); box-sizing: border-box; }
.ldd-chart-bar--pending {
  background: #03ACEA;
  border-top: 1.5px dashed rgba(255,255,255,0.7);
  border-left: 1.5px dashed rgba(3,172,234,0.4);
  border-right: 1.5px dashed rgba(3,172,234,0.4);
  box-sizing: border-box;
}
.ldd-chart-bar--expected {
  background: rgba(3,172,234,0.18);
  border: 1.5px dashed rgba(3,172,234,0.5);
  border-bottom: none;
  box-sizing: border-box;
}
.ldd-chart-bar-partial { position: relative; width: 14px; }
/* Expected (full bar height) — dashed cyan outline on top */
.ldd-chart-bar-partial-expected {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 3px 3px 0 0;
  background: rgba(3,172,234,0.18);
  border: 1.5px dashed rgba(3,172,234,0.5);
  border-bottom: none;
  box-sizing: border-box;
}
/* Paid portion in standard blue, sits over the expected fill */
.ldd-chart-bar-partial-paid {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 3px 3px 0 0;
  background: #03ACEA;
}
.ldd-chart-lbl { font-family: 'DM Sans', sans-serif; font-size: 8px; color: #787776; margin-top: 4px; text-align: center; }
.ldd-chart-lbl--active { color: #54A6CF; }
.ldd-chart-legend { display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 8px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }
.ldd-legend-item { display: flex; align-items: center; gap: 4px; font-family: 'DM Sans', sans-serif; font-size: 9px; color: #4B4A48; }
.ldd-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.ldd-doc-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 4px 0; }
.ldd-doc-btn { display: inline-flex; align-items: center; gap: 6px; background: #1A1918; border-radius: 9px; padding: 7px 12px; cursor: default; }
.ldd-doc-btn-label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; color: white; }
.ldd-doc-btn-i { width: 14px; height: 14px; border-radius: 50%; background: white; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ldd-doc-btn-i span { font-size: 9px; font-weight: 800; color: #1A1918; line-height: 1; }
.ldd-pmt-circle-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: rgba(0,0,0,0.03); }
.ldd-pmt-circle-row + .ldd-pmt-circle-row { margin-top: 6px; }
.ldd-pmt-info { flex: 1; min-width: 0; }
.ldd-pmt-info-title { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; color: #4B4A48; margin: 0; }
.ldd-pmt-info-paid { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; color: #15803D; margin: 1px 0 0; }
.ldd-pmt-info-due { font-family: 'DM Sans', sans-serif; font-size: 10px; color: #4B4A48; margin: 1px 0 0; }
.ldd-pmt-info-remaining { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; color: #03ACEA; margin: 1px 0 0; }
.ldd-pmt-status { flex-shrink: 0; padding: 4px 10px; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; }
.ldd-pmt-status--done { background: rgba(22,163,74,0.18); color: #16A34A; }
.ldd-pmt-status--upcoming { background: rgba(0,0,0,0.03); color: #787776; }
.ldd-activity-list { display: flex; flex-direction: column; }
.ldd-activity-row { display: flex; gap: 8px; align-items: flex-start; padding-bottom: 8px; }
.ldd-activity-row:last-child { padding-bottom: 0; }
.ldd-activity-dot { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; box-shadow: 0 0 0 3px white; position: relative; z-index: 1; }
.ldd-activity-desc { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500; color: #1A1918; line-height: 1.4; }
.ldd-activity-date { font-family: 'DM Sans', sans-serif; font-size: 9px; color: #787776; margin-top: 1px; }
.ldd-pmt-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.ldd-pmt-row:first-child { padding-top: 0; }
.ldd-pmt-row:last-child { border-bottom: none; padding-bottom: 0; }
.ldd-pmt-num { font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700; color: #9B9A98; width: 16px; flex-shrink: 0; }
.ldd-pmt-date { font-family: 'DM Sans', sans-serif; font-size: 9px; color: #787776; flex: 1; }
.ldd-pmt-amt { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; color: #1A1918; }
.ldd-pmt-badge { font-family: 'DM Sans', sans-serif; font-size: 8px; font-weight: 700; border-radius: 4px; padding: 2px 5px; }
.ldd-badge--done { background: rgba(22,163,74,0.12); color: #16A34A; }
.ldd-badge--upcoming { background: rgba(0,0,0,0.05); color: #9B9A98; }
.ldd-record-btn { display: inline-flex; align-items: center; justify-content: center; background: #1A1918; border-radius: 7px; padding: 6px 12px; }
.ldd-record-btn-label { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; color: white; }
@media (max-width: 560px) {
  .ldd-layout { grid-template-columns: 1fr; }
  .ldd-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .ldd-progress-row { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .ldd-content-grid { grid-template-columns: 1fr; }
  .ldd-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Loan Details floating notification badges ─── */
.ldd-float-wrap {
  position: relative;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* ─── Browser chrome wrapper ─── */
.ldd-browser-chrome {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  width: 100%;
}

/* ─── Safari-style browser bar ─── */
.ldd-browser-bar {
  height: 42px;
  background: #EAEAEA;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  flex-shrink: 0;
}
.ldd-browser-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ldd-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
}
.ldd-browser-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: rgba(0,0,0,0.3);
}
.ldd-browser-nav svg {
  width: 15px;
  height: 15px;
}
.ldd-browser-url-bar {
  flex: 1;
  max-width: 360px;
  margin: 0 auto;
  height: 25px;
  background: rgba(255,255,255,0.9);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  overflow: hidden;
}
.ldd-browser-url-bar svg {
  width: 10px;
  height: 10px;
  color: rgba(0,0,0,0.45);
  flex-shrink: 0;
}
.ldd-browser-url-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #1A1918;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ldd-browser-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: rgba(0,0,0,0.38);
  flex-shrink: 0;
}
.ldd-browser-actions svg {
  width: 14px;
  height: 14px;
}
.ldd-browser-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #03ACEA 0%, #7C3AED 100%);
  flex-shrink: 0;
}

/* ─── Notifications row — floats over the browser bar ─── */
.ldd-floaters-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 10;
  pointer-events: none;
  padding: 0 14px;
}
.ldd-floaters-row .ldd-floater {
  position: static;
  max-width: none;
  white-space: nowrap;
}

/* Base floater styles */
.ldd-floater {
  background: #fff;
  border-radius: 10px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07);
  z-index: 6;
  pointer-events: none;
}
.ldd-floater-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ldd-floater-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1A1918;
  line-height: 1.35;
  white-space: nowrap;
}

/* ─── Everyday Lending Section ─── */
.everyday-section {
  padding: 80px 40px 80px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.everyday-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.2;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.everyday-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  margin-bottom: 48px;
}

/* Feature Icons Grid */
.everyday-features {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px 40px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.ef-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ef-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ef-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1A1918;
}

/* ─── Scrolling Marquee ─── */
.marquee-section {
  overflow: hidden;
  padding: 32px 0;
  position: relative;
}

.marquee-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right, #F5F4F0 0%, transparent 15%, transparent 85%, #F5F4F0 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  animation: marquee-scroll 20s linear infinite;
  width: max-content;
}

.marquee-item {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #A8A7A5;
  text-transform: lowercase;
}

.marquee-dot {
  font-size: 18px;
  color: #C7C6C4;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Browser Mockup Section ─── */
.browser-section {
  padding: 80px 40px 80px;
  text-align: center;
}

.browser-copy {
  max-width: 744px;
  margin: 0 auto;
  padding: 0 12px;
}

.browser-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  color: #1A1918;
  margin-bottom: 16px;
}

.browser-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(26, 25, 24, 0.5);
  max-width: 480px;
  margin: 0 auto 40px;
}

/* Browser container + frame */
.browser-container {
  max-width: min(1100px, 90vw);
  margin: 0 auto;
}

.browser-frame {
  border-radius: 16px;
  overflow: hidden;
  border: none;
  box-shadow:
    rgba(0, 0, 0, 0.06) 0 0 0 1px,
    rgba(0, 0, 0, 0.06) 4px 6px 15px,
    rgba(0, 0, 0, 0.06) 16px 23px 28px,
    rgba(0, 0, 0, 0.03) 36px 51px 38px,
    rgba(0, 0, 0, 0.01) 64px 91px 45px;
  transition: box-shadow 0.2s;
}

.browser-container:hover .browser-frame {
  border-color: rgba(31, 31, 30, 0.18);
}

/* Browser chrome bar */
.browser-bar {
  display: flex;
  align-items: center;
  height: 38px;
  background: #F6F6F6;
  border-bottom: 1px solid #E5E5E5;
  padding: 0 14px;
  position: relative;
}

.browser-dots {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}

.browser-dots .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.dot-red { background: #FF5F57; }
.dot-yellow { background: #FFBD2E; }
.dot-green { background: #27C93F; }

.browser-nav-arrows {
  display: flex;
  gap: 4px;
  margin-left: 14px;
  flex-shrink: 0;
}

.browser-nav-arrows svg {
  opacity: 0.5;
}

.browser-url-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #EAEAEA;
  border-radius: 6px;
  padding: 4px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #666;
}

.lock-icon {
  flex-shrink: 0;
}

/* Browser content — 3-panel layout */
.browser-content {
  display: flex;
  background: #fff;
  min-height: 380px;
}

/* Sidebar */
.bm-sidebar {
  width: 170px;
  background: #1A1918;
  padding: 18px 0;
  flex-shrink: 0;
}

.bm-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}

.bm-logo-circle {
  width: 26px;
  height: 26px;
  background: #7EC0EA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-logo-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.bm-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}

.bm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  cursor: default;
}

.bm-nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.bm-nav-item svg {
  flex-shrink: 0;
}

/* Main table area */
.bm-main {
  flex: 1;
  padding: 20px 24px;
  min-width: 0;
}

.bm-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.bm-main-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
}

.bm-filter-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #666;
  background: #F5F5F5;
  padding: 5px 12px;
  border-radius: 20px;
}

/* Table */
.bm-table-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 0 0 8px;
  border-bottom: 1px solid #F0F0F0;
  margin-bottom: 2px;
}

.bm-table-head span {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bm-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #F8F8F8;
}

.bm-row > div {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #1A1918;
}

.bm-col-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.bm-col-amount {
  font-weight: 600;
}

.bm-col-due {
  color: #666;
}

.bm-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

/* Status badges */
.bm-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
}

.badge-track {
  background: #E8F5E9;
  color: #2E7D32;
}

.badge-soon {
  background: #FFF3E0;
  color: #E65100;
}

.badge-overdue {
  background: #FEE2E2;
  color: #C62828;
}

/* Summary panel */
.bm-summary {
  width: 200px;
  background: #FAFAFA;
  border-left: 1px solid #F0F0F0;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.bm-summary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bm-summary-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bm-summary-value {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1A1918;
}

.bm-summary-date {
  font-size: 18px;
}

.bm-summary-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #999;
}

.bm-progress-bar {
  height: 6px;
  background: #E8E8E8;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.bm-progress-fill {
  height: 100%;
  background: #7EC0EA;
  border-radius: 3px;
}

/* Loan progress cards (browser mockup 2) */
.loan-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loan-card {
  background: #FAFAFA;
  border: 1px solid #F0F0F0;
  border-radius: 10px;
  padding: 14px 16px;
}

.loan-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.loan-card-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loan-card-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1A1918;
}

.loan-card-purpose {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #999;
}

.loan-card-amount {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1A1918;
}

.loan-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.loan-progress-bar {
  flex: 1;
  height: 6px;
  background: #E8E8E8;
  border-radius: 3px;
  overflow: hidden;
}

.loan-progress-bar-done {
  background: #C8E6C9;
}

.loan-progress-fill {
  height: 100%;
  background: #7EC0EA;
  border-radius: 3px;
}

.loan-progress-pct {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #1A1918;
  min-width: 30px;
  text-align: right;
}

.loan-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loan-card-detail {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #999;
}

.loan-card-next {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #666;
  font-weight: 500;
}

.loan-card-complete {
  background: #F0FAF2;
  border-color: #C8E6C9;
}

/* ─── Notification Ticker Section ─── */
/* Feature sections (Payments at a Glance, Track Loan Progress) */
.feature-section {
  padding: 80px 40px;
}

.feature-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.feature-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-image {
  display: flex;
  justify-content: center;
}

/* ─── Mini calendar (Payments at a Glance) ─── */
.feature-image {
  align-items: flex-end;
  gap: 0;
  position: relative;
}

.mini-cal {
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0px 20px 40px rgba(0,0,0,0.08), 0px 3px 10px rgba(0,0,0,0.12);
  width: 190px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-right: -18px;
  margin-bottom: 40px;
}

.mini-cal-month {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 8px;
}

.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 2px;
}

.mini-cal-header span {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #787776;
  text-align: center;
  padding: 4px 0;
}

.mini-cal-day {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #1A1918;
  text-align: center;
  padding: 4px 2px;
  border-radius: 5px;
  position: relative;
}

.mini-cal-today {
  background: #54A6CF;
  color: #fff;
  font-weight: 700;
}

.mini-cal-day--in {
  background: rgba(3,172,234,0.08);
}

.mini-cal-day--in::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #03ACEA;
  margin: 1px auto 0;
}

.mini-cal-day--pay {
  background: rgba(29,91,148,0.1);
}

.mini-cal-day--pay::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1D5B94;
  margin: 1px auto 0;
}

.mini-cal-day--late {
  color: #E8726E;
  font-weight: 600;
}

.mini-cal-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.mini-cal-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: #787776;
}

.mini-cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mini-cal-dot--in  { background: #03ACEA; }
.mini-cal-dot--pay { background: #1D5B94; }

/* ─── Upcoming payment cards (Payments at a Glance) ─── */
.upcard-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.upcard {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  padding: 14px 18px;
  overflow: hidden;
}

.upcard--blue {
  background: rgba(255,255,255,0.85);
}

.upcard-header {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #9B9A98;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 0 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upcard-header--blue {
  color: #9B9A98;
}

.upcard-header-right {
  font-size: 9px;
  font-weight: 500;
  color: #9B9A98;
  text-transform: none;
  letter-spacing: 0;
}

.upcard-header-right--blue {
  color: #9B9A98;
}

.upcard-body {
  background: transparent;
  margin: 0;
  border-radius: 0;
  padding: 4px 16px 10px;
}

.upcard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(0,0,0,0.05);
}

.upcard-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.upcard-row:first-child {
  padding-top: 8px;
}

.upcard-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 40px;
  text-align: center;
}

.upcard-badge--neutral {
  color: #5C5B5A;
  background: rgba(0,0,0,0.05);
}

.upcard-badge--late {
  color: #E8726E;
  background: rgba(232,114,110,0.12);
}

.upcard-info {
  flex: 1;
  min-width: 0;
}

.upcard-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #1A1918;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcard-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #9B9A98;
  margin-top: 1px;
}

.upcard-amt {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1A1918;
  flex-shrink: 0;
}

.upcard-amt--in {
  color: #54A6CF;
}

.feature-stacked {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.feature-stacked-image {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 24px 20px;
  overflow: visible;
}

.notif-section {
  padding: 80px 40px 80px;
}

.notif-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
}

.notif-left {
  display: flex;
  justify-content: center;
}

.notif-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.15;
  color: #1A1918;
  letter-spacing: -0.02em;
}

.notif-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  max-width: 400px;
}

.notif-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px 32px 0;
  width: 400px;
  overflow: visible;
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.ticker-wrapper {
  width: 100%;
  height: 345px;
  overflow: hidden;
  position: relative;
}

.ticker-mask {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  -webkit-mask-image: linear-gradient(
    rgba(0,0,0,0) 0%,
    rgb(0,0,0) 10%,
    rgb(0,0,0) 90%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    rgba(0,0,0,0) 0%,
    rgb(0,0,0) 10%,
    rgb(0,0,0) 90%,
    rgba(0,0,0,0) 100%
  );
}

.ticker-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  list-style: none;
  will-change: transform;
}

.notification-item {
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  height: 40px;
  flex-shrink: 0;
  width: 97%;
  margin: 0 auto;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 0 18px rgba(0,0,0,0.13),
    0 2px 8px rgba(0,0,0,0.09);
}

.notif-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #ECEAE6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.notif-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.notif-item-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(6, 18, 54, 0.79);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #787776;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Bell Ringing Animation ─── */
.bell-container {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 1.5px rgba(3, 172, 234, 0.85),
    0 0 0 3.5px rgba(3, 172, 234, 0.35),
    0 0 0 6px rgba(3, 172, 234, 0.12),
    0 0 0 10px rgba(3, 172, 234, 0.04),
    rgba(61, 71, 83, 0.10) 0px 4px 14px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.bell-swing {
  width: 28px;
  height: 28px;
  transform-origin: top center;
  animation: bell-ring 4s cubic-bezier(0.333, 0, 0.667, 1) infinite;
}

.bell-svg {
  width: 100%;
  height: 100%;
}

.bell-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: #848484;
  color: #f2f2f2;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badge-pop 4s cubic-bezier(0.333, 0, 0.667, 1) infinite;
}

@keyframes bell-ring {
  0%       { transform: rotate(0deg); }
  3.8%     { transform: rotate(0deg); }
  8%       { transform: rotate(-20deg); }
  14.7%    { transform: rotate(20deg); }
  23.1%    { transform: rotate(-10deg); }
  31.1%    { transform: rotate(10deg); }
  37%      { transform: rotate(-5deg); }
  43.3%    { transform: rotate(5deg); }
  49.6%    { transform: rotate(0deg); }
  100%     { transform: rotate(0deg); }
}

@keyframes badge-pop {
  0%       { transform: scale(0); }
  12%      { transform: scale(0); }
  20%      { transform: scale(1); }
  22.4%    { transform: scale(0.97); }
  27.9%    { transform: scale(1); }
  30.1%    { transform: scale(0.97); }
  33.5%    { transform: scale(1); }
  100%     { transform: scale(1); }
}

/* ─── Loan Contracts Section ─── */
.contracts-section {
  padding: 80px 40px 80px;
}

.contracts-inner {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
}

.contracts-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contracts-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  color: #1A1918;
  letter-spacing: -0.02em;
}

.contracts-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  max-width: 420px;
}

.contracts-learn-more {
  display: inline-block;
  margin-top: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #54A6CF;
  text-decoration: none;
  transition: color 0.15s ease;
}

.contracts-learn-more:hover {
  color: #3a8ab5;
}

.contracts-right {
  display: flex;
  justify-content: center;
}

/* ─── Document feature floating icon overlays ─── */
.doc-badge-wrap {
  position: relative;
  width: 100%;
}

/* Standalone floating icons — glass box style */
.doc-float-icon {
  position: absolute;
  width: 42px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
  z-index: 4;
  border-radius: 11px;
  background: rgba(255,255,255,0.45);
  padding: 7px;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.65), inset 0 1px 0 rgba(255,255,255,0.85);
}

/* Promissory Note: left side 1/4 down, right side 3/4 down */
.doc-float-icon--left-25  { top: 25%; left: 0;   transform: translate(-50%, -50%); }
.doc-float-icon--right-75 { top: 75%; right: 0;  transform: translate(50%,  -50%); }

/* Amortization: top 1/4 across, bottom 3/4 across */
.doc-float-icon--top-25    { top: 0;    left: 25%; transform: translate(-50%, -50%); }
.doc-float-icon--bottom-75 { bottom: 0; left: 75%; transform: translate(-50%,  50%); }
.doc-float-icon--top-60    { top: 0;    left: 60%; transform: translate(-50%, -50%); }

.contract-visual {
  width: 340px;
  height: 320px;
  position: relative;
}

/* Floating pills */
.contract-pill {
  position: absolute;
  background: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  padding: 8px;
  will-change: transform;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.pill-1 {
  width: 208px;
  height: 56px;
  top: -16px;
  left: -40px;
  transform: rotate(-5deg);
}

.pill-2 {
  width: 210px;
  height: 72px;
  top: 50px;
  left: -60px;
  transform: rotate(-10deg);
}

.pill-3 {
  width: 210px;
  height: 72px;
  top: 140px;
  right: -50px;
  transform: rotate(10deg);
}

.pill-selected {
  width: auto;
  height: auto;
  top: -28px;
  right: -30px;
  padding: 8px 14px;
  transform: rotate(4deg);
}

.pill-selected-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pill-selected-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1A1918;
  white-space: nowrap;
}

/* Pill hover animation */
.contract-visual:hover .pill-1 {
  transform: rotate(-3deg) translateY(-6px);
}
.contract-visual:hover .pill-2 {
  transform: rotate(-7deg) translateX(-8px);
}
.contract-visual:hover .pill-3 {
  transform: rotate(7deg) translateX(8px);
}
.contract-visual:hover .pill-selected {
  transform: rotate(2deg) translateY(-6px);
}

/* Main contract card */
.contract-card {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 258px;
  background: #fff;
  border-radius: 0 0 20px 20px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contract-body-svg {
  width: 100%;
  height: auto;
}

.contract-sig-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #787776;
}

.contract-sig-box {
  background: rgba(94, 196, 126, 0.08);
  border-radius: 5px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.contract-signature {
  width: 69px;
  height: 38px;
}

.contract-sign-btn {
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* ─── Trusted By Section ─── */
.trusted-section {
  padding: 40px 40px 50px;
  text-align: center;
}

.trusted-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #A8A7A5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 32px;
}

.trusted-logos {
  position: relative;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}

.trusted-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right, #F5F4F0 0%, transparent 12%, transparent 88%, #F5F4F0 100%);
}

.trusted-track {
  display: flex;
  align-items: center;
  gap: 56px;
  white-space: nowrap;
  animation: trusted-scroll 25s linear infinite;
  width: max-content;
}

.trusted-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.trusted-logo svg {
  width: auto;
  height: 44px;
  flex-shrink: 0;
  opacity: 0.5;
}

.trusted-logo img {
  height: 36px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.45;
}

.trusted-logo span {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #B5B4B2;
  letter-spacing: 0.02em;
}

@keyframes trusted-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Testimonials Section ─── */
.testimonials-section {
  padding: 80px 40px 80px;
  text-align: center;
}

.testimonials-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.2;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 64px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

.testimonials-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
}

/* Stagger the columns vertically for visual interest */
.testimonials-col-1 {
  padding-top: 60px;
}

.testimonials-col-2 {
  padding-top: 0;
}

.testimonials-col-3 {
  padding-top: 40px;
}

.testimonial-card {
  position: relative;
  padding: 28px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  /* Animation initial state */
  opacity: 0;
  transform: translateY(30px);
}

.testimonial-card.animate-in {
  animation: testimonial-slide-in 1s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

.testimonials-col-1 .testimonial-card.animate-in {
  animation-delay: 0.15s;
}

.testimonials-col-2 .testimonial-card.animate-in {
  animation-delay: 0.35s;
}

.testimonials-col-3 .testimonial-card.animate-in {
  animation-delay: 0.55s;
}

@keyframes testimonial-slide-in {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Carousel — hidden on desktop */
.testimonials-carousel {
  display: none;
}
.carousel-pills {
  display: none;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.avatar-wrap {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  position: relative;
}

.avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.source-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 44px;
}

.card-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
  line-height: 1.2;
}

.card-profession {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9B9A98;
  margin-top: 2px;
}

.card-handle {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 25, 24, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: start;
}

.card-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(26, 25, 24, 0.55);
  font-weight: 400;
}

.card-body b {
  color: #1A1918;
  font-weight: 600;
}

/* ─── Founder Quote Section ─── */
.founder-section {
  padding: 80px 40px 100px;
  text-align: center;
}

.founder-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.founder-signature {
  margin-bottom: 40px;
  margin-top: 20px;
  width: 160px;
  height: 80px;
}

.founder-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.3;
  color: #1A1918;
  letter-spacing: -0.01em;
  margin-bottom: 36px;
}

.quote-fade {
  color: #B5B4B2;
}

.founder-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 4px;
}

.founder-role {
  font-family: 'DM Sans', monospace;
  font-size: 13px;
  font-weight: 400;
  color: #787776;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.founder-btn {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #1A1918;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}

.founder-btn:hover {
  background: #333;
}

/* ─── Contact Page ─── */
.contact-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 140px 40px 80px;
}

.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.contact-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.15;
  color: #1A1918;
  letter-spacing: -0.02em;
}

.contact-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  max-width: 420px;
}

.contact-email-link {
  display: inline-block;
  margin-top: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #54A6CF;
  text-decoration: none;
}

.contact-email-link:hover {
  text-decoration: underline;
}

.contact-right {
  display: flex;
  justify-content: flex-end;
}

.contact-form {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #ECEAE6;
  border-radius: 20px;
  padding: 36px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #5C5B5A;
}

.form-input {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: #1A1918;
  background: #F5F4F0;
  border: none;
  border-radius: 12px;
  padding: 16px 18px;
  outline: none;
  transition: box-shadow 0.2s;
}

.form-input::placeholder {
  color: #B5B4B2;
}

.form-input:focus {
  box-shadow: 0 0 0 2px rgba(94, 196, 126, 0.4);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-submit {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #1A1918;
  border: none;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.form-submit:hover {
  background: #333;
}

/* ─── About Page ─── */
.about-hero {
  padding: 120px 40px 40px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.about-hero-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.16em;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.1;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.about-hero-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  white-space: nowrap;
}

/* ─── About Hero Animation ─── */
@keyframes fadeInAndUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeInAndUpHalf {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

.anim-word {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
  animation: fadeInAndUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-play-state: paused;
}

.anim-letter {
  opacity: 0;
  display: inline-block;
  margin-right: -0.5px;
  transform: translateY(10px) scale(1.15);
  animation: fadeInAndUpHalf 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-play-state: paused;
}

.about-hero.imagesLoaded .anim-word,
.about-hero.imagesLoaded .anim-letter {
  animation-play-state: running;
}

.about-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 40px 40px;
}

.about-block {
  margin-bottom: 64px;
}

.about-block:last-child {
  margin-bottom: 0;
}

/* Split two-column block */
.about-block-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.about-block-left,
.about-block-right {
  /* columns sit naturally */
}

/* Reversed: text left, heading right — heading aligns to right edge */
.about-block-split--reversed .about-block-right {
  text-align: right;
}

.about-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  color: #1A1918;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.about-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: #5C5B5A;
  margin-bottom: 16px;
}

.about-text:last-child {
  margin-bottom: 0;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 28px;
}

.about-value {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-value-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.about-value-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1A1918;
}

.about-value-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: #787776;
}

.about-cta-block {
  text-align: center;
  padding-top: 48px;
  border-top: 1px solid #EBEBEA;
}

/* ─── About CTA Section (Mesh-style) ─── */
.about-cta-section {
  text-align: center;
  padding: 100px 40px 120px;
  max-width: 720px;
  margin: 0 auto;
}

.about-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.about-cta-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(26, 25, 24, 0.5);
  max-width: 540px;
  margin: 0 auto 48px;
}

.about-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 32px;
  background: #1A1918;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.about-cta-btn:hover {
  background: #333;
}

@media (max-width: 600px) {
  .about-cta-section {
    padding: 60px 20px 80px;
  }
}

/* ─── About Features Section ─── */
.about-features {
  background: #1A1918;
  padding: 100px 40px 120px;
  text-align: center;
}

.about-features-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.2;
  color: #F5F4F0;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.about-features-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  max-width: 480px;
  margin: 0 auto 64px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.feature-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: left;
  transition: background 0.3s, border-color 0.3s;
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(94, 196, 126, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.feature-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #F5F4F0;
  margin-bottom: 10px;
}

.feature-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
}

/* ─── Footer ─── */
.footer {
  background: #ECEAE6;
  margin-top: 40px;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 40px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.footer-logo {
  display: inline-block;
  text-decoration: none;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-legal-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #787776;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal-link:hover {
  color: #1A1918;
}

.footer-divider {
  color: #C7C6C4;
  font-size: 14px;
}

.footer-statement {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #A8A7A5;
  line-height: 1.6;
  max-width: 700px;
}

.footer-copyright {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #A8A7A5;
}

/* ─── FAQ Page ─── */
.faq-hero {
  padding: 120px 40px 40px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.faq-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.1;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.faq-hero-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
}

.faq-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 40px 100px;
}

/* ─── Two-column FAQ layout ─── */
.faq-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  align-items: start;
}

.faq-group-left {
  position: sticky;
  top: 100px;
  padding-top: 20px;
}

.faq-group-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #7EC0EA;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.faq-context-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1A1918;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.faq-context-link:hover {
  color: #7EC0EA;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.faq-context-link svg {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.faq-context-link:hover svg {
  opacity: 1;
  transform: translateX(2px);
}

/* Group box (right column) */
.faq-group-right {
  /* container */
}

.faq-group-box {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.faq-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #787776;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.faq-group-toggle:hover {
  color: #1A1918;
}

.faq-group-box.open .faq-group-toggle {
  border-bottom-color: #EBEBEA;
  color: #1A1918;
}

.faq-group-box.open .faq-group-toggle .faq-chevron {
  transform: rotate(180deg);
}

.faq-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-group-box.open .faq-group-items {
  max-height: 1200px;
}

.faq-group-items .faq-item {
  border-bottom: 1px solid #EBEBEA;
  padding: 0 24px;
}

.faq-group-items .faq-question {
  padding: 18px 0;
}

.faq-group-items .faq-item.open .faq-answer {
  padding-bottom: 16px;
}

/* Updated CTA buttons */
.faq-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.faq-group {
  margin-bottom: 48px;
}

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

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1A1918;
  gap: 16px;
}

.faq-question:hover {
  color: #54A6CF;
}

.faq-chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: #A8A7A5;
}

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

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding-bottom: 20px;
}

.faq-answer p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: #5C5B5A;
}

/* FAQ Redesigned Sections */
.faq-section-block {
  margin-bottom: 64px;
}

.faq-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.faq-questions-box {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 8px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* Two-column row layout */
.faq-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}

.faq-row-reverse {
  grid-template-columns: 1fr 240px;
}

.faq-row-reverse .faq-row-side {
  order: 2;
}

.faq-row-reverse .faq-row-main {
  order: 1;
}

.faq-row-side {
  position: sticky;
  top: 100px;
}

.faq-section-block .faq-context-link {
  background: none;
  border: none;
  box-shadow: none;
  color: #54A6CF;
  font-size: 15px;
  font-weight: 600;
  padding: 0;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  justify-content: flex-start;
}

.faq-section-block .faq-context-link:hover {
  background: none;
  border: none;
  box-shadow: none;
  color: #3a8ab5;
  transform: none;
}

.faq-section-block .faq-context-link svg {
  opacity: 1;
  color: currentColor;
}

.faq-section-block .faq-context-link:hover svg {
  opacity: 1;
  color: currentColor;
  transform: translateX(2px);
}

.faq-questions-box .faq-question:hover {
  color: #54A6CF;
}

@media (max-width: 768px) {
  .faq-row,
  .faq-row-reverse {
    grid-template-columns: 1fr;
  }
  .faq-row-reverse .faq-row-side {
    order: 0;
  }
  .faq-row-reverse .faq-row-main {
    order: 0;
  }
  .faq-row-side {
    position: static;
  }
}

.faq-cta {
  text-align: center;
  padding-top: 48px;
  border-top: 1px solid #EBEBEA;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.15;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.faq-cta-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: #4A4A48;
  max-width: 480px;
  margin-bottom: 40px;
}

.faq-cta-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 600px;
}

.faq-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.faq-cta-card-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.faq-cta-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
}

.faq-cta-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #787776;
}

@media (max-width: 500px) {
  .faq-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ─── Help & Support Page ─── */
/* ─── Loan Help Screenshot ─── */
.lh-screenshot-section {
  padding: 120px 40px 0;
  max-width: 960px;
  margin: 0 auto;
}

/* Hero below screenshot */
.help-hero--centered + .help-hero,
.help-hero.help-hero--centered {
  padding-top: 48px;
}

.lh-screenshot-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.lh-screenshot-frame svg {
  display: block;
}

.help-hero {
  padding: 60px 40px 40px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.help-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.help-hero-text {
  flex: 1;
}

.help-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.1;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.help-hero-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.help-hero .apps-coming-soon-badge {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
}

/* ─── Loan Help Feature Sections ─── */
.lh-feature-section {
  padding: 80px 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.lh-feature-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.lh-feature-reversed .lh-feature-inner {
  direction: rtl;
}

.lh-feature-reversed .lh-feature-inner > * {
  direction: ltr;
}

.lh-feature-heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.2;
  color: #1A1918;
  margin-bottom: 16px;
}

.lh-feature-desc {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(26, 25, 24, 0.55);
}

.lh-feature-visual {
  border-radius: 16px;
  overflow: visible;
}

.lh-feature-visual svg {
  display: block;
}

/* ── Loan Help: portal card mockups ── */
.lh-portal-cards-wrap {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lh-portal-card {
  position: absolute;
  width: 240px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.08);
}

.lh-portal-card--rec {
  background: #03ACEA;
  transform: rotate(-4deg) translateX(-60px);
  z-index: 1;
  top: 20px;
}

.lh-portal-card--reg {
  background: #F4F4F5;
  transform: rotate(3deg) translateX(60px);
  z-index: 2;
  top: 40px;
}

.lh-portal-card-header {
  padding: 6px 12px 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.lh-portal-card-header--rec { background: #03ACEA; }
.lh-portal-card-header--reg { background: #F4F4F5; }

.lh-portal-card-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lh-portal-card-label--rec { color: rgba(255,255,255,0.92); }
.lh-portal-card-label--reg { color: #9B9A98; }

.lh-portal-card-inner {
  background: #ffffff;
  margin: 0 5px 5px;
  border-radius: 14px;
  padding: 14px 16px;
}

.lh-portal-card-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1918;
  margin-bottom: 2px;
}

.lh-portal-card-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 10px;
}

.lh-portal-card-tagline--rec { color: #03ACEA; }
.lh-portal-card-tagline--reg { color: #787776; }

.lh-portal-card-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.lh-portal-card-detail {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #5C5B5A;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.lh-portal-card-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #C4C3C1;
  margin-top: 5px;
}

.lh-portal-card-dot--rec { background: #03ACEA; }

.lh-portal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.lh-portal-card-btn {
  padding: 5px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
}

.lh-portal-card-btn--rec { background: #03ACEA; color: white; }
.lh-portal-card-btn--reg { background: rgba(0,0,0,0.06); color: #1A1918; }

.lh-portal-card-compare {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #787776;
}

.lh-portal-card-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid #C4C3C1;
  background: white;
}

/* ─── Loan Help Horizontal Cards ─── */
.lh-card-horizontal {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}

.lh-card-horizontal .loan-scenario-icon {
  flex-shrink: 0;
}

.lh-card-horizontal h3 {
  margin-bottom: 6px;
}

.lh-card-content h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 6px;
}

.lh-card-content p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(26, 25, 24, 0.55);
}

/* ─── Loan Help Responsive ─── */
@media (max-width: 900px) {
  .lh-feature-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .lh-feature-reversed .lh-feature-inner {
    direction: ltr;
  }
  .help-hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .help-hero-subtitle {
    max-width: 100%;
  }
  .apps-coming-soon-badge {
    position: relative;
    top: auto;
    right: auto;
  }
}

@media (max-width: 600px) {
  .lh-screenshot-section {
    padding: 100px 20px 0;
  }
  .help-hero {
    padding: 40px 20px 20px;
  }
  .lh-feature-section {
    padding: 40px 20px;
  }
}

/* ─── Learn Page — Coming Soon Badge ─── */
.learn-coming-soon-badge {
  font-family: 'Kristi', cursive;
  font-size: 52px;
  font-weight: 400;
  color: rgba(40, 40, 40, 0.92);
  transform: rotate(-20deg);
  flex-shrink: 0;
  display: inline-block;
}

/* ─── Learn Page — Articles ─── */
.learn-articles-section {
  text-align: center;
  padding: 80px 0 40px;
}

.learn-articles-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.2;
  color: #1A1918;
  margin-bottom: 12px;
}

.learn-articles-subtitle {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26, 25, 24, 0.55);
  max-width: 560px;
  margin: 0 auto 40px;
}

.learn-articles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: left;
}

.learn-article-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.learn-article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.learn-article-img {
  width: 100%;
}

.learn-article-img svg {
  display: block;
  width: 100%;
}

.learn-article-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7EC0EA;
  padding: 16px 20px 0;
}

.learn-article-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1A1918;
  line-height: 1.4;
  padding: 8px 20px 0;
}

.learn-article-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(26, 25, 24, 0.55);
  padding: 6px 20px 20px;
}

@media (max-width: 900px) {
  .learn-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .learn-articles-grid {
    grid-template-columns: 1fr;
  }
  .learn-coming-soon-badge {
    font-size: 38px;
  }
}

/* ─── Learn Page (new layout) ─── */
.learn-hero {
  text-align: center;
  padding: 160px 40px 20px;
}

.learn-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.02em;
}

/* Intro: text left, image right */
.learn-intro {
  max-width: 1060px;
  margin: 0 auto;
  padding: 40px 40px 80px;
}

.learn-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.learn-coming-soon-badge {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7EC0EA;
  background: rgba(94, 196, 126, 0.12);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 20px;
}

.learn-intro-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 20px;
}

.learn-intro-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: #4A4A48;
  margin-bottom: 14px;
}

.learn-intro-desc:last-child {
  margin-bottom: 0;
}

/* ── Learn intro: preview cards with border + gradient halo ── */
.learn-preview-cards-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 28px;
  border: 3px solid #03ACEA;
  border-radius: 20px;
  /* Gradient: from #03ACEA → #F5F4F0 over 6px (2× the 3px border) */
  box-shadow:
    0 0 0 1px #2BB8EB,
    0 0 0 2px #53C4EC,
    0 0 0 3px #7CD0ED,
    0 0 0 4px #A4DCEE,
    0 0 0 5px #CCE8EF,
    0 0 0 6px #F5F4F0;
}

.learn-preview-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 16px 18px;
  width: 92%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
  position: relative;
}

.learn-preview-card-1 {
  transform: rotate(-2.5deg);
  z-index: 1;
  margin-bottom: -28px;
}

.learn-preview-card-2 {
  transform: rotate(2deg);
  z-index: 2;
}

.learn-intro-image svg {
  display: block;
  width: 100%;
  border-radius: 20px;
  filter: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.10)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.06));
}

/* Articles / Tabs section */
.learn-articles-section {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 40px 40px;
  text-align: left;
}

.learn-articles-inner {
  /* full width */
}

/* Glass tab bar */
.learn-tabs-bar-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.learn-tabs-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.learn-tab {
  padding: 10px 18px;
  border: none;
  background: none;
  border-radius: 11px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #787776;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.learn-tab:hover {
  color: #1A1918;
}

.learn-tab.active {
  background: #fff;
  color: #1A1918;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Panels */
.learn-panels {
  /* container */
}

.learn-panel {
  display: none;
}

.learn-panel.active {
  display: block;
  animation: learnFadeIn 0.25s ease;
}

@keyframes learnFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Article cards grid */
.learn-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.learn-article-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.learn-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.learn-cs-badge {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A8A7A5;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 12px;
}

.learn-cs-badge-bottom {
  margin-bottom: 0;
  margin-top: 14px;
}

.learn-cs-badge-right {
  display: block;
  text-align: right;
}

.learn-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1A1918;
  line-height: 1.4;
  margin-bottom: 8px;
}

.learn-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: #787776;
}

@media (max-width: 860px) {
  .learn-intro-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .learn-intro-image {
    max-width: 480px;
    margin: 0 auto;
  }
  .learn-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .learn-tabs-bar {
    flex-wrap: wrap;
    justify-content: center;
  }
  .learn-hero {
    padding: 110px 24px 20px;
  }
  .learn-intro {
    padding: 24px 24px 60px;
  }
  .learn-articles-section {
    padding: 0 24px 40px;
  }
  .learn-hero-title {
    font-size: 44px;
  }
}

@media (max-width: 520px) {
  .learn-cards-grid {
    grid-template-columns: 1fr;
  }
}

.help-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 40px 100px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

.help-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.3s, transform 0.3s;
}

.help-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Icon + title row */
.help-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.help-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.help-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 0;
}

.help-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: #787776;
}

a.help-card {
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.help-topics {
  max-width: 720px;
  margin: 0 auto;
}

.help-topics-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  color: #1A1918;
  text-align: center;
  margin-bottom: 40px;
}

.help-topic-group {
  margin-bottom: 40px;
}

.help-topic-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EBEBEA;
}

.help-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.help-accordion-item {
  border-bottom: 1px solid #EBEBEA;
}

.help-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #5C5B5A;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  border-radius: 10px;
}

.help-accordion-btn:hover {
  background: rgba(94, 196, 126, 0.08);
  color: #1A1918;
}

.help-accordion-chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: #A8A7A5;
}

.help-accordion-item.open .help-accordion-chevron {
  transform: rotate(180deg);
  color: #7EC0EA;
}

.help-accordion-item.open .help-accordion-btn {
  color: #1A1918;
  font-weight: 500;
}

.help-accordion-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.help-accordion-item.open .help-accordion-answer {
  max-height: 300px;
}

.help-accordion-answer p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  padding: 0 16px 16px;
}

.help-cta {
  text-align: center;
  padding-top: 48px;
  border-top: 1px solid #EBEBEA;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.help-cta-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #1A1918;
}

.help-cta-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #787776;
  margin-bottom: 8px;
}

/* ─── Legal Pages ─── */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 40px 100px;
}

.legal-content h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #1A1918;
  margin-top: 40px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EBEBEA;
}

.legal-content h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
  margin-top: 24px;
  margin-bottom: 10px;
}

.legal-content p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: #5C5B5A;
  margin-bottom: 14px;
}

.legal-content ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}

.legal-content ul li {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: #5C5B5A;
  margin-bottom: 6px;
}

.legal-content a {
  color: #54A6CF;
  text-decoration: underline;
  text-decoration-color: rgba(94, 196, 126, 0.4);
  text-underline-offset: 2px;
}

.legal-content a:hover {
  color: #2d7a44;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
}

.legal-table th {
  text-align: left;
  font-weight: 600;
  color: #1A1918;
  padding: 10px 12px;
  background: rgba(94, 196, 126, 0.06);
  border-bottom: 2px solid #EBEBEA;
}

.legal-table td {
  padding: 10px 12px;
  color: #5C5B5A;
  border-bottom: 1px solid #F0F0EF;
  vertical-align: top;
  line-height: 1.55;
}

.legal-related {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #EBEBEA;
}

.legal-related p {
  font-weight: 500;
  color: #1A1918;
  margin-bottom: 8px;
}

/* ─── Guide Page ─── */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

.guide-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 32px 28px;
  transition: box-shadow 0.3s, transform 0.3s;
}

.guide-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.guide-card-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 700;
  color: rgba(94, 196, 126, 0.25);
  line-height: 1;
  margin-bottom: 12px;
}

.guide-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 8px;
}

.guide-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: #787776;
  margin-bottom: 20px;
}

.guide-card-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.guide-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(84, 166, 207, 0.12);
  color: #54A6CF;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-step p {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: #5C5B5A;
  margin: 0;
}

@media (max-width: 600px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Guide Page (tabbed layout) ─── */
.guide-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 160px 40px 40px;
}

.guide-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.guide-hero-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: #4A4A48;
}

.guide-tabs-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px 100px;
}

/* The tab bar */
.guide-tabs-bar-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.guide-tabs-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  padding: 6px;
}

.guide-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #787776;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.guide-tab:hover {
  color: #1A1918;
}

.guide-tab.active {
  background: #fff;
  color: #1A1918;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Panel content */
.guide-panels {
  position: relative;
}

.guide-panel {
  display: none;
}

.guide-panel.active {
  display: block;
  animation: guideFadeIn 0.25s ease;
}

@keyframes guideFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.guide-panel-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 700;
  color: rgba(94, 196, 126, 0.2);
  line-height: 1;
  margin-bottom: 12px;
}

.guide-panel-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.guide-panel-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #4A4A48;
  margin-bottom: 36px;
  max-width: 580px;
}

.guide-panel-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 56px;
}

.guide-panel-steps .guide-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.guide-panel-steps .guide-step:last-child {
  border-bottom: none;
}

.guide-panel-steps .guide-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(84, 166, 207, 0.12);
  color: #54A6CF;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-panel-steps .guide-step p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #4A4A48;
  margin: 0;
  padding-top: 3px;
}

@media (max-width: 760px) {
  .guide-tabs-bar {
    flex-wrap: wrap;
    justify-content: center;
  }
  .guide-hero {
    padding: 110px 24px 32px;
  }
  .guide-tabs-section {
    padding: 0 24px 80px;
  }
  .guide-hero-title {
    font-size: 44px;
  }
  .guide-hero-subtitle {
    font-size: 16px;
  }
}

/* ─── Hamburger + Mobile Nav (hidden on desktop) ─── */
.hamburger-toggle {
  display: none;
}

.mobile-nav-panel {
  display: none;
}

/* ─── Responsive: disable scatter on small screens ─── */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .card {
    transform: none !important;
  }
  .card-tall {
    grid-row: span 1;
    min-height: 200px;
  }
}

@media (max-width: 900px) {
  /* ── Mobile Nav ── */
  .glass-nav {
    display: none;
  }
  .btn-signin {
    display: none;
  }
  .top-bar {
    padding: 16px 16px;
  }
  .top-bar-left .logo svg {
    width: 90px;
    height: 30px;
  }
  .top-bar .btn-getstarted {
    display: none;
  }

  .btn-getstarted {
    font-size: 11px;
    padding: 8px 14px;
    letter-spacing: 0.5px;
  }

  .memo-cta .btn-getstarted {
    font-size: 15px;
    padding: 13px 28px;
    letter-spacing: normal;
  }

  /* Hamburger toggle */
  .hamburger-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    background-image: linear-gradient(179deg, rgba(255,255,255,0.8) 7%, rgba(255,255,255,0) 92%);
    box-shadow:
      rgba(0,0,0,0.08) 0px 2px 4px -2px,
      rgba(0,0,0,0.03) 0px 8px 16px -8px,
      rgba(255,255,255,0.1) 0px -2px 3px 0px inset,
      rgba(255,255,255,0.06) 0px -4px 12px 0px inset;
    z-index: 201;
    flex-shrink: 0;
  }
  .hamburger-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    z-index: -1;
  }
  .hamburger-toggle svg line {
    stroke: #1f1f1f;
    stroke-width: 1.4;
    stroke-linecap: round;
    transition: transform 0.16s ease-in-out, opacity 0.16s ease-in-out;
  }
  .hamburger-toggle.menuOpen {
    background: #ECEAE6;
    background-image: none;
    box-shadow: none;
  }
  .hamburger-toggle.menuOpen .ham-top {
    transform: translate(5px, -14px) rotate(45deg) scaleX(1.4);
  }
  .hamburger-toggle.menuOpen .ham-mid {
    opacity: 0;
  }
  .hamburger-toggle.menuOpen .ham-bot {
    transform: translate(-13px, 22px) rotate(-45deg) scaleX(1.4);
  }

  /* Mobile nav panel */
  .mobile-nav-panel {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: auto;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s ease-in-out;
    background: rgba(245, 244, 240, 0.97);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
  }
  .mobile-nav-panel::before {
    display: none;
  }
  .mobile-nav-panel.open {
    opacity: 1;
    pointer-events: auto;
    animation: mobileNavPopIn 0.08s ease-in-out;
  }

  @keyframes mobileNavPopIn {
    from { transform: scale(0.97); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  .mobile-nav-list {
    list-style: none;
    padding: 74px 16px 0;
    margin: 0;
  }
  .mobile-nav-list > li {
    border-bottom: 0.5px solid rgba(31, 31, 31, 0.06);
  }
  .mobile-nav-list > li:last-child {
    border-bottom: none;
  }

  /* Nav buttons with chevron */
  .mobile-nav-btn,
  .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1f1f1f;
    text-decoration: none;
    padding: 0;
  }
  .mobile-nav-btn::after {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transition: transform 0.15s ease-in-out;
  }
  .mobile-nav-group.expanded .mobile-nav-btn::after {
    transform: rotate(90deg);
  }

  /* Submenus */
  .mobile-submenu {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.15s ease-in-out, opacity 0.1s ease-in-out 0.05s, padding 0.15s ease-in-out;
    padding: 0;
  }
  .mobile-nav-group.expanded .mobile-submenu {
    max-height: 400px;
    opacity: 1;
    padding: 0 0 16px;
  }
  .mobile-submenu a {
    display: block;
    padding: 12px 0 12px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1f1f1f;
    text-decoration: none;
    border-left: 2px solid #E8E8E8;
    transition: border-color 0.15s;
  }
  .mobile-submenu a:hover {
    border-left-color: #7EC0EA;
  }

  /* Bottom CTA */
  .mobile-nav-cta {
    padding: 20px 0;
    position: relative;
  }
  .mobile-nav-cta a {
    display: block;
    text-align: center;
    padding: 14px 24px;
    background: #1A1918;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 10px;
    position: relative;
    z-index: 1;
  }
  .mobile-nav-cta::after {
    content: '';
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 36px);
    height: calc(100% - 20px);
    background: linear-gradient(225deg, rgb(50, 197, 255), rgb(182, 32, 224) 51%, rgb(247, 181, 0));
    filter: blur(12px) saturate(1.18);
    opacity: 0.4;
    border-radius: 16px;
    z-index: 0;
  }

  .floating-items {
    display: none;
  }
  .browser-section {
    padding: 60px 20px 80px;
  }
  .bm-summary {
    display: none;
  }
  .bm-sidebar {
    width: 52px;
  }
  .bm-sidebar-logo span {
    display: none;
  }
  .bm-sidebar-logo {
    justify-content: center;
    padding: 0 0 16px;
  }
  .bm-nav-item span {
    display: none;
  }
  .bm-nav-item {
    justify-content: center;
    padding: 8px;
  }
  .bm-sidebar-nav {
    padding: 0 6px;
  }
  .hero {
    height: auto;
    min-height: auto;
    overflow: visible;
    padding: 130px 40px 40px;
  }
  .footer-legal-links {
    flex-direction: column;
    gap: 8px;
  }
  .footer-divider {
    display: none;
  }
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .contact-right {
    justify-content: flex-start;
  }
  .feature-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .feature-text {
    text-align: center;
    align-items: center;
  }
  .feature-image {
    justify-content: center;
  }
  .notif-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .notif-right {
    order: -1;
    text-align: center;
    align-items: center;
  }
  .notif-left {
    justify-content: center;
  }
  .contracts-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .contracts-right {
    justify-content: center;
  }
  .contracts-left {
    text-align: center;
    align-items: center;
  }
  .testimonials-grid {
    display: none;
  }
  .testimonials-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 20px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .testimonials-carousel::-webkit-scrollbar {
    display: none;
  }
  .testimonials-carousel .carousel-card {
    flex: 0 0 85vw;
    max-width: 360px;
    scroll-snap-align: center;
    opacity: 1;
    transform: none;
    animation: none;
  }
  .carousel-pills {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 16px;
  }
  .carousel-pills .pill {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D9D9D7;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .carousel-pills .pill.active {
    background: #7EC0EA;
    transform: scale(1.25);
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .help-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .bm-sidebar {
    display: none;
  }
  .browser-content {
    min-height: 300px;
  }
  .bm-table-head,
  .bm-row {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .bm-col-status {
    display: none;
  }
  .bm-main {
    padding: 14px 16px;
  }
  .bm-main-title {
    font-size: 14px;
  }
  .browser-nav-arrows {
    display: none;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-section {
    padding: 0 20px 60px;
  }
  .about-values {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-inner {
    padding: 32px 20px;
  }
  .everyday-section {
    padding: 80px 20px 80px;
  }
  .everyday-features {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .about-features {
    padding: 60px 20px 80px;
  }
  .trusted-section {
    padding: 40px 20px 60px;
  }
  .help-grid {
    grid-template-columns: 1fr;
  }
  .faq-content {
    padding: 32px 20px 80px;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .faq-group-left {
    position: static;
    padding-top: 0;
  }
  .help-content {
    padding: 32px 20px 80px;
  }
  .learn-grid {
    grid-template-columns: 1fr;
  }
  .loan-compare-grid {
    grid-template-columns: 1fr;
  }
  .loan-scenarios {
    grid-template-columns: 1fr;
  }
  .loan-tips-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Learn Page ─── */
.learn-section {
  margin-bottom: 56px;
}

.learn-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.learn-section-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: rgba(26, 25, 24, 0.55);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 600px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

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

.learn-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.learn-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.learn-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.learn-card-time {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(26, 25, 24, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.learn-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 8px;
  line-height: 1.3;
}

.learn-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(26, 25, 24, 0.55);
  margin-bottom: 16px;
}

.learn-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.learn-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(26, 25, 24, 0.5);
  background: rgba(26, 25, 24, 0.04);
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

/* ─── Loan Help Page ─── */
.loan-help-intro {
  margin-bottom: 56px;
}

.loan-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.loan-compare-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.loan-compare-peer {
  border-left: 4px solid #7EC0EA;
}

.loan-compare-trad {
  border-left: 4px solid #C44040;
}

.loan-compare-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1A1918;
  margin-bottom: 20px;
}

.loan-compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loan-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(26, 25, 24, 0.65);
}

.loan-compare-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.loan-compare-list li strong {
  color: #1A1918;
}

/* Scenario Cards */
.loan-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.loan-scenario-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.loan-scenario-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.loan-scenario-card h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 8px;
}

.loan-scenario-card p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(26, 25, 24, 0.55);
}

/* Tips Grid */
.loan-tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.loan-tip {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.loan-tip-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(84, 166, 207, 0.12);
  color: #54A6CF;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loan-tip strong {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 4px;
}

.loan-tip p {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(26, 25, 24, 0.55);
  margin: 0;
}

@media (max-width: 768px) {
  .learn-grid {
    grid-template-columns: 1fr;
  }
  .loan-compare-grid {
    grid-template-columns: 1fr;
  }
  .loan-scenarios {
    grid-template-columns: 1fr;
  }
  .loan-tips-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Apps Page Responsive ─── */
@media (max-width: 900px) {
  .apps-hero-text {
    max-width: 100%;
  }
  .apps-hero-subtitle {
    max-width: 100%;
    margin: 0 auto;
  }
  .apps-desktop-stacked-section {
    padding: 40px 20px;
  }
  .apps-desktop-stacked-text {
    margin-top: 32px;
  }
  .apps-desktop-stacked-text .apps-detail-features {
    flex-direction: column;
    align-items: center;
  }
  .apps-detail-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .apps-detail-reversed .apps-detail-inner {
    direction: ltr;
  }
  .apps-detail-text {
    max-width: 100%;
  }
  .apps-detail-visual {
    order: -1;
  }
}

@media (max-width: 600px) {
  .apps-hero-section {
    padding: 140px 20px 40px;
  }
  .apps-hero-mobile-frame {
    width: 100px;
    bottom: -16px;
    right: -10px;
  }
  .apps-coming-soon-badge {
    font-size: 38px;
  }
  .apps-detail-section {
    padding: 40px 20px;
  }
  .apps-mobile-mockup-card {
    max-width: 200px;
  }
  .apps-desktop-mockup-card {
    max-width: 100%;
  }
}

/* ─── Apps Page — Hero ─── */
.apps-hero-section {
  padding: 160px 40px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.apps-hero-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.apps-hero-text {
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

/* ── Apps desktop stacked section ── */
.apps-desktop-stacked-section {
  padding: 20px 40px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.apps-desktop-img-wrap {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}

.apps-desktop-main-img {
  width: 100%;
  display: block;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Desktop platform badge icons */
.apps-desktop-badge {
  position: absolute;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 5;
}

/* macOS — bottom-left */
.apps-desktop-badge-os {
  bottom: -22px;
  left: -22px;
}

/* Windows — midway right edge */
.apps-desktop-badge-windows {
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
}

.apps-desktop-stacked-text {
  text-align: center;
  max-width: 640px;
  margin: 48px auto 0;
}
.apps-desktop-stacked-text .apps-detail-features {
  justify-content: center;
}

/* ── Portal browser frame ── */
.pdb-browser-frame {
  border-radius: 10px 10px 0 0;
  border: 1.5px solid #D8D6D3;
  background: #FAFAF8;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
  font-family: 'DM Sans', sans-serif;
}
.pdb-browser-chrome {
  background: #F4F3F1;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  border-bottom: 1px solid #E0DDD9;
}
.pdb-browser-dots { display: flex; gap: 5px; flex-shrink: 0; }
.pdb-browser-dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.pdb-browser-dot--red    { background: #FF5F57; }
.pdb-browser-dot--yellow { background: #FEBC2E; }
.pdb-browser-dot--green  { background: #28C840; }
.pdb-browser-url {
  background: rgba(255,255,255,0.8);
  border-radius: 5px;
  height: 18px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #787776;
  max-width: 280px;
  margin: 0 auto;
  flex: 1;
}
.pdb-browser-nav {
  display: flex;
  align-items: center;
  margin: 10px 14px;
  padding: 0 16px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06), inset 0 -3px 6px rgba(255,255,255,0.4);
  gap: 2px;
}
.pdb-browser-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 600;
  color: #1A1918;
  margin-right: 12px;
  flex-shrink: 0;
}
.pdb-browser-navlink {
  font-size: 10px;
  font-weight: 500;
  color: #1A1918;
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
}
.pdb-browser-navlink--active {
  background: rgba(0,0,0,0.06);
  font-weight: 600;
}
.pdb-browser-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdb-browser-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #54A6CF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.8);
}
.pdb-browser-greeting {
  display: flex;
  align-items: flex-end;
  padding: 8px 20px 16px;
  background: #FAFAF8;
}
.pdb-browser-greeting-main { flex: 1; }
.pdb-browser-greeting-sub { font-size: 11px; color: #787776; margin-bottom: 2px; }
.pdb-browser-greeting-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pdb-browser-btns { display: flex; gap: 7px; padding-bottom: 4px; }
.pdb-browser-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: #1A1918;
  border-radius: 8px;
  padding: 7px 14px;
  white-space: nowrap;
}
.pdb-browser-frame .pdb-box {
  border-radius: 0;
  margin: 0;
  padding: 16px 20px;
}

.apps-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.1;
  color: #1A1918;
  margin-bottom: 16px;
}

.apps-hero-subtitle {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(26, 25, 24, 0.55);
  max-width: 540px;
  letter-spacing: 0.01em;
}

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

.apps-coming-soon-badge {
  position: absolute;
  top: -20px;
  right: 60px;
  font-family: 'Kristi', cursive;
  font-size: 52px;
  font-weight: 400;
  color: rgba(40, 40, 40, 0.92);
  transform: rotate(20deg);
  z-index: 2;
  pointer-events: none;
}

.apps-hero-mockups {
  position: relative;
  max-width: 520px;
  margin-left: auto;
}

.apps-hero-desktop-frame {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.apps-hero-desktop-frame svg {
  display: block;
}

.apps-hero-mobile-frame {
  position: absolute;
  bottom: -24px;
  right: -20px;
  width: 140px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.apps-hero-mobile-frame svg {
  display: block;
}

/* ─── Apps Page — Detail Sections ─── */
.apps-detail-section {
  padding: 80px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.apps-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.apps-detail-reversed .apps-detail-inner {
  direction: rtl;
}

.apps-detail-reversed .apps-detail-inner > * {
  direction: ltr;
}

.apps-detail-text {
  max-width: 440px;
}

.apps-detail-heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  color: #1A1918;
  margin-bottom: 12px;
}

.apps-detail-subtitle {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26, 25, 24, 0.55);
  margin-bottom: 28px;
}

.apps-detail-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.apps-detail-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1A1918;
}

.apps-detail-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: flex-start;
}

.apps-mobile-mockup-card {
  max-width: 120px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.apps-mobile-mockup-card::before {
  display: none;
}

.apps-mobile-mockup-card img {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.10);
}

.apps-desktop-mockup-card {
  max-width: 520px;
  padding: 12px;
}

.apps-mobile-mockup-card svg,
.apps-desktop-mockup-card svg {
  display: block;
}

/* ── Apps page: coming soon badge ── */
.apps-coming-soon {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  background: #EBEBEB;
  color: #888;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 6px;
}

/* ── Apps page: notification floater ── */
.apps-mobile-notif-wrap {
  position: relative;
  display: inline-block;
}

.apps-notif-floater {
  position: absolute;
  bottom: -18px;
  left: -22px;
  max-width: 290px;
  z-index: 10;
}

.apps-notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
  object-fit: contain;
}

.apps-notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.apps-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.apps-notif-app {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #888;
}

.apps-notif-time {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #888;
  white-space: nowrap;
}

.apps-notif-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.35;
  white-space: nowrap;
}

/* ── Apps page: store badge icons overlaid on phone ── */
.apps-phone-badge {
  position: absolute;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 5;
}

/* Google Play — top of right side */
.apps-phone-badge-gplay {
  top: 6%;
  right: -26px;
}

/* App Store — halfway down left side */
.apps-phone-badge-appstore {
  top: 50%;
  left: -26px;
  transform: translateY(-50%);
}

/* iOS — 3/4 down right side */
.apps-phone-badge-ios {
  top: 75%;
  right: -26px;
  transform: translateY(-50%);
}

/* ── Apps page: phone mockup ── */
.pdb-phone-mock {
  width: 100%;
  border: 1.5px solid #D8D6D3;
  border-radius: 28px;
  background: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  font-family: 'DM Sans', sans-serif;
}
.pdb-phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 55px;
  height: 14px;
  border-radius: 0 0 8px 8px;
  background: #1A1918;
  z-index: 10;
}
.pdb-phone-screen {
  padding-top: 18px;
  background: #FAFAF8;
}
.pdb-m-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 6px;
  font-size: 7px;
  font-weight: 600;
  color: #1A1918;
}
.pdb-m-status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pdb-m-nav {
  display: flex;
  align-items: center;
  margin: 0 10px 8px;
  padding: 0 10px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), inset 0 -2px 4px rgba(255,255,255,0.4);
}
.pdb-m-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: 0.2px;
}
.pdb-m-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdb-m-hamburger {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  padding: 2px;
}
.pdb-m-hamburger span {
  display: block;
  height: 1.5px;
  background: #787776;
  border-radius: 2px;
}
.pdb-m-hamburger span:nth-child(1),
.pdb-m-hamburger span:nth-child(3) { width: 11px; }
.pdb-m-hamburger span:nth-child(2) { width: 13px; }
.pdb-m-hero {
  padding: 4px 14px 12px;
}
.pdb-m-greeting-sub {
  font-size: 8px;
  color: #787776;
  margin-bottom: 1px;
}
.pdb-m-greeting-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.pdb-m-hero-btns {
  display: flex;
  gap: 5px;
}
.pdb-m-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 7px;
  font-weight: 600;
  color: #fff;
  background: #1A1918;
  border-radius: 5px;
  padding: 4px 8px;
  white-space: nowrap;
}
.pdb-m-dash-box {
  background: #E5E2DF;
  border-radius: 12px 12px 0 0;
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pdb-m-inbox {
  background: #fff;
  border-radius: 7px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 7.5px;
  color: #787776;
}
.pdb-m-card-outer {
  border-radius: 9px;
  overflow: hidden;
}
.pdb-m-card-blue { background: #03ACEA; }
.pdb-m-card-grey { background: #F4F4F5; }
.pdb-m-card-header {
  padding: 3px 8px 2px;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pdb-m-card-blue .pdb-m-card-header { color: rgba(255,255,255,0.85); }
.pdb-m-card-grey .pdb-m-card-header { color: #9B9A98; }
.pdb-m-card-inner {
  background: #fff;
  margin: 0 4px 4px;
  border-radius: 6px;
  padding: 7px 9px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pdb-m-card-date {
  font-size: 12px;
  font-weight: 800;
  color: #1A1918;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Sans', sans-serif;
}
.pdb-m-badge {
  font-size: 6.5px;
  font-weight: 700;
  color: #5C5B5A;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  padding: 1px 4px;
}
.pdb-m-card-sub {
  font-size: 7.5px;
  color: #9B9A98;
}
.pdb-m-card-amount {
  font-size: 17px;
  font-weight: 800;
  color: #1A1918;
  letter-spacing: -0.03em;
  line-height: 1;
  font-family: 'DM Sans', sans-serif;
}
.pdb-m-amount-blue { color: #54A6CF; }

.apps-suggest-section {
  text-align: center;
  padding: 0 32px 40px;
}

.apps-suggest-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(31, 31, 31, 0.5);
  text-align: center;
  margin-bottom: 32px;
}

.apps-suggest-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 24px;
  background-color: #FB7232;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 12px;
  text-decoration: none;
  border: none;
  transition: background-color 0.15s ease-in-out;
}

.apps-suggest-btn:hover {
  background-color: rgba(251, 114, 50, 0.8);
}

/* ─── Stories Page ─── */
.stories-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.story-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.story-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.story-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.story-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 44px;
  gap: 2px;
}

.story-profession {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9B9A98;
}

.story-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #1A1918;
}

.story-location {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #A8A7A5;
  font-weight: 500;
}

.story-body p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: #4A4A48;
  margin-bottom: 16px;
}

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

@media (max-width: 600px) {
  .stories-content {
    padding: 0 16px 60px;
  }
  .story-card {
    padding: 24px;
  }
}

/* ─── Founder Memo Page ─── */
.memo-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 40px 80px;
}

.memo-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #A8A7A5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 32px;
}

.memo-letter {
  margin-bottom: 64px;
}

.memo-letter p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: #4A4A48;
  margin-bottom: 20px;
}

.memo-letter p:first-child {
  font-style: italic;
  color: #1A1918;
}

.memo-signoff {
  margin-top: 36px;
  margin-bottom: 4px !important;
  font-style: italic;
  color: #1A1918 !important;
}

.memo-signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.memo-founder-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: #1A1918;
}

.memo-founder-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #A8A7A5;
}

.memo-principles {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 48px;
}

.memo-principles-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  text-align: center;
}

/* ── Fan-out grid container ── */
.memo-principles-grid {
  position: relative;
  height: 320px;
  overflow: visible;
  margin-top: 48px;
}

/* Cards spread across the 880px inner width (960px - 2×40px padding) */
/* Base left positions: 0, 223, 446, 669  (210px card + 13px gap × 3) */
/* Initial state: all stacked at center (~335px) via transform offset  */
.memo-principle {
  position: absolute;
  width: 210px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform;
}

/* Stacked at center before fan triggers */
.memo-principle:nth-child(1) { left: 0px;   z-index: 1; transform: translateX(335px) translateY(0px) rotate(0deg); }
.memo-principle:nth-child(2) { left: 223px;  z-index: 2; transform: translateX(112px) translateY(0px) rotate(0deg); }
.memo-principle:nth-child(3) { left: 446px;  z-index: 3; transform: translateX(-111px) translateY(0px) rotate(0deg); }
.memo-principle:nth-child(4) { left: 669px;  z-index: 4; transform: translateX(-334px) translateY(0px) rotate(0deg); }

/* Fanned-out state — spread to natural positions with gentle rotation */
.memo-principles-grid.is-fanned .memo-principle:nth-child(1) {
  transform: translateX(0px) translateY(24px) rotate(-5deg);
  transition-delay: 0.05s;
}
.memo-principles-grid.is-fanned .memo-principle:nth-child(2) {
  transform: translateX(0px) translateY(-12px) rotate(-2deg);
  transition-delay: 0.12s;
}
.memo-principles-grid.is-fanned .memo-principle:nth-child(3) {
  transform: translateX(0px) translateY(16px) rotate(2deg);
  transition-delay: 0.19s;
}
.memo-principles-grid.is-fanned .memo-principle:nth-child(4) {
  transform: translateX(0px) translateY(-8px) rotate(4deg);
  transition-delay: 0.26s;
}

/* Inner wrapper handles hover lift (decoupled from positional transform) */
.memo-principle-inner {
  padding: 24px 20px;
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.memo-principle:hover .memo-principle-inner {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Icon + title in a row */
.memo-principle-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.memo-principle-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.memo-principle-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1918;
  line-height: 1.3;
}

.memo-principle-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(26, 25, 24, 0.55);
}

/* Principles section standalone (on about page) */
.memo-principles-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px 20px;
  overflow: visible;
}

.memo-principles-section .memo-principles {
  border-top: none;
  padding-top: 0;
}

/* ─── Founder Memo Card ─── */
.memo-card-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px 80px;
  perspective: 1200px;
}

.memo-cta {
  text-align: center;
  padding: 60px 40px 80px;
  border-top: 1px solid #EBEBEA;
  max-width: 600px;
  margin: 0 auto;
}

.memo-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.15;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.memo-cta-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  color: #6B6965;
  line-height: 1.6;
  margin-bottom: 32px;
}

.memo-cta .btn-getstarted {
  font-size: 16px;
  padding: 14px 32px;
}

.memo-card-wrapper {
  display: flex;
  justify-content: center;
}

.memo-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
  transform: rotate(0deg);
  cursor: default;
}

.memo-card:hover {
  transform: rotate(-2deg);
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
}

.memo-card-inner {
  padding: 48px 44px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.memo-card:hover .memo-card-inner {
  transform: scale(0.98);
}

.memo-card-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1A1918;
  margin-bottom: 28px;
}

.memo-card-body p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: #4A4A48;
  margin-bottom: 16px;
}

.memo-card-body p:first-child {
  font-style: italic;
  color: #1A1918;
}

.memo-card-body p:last-child {
  margin-bottom: 0;
}

.memo-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.memo-card-signature svg {
  display: block;
}

.memo-card-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.memo-card-avatar svg {
  display: block;
  border-radius: 50%;
}

.memo-card-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.memo-card-author-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1918;
}

.memo-card-author-role {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #A8A7A5;
}

@media (max-width: 600px) {
  .memo-content {
    padding: 0 20px 60px;
  }
  /* Fan disabled on mobile — revert to simple vertical stack */
  .memo-principles-grid {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .memo-principle {
    position: static;
    width: 100%;
    transform: none !important;
    transition: none;
  }
  .memo-principles-grid.is-fanned .memo-principle:nth-child(1),
  .memo-principles-grid.is-fanned .memo-principle:nth-child(2),
  .memo-principles-grid.is-fanned .memo-principle:nth-child(3),
  .memo-principles-grid.is-fanned .memo-principle:nth-child(4) {
    transform: none;
    transition-delay: 0s;
  }
  .memo-card-section {
    padding: 0 20px 60px;
  }
  .memo-card-inner {
    padding: 32px 24px;
  }
  .memo-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .memo-principles-section {
    padding: 0 20px 60px;
  }
  .about-block-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about-block-split--reversed .about-block-right {
    text-align: left;
    order: -1;
  }
  .about-content {
    padding: 40px 24px 60px;
  }
}

/* ─── Loan Documents Page ─── */
.doc-feature-section {
  padding: 40px 40px 80px;
  overflow: hidden;
}

.doc-feature-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.doc-feature-reversed .doc-feature-inner {
  direction: rtl;
}

.doc-feature-reversed .doc-feature-inner > * {
  direction: ltr;
}

.doc-feature-label {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #A8A7A5;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.doc-feature-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.15;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.doc-feature-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(26, 25, 24, 0.55);
  margin-bottom: 16px;
}

.doc-feature-highlights {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.doc-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1918;
}

.doc-feature-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.doc-accent {
  display: none;
}

.doc-glass-card {
  position: relative;
  z-index: 1;
  max-width: 420px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 16px 23px -1px rgba(0, 0, 0, 0.06),
    0 36px 51px -1px rgba(0, 0, 0, 0.04),
    0 64px 91px -1px rgba(0, 0, 0, 0.02);
}

.doc-glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  z-index: -1;
}

/* Hero feature boxes */
.doc-hero-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  width: calc(100vw - 80px);
  margin: 40px auto 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.doc-hero-box {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.doc-hero-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.doc-hero-box-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.doc-hero-box-top .doc-info-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.doc-hero-box-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
}

.doc-hero-box-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(26, 25, 24, 0.55);
}

/* Info grid */
.doc-info-section {
  padding: 60px 40px 80px;
  max-width: 1100px;
  margin: 0 auto;
}

.doc-info-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 40px;
}

.doc-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.doc-info-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.doc-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.doc-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.doc-info-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
  margin-bottom: 8px;
}

.doc-info-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(26, 25, 24, 0.55);
}

/* CTA */
.doc-cta-section {
  text-align: center;
  padding: 40px 40px 80px;
  max-width: 600px;
  margin: 0 auto;
}

.doc-cta-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.doc-cta-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(26, 25, 24, 0.55);
  margin-bottom: 32px;
}

@media (max-width: 900px) {
  .doc-feature-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .doc-feature-reversed .doc-feature-inner {
    direction: ltr;
  }
  .doc-feature-visual {
    order: 1;
  }
  .doc-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .doc-hero-boxes {
    grid-template-columns: 1fr;
    width: calc(100vw - 40px);
    max-width: 480px;
  }
  .doc-feature-section {
    padding: 40px 20px 60px;
  }
  .doc-info-section {
    padding: 40px 20px 60px;
  }
  .doc-info-grid {
    grid-template-columns: 1fr;
  }
  .doc-cta-section {
    padding: 40px 20px 60px;
  }
  .doc-glass-card {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY OVERHAUL
   Page titles, section titles, subtitles, and spacing
   ═══════════════════════════════════════════════════ */

/* ─── Page Titles (top of page, not hero) ─── */
.about-hero-title,
.faq-hero-title,
.help-hero-title,
.apps-hero-title,
.contact-title {
  font-size: 56px;
}

/* ─── Section Titles (within pages) ─── */
.everyday-title,
.contracts-title,
.notif-title,
.testimonials-heading,
.about-heading,
.about-cta-title,
.about-features-title,
.lh-feature-heading,
.learn-articles-title,
.learn-section-title,
.help-topics-title,
.doc-feature-heading,
.doc-info-title,
.doc-cta-heading,
.apps-detail-heading,
.memo-principles-title {
  font-size: 56px;
}

/* ─── Subtitle/paragraph text under titles ─── */
.about-hero-subtitle,
.faq-hero-subtitle,
.help-hero-subtitle,
.apps-hero-subtitle,
.contact-subtitle,
.everyday-subtitle,
.contracts-subtitle,
.notif-subtitle,
.about-text,
.about-cta-subtitle,
.about-features-subtitle,
.lh-feature-desc,
.learn-articles-subtitle,
.learn-section-subtitle,
.doc-feature-desc,
.doc-cta-desc,
.apps-detail-subtitle,
.browser-subtitle,
.faq-cta-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #4A4A48;
}

/* ─── Gap between title and subtitle: 24px ─── */
.about-hero-title,
.faq-hero-title,
.help-hero-title,
.apps-hero-title,
.contact-title,
.everyday-title,
.contracts-title,
.notif-title,
.about-heading,
.about-cta-title,
.about-features-title,
.lh-feature-heading,
.learn-articles-title,
.learn-section-title,
.help-topics-title,
.doc-feature-heading,
.doc-info-title,
.doc-cta-heading,
.apps-detail-heading,
.memo-principles-title {
  margin-bottom: 24px;
}

/* ─── Button spacing after subtitle ─── */
.contracts-learn-more,
.about-cta-btn,
.founder-btn,
.apps-suggest-btn,
.doc-cta-section .founder-btn,
.faq-cta .founder-btn,
.faq-help-btn {
  margin-top: 24px;
}

/* ─── Nav-to-page-title spacing (Desktop) ─── */
.about-hero,
.faq-hero {
  padding-top: 160px;
}

.help-hero,
.apps-hero-section {
  padding-top: 160px;
}

.contact-section {
  padding-top: 160px;
}

/* ═══════════════════════════════════════════════════
   TABLET/MOBILE (≤ 1199px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  /* Page Titles */
  .about-hero-title,
  .faq-hero-title,
  .help-hero-title,
  .apps-hero-title,
  .contact-title {
    font-size: 44px;
  }

  /* Section Titles */
  .everyday-title,
  .contracts-title,
  .notif-title,
  .testimonials-heading,
  .about-heading,
  .about-cta-title,
  .about-features-title,
  .lh-feature-heading,
  .learn-articles-title,
  .learn-section-title,
  .help-topics-title,
  .doc-feature-heading,
  .doc-info-title,
  .doc-cta-heading,
  .apps-detail-heading,
  .memo-principles-title,
  .faq-cta-title {
    font-size: 44px;
  }

  /* Subtitles */
  .about-hero-subtitle,
  .faq-hero-subtitle,
  .help-hero-subtitle,
  .apps-hero-subtitle,
  .contact-subtitle,
  .everyday-subtitle,
  .contracts-subtitle,
  .notif-subtitle,
  .about-text,
  .about-cta-subtitle,
  .about-features-subtitle,
  .lh-feature-desc,
  .learn-articles-subtitle,
  .learn-section-subtitle,
  .doc-feature-desc,
  .doc-cta-desc,
  .apps-detail-subtitle,
  .browser-subtitle,
  .faq-cta-subtitle {
    font-size: 16px;
    line-height: 20px;
  }

  /* Button spacing */
  .contracts-learn-more,
  .about-cta-btn,
  .founder-btn,
  .apps-suggest-btn,
  .doc-cta-section .founder-btn,
  .faq-cta .founder-btn,
  .faq-help-btn {
    margin-top: 32px;
  }

  /* Nav-to-page-title spacing */
  .about-hero,
  .faq-hero {
    padding-top: 110px;
  }

  .help-hero,
  .apps-hero-section {
    padding-top: 110px;
  }

  .contact-section {
    padding-top: 110px;
  }
}

/* ─── Contracts Section — smaller title, tighter spacing ────────
   These rules use higher specificity (.contracts-section .contracts-*)
   to override the global typography overhaul above.                 */
.contracts-section .contracts-title {
  font-size: clamp(26px, 3vw, 44px);
  margin-bottom: 0;
}

.contracts-section .contracts-subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: #787776;
}

.contracts-section .contracts-learn-more {
  margin-top: 10px;
}

@media (max-width: 1199px) {
  .contracts-section .contracts-title {
    font-size: 38px;
  }
  .contracts-section .contracts-subtitle {
    font-size: 16px;
    line-height: 1.7;
  }
}

/* ─── Payments at a Glance: mobile title outside freeze area ─── */
.paag-title-wrap {
  display: none;
  text-align: center;
  margin-bottom: 24px;
}
.paag-title-wrap .contracts-subtitle {
  max-width: 400px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .paag-title-wrap {
    display: block;
  }
  .paag-title-desktop {
    display: none !important;
  }
}

/* ─── Payments Section — match Contracts section style ─────────── */
.feature-section:not(.feature-section-stacked) .contracts-title {
  font-size: clamp(26px, 3vw, 44px);
  margin-bottom: 0;
}

.feature-section:not(.feature-section-stacked) .contracts-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  max-width: 320px;
}

/* ─── Notifications Section — match Contracts section style ─────── */
.notif-section .notif-title {
  font-size: clamp(26px, 3vw, 44px);
  margin-bottom: 0;
}

.notif-section .notif-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
  max-width: 320px;
}

@media (max-width: 1199px) {
  .feature-section:not(.feature-section-stacked) .contracts-title,
  .notif-section .notif-title {
    font-size: 38px;
  }
  .feature-section:not(.feature-section-stacked) .contracts-subtitle,
  .notif-section .notif-subtitle {
    font-size: 16px;
    line-height: 1.7;
  }
}

/* ─── Everyday Lending — match Contracts text style ────────────── */
.everyday-section .everyday-title {
  font-size: clamp(26px, 3vw, 44px);
}

.everyday-section .everyday-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
}

/* ─── Track Your Loan Progress: mobile title outside freeze area ─── */
.tylp-title-wrap {
  display: none;
  text-align: center;
  margin-bottom: 24px;
}
.tylp-title-wrap .contracts-subtitle {
  max-width: 400px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .tylp-title-wrap {
    display: block;
  }
  .tylp-title-desktop {
    display: none !important;
  }
}

/* ─── Track Your Loan Progress — match Notifications text style ─── */
.feature-section-stacked .contracts-title {
  font-size: clamp(26px, 3vw, 44px);
  margin-bottom: 0;
}

.feature-section-stacked .contracts-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #787776;
}

@media (max-width: 1199px) {
  .everyday-section .everyday-title,
  .feature-section-stacked .contracts-title {
    font-size: 38px;
  }
  .everyday-section .everyday-subtitle,
  .feature-section-stacked .contracts-subtitle {
    font-size: 16px;
    line-height: 1.7;
  }
}

/* ─── Section vertical position tweaks ──────────────────────────── */
/* Trusted by users from — slight upward nudge */
.trusted-section {
  padding-top: 20px;
}

/* Designed for Everyday Lending — slight upward nudge */
.everyday-section {
  padding-top: 56px;
}

/* Payments at a Glance — very slight upward nudge */
.feature-section:not(.feature-section-stacked) {
  padding-top: 56px;
}

/* Notifications — very slight upward nudge */
.notif-section {
  padding-top: 56px;
}

/* Track Your Loan Progress — slight upward nudge */
.feature-section-stacked {
  padding-top: 48px;
}

/* Digital Loan Agreements — slight upward nudge */
.contracts-section {
  padding-top: 48px;
}

/* Founder / signature section — slight upward nudge */
.founder-section {
  padding-top: 56px;
}

/* ─── About — Stories & Founder Memo Cards ─── */
/* About Story Card */
.about-story-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 48px 52px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  max-width: 820px;
  margin: 0 auto;
}

.about-story-card p {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: #3A3938;
  margin-bottom: 20px;
}


.about-story-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .about-story-card {
    padding: 28px 24px;
  }
}

/* About Explore Buttons */
.about-explore-section {
  padding: 0 40px 80px;
  max-width: 960px;
  margin: 0 auto;
}

.about-explore-tight {
  padding-top: 0;
  padding-bottom: 60px;
}

.about-explore-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .about-explore-btns {
    flex-direction: column;
    align-items: center;
  }
}

/* ─── Loan Help — Fan Cards ─── */

/* Container: relative, tall enough for fan + overflow visible */
/*
  Fan layout.
  Container: 1300px, broken out of parent, truly centered via margin auto.
  Cards: 310×210px. All start stacked at center (left: 495px = (1300-310)/2).
  Fanned spread: outer ±450px, inner ±150px → cards barely overlap (20px edge only).
  Z-index ascending left→right so card 4 always sits on top of card 3.
*/
.lh-fan-grid {
  position: relative;
  width: 1300px;
  /* break out of any constraining parent and center on viewport */
  margin-left: calc(50% - 650px);
  height: 300px;
  margin-top: 56px;
  margin-bottom: 60px;
  overflow: visible;
}

/* Base card */
.lh-fan-card {
  position: absolute;
  width: 310px;
  height: 210px;
  left: 495px; /* (1300 - 310) / 2 */
  top: 20px;
  background: #fff;
  border: 1px solid rgba(26, 25, 24, 0.07);
  border-radius: 20px;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  will-change: transform;
  transform: translateX(0px) translateY(0px) rotate(0deg);
}

/* Z-index ascending — card 4 on top, card 1 at back */
.lh-fan-card[data-fan="1"] { z-index: 1; transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) 0s; }
.lh-fan-card[data-fan="2"] { z-index: 2; transition: transform 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) 0.04s; }
.lh-fan-card[data-fan="3"] { z-index: 3; transition: transform 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) 0.04s; }
.lh-fan-card[data-fan="4"] { z-index: 4; transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) 0s; }

/*
  Fanned positions:
  Card 1: 495-450=45px left edge  → card right=355px
  Card 2: 495-150=345px left edge → card right=655px  (10px overlap with card1 edge only)
  Card 3: 495+150=645px left edge → 10px overlap with card2 edge
  Card 4: 495+450=945px left edge → card right=1255px ✓
*/
.lh-fan-grid.is-fanned .lh-fan-card[data-fan="1"] {
  transform: translateX(-450px) translateY(24px) rotate(-12deg);
}
.lh-fan-grid.is-fanned .lh-fan-card[data-fan="2"] {
  transform: translateX(-150px) translateY(8px) rotate(-4deg);
}
.lh-fan-grid.is-fanned .lh-fan-card[data-fan="3"] {
  transform: translateX(150px) translateY(8px) rotate(4deg);
}
.lh-fan-grid.is-fanned .lh-fan-card[data-fan="4"] {
  transform: translateX(450px) translateY(24px) rotate(12deg);
}

/* Inner content — generous horizontal padding creates margin cards can safely overlap */
.lh-fan-card-inner {
  padding: 22px 28px 22px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Icon + title on same line */
.lh-fan-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.lh-fan-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1918;
  line-height: 1.3;
}

/* Paragraph on its own line with clear top gap */
.lh-fan-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(26, 25, 24, 0.55);
  margin-top: 14px;
}

/* Mobile: vertical stack */
@media (max-width: 900px) {
  .lh-fan-grid {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 32px 0 0;
    margin-left: 0;
    overflow: visible;
  }
  .lh-fan-card {
    position: static;
    width: 100%;
    height: auto;
    transform: none !important;
    transition: none !important;
  }
  .lh-fan-header {
    flex-direction: row;
    align-items: center;
  }
}

/* ─── Loan Help — Centered Hero Variant ─── */
.help-hero--centered {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
}

.help-hero--centered .help-hero-subtitle {
  max-width: 540px;
  margin: 0 auto 20px;
}

.help-hero--centered .apps-coming-soon-badge {
  position: relative;
  top: auto;
  right: auto;
  margin-top: 8px;
}

/* ─── Loan Help — Screenshot Coming Soon Overlay ─── */
.lh-screenshot-frame {
  position: relative;
}

.lh-coming-soon-overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(245, 244, 240, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.lh-coming-soon-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1A1918;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(26, 25, 24, 0.1);
  padding: 8px 18px;
  border-radius: 100px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ─── Loan Help — Pros/Cons Cards ─── */
.lh-feature-inner--top {
  align-items: flex-start;
}

.lh-compare-section {
  text-align: center;
}

.lh-compare-heading-wrap {
  max-width: 640px;
  margin: 0 auto 40px;
}

.lh-compare-section .lh-feature-heading {
  text-align: center;
}

.lh-compare-section .lh-feature-desc {
  text-align: center;
}

/* Keep card internals left-aligned */
.lh-pros-card {
  text-align: left;
}

.lh-pros-cons-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 20px 40px 48px;
  overflow: visible;
}

.lh-pros-card {
  background: #fff;
  border: 2px solid rgba(26, 25, 24, 0.08);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  width: 280px;
  flex-shrink: 0;
}

.lh-pros-card--friends {
  z-index: 2;
  transform: rotate(-3deg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}

.lh-pros-card--traditional {
  z-index: 3;
  transform: rotate(2.5deg) translateX(-50px);
  margin-top: 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

.lh-pros-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1A1918;
  margin-bottom: 14px;
}

.lh-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.lh-tag-row--con {
  margin-top: 12px;
}

.lh-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}

.lh-tag-pro {
  background: rgba(94, 196, 126, 0.15);
  color: #2e8d4f;
}

.lh-tag-con {
  background: rgba(232, 100, 80, 0.12);
  color: #c0442a;
}

.lh-list {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
}

.lh-list li {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(26, 25, 24, 0.65);
  padding: 3px 0 3px 16px;
  position: relative;
}

.lh-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: rgba(26, 25, 24, 0.3);
}

/* ─── Loan Help — 4-column scenario row ─── */
.loan-scenarios--row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

.loan-scenarios--row .lh-card-horizontal {
  flex-direction: column !important;
  align-items: flex-start;
}

/* ─── Loan Help — Centered Learn Section ─── */
.learn-section--centered {
  text-align: center;
}

.learn-section--centered .learn-section-title,
.learn-section--centered .learn-section-subtitle {
  text-align: center;
}

/* ─── Loan Help — Learn More Link ─── */
.lh-learn-more {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1A1918;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(26, 25, 24, 0.25);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}

.lh-learn-more:hover {
  color: #7EC0EA;
  border-color: #7EC0EA;
}

/* ─── Loan Help Responsive — Pros/Cons & Scenarios ─── */
@media (max-width: 900px) {
  .lh-pros-cons-wrap {
    width: 100%;
  }
  .lh-pros-card {
    width: 220px;
  }
  .lh-pros-card--traditional {
    transform: rotate(2.5deg) translateX(-30px);
  }
  .loan-scenarios--row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .loan-scenarios--row {
    grid-template-columns: 1fr !important;
  }
  .lh-pros-cons-wrap {
    flex-direction: column;
    align-items: center;
  }
  .lh-pros-card--friends,
  .lh-pros-card--traditional {
    transform: none;
    width: 100%;
    max-width: 320px;
  }
  .lh-pros-card--traditional {
    margin-top: -20px;
    margin-left: 12px;
  }
}

/* ═══════════════════════════════════════════════════
   MOBILE IMAGE & CONTENT OVERFLOW PREVENTION (≤ 900px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Prevent any bare <img> from spilling past the screen edge */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Section-level overflow guard */
  .feature-section,
  .notif-section,
  .contracts-section,
  .everyday-section,
  .trusted-section {
    overflow-x: hidden;
  }

  /* Center the hero title text on small screens */
  .hero-title {
    text-align: center;
  }

  /* Center the contracts / promissory-note image */
  .contracts-right img {
    display: block;
    margin: 0 auto;
  }

  /* Keep the notif-card from straining its flex parent
     (freeze-scale handles dynamic scaling; this is a CSS safety net) */
  .notif-card {
    max-width: 400px;
    width: 100%;
  }

  /* Apps page — phone + badges wrap should not exceed its column */
  .apps-mobile-notif-wrap {
    max-width: 100%;
    overflow: visible;
  }
}

/* ═══════════════════════════════════════════════════
   SMALL PHONES (< 400px) — fluid title sizes
   ═══════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .about-hero-title,
  .faq-hero-title,
  .help-hero-title,
  .apps-hero-title,
  .contact-title,
  .everyday-title,
  .contracts-title,
  .notif-title,
  .testimonials-heading,
  .about-heading,
  .about-cta-title,
  .about-features-title,
  .lh-feature-heading,
  .learn-articles-title,
  .learn-section-title,
  .help-topics-title,
  .doc-feature-heading,
  .doc-info-title,
  .doc-cta-heading,
  .apps-detail-heading,
  .memo-principles-title,
  .faq-cta-title {
    font-size: 11vw;
  }
}

/* ─── High-specificity overrides: match contracts title style ─── */

/* Browse Help Topics — same size as contracts title */
.help-topics .help-topics-title {
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 40px;
}
@media (max-width: 1199px) {
  .help-topics .help-topics-title { font-size: 38px; }
}

/* Apps — Vony for Desktop & Mobile headings match contracts title */
.apps-desktop-stacked-section .apps-detail-heading,
.apps-detail-section .apps-detail-heading {
  font-size: clamp(26px, 3vw, 44px);
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 10px;
}
@media (max-width: 1199px) {
  .apps-desktop-stacked-section .apps-detail-heading,
  .apps-detail-section .apps-detail-heading { font-size: 38px; }
}

/* Apps subtitles match contracts subtitle colour and size */
.apps-desktop-stacked-section .apps-detail-subtitle,
.apps-detail-section .apps-detail-subtitle {
  font-size: 16px;
  color: #787776;
  line-height: 1.7;
}

/* Apps — em inside heading stays italic */
.apps-detail-heading em {
  font-style: italic;
}

/* Apps — Desktop image pushed down slightly */
.apps-desktop-img-wrap {
  margin-top: 30px;
}

/* Apps — Mobile section moved up */
.apps-detail-section {
  padding-top: 40px;
}

/* Apps — Mobile image shorter */
.apps-mobile-mockup-card img {
  max-height: 260px;
  object-fit: contain;
}

/* Learn — remove outer container box */
.learn-preview-cards-wrap {
  border: none;
  box-shadow: none;
  padding: 24px 20px 36px;
}

/* Learn — gradient border: 6px solid #03ACEA, then 12px fading to #F5F4F0 */
.learn-preview-card-1,
.learn-preview-card-2 {
  border: 6px solid #03ACEA;
  box-shadow:
    0 0 0 1px  #17B2EB,
    0 0 0 2px  #2BB8EB,
    0 0 0 3px  #3FBEEC,
    0 0 0 4px  #54C4EC,
    0 0 0 5px  #68CEED,
    0 0 0 6px  #7CD0ED,
    0 0 0 7px  #90D6EE,
    0 0 0 8px  #A4DCEE,
    0 0 0 9px  #B9E2EF,
    0 0 0 10px #CDE8EF,
    0 0 0 11px #E1EEF0,
    0 0 0 12px #F5F4F0;
}

.learn-preview-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Loan Help — headings match contracts style (override global 56px block) */
.lh-feature-section .lh-feature-heading,
.learn-section--centered .learn-section-title {
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
@media (max-width: 1199px) {
  .lh-feature-section .lh-feature-heading,
  .learn-section--centered .learn-section-title { font-size: 38px; }
}

/* Loan Help — subtitles match contracts subtitle style */
.lh-feature-section .lh-feature-desc,
.learn-section--centered .learn-section-subtitle {
  font-size: 16px;
  color: #787776;
  line-height: 1.7;
}

/* Loan Help — compare section: text left (narrower), cards right (wider) */
.lh-compare-section {
  text-align: left;
  padding-top: 30px;
}
.lh-compare-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 60px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.lh-compare-heading-wrap {
  margin: 0;
  text-align: left;
}
.lh-compare-section .lh-feature-heading,
.lh-compare-section .lh-feature-desc {
  text-align: left;
}
@media (max-width: 900px) {
  .lh-compare-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Loan Help — fan card: vertically centre title with icon, tighten paragraph gap */
.lh-fan-header {
  align-items: center;
  margin-bottom: 0;
}
.lh-fan-title {
  align-self: center;
  margin: 0;
}
.lh-fan-desc {
  margin-top: 6px;
}

/* Digital Records — headings match contracts style (override global 56px block) */
.doc-feature-section .doc-feature-heading {
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
@media (max-width: 1199px) {
  .doc-feature-section .doc-feature-heading { font-size: 38px; }
}

/* Digital Records — subtitles match contracts subtitle style */
.doc-feature-section .doc-feature-desc {
  font-size: 16px;
  color: #787776;
  line-height: 1.7;
}

/* Digital Records — floating icons visible outside card bounds */
.doc-feature-visual .doc-glass-card {
  overflow: visible;
}

/* Help cards — more space between icon+title row and description */
.help-card {
  gap: 28px;
}

/* FAQ — gap between section title and context link matches contracts */
.faq-section-title {
  margin-bottom: 10px;
}

/* FAQ — more breathing room between each section block */
.faq-section-block {
  margin-bottom: 96px;
}

/* Apps — mobile image: no box around it, bigger */
.apps-mobile-mockup-card {
  border-radius: 0;
  overflow: visible;
  border: none;
  max-width: 260px;
}
.apps-mobile-mockup-card::before {
  display: none;
}

/* Apps — mobile image taller, fades out at bottom */
.apps-mobile-mockup-card img {
  max-height: 540px;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

/* Apps — desktop image fades out at bottom */
.apps-desktop-main-img {
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  border-radius: 10px;
  box-shadow: none;
}

/* Apps — Coming Soon badges closer to subtitle */
.apps-coming-soon {
  margin-top: 4px;
}

/* Loan Help — hero title matches contracts heading style */
.help-hero.help-hero--centered .help-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #1A1918;
  margin-bottom: 12px;
}
@media (max-width: 1199px) {
  .help-hero.help-hero--centered .help-hero-title { font-size: 38px; }
}

/* Loan Help — hero subtitle matches contracts subtitle style */
.help-hero.help-hero--centered .help-hero-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #787776;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* Loan Help — Your Loan Options section moved up */
.lh-feature-reversed {
  padding-top: 20px;
}

/* Loan Help — Chrome bar: true Chrome gray, tighter layout */
.lh-chrome-bar {
  background: #F1F3F4;
  height: 46px;
  padding: 0 12px;
  gap: 8px;
}
.lh-chrome-nav {
  gap: 6px;
  color: rgba(0,0,0,0.38);
}
.lh-chrome-nav svg {
  width: 16px;
  height: 16px;
}
.lh-chrome-url {
  max-width: 400px;
  background: #fff;
  border-radius: 100px;
  height: 28px;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(0,0,0,0.08);
}
.lh-chrome-url svg {
  width: 11px;
  height: 11px;
}
.lh-chrome-actions {
  gap: 10px;
  color: rgba(0,0,0,0.45);
}
.lh-chrome-actions svg {
  width: 15px;
  height: 15px;
}
.lh-chrome-actions .ldd-browser-avatar {
  width: 22px;
  height: 22px;
}

/* Digital Records — Activity portal card */
.doc-activity-wrap {
  padding: 10px;
  overflow: visible;
  max-width: 460px;
}
.doc-activity-card {
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}
.doc-activity-topbar {
  background: #F5F4F0;
  padding: 7px 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aaa;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.doc-activity-cols {
  display: grid;
  grid-template-columns: 72px 1fr 96px;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  gap: 6px;
}
.doc-activity-col-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ccc;
  text-align: center;
}
.doc-activity-row {
  display: grid;
  grid-template-columns: 72px 1fr 96px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  gap: 6px;
}
.doc-activity-row:last-child {
  border-bottom: none;
}
.doc-activity-date {
  font-size: 10px;
  color: #bbb;
  white-space: nowrap;
  text-align: center;
}
.doc-activity-cat {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}
.doc-activity-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.doc-activity-desc {
  font-size: 11px;
  color: #1A1918;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-activity-badge {
  font-size: 9px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 100px;
  white-space: nowrap;
  display: block;
  text-align: center;
}
.doc-activity-status-empty {
  display: block;
}

/* ── Vony Portal Activity Box — exact recreation ── */
.vony-activity-box {
  background: rgb(229, 226, 223);
  border-radius: 18px;
  padding: 20px;
  width: fit-content;
  font-family: 'DM Sans', sans-serif;
}
.vony-activity-label {
  display: flex;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgb(155, 154, 152);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 14px 5px;
}
.vony-activity-card {
  background: rgb(244, 244, 245);
  border-radius: 14px;
  box-shadow:
    rgba(0,0,0,0.02) 0px 50px 40px 0px,
    rgba(0,0,0,0.04) 0px 50px 40px 0px,
    rgba(0,0,0,0.08) 0px 20px 40px 0px,
    rgba(0,0,0,0.12) 0px 3px 10px 0px;
  overflow: hidden;
}
.vony-activity-inner {
  padding: 14px 9px 9px;
}
.vony-activity-header {
  display: grid;
  grid-template-columns: 82px max-content 130px;
  padding: 0 5px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  gap: 6px;
}
.vony-activity-col-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.44px;
  color: rgb(120, 119, 118);
}
.vony-activity-rows {
  display: flex;
  flex-direction: column;
}
.vony-activity-row {
  display: grid;
  grid-template-columns: 82px max-content 130px;
  align-items: center;
  padding: 12px 5px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  gap: 6px;
}
.vony-activity-row:last-child {
  border-bottom: none;
}
.vony-activity-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgb(120, 119, 118);
  white-space: nowrap;
}
.vony-activity-cat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vony-activity-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vony-activity-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgb(26, 25, 24);
  white-space: nowrap;
}
.vony-activity-status {
  display: flex;
  align-items: center;
}
.vony-activity-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
}
.vony-activity-badge--blue {
  background: rgba(84, 166, 207, 0.15);
  color: rgb(84, 166, 207);
  border: 1px solid rgba(84, 166, 207, 0.3);
  padding: 3px 10px;
}

/* ── Track Your Loan Progress — bottom-edge notification floaters ── */
.ldd-bottom-floater {
  display: none;
}

/* ── Track Your Loan: notification floaters matching home style ── */
.ldd-notif-floater {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  height: 40px;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 0 18px rgba(0,0,0,0.13),
    0 2px 8px rgba(0,0,0,0.09);
}
.ldd-notif-floater-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ldd-notif-floater-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(6, 18, 54, 0.79);
  white-space: nowrap;
}
.ldd-notif-floater--topleft {
  top: -20px;
  left: -30px;
}
.ldd-notif-floater--bottomleft {
  bottom: -20px;
  left: -30px;
}
.ldd-notif-floater--bottomright {
  bottom: -20px;
  right: -30px;
}

/* Shadow bleeding out from under the grey box */
.feature-section-stacked .ldd-browser-chrome {
  box-shadow:
    0 16px 64px rgba(0,0,0,0.22),
    0 32px 80px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.08);
}

/* Dummy rule to keep old selector from breaking */
.ldd-bottom-floater--keep {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 12px);
  padding: clamp(9px, 1vw, 14px) clamp(13px, 1.5vw, 20px);
  border-radius: clamp(8px, 0.9vw, 13px);
  font-size: clamp(11px, 1.25vw, 15px);
}
.ldd-bottom-floater .ldd-floater-icon {
  width: clamp(28px, 3.2vw, 40px);
  height: clamp(28px, 3.2vw, 40px);
  border-radius: clamp(7px, 0.8vw, 10px);
}
.ldd-bottom-floater .ldd-floater-text {
  font-size: clamp(11px, 1.25vw, 15px);
  white-space: nowrap;
}
.ldd-bottom-floater--1 {
  left: 25%;
  transform: translateX(-50%);
}
.ldd-bottom-floater--2 {
  left: 75%;
  transform: translateX(-50%);
}
.ldd-bottom-floater--3 {
  right: 1.5%;
}

/* ── Loan Help: screenshot section — fade + shadow + overlay cards ── */
.lh-screenshot-wrap {
  position: relative;
  overflow: visible;
}

/* Browser chrome: shadow all around the screenshot */
.lh-screenshot-section .ldd-browser-chrome {
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  filter:
    drop-shadow(0 20px 50px rgba(0,0,0,0.22))
    drop-shadow(0 4px 16px rgba(0,0,0,0.14));
  box-shadow: none;
}

/* Overlay loan cards on the screenshot */
.lh-overlay-card {
  position: absolute;
  width: 17%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.14), 0 4px 14px rgba(0,0,0,0.10);
  z-index: 10;
  pointer-events: none;
}
.lh-overlay-card--1 {
  top: 18%;
  right: -2%;
  transform: rotate(4deg);
}
.lh-overlay-card--2 {
  bottom: 14%;
  right: -2%;
  transform: rotate(-3deg);
}
.lh-overlay-card--3 {
  top: 18%;
  left: -2%;
  transform: rotate(-4deg);
}
.lh-overlay-card--4 {
  bottom: 14%;
  left: -2%;
  transform: rotate(3deg);
}

/* Overlay card inner structure */
.lh-ov-header {
  padding: 5px 10px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.lh-ov-header--blue { background: #03ACEA; }
.lh-ov-header--grey { background: #F4F4F5; }

.lh-ov-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.lh-ov-label--blue { color: rgba(255,255,255,0.92); }
.lh-ov-label--grey { color: #9B9A98; }

.lh-ov-inner {
  background: #ffffff;
  margin: 0 4px 4px;
  border-radius: 12px;
  padding: 11px 13px;
}
.lh-ov-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1A1918;
  margin-bottom: 1px;
}
.lh-ov-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 500;
  margin-bottom: 8px;
}
.lh-ov-tagline--blue { color: #03ACEA; }
.lh-ov-tagline--grey { color: #787776; }
.lh-ov-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.lh-ov-detail {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: #5C5B5A;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.4;
}
.lh-ov-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
  margin-top: 4px;
}
.lh-ov-dot--blue { background: #03ACEA; }
.lh-ov-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.lh-ov-btn {
  padding: 4px 12px;
  border-radius: 8px;
  border: none;
  cursor: default;
  font-size: 10px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
}
.lh-ov-btn--blue { background: #03ACEA; color: white; }
.lh-ov-btn--grey { background: rgba(0,0,0,0.06); color: #1A1918; }
.lh-ov-compare {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: #787776;
}
.lh-ov-checkbox {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid rgba(0,0,0,0.18);
  background: white;
}

/* ── Loan Help: fan cards — slightly smaller ── */
.lh-fan-card {
  width: 284px;
  height: 192px;
}
.lh-fan-card-inner {
  padding: 18px 22px;
}

/* ── Loan Help: fan card title — vertically centred in icon height ── */
.lh-fan-title {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
}

/* ── Loan Help: compare — text left, cards right ── */
.lh-compare-section {
  text-align: left;
  padding-top: 30px;
}
.lh-compare-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 100px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.lh-compare-heading-wrap {
  margin: 0;
  text-align: left;
}
.lh-compare-section .lh-feature-heading,
.lh-compare-section .lh-feature-desc {
  text-align: left;
}
@media (max-width: 900px) {
  .lh-compare-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lh-compare-heading-wrap {
    text-align: center;
  }
  .lh-compare-section .lh-feature-heading,
  .lh-compare-section .lh-feature-desc {
    text-align: center;
  }
}

/* ── Activity box: match Vony portal structure ── */

/* Grey outer box — tighter padding */
.vony-activity-box {
  padding: 0;
}

/* Label sits inside the card now, not between box and card */
.vony-activity-card .vony-activity-label {
  padding: 6px 14px 5px;
}

/* White inner card (new layer inside the rgb(244,244,245) card) */
.vony-activity-white {
  background: rgb(255, 255, 255);
  border-radius: 10px;
  margin: 0 5px 5px;
  overflow: hidden;
}

/* 3-column grid: date / category / status — all inside white card */
.vony-activity-header,
.vony-activity-row {
  grid-template-columns: 100px 1fr 160px;
}

/* ── Apps: mobile image — shadow via filter so it respects the fade mask ── */
.apps-mobile-notif-wrap {
  filter:
    drop-shadow(0 0 22px rgba(0,0,0,0.18))
    drop-shadow(0 8px 30px rgba(0,0,0,0.14));
}

/* ── Apps: desktop badge icons — bigger ── */
.apps-desktop-badge {
  width: 72px;
  height: 72px;
}
.apps-desktop-badge-os {
  bottom: -32px;
  left: -32px;
}
.apps-desktop-badge-windows {
  top: 50%;
  right: -32px;
  transform: translateY(-50%);
}

/* ── Apps: coming soon badge — darker ── */
.apps-coming-soon {
  background: #B0B0B0;
  color: #3A3A3A;
  margin-top: 0;
  margin-bottom: 12px;
}

/* ── Apps: notification bar (matches home page ticker item, scaled up) ── */
.apps-notif-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  height: 50px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 0 18px rgba(0,0,0,0.13),
    0 2px 8px rgba(0,0,0,0.09);
}
.apps-notif-bar-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apps-notif-bar-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(6, 18, 54, 0.79);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Apps: desktop notification floater — top left corner ── */
.apps-desktop-notif-floater {
  position: absolute;
  top: 18px;
  left: 18px;
  max-width: 310px;
  z-index: 10;
}

/* ── Apps: Apple-style push notification — top right corner ── */
.apps-desktop-notif-topright {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
}
.apps-notif-push {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border-radius: 12px;
  padding: 10px 14px;
  max-width: 240px;
  box-shadow:
    0 0 18px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.65),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
.apps-notif-push-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: contain;
}
.apps-notif-push-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.apps-notif-push-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.apps-notif-push-app {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #1A1918;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.apps-notif-push-time {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #9B9A98;
  white-space: nowrap;
}
.apps-notif-push-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(6, 18, 54, 0.79);
  line-height: 1.35;
}

/* ── Learn: border — thin solid (2px), thick gradient (20 rings) ── */
.learn-preview-card-1,
.learn-preview-card-2 {
  border: 2px solid #03ACEA;
  box-shadow:
    0 0 0 1px  #0FB0EA,
    0 0 0 2px  #1BB3EB,
    0 0 0 3px  #27B7EB,
    0 0 0 4px  #33BAEB,
    0 0 0 5px  #40BEEB,
    0 0 0 6px  #4CC2EB,
    0 0 0 7px  #58C5EC,
    0 0 0 8px  #64C9EC,
    0 0 0 9px  #70CCEC,
    0 0 0 10px #7CD0ED,
    0 0 0 11px #88D3ED,
    0 0 0 12px #94D7ED,
    0 0 0 13px #A0DBEE,
    0 0 0 14px #ACDEEE,
    0 0 0 15px #B8E2EF,
    0 0 0 16px #C5E6EF,
    0 0 0 17px #D1E9EF,
    0 0 0 18px #DDEDEF,
    0 0 0 19px #E9F0F0,
    0 0 0 20px #F5F4F0;
}

/* ── Loan Help: image shadow override (already set above) ── */

/* ── Loan Help: card--2 — bottom right corner of image ── */
.lh-overlay-card--2 {
  bottom: 6%;
  right: -18px;
  transform: rotate(-2.5deg);
}

/* ── Bell: white bg, no blue ring, straddling bottom edge of card ── */
.bell-container {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
  bottom: -32px;
}

/* ── Founder quote: signature now between quote and name ── */
.founder-signature {
  margin-top: 12px;
  margin-bottom: 16px;
}
.founder-quote {
  margin-bottom: 0;
}

/* ── Founder section: move up ── */
.founder-section {
  padding-top: 20px;
}

/* ── Apps: desktop header — icons flanking title above image ── */
/* ── Apps hero corner icons ── */
.apps-hero-with-icons {
  position: relative;
  overflow: visible;
}
/* Corner icon wrapper */
.apps-corner-icon-wrap {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.65), inset 0 1px 0 rgba(255,255,255,0.85);
}
.apps-corner-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 6px;
}
.apps-corner-icon--tl { top: 50%; transform: translateY(-50%); left: -50px; }
.apps-corner-icon--tr { top: 50%; transform: translateY(-50%); right: -50px; }
.apps-corner-icon--bl { bottom: 12px; left: -50px; }
.apps-corner-icon--br { bottom: 12px; right: -50px; }

.apps-desktop-header {
  display: none;
}

.apps-header-icons {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
}

.apps-header-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
  object-fit: contain;
}

.apps-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.apps-header-center .apps-detail-heading {
  margin: 0;
}

.apps-header-center .apps-detail-subtitle {
  margin: 0;
}

.apps-header-center .apps-coming-soon {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .apps-desktop-header {
    gap: 20px;
    margin-bottom: 36px;
  }
  .apps-header-icon {
    width: 44px;
    height: 44px;
  }
  .apps-header-icons {
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .apps-desktop-header {
    flex-direction: column;
    gap: 16px;
  }
  .apps-header-icons {
    flex-direction: row;
    gap: 12px;
  }
}

/* ── Notification card: page-bg gradient fade + visible bell ── */
.notif-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    rgba(245, 244, 240, 0) 0%,
    rgba(245, 244, 240, 0.85) 45%,
    #F5F4F0 65%,
    #F5F4F0 100%
  );
  border-radius: 0 0 20px 20px;
  pointer-events: none;
  z-index: 5;
}

/* ── Learn intro: on mobile, cards (image col) appear above text ── */
@media (max-width: 860px) {
  .learn-intro-image {
    order: -1;
  }
}

/* ── Loan Help: on mobile, hero title/subtitle appears above the image ── */
.lh-top-wrap {
  display: block;
}
@media (max-width: 860px) {
  .lh-top-wrap {
    display: flex;
    flex-direction: column;
  }
  .lh-top-wrap .lh-screenshot-section {
    order: 2;
  }
  .lh-top-wrap .help-hero {
    order: 1;
    padding-top: 100px;
  }
}

/* ── Apps coming soon: revert to original lighter style ── */
.apps-coming-soon {
  background: #EBEBEB;
  color: #888;
  margin-top: 14px;
  margin-bottom: 0;
}

/* ── Apps header center: standard hero-scale title + subtitle ── */
.apps-header-center .apps-detail-heading {
  font-size: 56px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-style: italic;
  margin: 0 0 8px;
}
.apps-header-center .apps-detail-subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: #787776;
  margin: 0;
  max-width: 320px;
}
@media (max-width: 1199px) {
  .apps-header-center .apps-detail-heading { font-size: 44px; }
}
@media (max-width: 900px) {
  .apps-header-center .apps-detail-heading { font-size: 38px; }
  .apps-header-center .apps-detail-subtitle { font-size: 15px; }
}
@media (max-width: 600px) {
  .apps-header-center .apps-detail-heading { font-size: 32px; }
}

/* ── Hero: transparent so scattered dashboard cards show through ── */

/* ── Dashboard scatter-to-grid animation ── */
.pdb-box .pdb-card,
.pdb-box .pdb-inbox {
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 1s ease,
              background 1.2s ease,
              backdrop-filter 1.2s ease,
              -webkit-backdrop-filter 1.2s ease,
              box-shadow 1.2s ease;
  transition-delay: var(--scatter-delay, 0s);
  will-change: transform, opacity;
}

/* Hide card content in scattered state, reveal in settled */
.pdb-box .pdb-card > *,
.pdb-box .pdb-inbox > * {
  transition: opacity 0.6s ease;
  transition-delay: var(--scatter-delay, 0s);
}
.pdb-box:not(.cards-settled) .pdb-card > *,
.pdb-box:not(.cards-settled) .pdb-inbox > * {
  opacity: 0;
}
.pdb-box.cards-settled .pdb-card > *,
.pdb-box.cards-settled .pdb-inbox > * {
  opacity: 1;
  transition-delay: calc(var(--scatter-delay, 0s) + 0.6s);
}

/* Scattered state: glassmorphism cards at bottom-left/right corners */
.pdb-box:not(.cards-settled) .pdb-card,
.pdb-box:not(.cards-settled) .pdb-inbox {
  transform: rotate(var(--scatter-rotate, 0deg)) scale(0.42) translateX(var(--scatter-x, 0px)) translateY(-480px);
  opacity: 0.55;
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04),
              inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* Settled state: organized grid with original styling */
.pdb-box.cards-settled .pdb-card {
  transform: rotate(0deg) scale(1) translateX(0) translateY(0);
  opacity: 1;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}
.pdb-box.cards-settled .pdb-card--blue {
  background: #03ACEA;
}
.pdb-box.cards-settled .pdb-aurora {
  background: transparent;
  overflow: visible;
  box-shadow: none;
}
.pdb-box.cards-settled .pdb-inbox {
  transform: rotate(0deg) scale(1) translateX(0) translateY(0);
  opacity: 1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Mobile: disable scatter animation, cards just appear */
@media (max-width: 900px) {
  .pdb-box .pdb-card,
  .pdb-box .pdb-inbox {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    background: rgba(255,255,255,0.85) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  }
  .pdb-box .pdb-card > *,
  .pdb-box .pdb-inbox > * {
    opacity: 1 !important;
    transition: none !important;
  }
  .pdb-box .pdb-aurora {
    background: transparent !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
  }
  .pdb-box .pdb-overview-card {
    background: white !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE FIXES — collected responsive overrides
   ═══════════════════════════════════════════════════════ */

/* ── 1  Digital Records: activity box fits mobile screen ── */
@media (max-width: 600px) {
  .vony-activity-box {
    width: 100%;
    max-width: 100%;
  }
  .vony-activity-header,
  .vony-activity-row {
    grid-template-columns: 60px 1fr 90px;
  }
  .vony-activity-desc { font-size: 11px; }
  .vony-activity-date { font-size: 10px; }
  .vony-activity-col-label { font-size: 9px; }
  .vony-activity-badge { font-size: 9px; padding: 2px 6px; }
}

/* ── 2  FAQ: tighter gap between blue link and white boxes ── */
@media (max-width: 768px) {
  .faq-section-block.faq-row,
  .faq-section-block.faq-row-reverse {
    gap: 8px;
  }
  .faq-row-side { margin-bottom: 0; }
}

/* ── 3  About page: subtitle wraps to two lines on mobile ── */
@media (max-width: 900px) {
  .about-hero-subtitle {
    white-space: normal;
    text-align: center;
  }
}

/* ── 4  Founder Memo: ensure subtitle is centered on mobile ── */
@media (max-width: 600px) {
  .about-hero-subtitle {
    white-space: normal;
    text-align: center;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 5  Apps: icons scale with their image ── */
/* Desktop badges scale with viewport */
.apps-desktop-badge {
  width: clamp(36px, 6vw, 72px);
  height: clamp(36px, 6vw, 72px);
  border-radius: 11px;
  background: rgba(255,255,255,0.45);
  padding: 8px;
  box-sizing: border-box;
  object-fit: contain;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.65), inset 0 1px 0 rgba(255,255,255,0.85);
}
.apps-desktop-badge-os {
  bottom: clamp(-20px, -2.5vw, -10px);
  left: clamp(-20px, -2.5vw, -10px);
}
.apps-desktop-badge-windows {
  right: clamp(-20px, -2.5vw, -10px);
}

/* Phone badges scale with container */
.apps-phone-badge {
  width: clamp(28px, 15%, 52px);
  height: clamp(28px, 15%, 52px);
  border-radius: clamp(8px, 1vw, 12px);
}
.apps-phone-badge-gplay  { right: clamp(-18px, -8%, -10px); }
.apps-phone-badge-appstore { left: clamp(-18px, -8%, -10px); }
.apps-phone-badge-ios     { right: clamp(-18px, -8%, -10px); }

/* Header platform icons scale */
.apps-header-icon {
  width: clamp(36px, 4.5vw, 56px);
  height: clamp(36px, 4.5vw, 56px);
  border-radius: clamp(8px, 1.2vw, 14px);
}

/* Desktop notification floater scales down on smaller screens */
@media (max-width: 900px) {
  .apps-desktop-notif-floater {
    transform: scale(0.8);
    transform-origin: top left;
    top: 12px;
    left: 12px;
  }
}
@media (max-width: 600px) {
  .apps-desktop-notif-floater {
    transform: scale(0.65);
    top: 8px;
    left: 8px;
  }
}

/* Mobile notification floater scales */
@media (max-width: 600px) {
  .apps-notif-floater {
    transform: scale(0.8);
    transform-origin: bottom left;
  }
}

/* ── 6  Learn: smaller blue-border preview cards on mobile ── */
@media (max-width: 600px) {
  .learn-preview-cards-wrap {
    padding: 14px 10px 20px;
    max-width: 300px;
    margin: 0 auto;
  }
  .learn-preview-card {
    padding: 12px 14px;
  }
  .learn-card-title { font-size: 13px; }
  .learn-card-desc { font-size: 11px; line-height: 1.5; }
}

/* ── 7  Loan Help: center and shrink "When Traditional Loans" cards ── */
@media (max-width: 900px) {
  .lh-fan-grid {
    align-items: center;
    gap: 12px;
  }
  .lh-fan-card {
    max-width: 380px;
    width: 100%;
  }
  .lh-fan-card-inner {
    padding: 14px 18px;
  }
  .lh-fan-desc {
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 12px;
  }
}

/* ── 8  Loan Help: pros/cons cards stack under heading on mobile ── */
@media (max-width: 600px) {
  .lh-pros-cons-wrap {
    gap: 0;
  }
  .lh-pros-card--friends,
  .lh-pros-card--traditional {
    max-width: 280px;
  }
}

/* ── Loan Help: overlay cards — text scales with card (17% of wrap) ── */
.lh-overlay-card .lh-ov-inner {
  padding: clamp(6px, 1vw, 11px);
}
.lh-overlay-card .lh-ov-name {
  font-size: clamp(9px, 1.1vw, 12px);
}
.lh-overlay-card .lh-ov-tagline {
  font-size: clamp(7px, 0.8vw, 9px);
}
.lh-overlay-card .lh-ov-detail {
  font-size: clamp(7px, 0.8vw, 9px);
}
.lh-overlay-card .lh-ov-btn {
  font-size: clamp(7px, 0.8vw, 10px);
  padding: clamp(3px, 0.3vw, 4px) clamp(6px, 0.8vw, 10px);
}
@media (max-width: 700px) {
  .lh-overlay-card--1, .lh-overlay-card--2 { right: -1%; }
  .lh-overlay-card--3, .lh-overlay-card--4 { left: -1%; }
}
@media (max-width: 500px) {
  .lh-overlay-card--3, .lh-overlay-card--4 { display: none; }
  .lh-overlay-card--1, .lh-overlay-card--2 { right: -8px; }
}

/* ── Digital Records: hero image fan stack ── */
.ldd-hero-wide {
  max-width: 1000px;
  padding-bottom: 0;
}

.ldd-hero-stack {
  position: relative;
  height: 420px;
  margin-top: 56px;
}

/* Base item — center (narrow portrait) */
.ldd-stack-item {
  position: absolute;
  top: 0;
  width: 230px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.16);
  left: 50%;
}

.ldd-stack-item img {
  width: 100%;
  display: block;
}

/* Left (activity) wider, right (amortization schedule) narrower */
.ldd-stack-left {
  width: 265px;
}
.ldd-stack-right {
  width: 265px;
}

/* Activity on left: overflow visible so card content shows, no box-shadow (card has its own) */
.ldd-stack-left {
  transform: translateX(calc(-50% - 280px)) rotate(-10deg) translateY(40px);
  z-index: 2;
  overflow: visible;
  box-shadow: none;
}

.ldd-stack-center {
  transform: translateX(-50%) rotate(0deg);
  z-index: 3;
}

/* Amortization schedule on right: normal image card */
.ldd-stack-right {
  transform: translateX(calc(-50% + 170px)) rotate(9deg) translateY(0px);
  z-index: 1;
}

/* ── Loan Agreement Document mockup (replaces promissory note image) ── */
.lap-doc {
  background: #fff;
  border-radius: 14px;
  padding: 18px 16px 14px;
  font-family: 'DM Sans', sans-serif;
  color: #1A1918;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lap-doc--shadow {
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);
}
.lap-doc-amount {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1A1918;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.025);
}
.lap-doc-intro {
  font-size: 11px;
  line-height: 1.55;
  color: #4B4A48;
  margin: 0;
}
.lap-doc-intro strong { color: #1A1918; font-weight: 600; }
.lap-doc-terms {
  background: rgba(0,0,0,0.025);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lap-doc-terms-title {
  font-size: 12px;
  font-weight: 700;
  color: #1A1918;
  margin-bottom: 2px;
}
.lap-doc-terms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 11px;
  color: #4B4A48;
}
.lap-doc-terms-grid strong { color: #1A1918; font-weight: 600; }
.lap-doc-label { color: #787776; }
.lap-doc-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lap-doc-party {
  background: rgba(0,0,0,0.025);
  border-radius: 10px;
  padding: 10px 12px;
}
.lap-doc-party-label {
  font-size: 10px;
  color: #787776;
  margin-bottom: 4px;
}
.lap-doc-party-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 600;
  color: #1A1918;
  letter-spacing: -0.01em;
}
.lap-doc-party-date {
  font-size: 9px;
  color: #9B9A98;
  margin-top: 4px;
}
.lap-doc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: #54A6CF;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  margin-top: 4px;
}
.lap-doc-btn:hover { background: #4596C0; }

/* Amortization image clip — hides header bar and original download button */
.ldd-amort-clip {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  height: 0;
  padding-bottom: 59%;
}
.ldd-amort-clip-img {
  position: absolute;
  width: 100%;
  top: -10%;
  left: 0;
}

/* When inside the fan stack, scale to fit */
.ldd-stack-center .lap-doc {
  transform: scale(0.667);
  transform-origin: top left;
  width: 345px;
}
.ldd-stack-center {
  overflow: visible;
  box-shadow: none;
}

/* Fan activity: scale the full activity card down to fit */
.ldd-fan-activity-wrap {
  transform: scale(0.70);
  transform-origin: top left;
  width: max-content;
  border-radius: 18px;
  overflow: hidden;
}

/* Large screens: slightly bigger fan */
@media (min-width: 1100px) {
  .ldd-hero-stack {
    height: 460px;
    margin-top: 64px;
  }
  .ldd-stack-item {
    width: 260px;
  }
  .ldd-stack-left {
    width: 300px;
  }
  .ldd-stack-right {
    width: 300px;
  }
  .ldd-stack-left {
    transform: translateX(calc(-50% - 320px)) rotate(-10deg) translateY(44px);
  }
  .ldd-stack-right {
    transform: translateX(calc(-50% + 200px)) rotate(9deg) translateY(0px);
  }
  .ldd-stack-center .lap-doc {
    transform: scale(0.753);
    transform-origin: top left;
  }
  .ldd-fan-activity-wrap {
    transform: scale(0.80);
  }
}

/* Mini activity card (third stack item) */
.ldd-mini-activity {
  background: #fff;
  padding: 14px 12px 10px;
  font-family: 'DM Sans', sans-serif;
}

.ldd-mini-act-header {
  font-size: 11px;
  font-weight: 700;
  color: #1A1918;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.ldd-mini-act-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ldd-mini-act-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 500;
  color: #1A1918;
  white-space: nowrap;
  overflow: hidden;
}

.ldd-mini-act-dot {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: stack fan smaller */
@media (max-width: 700px) {
  .ldd-hero-stack {
    height: 230px;
    margin-top: 36px;
  }
  .ldd-stack-item {
    width: 120px;
  }
  .ldd-stack-left {
    width: 180px;
    overflow: visible;
    box-shadow: none;
  }
  .ldd-stack-right {
    width: 140px;
  }
  .ldd-stack-left {
    transform: translateX(calc(-50% - 140px)) rotate(-11deg) translateY(22px);
  }
  .ldd-stack-right {
    transform: translateX(calc(-50% + 120px)) rotate(9deg) translateY(12px);
  }
  .ldd-fan-activity-wrap {
    transform: scale(0.42);
    transform-origin: top left;
  }
  /* Scale promissory note to fit 120px mobile card width (345 × 0.35 ≈ 120px) */
  .ldd-stack-center .lap-doc {
    transform: scale(0.35);
    transform-origin: top left;
  }
}

/* Digital Records mobile: visuals go under text */
@media (max-width: 900px) {
  .doc-feature-visual {
    order: 1;
  }
}

/* ── Apps page: title below desktop image ── */
.apps-desktop-below-title {
  text-align: center;
  max-width: 520px;
  margin: 44px auto 0;
}

.apps-desktop-below-title .apps-detail-heading {
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 10px;
}

.apps-desktop-below-title .apps-detail-subtitle {
  margin: 0;
  color: rgba(26, 25, 24, 0.55);
  font-size: 15px;
  line-height: 1.7;
}

.apps-desktop-desc {
  margin-top: 16px;
  color: rgba(26, 25, 24, 0.45);
  font-size: 14px;
  line-height: 1.7;
}

/* ── Apps page: desktop header four icons only ── */
.apps-desktop-header {
  justify-content: center;
  margin-bottom: 48px;
}

.apps-desktop-header .apps-header-icons {
  gap: 18px;
}

/* ── Apps page: mobile iPhone frame ── */
.apps-mobile-visual-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.apps-phone-with-icons {
  position: relative;
  margin: 0 36px;
}

.apps-phone-icon-above {
  width: clamp(36px, 4vw, 48px);
  height: clamp(36px, 4vw, 48px);
  border-radius: 11px;
  background: rgba(255,255,255,0.45);
  padding: 7px;
  box-sizing: border-box;
  object-fit: contain;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.65), inset 0 1px 0 rgba(255,255,255,0.85);
}

/* Glass wrapper for phone floating icons */
.apps-phone-icon-wrap {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.65), inset 0 1px 0 rgba(255,255,255,0.85);
}
.apps-phone-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
}

/* Icon positions around the phone */
.apps-phone-icon--appstore {
  top: 18px;
  left: -26px;
}
.apps-phone-icon--ios {
  top: 55px;
  right: -26px;
}
.apps-phone-icon--google {
  top: 38%;
  left: -26px;
}

.apps-iphone-frame {
  position: relative;
  width: clamp(220px, 28vw, 300px);
  background: #D8D6D3;
  border-radius: 38px;
  padding: 7px 5px 0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.55),
    0 0 0 1px rgba(0,0,0,0.06),
    0 1px 3px rgba(0,0,0,0.06),
    0 20px 56px rgba(0,0,0,0.14),
    0 6px 18px rgba(0,0,0,0.08);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 90%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 90%);
}

/* Dynamic island */
.apps-iphone-frame::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 14px;
  background: #1A1918;
  border-radius: 9px;
  z-index: 10;
}

/* Power button (right side) */
.apps-iphone-frame::after {
  content: '';
  position: absolute;
  right: -2.5px;
  top: 76px;
  width: 2.5px;
  height: 32px;
  background: #C8C6C3;
  border-radius: 0 2px 2px 0;
}

.apps-iphone-screen {
  position: relative;
  border-radius: 32px 32px 0 0;
  overflow: hidden;
  background: #03ACEA;
  padding-top: 26px;
}

.apps-iphone-screen img {
  width: 100%;
  display: block;
}

/* Bottom fade into page background */
.apps-iphone-screen::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, rgba(245,244,240,0) 0%, #F5F4F0 85%);
  pointer-events: none;
}

/* Reposition notif floater for new phone layout */
.apps-notif-floater--phone {
  position: relative;
  bottom: auto;
  left: auto;
  margin-top: -16px;
  align-self: flex-start;
  margin-left: -20px;
}

@media (max-width: 900px) {
  .apps-notif-floater--phone {
    margin-left: 0;
    align-self: center;
  }
}

@media (max-width: 900px) {
  .apps-detail-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .apps-detail-reversed .apps-detail-inner {
    direction: ltr;
  }
  .apps-detail-text {
    max-width: 100%;
  }
  .apps-detail-visual {
    order: -1;
  }
}

@media (max-width: 768px) {
  .apps-mobile-visual-wrap {
    align-items: center;
  }
  .apps-phone-with-icons {
    margin: 0 auto;
    width: clamp(220px, 65vw, 300px);
  }
  .apps-iphone-frame {
    width: 100%;
  }
}

/* ── Track Your Loan Progress: detail box layout ── */
.tylp-loan-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 0 18px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.06);
}

.tylp-loan-bar-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1A1918;
}

.tylp-detail-box {
  max-width: 900px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
.tylp-top-row > *,
.tylp-two-col > *,
.tylp-np-grid > *,
.tylp-terms-grid > *,
.tylp-left-stack > *,
.tylp-stat-grid > * {
  min-width: 0;
  overflow: hidden;
}
.tylp-top-left {
  min-width: 0;
  overflow: hidden;
}
.tylp-np-grid {
  min-width: 0;
}
.tylp-terms-grid {
  min-width: 0;
}

/* Card header (portal style: uppercase, border-bottom) */
.tylp-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.tylp-card-hdr-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #9B9A98;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Section 1: top row 2fr 1fr */
.tylp-top-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.tylp-top-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tylp-np-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tylp-np-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.tylp-np-val {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tylp-np-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #1A1918;
  letter-spacing: -0.02em;
}
.tylp-np-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #9B9A98;
  margin-left: auto;
}
/* Loan terms 4-col */
.tylp-terms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  padding: 12px 14px;
}
.tylp-term { text-align: center; }
.tylp-term-label { font-family: 'DM Sans', sans-serif; font-size: 10px; color: #787776; font-weight: 500; margin-bottom: 2px; }
.tylp-term-val { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #1A1918; }

/* Donut card */
.tylp-donut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tylp-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8px 0;
}
.tylp-donut-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #1A1918;
  margin: 6px 0 0;
}

/* Section 2 & 3: 2-column */
.tylp-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.tylp-left-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tylp-detail-card {
  padding: 14px 18px;
}

/* Document buttons */
.tylp-doc-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.tylp-doc-btn {
  background: #1A1918;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

/* Payment rows (portal style) */
.tylp-pmt-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tylp-pmt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.03);
}
.tylp-pmt-info { flex: 1; min-width: 0; }
.tylp-pmt-title { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: #4B4A48; margin: 0; }
.tylp-pmt-paid { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; color: #15803D; margin: 1px 0 0; }
.tylp-pmt-remaining { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; color: #03ACEA; margin: 1px 0 0; }
.tylp-pmt-due { font-family: 'DM Sans', sans-serif; font-size: 11px; color: #4B4A48; margin: 1px 0 0; }

/* Payment badges */
.tylp-pmt-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
}
.tylp-pmt-badge--done { background: rgba(22,163,74,0.18); color: #16A34A; }
.tylp-pmt-badge--partial { background: rgba(3,172,234,0.18); color: #0288CE; }
.tylp-pmt-badge--upcoming { background: rgba(0,0,0,0.03); color: #787776; }

/* Activity timeline */
.tylp-timeline {
  display: flex;
  flex-direction: column;
}
.tylp-timeline-item {
  display: flex;
  align-items: start;
  gap: 10px;
  position: relative;
  padding-bottom: 12px;
}
.tylp-timeline-item:last-child { padding-bottom: 0; }
.tylp-timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-top: 2px;
  box-shadow: 0 0 0 3px white;
}
.tylp-timeline-line {
  position: absolute;
  left: 12px;
  top: 26px;
  width: 1px;
  height: calc(100% - 14px);
  background: rgba(84,166,207,0.2);
  z-index: 1;
}
.tylp-timeline-item:last-child .tylp-timeline-line { display: none; }
.tylp-timeline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 3px;
}
.tylp-timeline-desc { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: #1A1918; line-height: 1.4; }
.tylp-timeline-date { font-family: 'DM Sans', sans-serif; font-size: 11px; color: #5C5B5A; }

/* Loan Progress stat grid (portal style) */
.tylp-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.tylp-stat { text-align: center; }
.tylp-stat-label { font-family: 'DM Sans', sans-serif; font-size: 10px; color: #787776; font-weight: 500; margin-bottom: 2px; }
.tylp-stat-val { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #1A1918; margin: 0; }
.tylp-stat-sub { font-family: 'DM Sans', sans-serif; font-size: 9px; color: #787776; margin-top: 2px; }

/* No mobile stacking — freeze-scale.js handles scaling instead */

/* ── Track Your Loan Progress: overlapping card fan (legacy) ── */
.tylp-fan {
  position: relative;
  width: 100%;
  max-width: 780px;
  height: 500px;
  margin: 40px auto 0;
}

.tylp-card {
  position: absolute;
  border-radius: 14px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.10),
    0 4px 14px rgba(0,0,0,0.08);
}

/* Payments — center, largest */
.tylp-card--payments {
  width: 300px;
  left: 50%;
  top: 20px;
  transform: translateX(-50%) rotate(-1deg);
  z-index: 3;
}

/* Payment Progress (donut) — left */
.tylp-card--progress {
  width: 200px;
  left: 12%;
  top: 10px;
  transform: rotate(3deg);
  z-index: 2;
}

/* Payment History (bar chart) — under Payment Progress */
.tylp-card--history {
  width: 220px;
  left: 14%;
  top: 230px;
  transform: rotate(-2deg);
  z-index: 1;
}

/* Loan Progress — scaled strip, top-right corner of Payments */
.tylp-card--loan-progress {
  width: 420px;
  left: 44%;
  top: -10px;
  transform: scale(0.76) rotate(3deg);
  transform-origin: top left;
  z-index: 4;
}

/* Loan Progress card: single-row strip, 4 columns */
.tylp-card--loan-progress .ldd-stat-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Mobile: stack cards vertically */
@media (max-width: 700px) {
  .tylp-fan {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
  }
  .tylp-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 340px;
  }
  .tylp-card--loan-progress {
    max-width: 100%;
  }
  .tylp-card--loan-progress .ldd-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Late-cascade mobile overrides: fix sections that defined base styles after earlier media queries */
@media (max-width: 900px) {
  .feature-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .feature-text {
    text-align: center;
    align-items: center;
  }
  .feature-image {
    justify-content: center;
    order: -1;
    transform: scale(0.72);
    transform-origin: top center;
    margin-bottom: -90px;
  }
  .feature-section {
    padding: 40px 20px;
    overflow: hidden;
  }
  /* Match the spacing between Payments/Notifications to other sections */
  .feature-section:not(.feature-section-stacked) {
    padding-bottom: 40px;
  }
  .notif-section {
    padding: 40px 20px 40px;
  }
}