@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* ── Brand tokens — constant across themes ── */
  --brand-dark: #2E2D2A;   /* always the deep warm brown */
  --brand-cream: #F7F2EA;  /* always the warm cream */
  --yellow:    #F6CC46;
  --yellow-dk: #C9A000;
  --yellow-lt: #FEF2C4;
  --pink:      #F8A4AE;
  --pink-dk:   #D97B87;
  --softpink:  #F5DCDF;
  --slate:     #D9D3C9;
  --slate-dk:  #B8B0A4;
  --white:     #FFFFFF;
  --black:     #000000;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-2xl: 36px;

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Semantic tokens — LIGHT THEME default ── */
  --dark:      #2E2D2A;            /* text color on light bg */
  --dark-soft: #3A3936;
  --dark-90:   rgba(46,45,42,0.92);
  --dark-60:   rgba(46,45,42,0.6);
  --dark-40:   rgba(46,45,42,0.4);
  --dark-15:   rgba(46,45,42,0.15);
  --dark-08:   rgba(46,45,42,0.08);
  --cream:     #F7F2EA;            /* light section bg */
  --cream-2:   #EFE8DD;
  --card-bg:   #FFFFFF;
  --card-border: rgba(46,45,42,0.08);
  --softpink-bg: #F5DCDF;

  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--cream); }
body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 36px;
  transition: background 0.3s var(--ease-out), backdrop-filter 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(46,45,42,0.82);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner {
  max-width: 1280px; width: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 28px; width: auto; }
.nav-links { display: flex; gap: 8px; }
.nav-links a {
  color: rgba(255,255,255,0.65);
  font-size: 13.5px; font-weight: 500;
  padding: 7px 14px; border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  letter-spacing: -0.1px;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--white);
  background: rgba(255,255,255,0.06);
}
.nav-actions { display: flex; gap: 10px; align-items: center; }
.btn-nav-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: 8px;
  transition: all 0.2s;
}
.btn-nav-ghost:hover { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-nav-primary {
  background: var(--yellow); color: var(--brand-dark);
  font-size: 13px; font-weight: 700;
  padding: 9px 18px; border-radius: 8px;
  transition: all 0.2s var(--ease-out);
  box-shadow: 0 4px 12px rgba(246,204,70,0.25);
}
.btn-nav-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(246,204,70,0.4); }

/* ════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════ */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.1px; transition: all 0.25s var(--ease-out); position: relative; overflow: hidden; white-space: nowrap; }
.btn-primary {
  background: var(--pink); color: var(--brand-dark);
  box-shadow: 0 6px 18px rgba(248,164,174,0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(248,164,174,0.5); background: #fcb5be; }
.btn-secondary { background: transparent; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.2); }
.btn-secondary:hover { border-color: rgba(255,255,255,0.5); color: var(--white); background: rgba(255,255,255,0.04); }
.btn-dark { background: var(--brand-dark); color: var(--white); box-shadow: 0 6px 18px rgba(46,45,42,0.25); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(46,45,42,0.4); background: #3f3e3a; }
.btn-outline-dark { background: transparent; color: var(--dark); border: 1.5px solid var(--dark); }
.btn-outline-dark:hover { background: var(--brand-dark); color: var(--white); }
.btn-yellow { background: var(--yellow); color: var(--brand-dark); box-shadow: 0 6px 18px rgba(246,204,70,0.3); }
.btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(246,204,70,0.45); }

.arrow { display: inline-block; transition: transform 0.25s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ════════════════════════════════════════════════
   TYPOGRAPHY
════════════════════════════════════════════════ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--dark-60); margin-bottom: 20px;
}
.eyebrow::before { content: ''; width: 22px; height: 1.5px; background: var(--yellow); }
.eyebrow-light { color: rgba(255,255,255,0.55); }
.eyebrow-light::before { background: var(--yellow); }

.display-heading {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 86px);
  font-weight: 400; line-height: 1.0; letter-spacing: -2.5px;
  color: var(--white); margin-bottom: 28px;
}
.display-heading em { font-style: italic; color: var(--yellow); }

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 400; line-height: 1.08; letter-spacing: -1.4px;
  color: var(--dark); margin-bottom: 18px;
}
.section-heading em { color: var(--pink-dk); font-style: italic; }
.section-heading.light { color: var(--white); }
.section-heading.light em { color: var(--yellow); }

.section-sub {
  font-size: 16px; color: var(--dark-60);
  line-height: 1.7; margin-bottom: 24px; max-width: 540px;
}
.section-sub.light { color: rgba(255,255,255,0.55); }

/* ════════════════════════════════════════════════
   CONTAINER
════════════════════════════════════════════════ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 36px; }
.section { padding: 120px 0; }
.section-sm { padding: 80px 0; }

/* ════════════════════════════════════════════════
   HERO (INDEX)
════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--brand-dark);
  padding: 140px 0 100px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(230,206,168,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 70% at 60% 45%, black 30%, transparent 80%);
  z-index: 0;
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  will-change: transform;
}
.hero-glow.g1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(248,164,174,0.22) 0%, transparent 70%);
  top: -120px; right: -120px;
}
.hero-glow.g2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(246,204,70,0.14) 0%, transparent 70%);
  bottom: -100px; left: 10%;
}
.hero-glow.g3 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(245,220,223,0.1) 0%, transparent 70%);
  top: 40%; left: 38%;
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto;
  padding: 0 36px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  align-items: center;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(246,204,70,0.1);
  border: 1px solid rgba(246,204,70,0.25);
  padding: 7px 14px 7px 9px;
  border-radius: 40px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 32px;
}
.hero-pill::before {
  content: ''; width: 7px; height: 7px;
  background: var(--yellow); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(246,204,70,0.8);
}
@keyframes pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(246,204,70,0.7); }
  70%  { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(246,204,70,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(246,204,70,0); }
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.4vw, 82px);
  font-weight: 400; line-height: 1.0; letter-spacing: -2px;
  color: var(--white); margin-bottom: 28px;
}
.hero h1 .word { display: inline-block; overflow: hidden; padding-bottom: 0.1em; }
.hero h1 .word-inner { display: inline-block; transform: translateY(110%); opacity: 0; animation: wordUp 0.9s var(--ease-out) forwards; }
.hero h1 .word:nth-child(1) .word-inner { animation-delay: 0.05s; }
.hero h1 .word:nth-child(2) .word-inner { animation-delay: 0.12s; }
.hero h1 .word:nth-child(3) .word-inner { animation-delay: 0.19s; }
.hero h1 .word:nth-child(4) .word-inner { animation-delay: 0.26s; }
.hero h1 .word:nth-child(5) .word-inner { animation-delay: 0.33s; }
.hero h1 .word:nth-child(6) .word-inner { animation-delay: 0.40s; }
.hero h1 .word:nth-child(7) .word-inner { animation-delay: 0.47s; }
.hero h1 em { color: var(--yellow); font-style: italic; }
@keyframes wordUp {
  to { transform: translateY(0); opacity: 1; }
}
.hero-sub {
  font-size: 17px; color: rgba(255,255,255,0.55);
  line-height: 1.7; max-width: 480px; margin-bottom: 40px;
  animation: fadeIn 0.8s var(--ease-out) 0.6s both;
}
.hero-actions {
  display: flex; gap: 14px; margin-bottom: 56px;
  animation: fadeIn 0.8s var(--ease-out) 0.75s both;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 36px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.08);
  animation: fadeIn 0.8s var(--ease-out) 0.9s both;
}
.hero-stat strong {
  display: block;
  font-family: var(--font-display); font-size: 38px;
  color: var(--yellow); letter-spacing: -1.5px; line-height: 1;
  margin-bottom: 6px;
}
.hero-stat span { font-size: 11px; color: rgba(255,255,255,0.65); line-height: 1.5; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════
   HERO SHOWPIECE — animated layered stack
════════════════════════════════════════════════ */
.showpiece {
  position: relative;
  height: 560px;
  perspective: 1200px;
  animation: fadeIn 1s var(--ease-out) 0.3s both;
}
.showpiece-ring {
  position: absolute; top: 50%; left: 50%;
  width: 520px; height: 520px;
  margin-top: -260px; margin-left: -260px;
  border-radius: 50%;
  border: 1px dashed rgba(246,204,70,0.18);
  animation: spin 40s linear infinite;
}
.showpiece-ring.r2 {
  width: 380px; height: 380px;
  margin-top: -190px; margin-left: -190px;
  border-color: rgba(248,164,174,0.18);
  animation: spin 26s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

.showpiece-phone {
  position: absolute; top: 50%; left: 50%;
  width: 220px;
  margin-top: -230px; margin-left: -110px;
  background: linear-gradient(160deg, #1c1b18 0%, #2a2926 100%);
  border: 5px solid #383632;
  border-radius: 40px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 30px 60px rgba(46,45,42,0.18);
  overflow: hidden;
  z-index: 2;
}
.showpiece-phone::before {
  content: ''; position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 5px; background: #111;
  border-radius: 3px; z-index: 3;
}
.showpiece-phone-screen {
  padding: 38px 18px 20px;
  background: linear-gradient(180deg, #22211e 0%, #1c1b18 100%);
  min-height: 440px;
  position: relative;
}
.sp-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.sp-hello { font-size: 11px; color: rgba(255,255,255,0.5); }
.sp-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--yellow)); }
.sp-balance-card {
  background: linear-gradient(135deg, rgba(246,204,70,0.18), rgba(248,164,174,0.12));
  border: 1px solid rgba(246,204,70,0.25);
  border-radius: 16px;
  padding: 16px 14px;
  margin-bottom: 14px;
}
.sp-balance-label { font-size: 9.5px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 6px; }
.sp-balance-num { font-family: var(--font-display); font-size: 34px; color: var(--yellow); letter-spacing: -1.5px; line-height: 1; }
.sp-balance-trend { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 6px; }
.sp-balance-trend span { color: #7fe19a; font-weight: 600; }
.sp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  margin-bottom: 6px;
}
.sp-row-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.sp-row-icon.yellow { background: rgba(246,204,70,0.18); color: var(--yellow); }
.sp-row-icon.pink { background: rgba(248,164,174,0.18); color: var(--pink); }
.sp-row-icon.soft { background: rgba(245,220,223,0.1); color: #F5DCDF; }
.sp-row-text { flex: 1; min-width: 0; }
.sp-row-title { font-size: 10.5px; color: rgba(255,255,255,0.85); font-weight: 500; }
.sp-row-sub { font-size: 9px; color: rgba(255,255,255,0.58); margin-top: 1px; }
.sp-row-amt { font-size: 10.5px; color: var(--yellow); font-weight: 700; }

/* Floating badges around the phone */
.showpiece-badge {
  position: absolute;
  background: rgba(58,57,54,0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 12px 16px;
  border-radius: 14px;
  z-index: 3;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  animation: floatY 5s ease-in-out infinite;
  white-space: nowrap;
}
.showpiece-badge .bl-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.62); margin-bottom: 3px; }
.showpiece-badge .bl-value { font-family: var(--font-display); font-size: 22px; color: var(--yellow); letter-spacing: -0.8px; line-height: 1; }
.showpiece-badge .bl-sub { font-size: 9px; color: rgba(255,255,255,0.62); margin-top: 2px; }
.showpiece-badge.b-tl { top: 60px; left: -20px; animation-delay: 0s; }
.showpiece-badge.b-bl { bottom: 80px; left: -50px; animation-delay: 1.2s; }
.showpiece-badge.b-tr { top: 110px; right: -40px; animation-delay: 0.6s; background: var(--yellow); color: var(--brand-dark); border-color: rgba(0,0,0,0.1); }
.showpiece-badge.b-tr .bl-label { color: rgba(46,45,42,0.6); }
.showpiece-badge.b-tr .bl-value { color: var(--dark); font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.showpiece-badge.b-tr .bl-sub { color: rgba(46,45,42,0.5); }
.showpiece-badge.b-br { bottom: 120px; right: -30px; animation-delay: 1.8s; background: var(--pink); color: var(--brand-dark); border-color: transparent; }
.showpiece-badge.b-br .bl-label { color: rgba(46,45,42,0.55); }
.showpiece-badge.b-br .bl-value { color: var(--dark); font-family: var(--font-body); font-size: 14px; font-weight: 700; }
.showpiece-badge.b-br .bl-sub { color: rgba(46,45,42,0.5); }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

/* ════════════════════════════════════════════════
   MARQUEE / TICKER
════════════════════════════════════════════════ */
.marquee {
  background: var(--brand-dark);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 22px 0;
  overflow: hidden;
  position: relative;
}
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--dark), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--dark), transparent); }
.marquee-track {
  display: flex; white-space: nowrap;
  animation: marquee 50s linear infinite;
  gap: 56px;
  align-items: center;
}
.marquee-item {
  font-family: var(--font-display); font-size: 26px;
  color: rgba(255,255,255,0.35);
  letter-spacing: -1px;
  display: inline-flex; align-items: center; gap: 56px;
}
.marquee-item::after {
  content: ''; width: 6px; height: 6px;
  background: var(--yellow); border-radius: 50%;
  opacity: 0.6;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════
   PLATFORM / BENTO
════════════════════════════════════════════════ */
.platform { background: var(--cream); padding: 140px 0; }
.platform-header {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 64px;
}
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 16px;
}
.bcard {
  background: var(--white);
  border: 1px solid rgba(46,45,42,0.08);
  border-radius: var(--r-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s;
}
.bcard:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(46,45,42,0.08); border-color: rgba(46,45,42,0.12); }
.bcard.span-7 { grid-column: span 7; }
.bcard.span-5 { grid-column: span 5; }
.bcard.span-4 { grid-column: span 4; }
.bcard.span-8 { grid-column: span 8; }
.bcard.span-6 { grid-column: span 6; }
.bcard.span-12 { grid-column: span 12; }
.bcard.tall { grid-row: span 2; }

.bcard.dark { background: var(--brand-dark); border-color: rgba(255,255,255,0.06); color: var(--white); }
.bcard.dark h3, .bcard.dark .bstat { color: var(--white); }
.bcard.dark::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(230,206,168,0.08) 1px, transparent 1px);
  background-size: 22px 22px; pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 90% at 80% 30%, black 40%, transparent 100%);
}
.bcard.dark:hover { border-color: rgba(246,204,70,0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }

.bcard.yellow { background: var(--yellow); border-color: transparent; }
.bcard.yellow:hover { box-shadow: 0 20px 50px rgba(246,204,70,0.35); }

.bcard.pink { background: var(--softpink); border-color: transparent; }
.bcard.pink:hover { box-shadow: 0 20px 50px rgba(248,164,174,0.3); }

.btag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dark-40); margin-bottom: 16px;
  position: relative; z-index: 1;
}
.bcard.dark .btag { color: rgba(255,255,255,0.62); }
.bcard h3 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.5px;
  color: var(--dark); line-height: 1.25; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.bcard p {
  font-size: 14px; color: var(--dark-60);
  line-height: 1.65; position: relative; z-index: 1;
}
.bcard.dark p { color: rgba(255,255,255,0.55); }

.bstat {
  font-family: var(--font-display); font-size: 68px;
  letter-spacing: -3px; line-height: 1;
  color: var(--dark); margin-bottom: 10px;
  position: relative; z-index: 1;
}
.bcard.dark .bstat { color: var(--yellow); }

/* saving rows inside bento */
.savings-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; position: relative; z-index: 1; }
.saving-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  transition: background 0.25s, transform 0.25s;
}
.saving-row:hover { background: rgba(255,255,255,0.07); transform: translateX(4px); }
.saving-label { font-size: 13px; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 10px; }
.saving-icon { width: 26px; height: 26px; border-radius: 7px; background: rgba(246,204,70,0.18); display: flex; align-items: center; justify-content: center; color: var(--yellow); font-size: 13px; font-weight: 700; }
.saving-badge { font-size: 11px; font-weight: 700; color: var(--yellow); background: rgba(246,204,70,0.14); padding: 4px 9px; border-radius: 5px; white-space: nowrap; }

/* bento steps */
.steps-list { display: flex; flex-direction: column; gap: 0; margin-top: 18px; position: relative; z-index: 1; }
.step-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(46,45,42,0.08); }
.step-row:last-child { border-bottom: none; }
.step-num-sm { width: 30px; height: 30px; background: var(--brand-dark); color: var(--yellow); font-size: 11px; font-weight: 700; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 3px; }
.step-text span { font-size: 13px; color: var(--dark-60); line-height: 1.55; }

/* evp bars */
.evp-bars { display: flex; align-items: flex-end; gap: 6px; height: 82px; margin-top: 24px; }
.evp-bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--brand-dark); transform-origin: bottom; transform: scaleY(0); transition: transform 0.9s var(--ease-out); }
.bcard.visible .evp-bar { transform: scaleY(1); }
.bcard.visible .evp-bar:nth-child(1) { transition-delay: 0.1s; }
.bcard.visible .evp-bar:nth-child(2) { transition-delay: 0.2s; }
.bcard.visible .evp-bar:nth-child(3) { transition-delay: 0.3s; }
.bcard.visible .evp-bar:nth-child(4) { transition-delay: 0.4s; }

/* progress bar */
.pbar-wrap { display: flex; gap: 5px; margin-top: 22px; position: relative; z-index: 1; }
.pbar { height: 6px; border-radius: 3px; background: var(--brand-dark); transform-origin: left; transform: scaleX(0); transition: transform 0.8s var(--ease-out) 0.2s; }
.bcard.visible .pbar { transform: scaleX(1); }
.pbar.muted { background: rgba(46,45,42,0.2); }

/* ════════════════════════════════════════════════
   STATS BAND
════════════════════════════════════════════════ */
.stats-band { background: var(--yellow); padding: 120px 0; position: relative; overflow: hidden; }
.stats-band::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(46,45,42,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 20% 50%, black 20%, transparent 80%);
}
.stats-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px;
  align-items: center;
}
.stats-band h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 400; line-height: 1.06; letter-spacing: -1.6px;
  color: var(--brand-dark);
}
.stats-band h2 em { font-style: italic; }
.stats-band-sub { font-size: 16px; color: rgba(46,45,42,0.6); margin-top: 20px; line-height: 1.65; max-width: 420px; }
.stats-list { display: flex; flex-direction: column; gap: 0; }
.stat-row {
  display: flex; align-items: baseline; gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(46,45,42,0.15);
}
.stat-row:first-child { padding-top: 0; }
.stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.stat-num {
  font-family: var(--font-display); font-size: 54px;
  color: var(--brand-dark); letter-spacing: -2.5px;
  line-height: 1; flex-shrink: 0;
  min-width: 140px;
}
.stat-desc { font-size: 15px; color: rgba(46,45,42,0.6); line-height: 1.55; }

/* ════════════════════════════════════════════════
   EMPLOYEE SECTION
════════════════════════════════════════════════ */
.emp { background: var(--softpink); padding: 120px 0; }
.emp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.emp-photo {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 70px rgba(46,45,42,0.18);
}
.emp-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.2s var(--ease-out); }
.emp-photo:hover img { transform: scale(1.08); }
.emp-photo-tag {
  position: absolute; bottom: 28px; left: 28px;
  background: rgba(46,45,42,0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 14px 18px;
}
.emp-photo-tag-label { font-size: 10px; color: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
.emp-photo-tag-value { font-family: var(--font-display); font-size: 28px; color: var(--yellow); letter-spacing: -1px; line-height: 1; }
.emp-steps { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
.emp-step { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(46,45,42,0.12); }
.emp-step:last-child { border-bottom: none; }
.emp-step-num { width: 36px; height: 36px; background: var(--brand-dark); color: var(--yellow); font-size: 13px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.emp-step h4 { font-size: 15px; font-weight: 600; color: var(--dark); margin-bottom: 5px; letter-spacing: -0.2px; }
.emp-step p { font-size: 13.5px; color: var(--dark-60); line-height: 1.65; }

/* ════════════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════════════ */
.testimonials { background: var(--cream-2); padding: 120px 0; }
.testimonials-header { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; margin-bottom: 56px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tcard {
  background: var(--white);
  border: 1px solid rgba(46,45,42,0.08);
  border-radius: var(--r-xl); padding: 36px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.3s;
}
.tcard:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(46,45,42,0.1); border-color: rgba(248,164,174,0.5); }
.stars { color: var(--yellow); font-size: 15px; letter-spacing: 3px; margin-bottom: 18px; }
.tcard blockquote { font-size: 17px; color: var(--dark); line-height: 1.55; margin-bottom: 26px; font-weight: 400; font-family: var(--font-display); }
.tauthor { display: flex; align-items: center; gap: 14px; }
.tauthor img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tauthor-name { font-size: 14px; font-weight: 600; color: var(--dark); }
.tauthor-role { font-size: 12.5px; color: var(--dark-40); }

/* ════════════════════════════════════════════════
   CTA BAND
════════════════════════════════════════════════ */
.cta-band {
  background: var(--brand-dark);
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(230,206,168,0.1) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 85%);
}
.cta-glow {
  position: absolute; top: 50%; left: 50%;
  width: 700px; height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(246,204,70,0.12) 0%, transparent 70%);
  filter: blur(60px);
}
.cta-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 400; line-height: 1.08; letter-spacing: -1.3px;
  color: var(--white); max-width: 640px;
}
.cta-band h2 em { color: var(--yellow); font-style: italic; }
.cta-actions { display: flex; gap: 14px; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
footer { background: #1A1917; color: rgba(255,255,255,0.5); }
.footer-inner {
  max-width: 1280px; margin: 0 auto; padding: 80px 36px 40px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.7; margin-top: 16px; max-width: 320px; }
.footer-col h4 { font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 20px; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 12px; transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  max-width: 1280px; margin: 0 auto; padding: 22px 36px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: rgba(255,255,255,0.55);
}

/* ════════════════════════════════════════════════
   PAGE HEROES (non-index)
════════════════════════════════════════════════ */
.page-hero {
  background: var(--brand-dark);
  padding: 160px 0 110px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(230,206,168,0.12) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 80% at 40% 50%, black 30%, transparent 80%);
}
.page-hero-glow {
  position: absolute; border-radius: 50%; filter: blur(100px);
  will-change: transform;
}
.page-hero-glow.pg1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(248,164,174,0.2), transparent 70%); top: -100px; right: -100px; }
.page-hero-glow.pg2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(246,204,70,0.16), transparent 70%); bottom: -80px; left: 20%; }
.page-hero-inner { position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 400; line-height: 1.04; letter-spacing: -1.6px;
  color: var(--white); margin-bottom: 28px;
  max-width: 900px;
}
.page-hero h1 .word { display: inline-block; overflow: hidden; padding-bottom: 0.1em; }
.page-hero h1 em { color: var(--yellow); font-style: italic; }
.page-hero p { font-size: 18px; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 620px; margin-bottom: 40px; }
.page-hero-stats { display: flex; gap: 0; margin-top: 56px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.08); }
.page-hero-stat { padding-right: 48px; margin-right: 48px; border-right: 1px solid rgba(255,255,255,0.08); }
.page-hero-stat:last-child { border-right: none; }
.page-hero-stat strong { display: block; font-family: var(--font-display); font-size: 44px; color: var(--yellow); letter-spacing: -1.5px; line-height: 1; margin-bottom: 6px; }
.page-hero-stat span { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.5; }

/* ════════════════════════════════════════════════
   TIMELINE (how-it-works)
════════════════════════════════════════════════ */
.timeline { position: relative; padding-left: 0; }
.timeline-item {
  display: grid; grid-template-columns: 140px 1fr; gap: 56px;
  padding: 48px 0;
  border-bottom: 1px solid rgba(46,45,42,0.1);
  align-items: start;
  position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-num {
  font-family: var(--font-display); font-size: 84px;
  color: var(--slate-dk); letter-spacing: -3px; line-height: 1;
  transition: color 0.4s, transform 0.4s;
}
.timeline-item.visible .timeline-num { color: var(--dark); }
.timeline-content h3 { font-size: 28px; font-weight: 500; color: var(--dark); margin-bottom: 14px; letter-spacing: -0.8px; font-family: var(--font-display); }
.timeline-content p { font-size: 15px; color: var(--dark-60); line-height: 1.7; margin-bottom: 18px; max-width: 600px; }
.timeline-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--dark-60); background: var(--white); border: 1px solid var(--slate); padding: 7px 14px; border-radius: 24px; }
.timeline-tag::before { content: ''; width: 6px; height: 6px; background: var(--yellow); border-radius: 50%; }

/* ════════════════════════════════════════════════
   DEMO SECTION
════════════════════════════════════════════════ */
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.demo-visual {
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 5/4;
  box-shadow: 0 30px 70px rgba(46,45,42,0.2);
  position: relative;
}
.demo-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════════════════════════════════════
   FAQ
════════════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(46,45,42,0.1);
  cursor: pointer;
}
.faq-item h4 {
  font-size: 18px; font-weight: 500; color: var(--dark);
  letter-spacing: -0.3px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
}
.faq-item h4::after {
  content: '+'; font-family: var(--font-body);
  font-size: 24px; font-weight: 300;
  color: var(--dark-40);
  transition: transform 0.3s var(--ease-out);
  line-height: 1;
}
.faq-item.open h4::after { transform: rotate(45deg); }
.faq-item p {
  font-size: 15px; color: var(--dark-60);
  line-height: 1.72; max-width: 720px;
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s var(--ease-out), margin-top 0.4s;
  margin-top: 0;
}
.faq-item.open p { max-height: 400px; margin-top: 10px; }

/* ════════════════════════════════════════════════
   BENEFITS GRID
════════════════════════════════════════════════ */
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bcard-benefit {
  background: var(--white);
  border: 1px solid rgba(46,45,42,0.08);
  border-radius: var(--r-xl);
  padding: 32px;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.bcard-benefit:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(46,45,42,0.1); border-color: rgba(248,164,174,0.4); }
.bcard-benefit.featured { grid-column: span 2; background: var(--brand-dark); color: var(--white); border-color: transparent; }
.bcard-benefit.featured::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(230,206,168,0.1) 1px, transparent 1px);
  background-size: 22px 22px; pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 90% at 80% 30%, black 40%, transparent 100%);
}
.bcard-benefit.featured h3 { color: var(--white); }
.bcard-benefit.featured p { color: rgba(255,255,255,0.55); }
.benefit-cat { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dark-40); margin-bottom: 16px; position: relative; z-index: 1; }
.bcard-benefit.featured .benefit-cat { color: rgba(255,255,255,0.62); }
.benefit-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.benefit-icon.yellow { background: rgba(246,204,70,0.18); color: var(--yellow-dk); }
.benefit-icon.pink { background: var(--softpink); color: var(--pink-dk); }
.benefit-icon.slate { background: var(--slate); color: var(--dark); }
.benefit-icon.dark-yellow { background: rgba(246,204,70,0.2); color: var(--yellow); }
.bcard-benefit h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--dark); margin-bottom: 10px; letter-spacing: -0.5px; position: relative; z-index: 1; }
.bcard-benefit p { font-size: 14px; color: var(--dark-60); line-height: 1.7; position: relative; z-index: 1; }
.saving-badge-lg { display: inline-block; background: rgba(246,204,70,0.18); color: var(--yellow-dk); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; margin-top: 16px; position: relative; z-index: 1; }
.bcard-benefit.featured .saving-badge-lg { background: rgba(246,204,70,0.18); color: var(--yellow); }

/* ════════════════════════════════════════════════
   PRICING
════════════════════════════════════════════════ */
.pricing-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.pricing-points { display: flex; flex-direction: column; gap: 20px; margin-top: 44px; }
.pricing-point { display: flex; align-items: flex-start; gap: 16px; }
.pricing-tick {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  background: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-dark); font-size: 14px; font-weight: 700;
}
.pricing-point-title { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 5px; }
.pricing-point-desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }

.plan-card {
  background: linear-gradient(180deg, #3A3936 0%, #2A2926 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-2xl);
  padding: 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.3);
}
.plan-card::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(230,206,168,0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.plan-card-inner { position: relative; z-index: 1; }
.plan-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(248,164,174,0.18); color: var(--pink);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 24px; margin-bottom: 28px;
}
.plan-tag::before { content: ''; width: 7px; height: 7px; background: var(--pink); border-radius: 50%; }
.plan-price-big { font-family: var(--font-display); font-size: 84px; color: var(--yellow); letter-spacing: -4px; line-height: 1; display: inline-block; }
.plan-price-per { font-size: 18px; color: rgba(255,255,255,0.5); font-weight: 400; margin-left: 4px; }
.plan-price-note { font-size: 13.5px; color: rgba(255,255,255,0.62); margin: 8px 0 32px; line-height: 1.55; }
.plan-divider { height: 1px; background: rgba(255,255,255,0.08); margin-bottom: 28px; }
.plan-includes-heading { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 20px; }
.plan-includes { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.plan-item {
  display: flex; align-items: center; gap: 14px;
  font-size: 14.5px; color: rgba(255,255,255,0.8);
}
.plan-item::before {
  content: '✓'; width: 22px; height: 22px;
  background: var(--yellow); color: var(--brand-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.plan-btn { display: block; width: 100%; text-align: center; padding: 15px; border-radius: 12px; font-size: 15px; font-weight: 700; margin-bottom: 10px; transition: all 0.25s var(--ease-out); }
.plan-btn.primary { background: var(--pink); color: var(--brand-dark); box-shadow: 0 8px 22px rgba(248,164,174,0.3); }
.plan-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(248,164,174,0.45); background: #fcb5be; }
.plan-btn.secondary { background: transparent; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.12); font-size: 14px; }
.plan-btn.secondary:hover { border-color: rgba(255,255,255,0.3); color: var(--white); }

.guarantee-strip { background: var(--softpink); padding: 36px 36px; position: relative; }
.guarantee-strip-inner { display: flex; gap: 48px; flex-wrap: wrap; justify-content: center; max-width: 1280px; margin: 0 auto; }
.guarantee-item { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--brand-dark); }
.guarantee-tick {
  width: 24px; height: 24px; border-radius: 50%; background: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--yellow); font-size: 12px; font-weight: 700; flex-shrink: 0;
}

.pricing-table-wrap { max-width: 880px; margin: 0 auto; }
.pricing-table { width: 100%; border-collapse: collapse; border-radius: 16px; overflow: hidden; border: 1px solid rgba(46,45,42,0.1); background: var(--white); }
.pricing-table thead tr { background: var(--yellow); }
.pricing-table thead th { padding: 18px 26px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-dark); }
.pricing-table tbody tr { border-bottom: 1px solid rgba(46,45,42,0.08); }
.pricing-table tbody tr:last-child { border-bottom: none; background: rgba(248,164,174,0.05); }
.pricing-table tbody td { padding: 22px 26px; font-size: 15px; color: var(--dark); }
.pricing-table tbody td:last-child { font-weight: 600; }

/* ════════════════════════════════════════════════
   FOR EMPLOYEES — perks & join
════════════════════════════════════════════════ */
.perk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.perk-card { background: var(--white); border: 1px solid rgba(46,45,42,0.08); border-radius: var(--r-xl); padding: 30px; transition: all 0.4s var(--ease-out); }
.perk-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(46,45,42,0.08); border-color: rgba(248,164,174,0.5); }
.perk-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--dark); letter-spacing: -0.5px; margin-bottom: 8px; }
.perk-card p { font-size: 14px; color: var(--dark-60); line-height: 1.7; }
.perk-pill { display: inline-block; background: var(--yellow-lt); color: var(--yellow-dk); font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 24px; margin-top: 16px; }

.join-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.join-step { text-align: center; position: relative; }
.join-step::after {
  content: ''; position: absolute;
  top: 28px; left: 68%; right: -32%;
  height: 1.5px; background: repeating-linear-gradient(to right, rgba(46,45,42,0.25) 0, rgba(46,45,42,0.25) 4px, transparent 4px, transparent 8px);
}
.join-step:last-child::after { display: none; }
.join-step-num {
  width: 56px; height: 56px; background: var(--brand-dark); color: var(--yellow);
  font-size: 20px; font-weight: 700; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; position: relative; z-index: 1;
}
.join-step h4 { font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 8px; letter-spacing: -0.2px; }
.join-step p { font-size: 13.5px; color: var(--dark-60); line-height: 1.6; }

/* App store buttons */
.app-store-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.app-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: #000; color: #fff;
  padding: 12px 20px; border-radius: 12px;
  border: 1px solid #333;
  transition: all 0.2s;
  min-width: 160px;
}
.app-btn:hover { background: #111; border-color: #555; transform: translateY(-1px); }
.app-btn-text-sm { font-size: 10px; opacity: 0.8; }
.app-btn-text-lg { font-size: 16px; font-weight: 600; letter-spacing: -0.3px; }

/* ════════════════════════════════════════════════
   BRAND CAROUSEL (benefits page)
════════════════════════════════════════════════ */
.brand-carousel-section { background: var(--white); padding: 100px 0; overflow: hidden; }
.carousel-header { padding: 0 36px; margin-bottom: 56px; max-width: 1280px; margin-left: auto; margin-right: auto; }
.carousel-wrap {
  overflow: hidden;
  width: 100%;
  margin-bottom: 14px;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.carousel-track { display: flex; gap: 14px; width: max-content; }
.track-1 { animation: scroll-left 38s linear infinite; }
.track-2 { animation: scroll-right 34s linear infinite; }
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.carousel-wrap:hover .carousel-track { animation-play-state: paused; }
.carousel-logo-card {
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid rgba(46,45,42,0.1);
  border-radius: 14px;
  width: 160px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 20px;
  transition: all 0.3s;
}
.carousel-logo-card:hover { border-color: var(--pink); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(248,164,174,0.18); }
.carousel-logo-card img {
  max-width: 110px; max-height: 44px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: all 0.3s;
}
.carousel-logo-card:hover img { filter: grayscale(0%); opacity: 1; }
.carousel-text-chip { font-size: 13px; font-weight: 600; color: #888; letter-spacing: -0.2px; transition: color 0.3s; }
.carousel-logo-card:hover .carousel-text-chip { color: var(--dark); }

/* ════════════════════════════════════════════════
   CALC SECTION (benefits page)
════════════════════════════════════════════════ */
.calc-section { background: var(--brand-dark); padding: 120px 0; position: relative; overflow: hidden; }
.calc-section::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(230,206,168,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black 30%, transparent 90%);
}
.calc-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.calc-left h2 { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 50px); font-weight: 400; line-height: 1.08; letter-spacing: -1.4px; color: var(--white); margin-bottom: 18px; }
.calc-left h2 em { color: var(--yellow); font-style: italic; }
.calc-left p { font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 40px; }
.calc-saving-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 32px; }
.calc-saving-tile { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px 14px; }
.calc-saving-tile-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.65); margin-bottom: 6px; }
.calc-saving-tile-value { font-family: var(--font-display); font-size: 28px; color: var(--yellow); letter-spacing: -1px; line-height: 1; }
.calc-saving-tile-desc { font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.calc-slider-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.calc-slider-label span { font-size: 13.5px; color: rgba(255,255,255,0.5); }
.calc-team-count { font-family: var(--font-display); font-size: 32px; color: var(--yellow); letter-spacing: -1px; }
.calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(255,255,255,0.12); border-radius: 3px; outline: none; margin-bottom: 12px; cursor: pointer; }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); cursor: pointer; box-shadow: 0 4px 12px rgba(246,204,70,0.4); transition: transform 0.2s; }
.calc-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); cursor: pointer; border: none; box-shadow: 0 4px 12px rgba(246,204,70,0.4); }
.calc-range-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(255,255,255,0.55); margin-bottom: 40px; }
.calc-result-card { background: var(--white); border-radius: var(--r-2xl); padding: 48px 44px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.3); }
.calc-result-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--yellow), var(--pink)); }
.calc-result-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark-40); margin-bottom: 14px; }
.calc-result-amount { font-family: var(--font-display); font-size: 86px; color: var(--dark); letter-spacing: -4px; line-height: 1; margin-bottom: 8px; transition: transform 0.25s var(--ease-out); }
.calc-result-period { font-size: 15px; color: var(--dark-60); margin-bottom: 32px; }
.calc-breakdown { border-top: 1px solid rgba(46,45,42,0.08); margin-bottom: 28px; }
.calc-breakdown-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(46,45,42,0.08); font-size: 14px; }
.calc-breakdown-row:last-child { border-bottom: none; }
.calc-breakdown-label { color: var(--dark-60); }
.calc-breakdown-value { font-weight: 600; color: var(--dark); }
.calc-breakdown-value.highlight { color: var(--pink-dk); }
.calc-result-note { font-size: 12.5px; color: var(--dark-40); line-height: 1.5; }

/* ════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Scroll-linked parallax wrappers (transform applied via JS) */
.parallax { will-change: transform; }

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-inner, .stats-inner, .emp-inner, .calc-inner, .demo-grid, .testimonials-header, .platform-header, .pricing-hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bcard.span-7, .bcard.span-8, .bcard.span-6, .bcard.span-5, .bcard.span-4 { grid-column: span 6; }
  .showpiece { height: 500px; max-width: 560px; margin: 0 auto; }
  .benefits-grid, .perk-grid { grid-template-columns: repeat(2, 1fr); }
  .bcard-benefit.featured { grid-column: span 2; }
  .join-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .join-step::after { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nav { padding: 12px 20px; }
  .nav-links { display: none; }
  .container { padding: 0 20px; }
  .section { padding: 80px 0; }
  .hero { padding: 120px 0 80px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .showpiece { height: 440px; transform: scale(0.85); }
  .benefits-grid, .perk-grid { grid-template-columns: 1fr; }
  .bcard-benefit.featured { grid-column: span 1; }
  .cta-inner { flex-direction: column; text-align: center; align-items: center; }
  .cta-actions { justify-content: center; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .timeline-item { grid-template-columns: 1fr; gap: 18px; }
  .timeline-num { font-size: 56px; }
}

/* ════════════════════════════════════════════════
   THEME — brand surface text overrides
   Yellow/pink/softpink surfaces are brand-constant,
   so their text must always be the brand-dark color.
════════════════════════════════════════════════ */
.bcard.yellow, .bcard.yellow h3, .bcard.yellow p, .bcard.yellow .btag,
.bcard.pink, .bcard.pink h3, .bcard.pink p, .bcard.pink .btag,
.bcard.softpink, .bcard.softpink h3, .bcard.softpink p, .bcard.softpink .btag,
.bcard.yellow .bstat, .bcard.pink .bstat, .bcard.softpink .bstat,
.stats-band h2, .stats-band h2 em, .stats-band-sub, .stat-num, .stat-desc,
.guarantee-strip, .guarantee-strip .guarantee-item,
.saving-badge-lg,
.perk-pill, .saving-pill {
  color: var(--brand-dark);
}
.bcard.yellow p, .bcard.pink p, .bcard.softpink p { color: rgba(46,45,42,0.65); }
.bcard.yellow .btag, .bcard.pink .btag, .bcard.softpink .btag { color: rgba(46,45,42,0.55); }
.stats-band-sub, .stat-desc { color: rgba(46,45,42,0.6); }

/* ══ body + surfaces flip per theme ══ */
html { background: var(--cream); transition: background-color 0.4s var(--ease-out); }
body { background: var(--cream); transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out); }
/* Dark theme: the "emp" softpink section becomes a deeper plum */
/* ════════════════════════════════════════════════
   GRAIN OVERLAY — subtle film-grain texture on all bgs
════════════════════════════════════════════════ */
.grain {
  position: fixed; inset: 0; z-index: 998; pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* ════════════════════════════════════════════════
   MORPHING BLOB GRADIENTS — soft moving color clouds
════════════════════════════════════════════════ */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: blobMorph 22s var(--ease-in-out) infinite;
  will-change: transform, border-radius;
}
.blob.b-yellow { width: 600px; height: 600px; background: radial-gradient(circle, rgba(246,204,70,0.5), transparent 70%); top: -120px; right: -120px; animation-duration: 24s; }
.blob.b-pink   { width: 500px; height: 500px; background: radial-gradient(circle, rgba(248,164,174,0.45), transparent 70%); bottom: -140px; left: -80px; animation-duration: 28s; animation-delay: -6s; }
.blob.b-peach  { width: 440px; height: 440px; background: radial-gradient(circle, rgba(246,204,70,0.25), transparent 70%); top: 40%; left: 42%; animation-duration: 32s; animation-delay: -12s; }
.blob.b-soft   { width: 380px; height: 380px; background: radial-gradient(circle, rgba(245,220,223,0.35), transparent 70%); bottom: 22%; right: 18%; animation-duration: 26s; animation-delay: -4s; }
@keyframes blobMorph {
  0%, 100% { transform: translate3d(0,0,0) scale(1); border-radius: 50% 48% 56% 42%; }
  25%      { transform: translate3d(40px,-30px,0) scale(1.08); border-radius: 58% 42% 48% 54%; }
  50%      { transform: translate3d(-30px,40px,0) scale(0.94); border-radius: 44% 56% 42% 58%; }
  75%      { transform: translate3d(30px,20px,0) scale(1.04); border-radius: 52% 46% 58% 44%; }
}

/* ════════════════════════════════════════════════
   STICKER-STYLE CARDS
════════════════════════════════════════════════ */
.sticker { transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.sticker:nth-child(3n)   { transform: rotate(-1.2deg); }
.sticker:nth-child(3n+1) { transform: rotate(0.8deg); }
.sticker:nth-child(3n+2) { transform: rotate(-0.4deg); }
.sticker:hover { transform: rotate(0deg) translateY(-6px) scale(1.015); box-shadow: 0 24px 60px rgba(46,45,42,0.14); z-index: 2; }

/* ════════════════════════════════════════════════
   CUSTOM CURSOR (button-aware)
════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .cursor-on, .cursor-on * { cursor: none !important; }
  .cursor-dot {
    position: fixed; top: 0; left: 0;
    width: 8px; height: 8px;
    background: var(--brand-dark); border-radius: 50%;
    pointer-events: none; z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.2s var(--ease-out), height 0.2s, background 0.2s, opacity 0.2s;
    mix-blend-mode: difference;
  }
  .cursor-ring {
    position: fixed; top: 0; left: 0;
    width: 36px; height: 36px;
    border: 1.5px solid var(--brand-dark);
    border-radius: 50%; pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.28s var(--ease-out), height 0.28s, opacity 0.28s, background 0.2s, border-color 0.2s;
    mix-blend-mode: difference;
  }
  .cursor-hover .cursor-dot { width: 0; height: 0; opacity: 0; }
  .cursor-hover .cursor-ring { width: 60px; height: 60px; background: var(--yellow); border-color: var(--yellow); mix-blend-mode: normal; opacity: 0.9; }
  .cursor-drag .cursor-ring { width: 72px; height: 72px; background: var(--pink); border-color: var(--pink); mix-blend-mode: normal; opacity: 0.9; }
  .cursor-drag .cursor-label { opacity: 1; }
  .cursor-label {
    position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--brand-dark); pointer-events: none; z-index: 10001;
    opacity: 0; transition: opacity 0.25s;
  }
}

/* ════════════════════════════════════════════════
   SECTION PROGRESS DOTS (side rail)
════════════════════════════════════════════════ */
.progress-rail {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 14px;
  padding: 14px 10px;
  background: rgba(247,242,234,0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 40px;
  border: 1px solid rgba(46,45,42,0.06);
}
.progress-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dark-15);
  cursor: pointer; transition: all 0.3s var(--ease-out);
  position: relative;
}
.progress-dot:hover { background: var(--dark-40); transform: scale(1.2); }
.progress-dot.active { background: var(--yellow); transform: scale(1.4); box-shadow: 0 0 0 3px rgba(246,204,70,0.25); }
.progress-dot::after {
  content: attr(data-label);
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--dark);
  background: var(--card-bg);
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--card-border);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.25s;
}
.progress-dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(-4px); }
@media (max-width: 900px) { .progress-rail { display: none; } }

/* ════════════════════════════════════════════════
   BOTTOM STICKY DEMO BAR
════════════════════════════════════════════════ */
.demo-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%);
  z-index: 95;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 10px 10px 24px;
  background: rgba(46,45,42,0.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 80px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.35);
  transition: transform 0.5s var(--ease-out);
  color: var(--white);
  max-width: calc(100vw - 40px);
}
.demo-bar.visible { transform: translateX(-50%) translateY(0); }
.demo-bar-text { font-size: 14px; font-weight: 500; }
.demo-bar-text strong { color: var(--yellow); font-weight: 700; }
.demo-bar-btn {
  padding: 10px 20px; border-radius: 60px;
  background: var(--pink); color: var(--brand-dark);
  font-size: 13px; font-weight: 700;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}
.demo-bar-btn:hover { background: #fcb5be; transform: translateY(-1px); }
.demo-bar-close {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6); font-size: 18px; line-height: 1;
  transition: color 0.2s, background 0.2s;
}
.demo-bar-close:hover { color: var(--white); background: rgba(255,255,255,0.08); }
@media (max-width: 600px) {
  .demo-bar { padding: 8px 8px 8px 16px; gap: 12px; }
  .demo-bar-text { font-size: 12px; }
  .demo-bar-btn { padding: 8px 14px; font-size: 12px; }
}

/* ════════════════════════════════════════════════
   THEME & SOUND TOGGLES IN NAV
════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   COMPARISON SLIDER
════════════════════════════════════════════════ */
.comparison {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 16/9;
  user-select: none;
  box-shadow: 0 30px 70px rgba(46,45,42,0.2);
  background: var(--brand-dark);
}
.compare-pane {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px;
  color: var(--white);
}
.compare-pane.before {
  background: linear-gradient(135deg, #4a4844 0%, #2E2D2A 100%);
}
.compare-pane.after {
  background: linear-gradient(135deg, #F6CC46 0%, #F8A4AE 100%);
  color: var(--brand-dark);
  clip-path: inset(0 0 0 50%);
  transition: clip-path 0.08s linear;
}
.compare-pane-label {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  opacity: 0.7; margin-bottom: 14px;
}
.compare-pane h3 {
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 52px);
  font-weight: 400; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 18px; max-width: 440px;
}
.compare-pane ul { list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.compare-pane li { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.compare-pane li::before { content: '✕'; color: rgba(255,255,255,0.5); width: 18px; text-align: center; }
.compare-pane.after li::before { content: '✓'; color: var(--brand-dark); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; background: var(--white);
  transform: translateX(-50%);
  cursor: ew-resize; z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
.compare-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 7l-4 5 4 5M16 7l4 5-4 5' stroke='%232E2D2A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 24px; background-repeat: no-repeat; background-position: center;
}
@media (max-width: 720px) {
  .compare-pane { padding: 32px; }
}

/* ════════════════════════════════════════════════
   HORIZONTAL-SCROLL CATEGORIES
════════════════════════════════════════════════ */
.hscroll-section {
  background: var(--cream);
  padding: 100px 0 100px;
  overflow: hidden;
  position: relative;
}
.hscroll-header { max-width: 1280px; margin: 0 auto 48px; padding: 0 36px; display: flex; justify-content: space-between; align-items: end; gap: 48px; }
.hscroll-track {
  display: flex; gap: 22px; padding: 10px 36px 40px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.hscroll-track::-webkit-scrollbar { display: none; }
.hscroll-track:active { cursor: grabbing; }
.hscroll-card {
  flex: 0 0 420px;
  scroll-snap-align: start;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-2xl);
  padding: 36px;
  aspect-ratio: 4/5;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.3s;
}
.hscroll-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(46,45,42,0.12); border-color: rgba(248,164,174,0.4); }
.hscroll-card.dark { background: var(--brand-dark); color: var(--white); border-color: transparent; }
.hscroll-card.dark h3 { color: var(--white); }
.hscroll-card.dark p { color: rgba(255,255,255,0.6); }
.hscroll-card.dark::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(230,206,168,0.08) 1px, transparent 1px);
  background-size: 22px 22px; pointer-events: none;
}
.hscroll-number {
  font-family: var(--font-display); font-size: 110px;
  color: var(--slate-dk); opacity: 0.3;
  letter-spacing: -4px; line-height: 0.9;
  position: absolute; right: 28px; top: 24px; z-index: 0;
}
.hscroll-card.dark .hscroll-number { color: rgba(246,204,70,0.15); opacity: 1; }
.hscroll-card .benefit-icon-svg { margin-bottom: auto; position: relative; z-index: 1; }
.hscroll-card h3 {
  font-family: var(--font-display); font-size: 30px; font-weight: 400;
  color: var(--dark); letter-spacing: -0.8px; margin-bottom: 12px;
  position: relative; z-index: 1;
}
.hscroll-card p { font-size: 14.5px; color: var(--dark-60); line-height: 1.65; margin-bottom: 18px; position: relative; z-index: 1; max-width: 340px; }
.hscroll-card .hscroll-save {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--brand-dark);
  background: var(--yellow); padding: 8px 14px; border-radius: 20px;
  align-self: flex-start;
  position: relative; z-index: 1;
}
.hscroll-card.dark .hscroll-save { background: var(--yellow); }
.hscroll-hint {
  max-width: 1280px; margin: 0 auto; padding: 24px 36px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--dark-40); letter-spacing: 1.5px; text-transform: uppercase;
}
.hscroll-hint-arrows { display: flex; gap: 6px; font-size: 14px; color: var(--dark-60); }
@media (max-width: 700px) {
  .hscroll-card { flex: 0 0 85vw; }
}

/* ════════════════════════════════════════════════
   KINETIC TYPOGRAPHY — "wall of words"
════════════════════════════════════════════════ */
.kinetic-section {
  background: var(--cream);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.kinetic-wall {
  max-width: 1280px; margin: 0 auto;
  padding: 0 36px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6.5vw, 96px);
  line-height: 1.02;
  letter-spacing: -2px;
  color: var(--dark);
}
.kinetic-line { display: block; overflow: hidden; padding: 0.06em 0; }
.kinetic-word {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.9s var(--ease-out), opacity 0.9s;
}
.kinetic-line.visible .kinetic-word { transform: translateY(0); opacity: 1; }
.kinetic-line.visible .kinetic-word:nth-child(1) { transition-delay: 0.05s; }
.kinetic-line.visible .kinetic-word:nth-child(2) { transition-delay: 0.15s; }
.kinetic-line.visible .kinetic-word:nth-child(3) { transition-delay: 0.25s; }
.kinetic-line.visible .kinetic-word:nth-child(4) { transition-delay: 0.35s; }
.kinetic-line.visible .kinetic-word:nth-child(5) { transition-delay: 0.45s; }
.kinetic-line.visible .kinetic-word:nth-child(6) { transition-delay: 0.55s; }
.kinetic-word em { color: var(--pink-dk); font-style: italic; }
.kinetic-word.yellow em { color: var(--yellow-dk); }
.kinetic-caption {
  max-width: 540px; margin: 56px auto 0;
  text-align: center;
  font-size: 17px; color: var(--dark-60); line-height: 1.65;
  opacity: 0; transition: opacity 0.8s var(--ease-out) 0.6s;
}
.kinetic-line.visible ~ .kinetic-caption, .kinetic-section.visible .kinetic-caption { opacity: 1; }

/* ════════════════════════════════════════════════
   HERO INTERACTIVE CALCULATOR
════════════════════════════════════════════════ */
.hero-calc {
  margin-top: 40px;
  padding: 24px 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  max-width: 480px;
}
.hero-calc-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.hero-calc-label > span:first-child {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.hero-calc-count {
  font-family: var(--font-display); font-size: 26px; color: var(--yellow);
  letter-spacing: -0.8px; line-height: 1;
}
.hero-calc-count span { font-size: 12px; color: rgba(255,255,255,0.6); font-family: var(--font-body); margin-left: 6px; }
.hero-calc-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px;
  background: rgba(255,255,255,0.12); border-radius: 3px; outline: none;
  margin-bottom: 14px; cursor: pointer;
}
.hero-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--yellow); cursor: pointer;
  box-shadow: 0 4px 14px rgba(246,204,70,0.5);
  transition: transform 0.2s;
}
.hero-calc-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.hero-calc-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--yellow); border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(246,204,70,0.5);
}
.hero-calc-result {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-calc-result-label { font-size: 12px; color: rgba(255,255,255,0.5); }
.hero-calc-result-value {
  font-family: var(--font-display); font-size: 38px; color: var(--yellow);
  letter-spacing: -1.5px; line-height: 1;
  transition: transform 0.2s;
}

/* ════════════════════════════════════════════════
   LIVE GLOBAL COUNTER PILL
════════════════════════════════════════════════ */
.live-counter {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px;
  background: rgba(127,225,154,0.1);
  border: 1px solid rgba(127,225,154,0.3);
  border-radius: 40px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 20px;
}
.live-counter-dot {
  width: 8px; height: 8px; background: #7fe19a; border-radius: 50%;
  animation: livePulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(127,225,154,0.7);
}
.live-counter strong { color: var(--yellow); font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(127,225,154,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(127,225,154,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,225,154,0); }
}

/* ════════════════════════════════════════════════
   DRAGGABLE PHONE (hero showpiece)
════════════════════════════════════════════════ */
.showpiece-phone.draggable { cursor: grab; touch-action: none; }
.showpiece-phone.draggable:active { cursor: grabbing; }
.showpiece-phone.draggable.is-dragging { animation: none; transition: none; }
.showpiece-phone.draggable:not(.is-dragging) { transition: transform 0.8s var(--ease-out); }

/* Aurora cursor-following glow on hero */
.hero-aurora {
  position: absolute; width: 720px; height: 720px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(246,204,70,0.22), transparent 55%);
  filter: blur(40px);
  transform: translate(-50%, -50%);
  transition: opacity 0.5s var(--ease-out);
  mix-blend-mode: screen;
  z-index: 1;
}
.hero:hover .hero-aurora { opacity: 1; }

/* ════════════════════════════════════════════════
   SVG BENEFIT ICONS (hand-animated, Lottie-spirit)
════════════════════════════════════════════════ */
.benefit-icon-svg {
  width: 64px; height: 64px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease-out);
}
.benefit-icon-svg.small { width: 48px; height: 48px; border-radius: 12px; }
.benefit-icon-svg.yellow { background: rgba(246,204,70,0.18); }
.benefit-icon-svg.pink { background: var(--softpink); }
.benefit-icon-svg.slate { background: var(--slate); }
.benefit-icon-svg.dark-yellow { background: rgba(246,204,70,0.2); }
.benefit-icon-svg svg { width: 60%; height: 60%; overflow: visible; }
.benefit-icon-svg svg path, .benefit-icon-svg svg line, .benefit-icon-svg svg circle, .benefit-icon-svg svg polyline, .benefit-icon-svg svg rect {
  stroke: var(--brand-dark);
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: center; transform-box: fill-box;
}
.benefit-icon-svg.yellow svg * { stroke: var(--yellow-dk); }
.benefit-icon-svg.dark-yellow svg * { stroke: var(--yellow); }
.benefit-icon-svg.pink svg * { stroke: var(--pink-dk); }
.benefit-icon-svg.slate svg * { stroke: var(--brand-dark); }

/* Individual icon hover animations */
.ic-fuel .drop { transform: translateY(0); transition: transform 0.5s var(--ease-out); }
.bcard-benefit:hover .ic-fuel .drop, .hscroll-card:hover .ic-fuel .drop, .perk-card:hover .ic-fuel .drop { transform: translateY(-3px); }

.ic-play .play-tri { transform: scale(1); transition: transform 0.4s var(--ease-out); }
.bcard-benefit:hover .ic-play .play-tri, .hscroll-card:hover .ic-play .play-tri, .perk-card:hover .ic-play .play-tri { transform: scale(1.15); }

.ic-gift .lid { transform-origin: center bottom; transform: rotate(0); transition: transform 0.45s var(--ease-out); }
.bcard-benefit:hover .ic-gift .lid, .hscroll-card:hover .ic-gift .lid, .perk-card:hover .ic-gift .lid { transform: rotate(-8deg) translateY(-1px); }

.ic-cart .wheel { transform-origin: center; transform: rotate(0); transition: transform 0.6s var(--ease-out); }
.bcard-benefit:hover .ic-cart .wheel, .hscroll-card:hover .ic-cart .wheel, .perk-card:hover .ic-cart .wheel { transform: rotate(360deg); }

.ic-home .chimney { transform-origin: center bottom; transform: scaleY(1); transition: transform 0.45s var(--ease-out); }
.bcard-benefit:hover .ic-home .chimney, .hscroll-card:hover .ic-home .chimney, .perk-card:hover .ic-home .chimney { transform: scaleY(1.2); }

.ic-plane .plane-body { transform: translateX(0); transition: transform 0.5s var(--ease-out); }
.bcard-benefit:hover .ic-plane .plane-body, .hscroll-card:hover .ic-plane .plane-body, .perk-card:hover .ic-plane .plane-body { transform: translateX(2px) rotate(-6deg); }

.ic-dumbbell .weight { transform-origin: center; transition: transform 0.4s var(--ease-out); }
.bcard-benefit:hover .ic-dumbbell .weight, .hscroll-card:hover .ic-dumbbell .weight, .perk-card:hover .ic-dumbbell .weight { transform: scale(1.15); }

.ic-plus .plus-v { transform-origin: center; transform: rotate(0); transition: transform 0.5s var(--ease-out); }
.bcard-benefit:hover .ic-plus .plus-v, .hscroll-card:hover .ic-plus .plus-v, .perk-card:hover .ic-plus .plus-v { transform: rotate(90deg); }

.ic-heart .heart-shape { transform-origin: center; transform: scale(1); transition: transform 0.45s var(--ease-out); }
.bcard-benefit:hover .ic-heart .heart-shape, .hscroll-card:hover .ic-heart .heart-shape, .perk-card:hover .ic-heart .heart-shape { transform: scale(1.12); }

.ic-dollar .coin { animation: coinFlip 0 paused; }
.bcard-benefit:hover .ic-dollar .coin, .hscroll-card:hover .ic-dollar .coin, .perk-card:hover .ic-dollar .coin { animation: coinFlip 0.8s var(--ease-out); }
@keyframes coinFlip {
  0%   { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}

/* ════════════════════════════════════════════════
   VIEW TRANSITIONS
════════════════════════════════════════════════ */
@supports (view-transition-name: a) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-old(root) { animation-name: fadeOutPage; }
  ::view-transition-new(root) { animation-name: fadeInPage; }
  .nav { view-transition-name: nav; }
}
@keyframes fadeOutPage { to { opacity: 0; transform: translateY(-8px); } }
@keyframes fadeInPage  { from { opacity: 0; transform: translateY(8px); } }

/* ════════════════════════════════════════════════
   SOUND TOGGLE (visual only — JS owns state)
════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   HERO BENYFITS (featured two-card band)
════════════════════════════════════════════════ */
.hero-benefits { background: var(--cream); padding: 100px 0 60px; }
.hero-benefits-header {
  max-width: 1280px; margin: 0 auto 48px;
  padding: 0 36px;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 48px; align-items: end;
}
.hero-benefits-grid {
  max-width: 1280px; margin: 0 auto;
  padding: 0 36px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.hero-benefit-card {
  position: relative;
  border-radius: var(--r-2xl);
  padding: 48px;
  overflow: hidden;
  min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.hero-benefit-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(46,45,42,0.15); }
.hero-benefit-card.yellow {
  background: linear-gradient(145deg, #FEF2C4 0%, #F6CC46 120%);
  color: var(--brand-dark);
}
.hero-benefit-card.pink {
  background: linear-gradient(145deg, #F5DCDF 0%, #F8A4AE 120%);
  color: var(--brand-dark);
}
.hero-benefit-card::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(46,45,42,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 80% 20%, black 40%, transparent 100%);
}
.hero-benefit-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(46,45,42,0.55); margin-bottom: 18px;
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-benefit-tag::before {
  content: ''; width: 22px; height: 1.5px; background: var(--brand-dark);
}
.hero-benefit-number {
  font-family: var(--font-display); font-size: clamp(60px, 7vw, 96px);
  font-weight: 400; letter-spacing: -4px; line-height: 0.95;
  color: var(--brand-dark);
  position: relative; z-index: 1;
  margin-bottom: 8px;
}
.hero-benefit-unit { font-size: clamp(20px, 2.2vw, 32px); vertical-align: top; margin-left: 4px; }
.hero-benefit-card h3 {
  font-family: var(--font-display); font-size: 30px; font-weight: 400;
  letter-spacing: -0.8px; color: var(--brand-dark);
  line-height: 1.15; margin-bottom: 12px;
  position: relative; z-index: 1;
}
.hero-benefit-card p {
  font-size: 15px; color: rgba(46,45,42,0.7);
  line-height: 1.65; max-width: 440px;
  position: relative; z-index: 1;
}
.hero-benefit-brands {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px;
  position: relative; z-index: 1;
}
.hero-benefit-brand {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--brand-dark);
  background: rgba(46,45,42,0.08);
  padding: 5px 11px; border-radius: 20px;
}
.hero-benefit-icon {
  position: absolute;
  right: 32px; top: 32px;
  width: 120px; height: 120px;
  opacity: 0.12;
  z-index: 0;
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.hero-benefit-card:hover .hero-benefit-icon { opacity: 0.22; transform: rotate(-6deg) scale(1.05); }
.hero-benefit-icon svg { width: 100%; height: 100%; }
.hero-benefit-icon svg * {
  stroke: var(--brand-dark);
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 900px) {
  .hero-benefits-header { grid-template-columns: 1fr; gap: 24px; }
  .hero-benefits-grid { grid-template-columns: 1fr; }
  .hero-benefit-card { padding: 36px; min-height: 300px; }
}

/* ════════════════════════════════════════════════
   ADDITIONAL CATEGORY ICONS
════════════════════════════════════════════════ */
/* Fashion (shirt) */
.ic-shirt .sleeve-l, .ic-shirt .sleeve-r { transition: transform 0.4s var(--ease-out); transform-origin: center top; }
.hscroll-card:hover .ic-shirt .sleeve-l, .perk-card:hover .ic-shirt .sleeve-l, .bcard-benefit:hover .ic-shirt .sleeve-l { transform: rotate(-6deg); }
.hscroll-card:hover .ic-shirt .sleeve-r, .perk-card:hover .ic-shirt .sleeve-r, .bcard-benefit:hover .ic-shirt .sleeve-r { transform: rotate(6deg); }

/* Beauty (sparkle) */
.ic-sparkle .sparkle { transform-origin: center; transform: scale(1) rotate(0); transition: transform 0.6s var(--ease-out); }
.hscroll-card:hover .ic-sparkle .sparkle, .perk-card:hover .ic-sparkle .sparkle, .bcard-benefit:hover .ic-sparkle .sparkle { transform: scale(1.2) rotate(45deg); }

/* Tech (laptop) */
.ic-laptop .screen { transform-origin: center bottom; transform: scaleY(1); transition: transform 0.45s var(--ease-out); }
.hscroll-card:hover .ic-laptop .screen, .perk-card:hover .ic-laptop .screen, .bcard-benefit:hover .ic-laptop .screen { transform: scaleY(1.08); }

/* Family (balloon) */
.ic-balloon .balloon-b { transform-origin: center bottom; transition: transform 0.5s var(--ease-out); }
.hscroll-card:hover .ic-balloon .balloon-b, .perk-card:hover .ic-balloon .balloon-b, .bcard-benefit:hover .ic-balloon .balloon-b { transform: translateY(-2px) rotate(-4deg); }

/* Food (apple) */
.ic-apple .leaf { transform-origin: left bottom; transform: rotate(0); transition: transform 0.5s var(--ease-out); }
.hscroll-card:hover .ic-apple .leaf, .perk-card:hover .ic-apple .leaf, .bcard-benefit:hover .ic-apple .leaf { transform: rotate(-20deg); }

/* Mental (brain) */
.ic-brain .waves { transform-origin: center; transform: scale(1); transition: transform 0.5s var(--ease-out); opacity: 0.7; }
.hscroll-card:hover .ic-brain .waves, .perk-card:hover .ic-brain .waves, .bcard-benefit:hover .ic-brain .waves { transform: scale(1.12); opacity: 1; }

/* Business (briefcase) */
.ic-briefcase .handle { transform-origin: center bottom; transform: scaleY(1); transition: transform 0.4s var(--ease-out); }
.hscroll-card:hover .ic-briefcase .handle, .perk-card:hover .ic-briefcase .handle, .bcard-benefit:hover .ic-briefcase .handle { transform: scaleY(1.15); }

/* ════════════════════════════════════════════════
   MARQUEE LOGOS — on dark marquee background
════════════════════════════════════════════════ */
.marquee-track.logos { gap: 24px; }
.marquee-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px;
  padding: 8px 18px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.94);
  border-radius: 10px;
  transition: background 0.25s, transform 0.25s var(--ease-out);
}
.marquee-logo:hover { background: var(--white); transform: translateY(-2px); }
.marquee-logo img {
  max-height: 28px; max-width: 110px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(35%);
  opacity: 0.9;
  transition: opacity 0.25s, filter 0.25s;
}
.marquee-logo:hover img { opacity: 1; filter: grayscale(0%); }
.marquee-logo-text {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.1px;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════
   SHARE-WITH-FAMILY SECTION (for-employees)
════════════════════════════════════════════════ */
.share-section { background: var(--pink); padding: 120px 0; position: relative; overflow: hidden; }
/* Type tweaks so headings + slots read on pink */
.share-section .section-heading em { color: var(--brand-dark); font-style: italic; }
.share-section .eyebrow::before { background: var(--brand-dark); opacity: 0.55; }
.share-section .section-sub { color: rgba(46,45,42,0.78); }
.share-section .share-slot-avatar.empty {
  border-color: rgba(46,45,42,0.45);
  color: rgba(46,45,42,0.55);
}
.share-section .share-slot-sub { color: rgba(46,45,42,0.65); }
.share-section .share-note { color: rgba(46,45,42,0.7); }
.share-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 36px; }
.share-photo {
  position: relative;
  border-radius: var(--r-2xl); overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 70px rgba(46,45,42,0.18);
}
.share-photo img { width: 100%; height: 100%; object-fit: cover; }
.share-photo-tag {
  position: absolute; bottom: 28px; left: 28px;
  background: rgba(46,45,42,0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 14px 18px;
  color: var(--white);
  display: flex; align-items: center; gap: 12px;
}
.share-photo-tag-label { font-size: 10px; color: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
.share-photo-tag-value { font-family: var(--font-display); font-size: 22px; color: var(--yellow); letter-spacing: -0.8px; line-height: 1; }

.share-slots {
  display: flex; gap: 14px; margin-top: 36px;
  padding: 24px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(46,45,42,0.08);
  border-radius: var(--r-xl);
  max-width: 480px;
}
.share-slot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  transition: transform 0.4s var(--ease-out);
}
.share-slot:hover { transform: translateY(-3px); }
.share-slot-avatar {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 22px;
  color: var(--brand-dark);
  background: linear-gradient(135deg, var(--yellow), var(--pink));
  box-shadow: 0 6px 16px rgba(248,164,174,0.25);
}
.share-slot-avatar.empty {
  background: transparent;
  border: 2px dashed rgba(46,45,42,0.3);
  color: rgba(46,45,42,0.4);
  font-size: 26px; font-weight: 300;
  font-family: var(--font-body);
}
.share-slot-label { font-size: 12px; font-weight: 600; color: var(--brand-dark); letter-spacing: -0.1px; }
.share-slot-sub { font-size: 10.5px; color: rgba(46,45,42,0.5); }
.share-note {
  margin-top: 20px;
  font-size: 13px; color: rgba(46,45,42,0.6);
  font-style: italic;
}
@media (max-width: 900px) {
  .share-inner { grid-template-columns: 1fr; gap: 48px; }
}

/* ════════════════════════════════════════════════
   BENY DAY SECTION
════════════════════════════════════════════════ */
.benyday-section {
  background: var(--brand-dark); color: var(--white);
  padding: 120px 0; position: relative; overflow: hidden;
}
.benyday-section::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(230,206,168,0.1) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 85%);
  pointer-events: none;
}
.benyday-section .blob { filter: blur(80px); opacity: 0.35; }
.benyday-inner { max-width: 1280px; margin: 0 auto; padding: 0 36px; position: relative; z-index: 1; }
.benyday-header-row {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end;
  margin-bottom: 72px;
}
.benyday-header-row .section-heading { color: var(--white); }
.benyday-header-row .section-heading em { color: var(--yellow); }
.benyday-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: center; }

.benyday-phone {
  width: 280px; margin: 0 auto;
  background: linear-gradient(160deg, #1c1b18 0%, #2a2926 100%);
  border: 5px solid #383632;
  border-radius: 44px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 50px 100px rgba(0,0,0,0.5);
  overflow: hidden; position: relative;
  animation: floatY 6s ease-in-out infinite;
}
.benyday-phone::before {
  content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 5px; background: #111; border-radius: 3px; z-index: 3;
}
.benyday-phone-screen {
  padding: 42px 22px 28px;
  background: linear-gradient(180deg, #22211e 0%, #1c1b18 100%);
  min-height: 520px;
}
.bd-date-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.bd-date { font-family: var(--font-display); font-size: 22px; color: var(--yellow); letter-spacing: -0.5px; line-height: 1; }
.bd-dayname { font-size: 11px; color: rgba(255,255,255,0.62); letter-spacing: 0.3px; }
.bd-progress {
  height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px;
  margin-bottom: 22px; overflow: hidden;
}
.bd-progress-fill { height: 100%; width: 60%; background: linear-gradient(90deg, var(--yellow), var(--pink)); border-radius: 2px; }
.bd-list { display: flex; flex-direction: column; gap: 10px; }
.bd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  font-size: 12px; color: rgba(255,255,255,0.85);
}
.bd-item.done { color: rgba(255,255,255,0.42); text-decoration: line-through; }
.bd-check {
  width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.bd-item.done .bd-check { background: var(--yellow); border-color: var(--yellow); color: var(--brand-dark); font-weight: 700; }
.bd-item-cat { font-size: 9.5px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 1px; margin-left: auto; }

.benyday-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.benyday-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  padding: 28px;
  transition: transform 0.4s var(--ease-out), background 0.3s, border-color 0.3s;
}
.benyday-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.06); border-color: rgba(246,204,70,0.3); }
.benyday-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  background: rgba(246,204,70,0.14);
  color: var(--yellow);
  position: relative;
  transition: transform 0.35s var(--ease-out);
}
.benyday-card:hover .benyday-card-icon { transform: rotate(-6deg) scale(1.05); }
.benyday-card-icon svg { width: 22px; height: 22px; }
.benyday-card-icon svg * {
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.benyday-card h4 {
  font-family: var(--font-display); font-size: 22px; font-weight: 400;
  color: var(--white); letter-spacing: -0.5px; line-height: 1.2;
  margin-bottom: 10px;
}
.benyday-card p { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; }

.benyday-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 9px;
  background: rgba(246,204,70,0.1);
  border: 1px solid rgba(246,204,70,0.25);
  border-radius: 40px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 28px;
}
.benyday-tag::before {
  content: ''; width: 7px; height: 7px; background: var(--yellow); border-radius: 50%;
}

@media (max-width: 1100px) {
  .benyday-header-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .benyday-body { grid-template-columns: 1fr; gap: 56px; }
  .benyday-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .benyday-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   APP UI — matches the real Beny mobile app look
   (reused for homepage showpiece + Beny Day mockup)
════════════════════════════════════════════════ */
.app-ui {
  padding: 52px 18px 60px;
  background: #2A2926;
  min-height: 100%;
  color: var(--white);
  position: relative;
  font-size: 12px;
}
.app-ui-status {
  position: absolute; top: 14px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 22px;
  font-size: 11px; font-weight: 600;
  color: var(--white);
  opacity: 0.85;
}
.app-ui-status-battery {
  display: inline-flex; align-items: center; gap: 4px;
}
.app-ui-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 28px; line-height: 1.02; letter-spacing: -1px;
  color: var(--white); margin-bottom: 10px;
}
.app-ui-date-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.app-ui-date {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--pink); font-weight: 500;
}
.app-ui-date::before {
  content: ''; width: 11px; height: 11px;
  background: var(--pink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
}
.app-ui-pill {
  padding: 3px 11px;
  background: rgba(255,255,255,0.92); color: var(--brand-dark);
  border-radius: 40px;
  font-size: 10.5px; font-weight: 600; letter-spacing: -0.1px;
}

.app-ui-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.app-ui-tile {
  padding: 12px 13px;
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 74px; justify-content: center;
  position: relative;
}
.app-ui-tile.dark { background: rgba(255,255,255,0.06); }
.app-ui-tile.pink { background: var(--pink); color: var(--brand-dark); }
.app-ui-tile-top {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600;
}
.app-ui-tile-icon {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--pink); display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-dark); font-size: 11px;
  flex-shrink: 0;
}
.app-ui-tile.pink .app-ui-tile-icon {
  background: rgba(46,45,42,0.15); color: var(--brand-dark);
}
.app-ui-tile-stat {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; letter-spacing: -0.5px; line-height: 1;
  color: var(--white);
}
.app-ui-tile.pink .app-ui-tile-stat { color: var(--brand-dark); }
.app-ui-tile-label { font-size: 10px; color: rgba(255,255,255,0.55); letter-spacing: -0.1px; }
.app-ui-tile.pink .app-ui-tile-label { color: rgba(46,45,42,0.65); }
.app-ui-tile-sub { font-size: 10.5px; color: rgba(255,255,255,0.5); line-height: 1.2; }
.app-ui-tile.pink .app-ui-tile-sub { color: rgba(46,45,42,0.65); }

.app-ui-section { font-size: 11px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.1px; }
.app-ui-section span { font-weight: 500; color: rgba(255,255,255,0.6); margin-left: 3px; }

.app-ui-list { display: flex; flex-direction: column; gap: 7px; }
.app-ui-row {
  display: flex; align-items: stretch;
  border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.app-ui-row-thumb {
  width: 52px; flex-shrink: 0;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  padding: 5px;
}
.app-ui-row-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.app-ui-row-thumb-text {
  font-size: 8px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--brand-dark); text-align: center; line-height: 1.15;
}
.app-ui-row-thumb-text em { color: var(--pink-dk); font-style: normal; }
.app-ui-row-body {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  gap: 10px;
  min-width: 0;
}
.app-ui-row-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 12.5px; letter-spacing: -0.2px; line-height: 1.2;
  color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.app-ui-row.done .app-ui-row-title {
  text-decoration: line-through;
  opacity: 0.45;
}
.app-ui-row-meta { font-size: 10.5px; color: rgba(255,255,255,0.5); flex-shrink: 0; white-space: nowrap; }
.app-ui-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.app-ui-row.done .app-ui-check {
  background: var(--pink); color: var(--brand-dark);
}

.app-ui-cta {
  margin-top: 16px; padding: 12px;
  background: var(--pink); color: var(--brand-dark);
  border-radius: 10px;
  text-align: center; font-weight: 700;
  font-size: 12.5px; letter-spacing: -0.1px;
}

/* Bottom tab bar */
.app-ui-tabs {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #22211e;
  display: flex; justify-content: space-around;
  padding: 6px 0 8px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.app-ui-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 8.5px; font-weight: 500;
  color: rgba(255,255,255,0.4);
  flex: 1;
  letter-spacing: -0.1px;
}
.app-ui-tab svg { width: 14px; height: 14px; }
.app-ui-tab svg * {
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.app-ui-tab.active { color: var(--pink); }
.app-ui-tab.active .app-ui-tab-b {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pink); color: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10px;
}

/* Beny Day phone — larger, focused mockup */
.benyday-phone {
  width: 320px;
}
.benyday-phone .benyday-phone-screen,
.benyday-phone .app-ui { min-height: 620px; padding-bottom: 60px; }

/* Homepage showpiece phone — compact */
.showpiece-phone { width: 240px; }
.showpiece-phone .showpiece-phone-screen { padding: 0; min-height: 480px; background: transparent; }
.showpiece-phone .app-ui { padding: 40px 14px 48px; min-height: 480px; }
.showpiece-phone .app-ui-title { font-size: 22px; margin-bottom: 8px; }
.showpiece-phone .app-ui-date-row { margin-bottom: 14px; }
.showpiece-phone .app-ui-tile-stat { font-size: 18px; }
.showpiece-phone .app-ui-tile { padding: 10px 11px; min-height: 62px; }
.showpiece-phone .app-ui-row-title { font-size: 11.5px; }
.showpiece-phone .app-ui-row-meta { font-size: 9.5px; }
.showpiece-phone .app-ui-tabs { padding: 5px 0 7px; }
.showpiece-phone .app-ui-tab { font-size: 7.5px; }
.showpiece-phone .app-ui-tab svg { width: 12px; height: 12px; }

@media (max-width: 700px) {
  .benyday-phone { width: 280px; }
  .showpiece-phone { width: 220px; }
}

/* ════════════════════════════════════════════════
   HERO BENYFITS v2 — dual-slider personal calculator
════════════════════════════════════════════════ */
.hb2 { background: var(--cream); padding: 100px 0 80px; }
.hb2-inner { max-width: 1280px; margin: 0 auto; padding: 0 36px; }
.hb2-header {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 48px; align-items: end; margin-bottom: 40px;
}
.hb2-card {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--white);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(46,45,42,0.12);
  border: 1px solid rgba(46,45,42,0.06);
}
/* LEFT — inputs */
.hb2-left {
  padding: 56px 48px;
  display: flex; flex-direction: column; gap: 44px;
  background: var(--white);
  position: relative;
}
.hb2-left::after {
  content: ''; position: absolute; top: 56px; bottom: 56px; right: 0;
  width: 1px; background: rgba(46,45,42,0.08);
}
.hb2-control { position: relative; }
.hb2-control-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.hb2-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hb2-icon.fuel { background: rgba(246,204,70,0.18); }
.hb2-icon.groc { background: var(--softpink); }
.hb2-icon svg { width: 22px; height: 22px; stroke-width: 2; stroke: var(--brand-dark); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hb2-label-wrap { flex: 1; }
.hb2-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(46,45,42,0.5); margin-bottom: 3px; }
.hb2-q { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--brand-dark); letter-spacing: -0.5px; line-height: 1.1; }

.hb2-value-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.hb2-val { font-family: var(--font-display); font-size: 36px; font-weight: 400; letter-spacing: -1.2px; line-height: 1; color: var(--brand-dark); }
.hb2-val span { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: rgba(46,45,42,0.5); margin-left: 4px; }

.hb2-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: rgba(46,45,42,0.1); border-radius: 3px;
  outline: none; cursor: pointer;
}
.hb2-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-dark); cursor: pointer;
  transition: transform 0.2s;
}
.hb2-range.fuel::-webkit-slider-thumb { background: var(--yellow); box-shadow: 0 4px 14px rgba(246,204,70,0.5); }
.hb2-range.groc::-webkit-slider-thumb { background: var(--pink); box-shadow: 0 4px 14px rgba(248,164,174,0.5); }
.hb2-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.hb2-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  border: none; cursor: pointer;
}
.hb2-range.fuel::-moz-range-thumb { background: var(--yellow); }
.hb2-range.groc::-moz-range-thumb { background: var(--pink); }

.hb2-range-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(46,45,42,0.38); margin-top: 10px; }
.hb2-brands { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.hb2-brand { font-size: 10.5px; font-weight: 600; color: var(--brand-dark); background: rgba(46,45,42,0.06); padding: 4px 10px; border-radius: 20px; }

/* RIGHT — result */
.hb2-right {
  padding: 56px 48px;
  background: var(--softpink);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.hb2-right-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; height: 100%; }
.hb2-result-head { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(46,45,42,0.55); }
.hb2-total {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(42px, 5.2vw, 68px); line-height: 1.05; letter-spacing: -1.6px;
  color: var(--brand-dark);
  transition: transform 0.2s var(--ease-out);
  word-break: break-word;
}
.hb2-period { font-size: 16px; color: rgba(46,45,42,0.65); line-height: 1.5; margin-top: -12px; }
.hb2-period strong { color: var(--brand-dark); font-weight: 600; }
.hb2-breakdown { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(46,45,42,0.1); }
.hb2-bd-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: rgba(255,255,255,0.5); border-radius: 14px; border: 1px solid rgba(46,45,42,0.06); }
.hb2-bd-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--brand-dark); }
.hb2-bd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hb2-bd-dot.fuel { background: var(--yellow-dk); }
.hb2-bd-dot.groc { background: var(--pink-dk); }
.hb2-bd-vals { display: flex; align-items: baseline; gap: 14px; }
.hb2-bd-wk { font-size: 12.5px; color: rgba(46,45,42,0.5); }
.hb2-bd-yr { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.5px; color: var(--brand-dark); min-width: 80px; text-align: right; }
.hb2-footnote { position: relative; z-index: 1; font-size: 11.5px; color: rgba(46,45,42,0.5); margin-top: 14px; font-style: italic; }

@media (max-width: 900px) {
  .hb2-header { grid-template-columns: 1fr; gap: 20px; }
  .hb2-card { grid-template-columns: 1fr; }
  .hb2-left::after { display: none; }
  .hb2-left, .hb2-right { padding: 40px 32px; }
}

/* ════════════════════════════════════════════════
   CUSTOMER LOGOS CAROUSEL — "trusted by" band
════════════════════════════════════════════════ */
.customers-section {
  background: #ffffff;
  padding: 90px 0;
  border-top: 1px solid rgba(46,45,42,0.06);
  border-bottom: 1px solid rgba(46,45,42,0.06);
  overflow: hidden;
  position: relative;
}
.customers-header {
  max-width: 1280px; margin: 0 auto 44px;
  padding: 0 36px;
  text-align: center;
}
.customers-header .eyebrow { justify-content: center; }
.customers-header h2 {
  font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px);
  font-weight: 400; letter-spacing: -1.5px; line-height: 1.08;
  color: var(--brand-dark); margin-bottom: 14px;
}
.customers-header h2 em { color: var(--pink-dk); font-style: italic; }
.customers-header p { font-size: 15.5px; color: rgba(46,45,42,0.72); max-width: 560px; margin: 0 auto; line-height: 1.6; }
.customers-wrap {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.customers-track {
  display: flex; align-items: center; gap: 64px;
  width: max-content;
  animation: scroll-left 48s linear infinite;
}
.customers-wrap:hover .customers-track { animation-play-state: paused; }
.customer-logo {
  flex-shrink: 0;
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 18px;
  background: var(--white);
  border-radius: 14px;
  border: 1px solid rgba(46,45,42,0.08);
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.customer-logo:hover {
  border-color: rgba(248,164,174,0.5);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(46,45,42,0.1);
}
.customer-logo img {
  max-height: 44px; max-width: 150px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(20%);
  opacity: 0.95;
  transition: opacity 0.3s, filter 0.3s;
}
.customer-logo:hover img { opacity: 1; filter: grayscale(0%); }
.customer-logo-text {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; letter-spacing: -0.4px; line-height: 1;
  color: var(--brand-dark);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════
   PRIVACY / TRUST PAGE
════════════════════════════════════════════════ */
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 48px;
}
.trust-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  padding: 28px;
  transition: all 0.4s var(--ease-out);
}
.trust-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(46,45,42,0.1); border-color: rgba(246,204,70,0.4); }
.trust-card-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(246,204,70,0.18); color: var(--yellow-dk);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.trust-card-icon svg { width: 20px; height: 20px; stroke-width: 2; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trust-card h4 { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: -0.5px; color: var(--dark); margin-bottom: 8px; }
.trust-card p { font-size: 13.5px; color: var(--dark-60); line-height: 1.65; }

.policy-body {
  max-width: 780px; margin: 0 auto;
  font-size: 15.5px; line-height: 1.75; color: var(--dark-60);
}
.policy-body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 34px; letter-spacing: -1px; color: var(--dark);
  margin: 56px 0 16px; scroll-margin-top: 100px;
}
.policy-body h2:first-child { margin-top: 0; }
.policy-body h3 {
  font-size: 16px; font-weight: 600; color: var(--dark);
  margin: 28px 0 10px; letter-spacing: -0.2px;
}
.policy-body p { margin-bottom: 16px; }
.policy-body ul { margin: 0 0 20px 20px; }
.policy-body li { margin-bottom: 8px; }
.policy-body strong { color: var(--dark); font-weight: 600; }
.policy-body a { color: var(--pink-dk); text-decoration: underline; text-underline-offset: 3px; }
.policy-body a:hover { color: var(--dark); }
.policy-meta {
  font-size: 13px; color: var(--dark-40);
  padding: 14px 18px;
  background: var(--cream-2);
  border-radius: 12px;
  margin-bottom: 44px;
  display: inline-block;
}
.policy-toc {
  position: sticky; top: 100px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  padding: 24px;
  font-size: 13px;
}
.policy-toc-heading { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark-40); margin-bottom: 16px; }
.policy-toc a {
  display: block; padding: 7px 0;
  color: var(--dark-60); text-decoration: none;
  border-left: 2px solid transparent; padding-left: 14px; margin-left: -16px;
  transition: all 0.2s;
}
.policy-toc a:hover { color: var(--dark); border-color: var(--yellow); }
.policy-layout { display: grid; grid-template-columns: 240px 1fr; gap: 72px; max-width: 1160px; margin: 0 auto; }

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .policy-layout { grid-template-columns: 1fr; gap: 40px; }
  .policy-toc { position: static; }
}

/* ════════════════════════════════════════════════
   ABOUT / FOUNDERS
════════════════════════════════════════════════ */
.about-story {
  max-width: 780px; margin: 0 auto;
  font-size: 17px; line-height: 1.75; color: var(--dark-60);
}
.about-story p { margin-bottom: 22px; }
.about-story p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 60px;
  float: left;
  line-height: 0.9;
  margin: 4px 10px 0 0;
  color: var(--pink-dk);
}
.about-story strong { color: var(--dark); font-weight: 600; }

.founders-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 40px;
}
/* Type tweaks for the pink founders section header */
#founders .section-heading em { color: var(--brand-dark); font-style: italic; }
#founders .eyebrow::before { background: var(--brand-dark); opacity: 0.5; }
#founders .section-sub { color: rgba(46,45,42,0.75); }

.founder-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-2xl);
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.founder-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(46,45,42,0.1); }
.founder-photo {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--yellow-lt), var(--softpink));
  position: relative;
}
.founder-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s var(--ease-out);
}
.founder-card:hover .founder-photo img { transform: scale(1.04); }
.founder-body { padding: 32px 36px 36px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.founder-head { display: flex; flex-direction: column; gap: 4px; }
.founder-name { font-family: var(--font-display); font-size: 28px; letter-spacing: -0.8px; color: var(--dark); line-height: 1.05; margin-bottom: 4px; }
.founder-role { font-size: 12.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--pink-dk); }
.founder-bio { font-size: 14.5px; color: var(--dark-60); line-height: 1.72; }
.founder-socials { display: flex; gap: 10px; margin-top: auto; }
.founder-social {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--dark-60);
  transition: all 0.25s;
}
.founder-social:hover { background: var(--dark); color: var(--yellow); border-color: var(--dark); }
.founder-social svg { width: 15px; height: 15px; fill: currentColor; }

.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1160px; margin: 0 auto;
}
.value-card {
  padding: 32px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
}
.value-card-num {
  font-family: var(--font-display); font-size: 44px;
  color: var(--slate-dk); letter-spacing: -1.5px; line-height: 1;
  margin-bottom: 14px;
}
.value-card h4 { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -0.5px; color: var(--dark); margin-bottom: 8px; }
.value-card p { font-size: 14px; color: var(--dark-60); line-height: 1.7; }

@media (max-width: 900px) {
  .founders-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   TRIAL / GET STARTED — step cards + CTA frame
════════════════════════════════════════════════ */
.flow-frame {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px;
  align-items: center;
  max-width: 1160px; margin: 0 auto;
}
.flow-checklist { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.flow-checklist li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  font-size: 14.5px;
  color: var(--dark);
}
.flow-checklist li::before {
  content: '✓';
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--yellow); color: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.flow-checklist li strong { display: block; margin-bottom: 2px; color: var(--dark); font-weight: 600; }
.flow-checklist li span { font-weight: 400; color: var(--dark-60); font-size: 13px; line-height: 1.5; }

.flow-cta {
  background: linear-gradient(160deg, var(--yellow-lt) 0%, var(--softpink) 100%);
  padding: 48px;
  border-radius: var(--r-2xl);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.flow-cta::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(46,45,42,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 80% at 80% 20%, black 40%, transparent 100%);
  pointer-events: none;
}
.flow-cta-inner { position: relative; z-index: 1; }
.flow-cta-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: rgba(46,45,42,0.08);
  border-radius: 30px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--brand-dark); margin-bottom: 18px;
}
.flow-cta-tag::before { content: ''; width: 7px; height: 7px; background: var(--pink-dk); border-radius: 50%; }
.flow-cta h3 {
  font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 400;
  color: var(--brand-dark); letter-spacing: -1.2px; line-height: 1.05;
  margin-bottom: 14px;
}
.flow-cta h3 em { color: var(--pink-dk); font-style: italic; }
.flow-cta p { font-size: 15px; color: rgba(46,45,42,0.7); line-height: 1.65; margin-bottom: 28px; max-width: 380px; margin-left: auto; margin-right: auto; }
.flow-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  background: var(--brand-dark); color: var(--white);
  border-radius: 14px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.1px;
  box-shadow: 0 12px 28px rgba(46,45,42,0.25);
  transition: all 0.25s var(--ease-out);
}
.flow-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(46,45,42,0.4); background: #3f3e3a; }
.flow-cta-sub { font-size: 12px; color: rgba(46,45,42,0.55); margin-top: 16px; display: block; }

@media (max-width: 900px) {
  .flow-frame { grid-template-columns: 1fr; gap: 44px; }
  .flow-cta { padding: 36px 28px; }
}

/* ════════════════════════════════════════════════
   CATEGORY GRID — 12 compact tiles (replaces hscroll)
════════════════════════════════════════════════ */
.cat-grid-section { background: var(--cream); padding: 100px 0; }
.cat-grid-header {
  max-width: 1280px; margin: 0 auto 48px;
  padding: 0 36px;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 48px; align-items: end;
}
.cat-grid {
  max-width: 1280px; margin: 0 auto;
  padding: 0 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cat-tile {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 22px 22px 20px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
  position: relative;
}
.cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(46,45,42,0.08);
  border-color: rgba(248,164,174,0.5);
}
.cat-tile-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.cat-tile-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-tile-icon.yellow { background: rgba(246,204,70,0.18); color: var(--yellow-dk); }
.cat-tile-icon.pink   { background: var(--softpink); color: var(--pink-dk); }
.cat-tile-icon.slate  { background: var(--slate); color: var(--brand-dark); }
.cat-tile-icon.dark   { background: var(--brand-dark); color: var(--yellow); }
.cat-tile-icon svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cat-tile-num {
  font-family: var(--font-display); font-size: 13px;
  color: var(--dark-40); letter-spacing: -0.3px;
}
.cat-tile h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 19px; letter-spacing: -0.4px; line-height: 1.2;
  color: var(--dark); margin-bottom: 6px;
}
.cat-tile p {
  font-size: 13px; color: var(--dark-60);
  line-height: 1.55; margin-bottom: 10px;
}
.cat-tile-brands {
  font-size: 11.5px; color: var(--dark-40);
  letter-spacing: -0.05px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
}
.cat-tile-brands strong { color: var(--dark); font-weight: 600; }

@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid-header { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cat-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════
   BENY ADMIN MOCKUP
   Matches the real web.beny.com.au/oa admin UI
════════════════════════════════════════════════ */
.dash-intro {
  max-width: 1280px; margin: 0 auto 40px;
  padding: 0 36px;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 48px; align-items: end;
}

.dash-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 0 36px;
}
.dash-chrome {
  background: #1f1e1c;
  border-radius: 14px 14px 0 0;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-chrome-dots { display: flex; gap: 6px; flex-shrink: 0; }
.dash-chrome-dot { width: 11px; height: 11px; border-radius: 50%; }
.dash-chrome-dot:nth-child(1) { background: #ff5f57; }
.dash-chrome-dot:nth-child(2) { background: #febc2e; }
.dash-chrome-dot:nth-child(3) { background: #28c840; }
.dash-chrome-url {
  flex: 1; max-width: 420px; margin: 0 auto;
  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 12px; color: rgba(255,255,255,0.55);
  text-align: center;
  letter-spacing: -0.1px;
}

.dash-body {
  background: #3A3936;
  border-radius: 0 0 14px 14px;
  border: 1px solid rgba(255,255,255,0.05);
  border-top: none;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(46,45,42,0.28);
  display: flex; flex-direction: column;
}

/* ── Top nav bar ── */
.dash-topnav {
  display: flex; align-items: center; gap: 32px;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-topnav-logo {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; letter-spacing: -0.8px;
  color: var(--pink);
  line-height: 1; position: relative;
  padding-right: 6px;
  margin-right: 8px;
}
.dash-topnav-logo::after {
  content: ''; position: absolute;
  right: -4px; top: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
}
.dash-topnav-tabs { display: flex; gap: 26px; flex: 1; align-items: center; }
.dash-topnav-tab {
  color: rgba(255,255,255,0.7);
  font-size: 13.5px; font-weight: 500;
  padding: 8px 0; position: relative;
  cursor: default;
  letter-spacing: -0.1px;
}
.dash-topnav-tab.active { color: var(--white); }
.dash-topnav-tab.active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--pink);
  border-radius: 2px;
}
.dash-topnav-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pink); color: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
  position: relative;
  flex-shrink: 0;
}
.dash-topnav-avatar::after {
  content: ''; position: absolute;
  right: -12px; top: 50%;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,0.45);
  transform: translateY(-50%);
}

/* ── Main content ── */
.dash-main { padding: 44px 44px 36px; }

.dash-hello {
  font-size: 34px; font-weight: 700;
  color: var(--white); letter-spacing: -0.8px;
  line-height: 1.1; margin-bottom: 10px;
}
.dash-sub {
  font-size: 14px; color: rgba(255,255,255,0.55);
  margin-bottom: 34px;
}

/* ── Overview container ── */
.dash-overview {
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 24px 28px 28px;
  margin-bottom: 16px;
}
.dash-overview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.dash-overview-label {
  font-size: 17px; font-weight: 600;
  color: var(--white); letter-spacing: -0.2px;
}
.dash-overview-pill {
  padding: 7px 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 7px;
  font-size: 13px; color: var(--white);
  display: inline-flex; align-items: center; gap: 10px;
  cursor: default;
}
.dash-overview-pill::after {
  content: ''; width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,0.6);
}
.dash-overview-alltime {
  font-size: 13px; color: var(--white);
  cursor: default;
}

.dash-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.dash-card {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 18px 22px 20px;
}
.dash-card-label {
  font-size: 13px; color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
  letter-spacing: -0.1px;
}
.dash-card-num {
  font-size: 30px; font-weight: 700;
  color: var(--white); letter-spacing: -0.8px;
  line-height: 1;
}

/* ── Tables row ── */
.dash-tables {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.dash-table-card {
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 24px 26px 28px;
  min-height: 200px;
  display: flex; flex-direction: column;
}
.dash-table-head {
  font-size: 17px; font-weight: 600;
  color: var(--white); letter-spacing: -0.2px;
  margin-bottom: 18px;
}
.dash-table-colhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  margin-bottom: 6px;
}
.dash-table-colhead span {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.3px;
  color: rgba(255,255,255,0.5);
}
.dash-table-empty {
  flex: 1;
  padding: 44px 0 20px;
  text-align: center;
  font-size: 13px; color: rgba(255,255,255,0.5);
  letter-spacing: -0.1px;
}

@media (max-width: 1000px) {
  .dash-intro { grid-template-columns: 1fr; gap: 20px; }
  .dash-topnav { flex-wrap: wrap; padding: 14px 20px; gap: 20px; }
  .dash-topnav-tabs { order: 3; width: 100%; overflow-x: auto; gap: 18px; }
  .dash-main { padding: 32px 24px 28px; }
  .dash-hello { font-size: 26px; }
  .dash-stats-row { grid-template-columns: 1fr 1fr; }
  .dash-tables { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   METHODOLOGY / SOURCES block (benefits page)
════════════════════════════════════════════════ */
.methodology-section {
  background: var(--cream-2);
  padding: 72px 0;
  border-top: 1px solid rgba(46,45,42,0.06);
}
.methodology-wrap {
  max-width: 860px; margin: 0 auto;
  padding: 0 36px;
}
.methodology-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  padding: 36px 40px;
}
.methodology-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.methodology-head h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; letter-spacing: -0.5px; line-height: 1.15;
  color: var(--dark);
}
.methodology-head h3 em { color: var(--pink-dk); font-style: italic; }
.methodology-total {
  font-family: var(--font-display); font-weight: 400;
  font-size: 34px; letter-spacing: -1px; line-height: 1;
  color: var(--dark);
  transition: color 0.3s;
}

/* Household toggle */
.methodology-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(46,45,42,0.06);
  border: 1px solid var(--card-border);
  margin: 4px 0 28px;
}
.meth-pill {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--dark-60);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.meth-pill:hover { color: var(--dark); }
.meth-pill.is-active {
  background: var(--brand-dark);
  color: var(--cream);
  box-shadow: 0 4px 14px rgba(46,45,42,0.18);
}
@media (max-width: 520px) {
  .methodology-toggle { width: 100%; }
  .meth-pill { flex: 1; padding: 10px 8px; font-size: 12px; }
}

.methodology-rows {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--card-border);
}
.methodology-row {
  display: grid; grid-template-columns: 140px 1fr auto;
  gap: 18px; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--card-border);
}
.methodology-row-label { font-size: 14px; font-weight: 600; color: var(--dark); letter-spacing: -0.1px; display: flex; flex-direction: column; gap: 2px; }
.methodology-row-sublabel { font-size: 11.5px; font-weight: 400; color: var(--dark-40); letter-spacing: 0; }
.methodology-row-how { font-size: 13px; color: var(--dark-60); line-height: 1.55; }
.methodology-row-val { font-family: var(--font-display); font-size: 20px; color: var(--dark); letter-spacing: -0.4px; text-align: right; }
.methodology-note {
  font-size: 12.5px; color: var(--dark-60);
  line-height: 1.65; margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--card-border);
}
.methodology-note strong { color: var(--dark); font-weight: 600; }
.methodology-sources {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
  font-size: 11.5px;
}
.methodology-sources a {
  color: var(--pink-dk);
  padding: 4px 10px;
  background: rgba(248,164,174,0.08);
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: -0.1px;
  transition: background 0.2s, color 0.2s;
}
.methodology-sources a:hover { background: rgba(248,164,174,0.18); color: var(--dark); }
@media (max-width: 700px) {
  .methodology-card { padding: 28px 22px; }
  .methodology-row { grid-template-columns: 1fr auto; gap: 10px; }
  .methodology-row-how { grid-column: 1 / 3; }
}

/* ════════════════════════════════════════════════
   APP AVAILABILITY PILLS — "Available on iOS & Android"
════════════════════════════════════════════════ */
.app-avail {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  font-size: 12.5px; color: var(--dark-60);
}
.app-avail-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dark-40);
  margin-right: 4px;
}
.app-avail a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  background: var(--brand-dark); color: var(--white);
  border-radius: 30px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.1px;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), background 0.2s;
}
.app-avail a:hover { transform: translateY(-1px); background: #3f3e3a; }
.app-avail svg { width: 13px; height: 15px; flex-shrink: 0; }

/* Page-hero stat unit — smaller/muted text next to the big yellow number */
.page-hero-stat strong .unit {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0;
  margin-left: 6px;
  vertical-align: baseline;
  display: inline-block;
}

/* Company Admin Portal — logo image + table rows */
.dash-topnav-logo::after { display: none; }  /* was the yellow dot accent for the text wordmark — not needed when using the real logo image */
.dash-topnav-logo img {
  height: 26px;
  width: auto;
  display: block;
}
.dash-table-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dash-table-row:last-child { border-bottom: none; }
.dash-table-name {
  font-size: 13px; font-weight: 500;
  color: var(--white); letter-spacing: -0.1px;
}
.dash-table-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════
   Fix CSS specificity collision on animated counters
   The generic `.page-hero-stat span`, `.hero-stat span`
   rules were overriding the inner [data-count] span,
   making the animated number render at the subtitle size
   instead of the big heading size. Force inheritance.
════════════════════════════════════════════════ */
.page-hero-stat strong [data-count],
.hero-stat strong [data-count],
.stat-num [data-count],
.bstat [data-count] {
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-family: inherit;
}

/* ════════════════════════════════════════════════
   Hero phone as real app screenshot
════════════════════════════════════════════════ */
.phone-img-screen {
  padding: 0 !important;
  min-height: auto !important;
  background: #000 !important;
  display: block;
}
.showpiece-phone-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* ════════════════════════════════════════════════
   Marquee section header (above partner logo strip)
════════════════════════════════════════════════ */
.marquee-section {
  background: var(--cream);
  padding: 80px 36px 36px;
  text-align: center;
}
.marquee-header {
  max-width: 820px;
  margin: 0 auto;
}
.marquee-header .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}
.marquee-header h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  color: var(--dark);
  margin: 0 0 16px;
  letter-spacing: -0.8px;
}
.marquee-header h2 em {
  font-style: italic;
  color: var(--pink-dk);
}
.marquee-header p {
  font-size: 16px;
  color: var(--dark-60);
  line-height: 1.55;
  margin: 0;
}

/* ════════════════════════════════════════════════
   Testimonial avatar initials (for quotes without photos)
════════════════════════════════════════════════ */
.tauthor-initial {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--yellow), var(--pink));
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   Testimonial carousel (replaces static grid)
════════════════════════════════════════════════ */
.testimonials-carousel {
  position: relative;
  padding: 0 56px;
}
.testimonials-viewport {
  overflow: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.testimonials-viewport::-webkit-scrollbar { display: none; }
.testimonials-track {
  display: flex;
  gap: 20px;
  padding-bottom: 4px;
}
.testimonials-carousel .tcard {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.testimonials-carousel .tcard blockquote {
  flex: 1;
}
@media (max-width: 1024px) {
  .testimonials-carousel .tcard { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
  .testimonials-carousel { padding: 0 44px; }
  .testimonials-carousel .tcard { flex-basis: 100%; }
}

.tc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(46,45,42,0.15);
  background: var(--white);
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s;
  box-shadow: 0 6px 18px rgba(46,45,42,0.08);
}
.tc-arrow:hover { background: var(--yellow); border-color: transparent; transform: translateY(-50%) scale(1.05); }
.tc-arrow svg { width: 18px; height: 18px; }
.tc-arrow.tc-prev { left: 0; }
.tc-arrow.tc-next { right: 0; }
.tc-arrow[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

.tc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.tc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(46,45,42,0.18);
  cursor: pointer;
  transition: background 0.2s, width 0.25s;
}
.tc-dot.is-active { background: var(--pink-dk); width: 24px; border-radius: 6px; }

/* ════════════════════════════════════════════════
   Home page — pinned scroll narrative hero
════════════════════════════════════════════════ */
.hero-pin {
  position: relative;
  /* Headline holds, then fades up. ~1.5 viewport heights keeps it brief. */
  height: 160vh;
  background: var(--brand-dark);
}
.hero-pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero-pin .hp-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 32px;
  pointer-events: none;
}

/* Stage 1 — the words */
.hp-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8.6vw, 138px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--cream);
  text-align: center;
  margin: 0;
  max-width: 1200px;
  will-change: opacity, transform;
}
.hp-headline em { color: var(--yellow); font-style: italic; }

/* Stage 2 — the phone */
.hp-phone {
  width: clamp(260px, 26vw, 340px);
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #1c1b18 0%, #2a2926 100%);
  border: 6px solid #3a3833;
  border-radius: 46px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 40px 90px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
  will-change: opacity, transform;
}
.hp-phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  background: #111;
  border-radius: 20px;
  z-index: 4;
}
.hp-phone-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  background: #1a1916;
  display: flex;
  flex-direction: column;
}
.hp-phone-layer.is-active { opacity: 1; }
.hp-layer-home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Brand carousel layer (matches the existing brand-phone styles) */
.hp-phone-layer.hp-layer-brands {
  padding: 46px 12px 16px;
}
.hp-phone-status {
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
  margin-bottom: 14px;
}
.hp-phone-header {
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.hp-phone-header-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--white);
  margin-bottom: 2px;
}
.hp-phone-header-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
}
.hp-phone-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.hp-phone-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: bp-scroll 38s linear infinite;
}

/* Scroll cue at the very bottom of the pinned viewport */
.hp-scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: rgba(247, 242, 234, 0.4);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  z-index: 5;
  will-change: opacity;
}
.hp-scroll-cue::after {
  content: '';
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, currentColor, transparent);
  animation: hp-pulse 2.4s ease-in-out infinite;
}
@keyframes hp-pulse {
  0%, 100% { transform: translateY(-8px); opacity: 0.3; }
  50%      { transform: translateY(8px);  opacity: 1;   }
}

/* ════════════════════════════════════════════════
   400+ brands context section (after the pin)
════════════════════════════════════════════════ */
.brand-context-section {
  background: var(--cream);
  padding: 110px 36px;
  text-align: center;
}
.brand-context-inner {
  max-width: 760px;
  margin: 0 auto;
}
.brand-context-inner .eyebrow {
  display: inline-flex;
  margin-bottom: 16px;
}
.brand-context-inner h2 { margin: 0 0 22px; color: var(--dark); }
.brand-context-inner .section-sub {
  color: var(--dark-60);
  max-width: 540px;
  margin: 0 auto 28px;
}
.brand-context-points {
  list-style: none;
  padding: 0;
  margin: 0 auto 36px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.brand-context-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15.5px;
  color: var(--dark);
  line-height: 1.5;
}
.brand-context-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(248,164,174,0.25);
  flex-shrink: 0;
}
.brand-context-actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 600px) {
  .brand-context-section { padding: 80px 28px; }
  .brand-context-points { padding: 0 12px; }
}

/* ════════════════════════════════════════════════
   Benefits: All 12 categories — scroll-driven phone
   The user scrolls down the page; the image inside the phone
   scrolls in lockstep until Current Sales reaches the bottom of
   the phone screen, at which point the section unsticks.
════════════════════════════════════════════════ */
.cat-phone-section {
  background: var(--pink);
  /* Tall section gives the user room to drive the in-phone scroll */
  height: 240vh;
  position: relative;
}
.cat-phone-inner {
  height: 100%;
}
.cat-phone-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.cat-phone-copy .eyebrow {
  color: var(--brand-dark);
  opacity: 0.85;
}
.cat-phone-copy .eyebrow::before {
  background: var(--brand-dark);
  opacity: 0.55;
}
.cat-phone-copy h2 {
  color: var(--cream);
  margin: 14px 0 18px;
}
.cat-phone-copy h2 em,
.cat-phone-copy .section-heading em {
  color: var(--brand-dark);
  font-style: italic;
}
.cat-phone-copy .section-sub {
  color: rgba(247,242,234,0.85);
  max-width: 520px;
  margin: 0 0 28px;
}
.cat-phone-copy .section-sub strong {
  color: var(--cream);
}
.cat-phone-section .btn-primary {
  background: var(--brand-dark);
  color: var(--cream);
  box-shadow: 0 6px 18px rgba(46,45,42,0.22);
}
.cat-phone-section .btn-primary:hover {
  background: #3f3e3a;
  box-shadow: 0 12px 26px rgba(46,45,42,0.32);
}
.cat-phone-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Realistic iPhone 15 Pro–style mockup ── */
.iphone-mockup {
  --iphone-w: 260px;
  position: relative;
  width: var(--iphone-w);
  aspect-ratio: 9 / 19.5;
  /* outer titanium frame */
  background:
    linear-gradient(135deg, #4a4847 0%, #2e2c2b 45%, #45413f 100%);
  border-radius: calc(var(--iphone-w) * 0.16);
  padding: calc(var(--iphone-w) * 0.028);
  box-shadow:
    /* outer bezel highlight */
    inset 0 0 0 1.5px rgba(255,255,255,0.08),
    /* drop shadow */
    0 28px 60px rgba(46,45,42,0.32),
    0 8px 16px rgba(46,45,42,0.18);
}
.iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: calc(var(--iphone-w) * 0.135);
  overflow: hidden;
  /* faint inner bezel */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.iphone-dynamic-island {
  position: absolute;
  top: calc(var(--iphone-w) * 0.045);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--iphone-w) * 0.36);
  height: calc(var(--iphone-w) * 0.105);
  background: #000;
  border-radius: 999px;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02);
}
.iphone-screen-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.iphone-screen-img {
  display: block;
  width: 100%;
  height: auto;
  /* JS drives translateY based on page scroll */
  transform: translateY(0);
  will-change: transform;
}

/* Side buttons (volume up/down, mute switch, power) */
.iphone-side-btn {
  position: absolute;
  background: linear-gradient(180deg, #3a3837 0%, #1f1d1c 100%);
  z-index: 1;
}
.iphone-side-btn--mute {
  left: calc(var(--iphone-w) * -0.012);
  top: 13%;
  width: calc(var(--iphone-w) * 0.012);
  height: calc(var(--iphone-w) * 0.10);
  border-radius: 1px 0 0 1px;
}
.iphone-side-btn--volume-up {
  left: calc(var(--iphone-w) * -0.012);
  top: 22%;
  width: calc(var(--iphone-w) * 0.012);
  height: calc(var(--iphone-w) * 0.13);
  border-radius: 1px 0 0 1px;
}
.iphone-side-btn--volume-down {
  left: calc(var(--iphone-w) * -0.012);
  top: 35%;
  width: calc(var(--iphone-w) * 0.012);
  height: calc(var(--iphone-w) * 0.13);
  border-radius: 1px 0 0 1px;
}
.iphone-side-btn--power {
  right: calc(var(--iphone-w) * -0.012);
  top: 26%;
  width: calc(var(--iphone-w) * 0.012);
  height: calc(var(--iphone-w) * 0.20);
  border-radius: 0 1px 1px 0;
}

@media (max-width: 960px) {
  .cat-phone-section { height: 220vh; }
  .cat-phone-sticky {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 60px 28px 28px;
    align-content: start;
    align-items: start;
  }
  .iphone-mockup { --iphone-w: 220px; margin: 0 auto; }
}

/* ════════════════════════════════════════════════
   "400+ brands in one platform" section
   Copy left, iPhone with vertically scrolling brands right
════════════════════════════════════════════════ */
.brand-phone-section {
  background: var(--pink);
  padding: 110px 36px;
  overflow: hidden;
}
/* Type tweaks — cream headline + dark italic on pink */
.brand-phone-section .eyebrow {
  color: var(--brand-dark);
  opacity: 0.85;
}
.brand-phone-section .eyebrow::before {
  background: var(--brand-dark);
  opacity: 0.55;
}
.brand-phone-section .section-heading,
.brand-phone-section .brand-phone-copy h2 {
  color: var(--cream);
}
.brand-phone-section .section-heading em,
.brand-phone-section h2 em {
  color: var(--brand-dark);
  font-style: italic;
  position: relative;
  display: inline-block;
}
.brand-phone-section .section-sub,
.brand-phone-section .brand-phone-copy .section-sub {
  color: rgba(247,242,234,0.85);
}
.brand-phone-section .brand-phone-points li {
  color: var(--cream);
}
.brand-phone-dot {
  background: var(--yellow) !important;
  box-shadow: 0 0 0 4px rgba(246,204,70,0.25) !important;
}
.brand-phone-section .btn-primary {
  background: var(--brand-dark);
  color: var(--cream);
  box-shadow: 0 6px 18px rgba(46,45,42,0.22);
}
.brand-phone-section .btn-primary:hover {
  background: #3f3e3a;
  box-shadow: 0 12px 26px rgba(46,45,42,0.32);
}
.brand-phone-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}
.brand-phone-copy h2 { margin: 12px 0 22px; color: var(--dark); }
.brand-phone-copy .section-sub {
  color: var(--dark-60);
  max-width: 520px;
  margin-bottom: 28px;
}
.brand-phone-points {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brand-phone-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15.5px;
  color: var(--dark);
  line-height: 1.5;
}
.brand-phone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(248,164,174,0.25);
  flex-shrink: 0;
}

.brand-phone-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The realistic iPhone mockup on the homepage. Uses the shared
   .iphone-mockup base styling but with a bigger frame and a softer
   ambient shadow. */
.brand-iphone {
  --iphone-w: 300px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.08),
    0 50px 90px rgba(46,45,42,0.25),
    0 20px 40px rgba(246,204,70,0.12),
    0 8px 16px rgba(46,45,42,0.18);
}

/* In-app screen content (lives inside .iphone-screen-inner) */
.brand-app {
  background: #2E2D2A;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 0;
}
.brand-app-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 0;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
.brand-app-time {
  letter-spacing: -0.2px;
}
.brand-app-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.92);
}
.brand-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  margin-bottom: 12px;
}
.brand-app-greeting-label {
  font-size: 11.5px;
  color: rgba(247,242,234,0.55);
  font-weight: 500;
  margin-bottom: 2px;
}
.brand-app-title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: #F7F2EA;
  letter-spacing: -0.3px;
}
.brand-app-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F8A4AE 0%, #D56E7C 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(213,110,124,0.25);
}
.brand-app-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 4px 14px;
  color: rgba(247,242,234,0.45);
  font-size: 13px;
}
.brand-app-search svg { color: rgba(247,242,234,0.45); flex-shrink: 0; }
.brand-app-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 6px 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #F7F2EA;
}
.brand-app-section-cta {
  font-weight: 500;
  font-size: 11px;
  color: #F8A4AE;
}

/* Scrolling brand tiles list inside the app */
.brand-phone-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 0 4px 14px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 92%, transparent 100%);
}
.brand-phone-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: bp-scroll 40s linear infinite;
}
.brand-iphone:hover .brand-phone-track {
  animation-play-state: paused;
}
@keyframes bp-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.bp-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 9px 11px;
  flex-shrink: 0;
}
.bp-tile img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 5px;
  flex-shrink: 0;
}
.bp-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.bp-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #F7F2EA;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-save {
  font-size: 10.5px;
  color: #F8A4AE;
  font-weight: 500;
}

@media (max-width: 960px) {
  .brand-phone-section { padding: 80px 28px; }
  .brand-phone-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .brand-phone-copy { max-width: 560px; margin: 0 auto; }
  .brand-phone-copy .section-sub { margin-left: auto; margin-right: auto; }
  .brand-phone-points { text-align: left; max-width: 420px; margin: 0 auto 32px; }
}
@media (max-width: 480px) {
  .brand-iphone { --iphone-w: 260px; }
}

/* ════════════════════════════════════════════════
   Recognition section (For Employers page)
════════════════════════════════════════════════ */
.recognition-section {
  background: var(--softpink);
  padding: 110px 36px;
  overflow: hidden;
}
.recognition-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.recognition-copy h2 { margin: 12px 0 22px; color: var(--dark); }
.recognition-copy .section-sub {
  color: var(--dark-60);
  max-width: 520px;
  margin-bottom: 36px;
}
.recognition-features {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 0;
}
.recognition-feature {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.recognition-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--white);
  color: var(--pink-dk);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(46,45,42,0.06);
}
.recognition-feature-icon svg { width: 22px; height: 22px; }
.recognition-feature strong {
  display: block;
  font-size: 16px;
  color: var(--dark);
  margin-bottom: 4px;
}
.recognition-feature p {
  font-size: 14.5px;
  color: var(--dark-60);
  line-height: 1.55;
  margin: 0;
}

.recognition-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 620px;
}

/* iPhone mockup wrapping the What's new feed */
.recognition-iphone {
  --iphone-w: 300px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.08),
    0 50px 90px rgba(46,45,42,0.22),
    0 20px 40px rgba(248,164,174,0.18),
    0 8px 16px rgba(46,45,42,0.16);
}
.recognition-app {
  background: #2E2D2A;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 14px;
}
.recog-app-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 0;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
.recog-app-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.92);
}
.recog-app-header {
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin: 0 4px 14px;
}
.recog-app-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: #F7F2EA;
  line-height: 1;
  margin-bottom: 4px;
}
.recog-app-sub {
  font-size: 11.5px;
  color: rgba(247,242,234,0.55);
}

/* What's new feed inside the phone */
.whatsnew-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 6px 4px;
  overflow: hidden;
}
.wn-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;
}
.wn-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.wn-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: rgba(248,164,174,0.18);
  color: #F8A4AE;
}
.wn-tag.pink { background: rgba(248,164,174,0.22); color: #FFB8C2; }
.wn-tag.yellow { background: rgba(246,204,70,0.18); color: #F6CC46; }
.wn-time {
  font-size: 10.5px;
  color: rgba(255,255,255,0.45);
}
.wn-card-title {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  line-height: 1.4;
  font-weight: 500;
}

/* Floating bulk gift cards badge */
.recognition-float-card {
  position: absolute;
  bottom: 48px;
  right: -6px;
  background: var(--white);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow:
    0 20px 50px rgba(46,45,42,0.15),
    0 0 0 1px rgba(46,45,42,0.04);
  min-width: 210px;
  z-index: 3;
  border: 1px solid rgba(46,45,42,0.05);
}
.recognition-float-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--dark-40);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.recognition-float-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.recognition-float-brand {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--dark);
}
.recognition-float-qty {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--pink-dk);
  font-weight: 600;
}
.recognition-float-sub {
  font-size: 12px;
  color: var(--dark-60);
}

@media (max-width: 960px) {
  .recognition-section { padding: 80px 28px; }
  .recognition-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .recognition-copy { max-width: 560px; margin: 0 auto; text-align: center; }
  .recognition-copy .section-sub { margin-left: auto; margin-right: auto; }
  .recognition-features { text-align: left; max-width: 440px; margin: 0 auto; }
  .recognition-float-card { right: 12px; bottom: 30px; }
}
@media (max-width: 480px) {
  .recognition-float-card { right: 0; min-width: 180px; padding: 12px 16px; }
}

/* ════════════════════════════════════════════════
   Partner with us page
════════════════════════════════════════════════ */
.partner-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 48px;
}
.partner-why-card {
  background: var(--white);
  border: 1px solid rgba(46,45,42,0.08);
  border-radius: var(--r-xl);
  padding: 30px 26px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.partner-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(46,45,42,0.08);
  border-color: rgba(248,164,174,0.4);
}
.partner-why-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(46,45,42,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.partner-why-icon svg { width: 24px; height: 24px; }
.partner-why-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--dark);
  margin: 0 0 10px;
  line-height: 1.2;
}
.partner-why-card p {
  font-size: 14.5px;
  color: var(--dark-60);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 1024px) {
  .partner-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .partner-why-grid { grid-template-columns: 1fr; }
}

/* ── Two paths (direct vs affiliate) ── */
.partner-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
.partner-path {
  background: var(--white);
  border: 1px solid rgba(46,45,42,0.08);
  border-radius: var(--r-xl);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
}
.partner-path-tag {
  display: inline-block;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: var(--yellow);
  color: var(--brand-dark);
  margin-bottom: 18px;
}
.partner-path h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 32px);
  color: var(--dark);
  margin: 0 0 12px;
  line-height: 1.15;
}
.partner-path-lead {
  font-size: 15.5px;
  color: var(--dark-60);
  line-height: 1.55;
  margin: 0 0 24px;
}
.partner-path-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.partner-path-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.partner-path-list strong {
  display: block;
  font-size: 14.5px;
  color: var(--dark);
  margin-bottom: 3px;
}
.partner-path-list span {
  font-size: 13.5px;
  color: var(--dark-60);
  line-height: 1.5;
  display: block;
}
.partner-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}
.partner-path-footer {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px dashed rgba(46,45,42,0.12);
  font-size: 13px;
  color: var(--dark-40);
  font-style: italic;
}
@media (max-width: 900px) {
  .partner-paths { grid-template-columns: 1fr; }
  .partner-path { padding: 30px 24px; }
}

/* ── Category chips grid ── */
.partner-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 48px;
}
.partner-cat {
  background: var(--white);
  border: 1px solid rgba(46,45,42,0.08);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
  text-align: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.partner-cat:hover {
  background: var(--yellow);
  border-color: transparent;
  transform: translateY(-2px);
}
@media (max-width: 900px) {
  .partner-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .partner-cats { grid-template-columns: 1fr; }
}

/* ── What you get (dark band, numbered list) ── */
.partner-get-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.partner-get-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.partner-get-item {
  display: flex;
  gap: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.partner-get-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.partner-get-num {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--yellow);
  line-height: 1;
  min-width: 44px;
}
.partner-get-item strong {
  display: block;
  font-size: 17px;
  color: var(--white);
  margin-bottom: 6px;
}
.partner-get-item p {
  font-size: 14.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 960px) {
  .partner-get-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ════════════════════════════════════════════════
   Trial page — full-bleed screenshot in phone frame
════════════════════════════════════════════════ */
.trial-screenshot-phone {
  width: 320px;
  background: #1c1b18;
  border: 6px solid #383632;
  border-radius: 44px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 50px 100px rgba(46,45,42,0.25),
    0 0 60px rgba(248,164,174,0.18);
}
.trial-screenshot-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
@media (max-width: 700px) {
  .trial-screenshot-phone { width: 280px; }
}

/* ════════════════════════════════════════════════
   PROCESS SECTION — timeline + auto-scrolling phone
   ════════════════════════════════════════════════ */
.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 80px;
  align-items: start;
}
.process-phone-wrap {
  position: sticky;
  top: 110px;
  display: flex;
  justify-content: center;
}
.process-phone {
  width: 320px;
  aspect-ratio: 9 / 19.5;
  background: #141414;
  border-radius: 44px;
  padding: 11px;
  box-shadow:
    0 30px 60px -20px rgba(20,20,20,0.35),
    0 8px 24px rgba(20,20,20,0.18),
    inset 0 0 0 1.5px rgba(255,255,255,0.08);
  position: relative;
}
.process-phone-notch {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 26px;
  background: #000;
  border-radius: 18px;
  z-index: 3;
}
.process-phone-screen {
  width: 100%; height: 100%;
  border-radius: 33px;
  overflow: hidden;
  background: #2c2c2c;
  position: relative;
}
.process-phone-track {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  animation: process-phone-scroll 15s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.process-phone-track img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.process-phone:hover .process-phone-track,
.process-phone:focus-within .process-phone-track {
  animation-play-state: paused;
}
@keyframes process-phone-scroll {
  0%,  28%  { transform: translateY(0); }
  33%, 61%  { transform: translateY(-100%); }
  66%, 94%  { transform: translateY(-200%); }
  100%      { transform: translateY(-300%); }
}
@media (prefers-reduced-motion: reduce) {
  .process-phone-track { animation: none; }
}
@media (max-width: 980px) {
  .process-grid { grid-template-columns: 1fr; gap: 56px; }
  .process-phone-wrap { position: static; }
  .process-phone { width: 260px; }
}

/* ════════════════════════════════════════════════
   MOBILE NAV — hamburger button + full-screen drawer
════════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5.5px;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.15); }
.nav-hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 98;
  background: var(--brand-dark);
  display: flex; flex-direction: column;
  padding: 0 28px 40px;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.is-open { transform: translateX(0); }

.mobile-drawer-header {
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 28px;
  flex-shrink: 0;
}
.mobile-drawer-logo img { height: 26px; width: auto; }
.mobile-drawer-close {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mobile-drawer-close:hover { background: rgba(255,255,255,0.12); color: var(--white); }

.mobile-nav-links {
  display: flex; flex-direction: column;
  flex: 1;
}
.mobile-nav-links a {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 400;
  color: rgba(255,255,255,0.5);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: -0.5px; line-height: 1;
  text-decoration: none;
  transition: color 0.2s;
  display: block;
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active { color: var(--white); }

.mobile-nav-actions {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 28px;
}
.btn-mobile-primary {
  display: block; text-align: center;
  padding: 16px 20px; border-radius: 12px;
  background: var(--yellow); color: var(--brand-dark);
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.1px;
  transition: opacity 0.2s;
}
.btn-mobile-primary:hover { opacity: 0.88; }
.btn-mobile-ghost {
  display: block; text-align: center;
  padding: 14px 20px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.65);
  font-size: 14px; font-weight: 500;
  transition: border-color 0.2s, color 0.2s;
}
.btn-mobile-ghost:hover { border-color: rgba(255,255,255,0.35); color: var(--white); }

/* ════════════════════════════════════════════════
   MOBILE FIXES — layout, padding, typography
   All improvements for screens ≤ 700px
════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── Nav ── */
  .nav-hamburger { display: inline-flex; }
  .nav-actions { display: none; }

  /* ── Section padding reductions ── */
  .platform     { padding: 80px 0; }
  .stats-band   { padding: 72px 0; }
  .emp          { padding: 72px 0; }
  .testimonials { padding: 72px 0; }
  .cta-band     { padding: 72px 0; }
  .hero-benefits { padding: 64px 0 48px; }
  .hb2          { padding: 60px 0 48px; }
  .cat-grid-section { padding: 64px 0; }
  .share-section { padding: 72px 0; }
  .benyday-section { padding: 72px 0; }
  .brand-carousel-section { padding: 64px 0; }
  .calc-section { padding: 72px 0; }
  .hscroll-section { padding: 64px 0; }
  .kinetic-section { padding: 80px 0; }
  .customers-section { padding: 60px 0; }

  /* ── Page hero (inner pages) ── */
  .page-hero { padding: 120px 0 72px; }
  .page-hero h1 { letter-spacing: -0.8px; }
  .page-hero p  { font-size: 16px; }
  .page-hero-stats {
    flex-wrap: wrap;
    gap: 0;
    margin-top: 32px;
    padding-top: 24px;
  }
  .page-hero-stat {
    padding-right: 28px;
    margin-right: 28px;
    padding-bottom: 14px;
  }
  .page-hero-stat strong { font-size: 38px; }

  /* ── Bento cards ── */
  .bcard { padding: 24px; }
  .bstat { font-size: 52px; }

  /* ── Stats band numbers ── */
  .stat-num { font-size: 42px; min-width: 100px; }
  .stat-row { gap: 14px; padding: 18px 0; }

  /* ── Hero actions — allow wrapping ── */
  .hero-actions { flex-wrap: wrap; }

  /* ── Platform header ── */
  .platform-header { gap: 24px; margin-bottom: 36px; }

  /* ── Emp section photo tag ── */
  .emp-photo-tag { bottom: 18px; left: 18px; }
  .emp-photo-tag-value { font-size: 24px; }

  /* ── Footer ── */
  .footer-inner  { padding: 60px 20px 32px; gap: 28px; }
  .footer-bottom { padding: 18px 20px; font-size: 12px; }

  /* ── CTA band ── */
  .cta-band h2 { font-size: clamp(24px, 7vw, 38px); }

  /* ── hb2 benefits calculator — hide decorative photo, fix outer grid ── */
  .hb2-inner > div[style] { display: block !important; }
  .hb2-inner > div[style] > img { display: none !important; }
  .hb2-card { border-radius: var(--r-xl) !important; box-shadow: 0 16px 48px rgba(46,45,42,0.12) !important; }
  .hb2-left, .hb2-right { padding: 28px 24px; }

  /* ── Timeline ── */
  .timeline-item { padding: 28px 0; }
  .timeline-num  { font-size: 52px; }

  /* ── Perk + Benefits grids ── */
  .perk-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .bcard-benefit.featured { grid-column: span 1; }

  /* ── Join steps ── */
  .join-steps { grid-template-columns: 1fr; }
  .join-step::after { display: none; }

  /* ── FAQ ── */
  .faq-item h4 { font-size: 16px; }

  /* ── Pricing table — allow horizontal scroll ── */
  .pricing-table-wrap { overflow-x: auto; }
  .pricing-table { min-width: 560px; }
  .pricing-hero-inner { gap: 40px; }
  .plan-card { padding: 32px 24px; }
  .plan-price-big { font-size: 64px; }

  /* ── Page hero stat — use the existing clamp for h1 ── */
  /* ── Guarantee strip ── */
  .guarantee-strip { padding: 28px 20px; }
  .guarantee-strip-inner { gap: 20px; }

  /* ── About story / founders ── */
  .about-story { font-size: 15px; }
  .about-story p:first-of-type::first-letter { font-size: 44px; }

  /* ── Contact / get-started sections ── */
  .flow-frame { gap: 36px; }
  .flow-cta { padding: 32px 24px; }

  /* ── Brand context section ── */
  .brand-context-actions { flex-direction: column; align-items: center; }

  /* ── Customers section padding ── */
  .customers-header { padding: 0 20px; }

  /* ── Marquee section ── */
  .marquee-section { padding: 56px 20px 24px; }

  /* ── Hscroll card size ── */
  .hscroll-card { flex: 0 0 80vw; }
  .hscroll-header { flex-direction: column; gap: 16px; }

  /* ── Cat grid header ── */
  .cat-grid-header { padding: 0 20px; }

  /* ── Process section ── */
  .process-phone { width: 240px; }
}

/* ════════════════════════════════════════════════
   TARGETED MOBILE FIXES — round 2
   Issue-specific fixes from mobile testing.
   Desktop rules are untouched.
════════════════════════════════════════════════ */

/* ── Fix 1: Home — wifi/status icon clipped by iPhone screen corner radius ─ */
@media (max-width: 960px) {
  .brand-app-status { padding: 10px 20px 0; }
  .recog-app-status { padding: 10px 20px 0; }
}

/* ── Fix 2: Home — demo bar on mobile: remove extra text, stretch full width ─ */
@media (max-width: 600px) {
  /* Hide the "$1,368 saved per employee" portion */
  .demo-bar-extra { display: none; }
  /* Stretch bar to full mobile width so remaining text + button fills nicely */
  .demo-bar {
    width: calc(100vw - 32px);
    max-width: none;
    padding: 9px 9px 9px 18px;
    gap: 10px;
    bottom: 16px;
    justify-content: space-between;
  }
  .demo-bar-text { font-size: 12px; line-height: 1.35; flex: 1; }
  .demo-bar-btn  { padding: 8px 15px; font-size: 12px; white-space: nowrap; }
  .demo-bar-close { width: 28px; height: 28px; font-size: 16px; flex-shrink: 0; }
}

/* ── Fix 3: For Employers — swap dashboard for Proof-EVP image on mobile ─ */
/* Hidden on desktop — only appears on mobile */
.dash-mobile-img { display: none; }

@media (max-width: 700px) {
  .dash-intro { padding: 0 20px; }
  /* Hide the full dashboard mockup on mobile */
  .dash-wrap  { display: none !important; }
  /* Show the replacement photo instead */
  .dash-mobile-img {
    display: block;
    width: calc(100% - 40px);
    margin: 0 auto;
    border-radius: var(--r-xl);
    box-shadow: 0 20px 50px rgba(46,45,42,0.15);
    object-fit: cover;
  }
}

/* ── Fix 4: Benefits — disable sticky on cat-phone to prevent partner overlap ─ */
@media (max-width: 700px) {
  .cat-phone-section {
    height: auto;
    padding: 60px 0 40px;
  }
  .cat-phone-inner { height: auto; }
  .cat-phone-sticky {
    position: static;
    height: auto;
    padding: 0 24px 40px;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
  }
  .cat-phone-copy { text-align: center; }
  .cat-phone-copy .section-sub { text-align: left; max-width: 100%; }
  .cat-phone-section .iphone-mockup { --iphone-w: 200px; }
}

/* ── Fix 5: Benefits — carousel logo border no longer clipped on tap ─ */
@media (max-width: 700px) {
  .brand-carousel-section .carousel-wrap {
    padding-top: 6px;
    margin-top: -6px;
  }
}

/* ── Fix 6: Benefits — methodology scrollable compact card ─ */
@media (max-width: 700px) {
  .methodology-section { padding: 56px 0; }
  .methodology-wrap { padding: 0 20px; }
  .methodology-card { padding: 22px 18px; }
  .methodology-head { gap: 10px; }
  .methodology-total { font-size: 26px; }
  .methodology-rows {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 20px;
    /* Fade at bottom signals scrollability */
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  }
  .methodology-row { padding: 10px 0; gap: 8px; }
  .methodology-row-val { font-size: 17px; }
  .methodology-note { font-size: 12px; margin-top: 14px; }
  .methodology-sources { margin-top: 10px; }
  .methodology-sources a { font-size: 11px; padding: 3px 8px; }
}

/* ── Fix 7: Pricing — enterprise image moves below copy on mobile ─ */
@media (max-width: 700px) {
  #enterprise .reveal {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: stretch !important;
  }
  #enterprise .reveal > img {
    order: 2;
    height: 220px !important;
    width: 100% !important;
    object-fit: cover;
  }
  #enterprise .reveal > div { order: 1; }
}

/* Extra-small phones (≤ 480px) */
@media (max-width: 480px) {
  /* Page hero stats stack vertically on tiny screens */
  .page-hero-stats { flex-direction: column; }
  .page-hero-stat {
    border-right: none !important;
    padding-right: 0; margin-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 16px; margin-bottom: 0;
  }
  .page-hero-stat:last-child { border-bottom: none; }
  .page-hero-stat strong { font-size: 34px; }

  /* Hero stats */
  .hero-stat strong { font-size: 30px; }

  /* Section sub max-width relax */
  .section-sub { max-width: 100%; }

  /* Mobile nav font size scale down */
  .mobile-nav-links a { font-size: 30px; }

  /* Brand iphone scale down */
  .brand-iphone  { --iphone-w: 220px; }
  .recognition-iphone { --iphone-w: 260px; }

  /* Benyday grid */
  .benyday-grid { grid-template-columns: 1fr; }

  /* Trust grid */
  .trust-grid { grid-template-columns: 1fr; }

  /* Pricing plan card */
  .plan-card { padding: 28px 20px; }

  /* Stats numbers tighten */
  .stat-num { font-size: 36px; min-width: 80px; }

  /* hb2 inner padding */
  .hb2-inner { padding: 0 16px; }
}