/* ============ TOKENS ============ */
:root{
  --coral: #FA705E;
  --coral-dark: #E85A47;
  --navy: #10222F;
  --cream: #FEF9F4;
  --cream-2: #FFFCF8;
  --peach: #FAEEE7;
  --peach-2: #F6E6DD;
  --peach-3: #F7E9E0;
  --peach-4: #FBF2EC;
  --dark-bg: #2C2C2C;
  --gray-700: #555555;
  --gray-600: #757373;
  --gray-500: #848484;
  --white: #FFFFFF;

  /* Beauty Wallet palette */
  --wallet-bg-1: #F6E2D8;
  --wallet-bg-2: #F9EAE1;
  --wallet-bg-3: #FCF3ED;
  --wallet-card: #FFFDFB;
  --wallet-pill-bg: #FBDCD4;
  --wallet-pill-text: #E15A40;
  --wallet-purple-bg: #E4D8F8;
  --wallet-purple-text: #5B32A6;
  --wallet-sticker-peach: #F9DCC5;
  --wallet-sticker-peach-text: #B85536;
  --wallet-sticker-cream: #FBEFD3;
  --wallet-sticker-cream-text: #7A5324;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1200px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-pill: 999px;
}

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

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ============ LOADER ============ */
#loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 120% at 50% 30%, var(--peach) 0%, var(--cream) 55%, var(--cream-2) 100%);
  transition: opacity .7s ease, visibility .7s ease;
}
#loader.loader-hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-rings{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.loader-compass{ width:min(72vw, 520px); height:min(72vw,520px); opacity:.5; animation: spin-slow 40s linear infinite; }
.ring{ fill:none; stroke: var(--peach-2); stroke-width:1; }
.ring-2{ stroke-dasharray: 2 6; }
.ring-3{ stroke-dasharray: 1 4; }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }
.loader-content{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.loader-mark-wrap{ position:relative; width:104px; height:104px; }
.loader-mark-photo{
  width:100%; height:100%; object-fit:contain;
  opacity:0; transform: scale(.4) rotate(-8deg);
  filter: drop-shadow(0 0 0 rgba(250,112,94,0));
  animation: mark-photo-in .85s cubic-bezier(.2,1.4,.4,1) forwards, mark-glow 1.6s ease-in-out .9s 2;
}
@keyframes mark-photo-in{ to{ opacity:1; transform: scale(1) rotate(0); } }
@keyframes mark-glow{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(250,112,94,0)); }
  50%{ filter: drop-shadow(0 0 14px rgba(250,112,94,.45)); }
}
.loader-mark-fallback-svg{ display:none; width:100%; height:100%; position:absolute; inset:0; }
.mark-fallback .loader-mark-fallback-svg{ display:block; }
.mark-circle{ fill:none; stroke: var(--coral); stroke-width:5; stroke-dasharray: 620; stroke-dashoffset: 620; animation: draw-circle 1.1s ease forwards; }
.mark-b{ fill: var(--coral); opacity:0; animation: fade-up .6s ease forwards .9s; }
.mark-c{ stroke: var(--navy); stroke-width:9; fill:none; stroke-linecap:round; stroke-dasharray: 200; stroke-dashoffset:200; animation: draw-c 1.2s ease forwards; animation-delay: 1.1s; }
.mark-spark{ fill: var(--coral); opacity:0; transform-origin:110px 110px; animation: spark-pop .5s ease forwards 1.9s; }
@keyframes draw-circle{ to{ stroke-dashoffset:0; } }
@keyframes draw-c{ to{ stroke-dashoffset:0; } }
@keyframes fade-up{ to{ opacity:1; } }
@keyframes spark-pop{ 0%{ opacity:0; transform:scale(.2) rotate(-40deg); } 60%{ opacity:1; transform:scale(1.3) rotate(0deg); } 100%{ opacity:1; transform:scale(1) rotate(0deg); } }
.loader-text{ display:flex; flex-direction:column; font-family: var(--font-display); font-size: clamp(24px, 4vw, 38px); line-height:1.15; color: var(--navy); }
.lt-line{ opacity:0; transform: translateY(14px); display:inline-block; }
.lt-1{ animation: lt-in .6s ease forwards .85s; }
.lt-2{ color: var(--coral); animation: lt-in .6s ease forwards 1.05s; }
.lt-2 em{ font-style:italic; }
.lt-3{ animation: lt-in .6s ease forwards 1.25s; }
@keyframes lt-in{ to{ opacity:1; transform:translateY(0); } }
.loader-bar{ width:180px; height:3px; background: var(--peach-2); border-radius:99px; overflow:hidden; opacity:0; animation: lt-in .4s ease forwards 1.5s; }
.loader-bar-fill{ height:100%; width:0%; background: var(--coral); border-radius:99px; animation: bar-fill 1s ease forwards 1.55s; }
@keyframes bar-fill{ to{ width:100%; } }

/* ============ REVEAL ON SCROLL ============ */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-delay-1.in-view{ transition-delay:.15s; }
.reveal-delay-2.in-view{ transition-delay:.3s; }

/* ============ HEADER ============ */
.site-header{
  position: sticky; top:0; z-index:500;
  background: rgba(254,249,244,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(16,34,47,0.06);
  transition: box-shadow .25s ease;
}
.site-header.scrolled{ box-shadow: 0 10px 30px -20px rgba(16,34,47,.25); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap:24px; }
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark{ width:42px; height:42px; flex-shrink:0; object-fit:contain; display:block; color: var(--navy); }
.footer-brand .logo{ margin-bottom:4px; }
.footer-brand .logo .logo-mark{ width:44px; height:44px; color: var(--cream); }
.logo-word{ font-family: var(--font-display); font-size:22px; font-weight:600; color: var(--navy); }
.logo-word.light{ color: var(--cream); }
.lw-coral{ color: var(--coral); }

.main-nav{ display:flex; align-items:center; gap:6px; }
.nav-link{ padding:10px 18px; border-radius: var(--radius-pill); font-size:15px; color: var(--navy); transition: background .25s ease, color .25s ease; }
.nav-link:hover{ background: rgba(16,34,47,.06); }
.nav-link.active{ background: var(--navy); color: var(--cream); }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:13px 28px; border-radius: var(--radius-pill); font-size:15px; font-weight:500; border:1.5px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; white-space:nowrap; }
.btn-coral{ background: var(--coral); color:#fff; box-shadow: 0 10px 24px -10px rgba(250,112,94,.6); }
.btn-coral:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(250,112,94,.7); }
.btn-outline{ border-color: var(--coral); color: var(--coral); background:transparent; }
.btn-outline:hover{ background: var(--coral); color:#fff; }
.btn-lg{ padding:16px 34px; font-size:16px; }
.btn-block{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background: var(--navy); border-radius:2px; }

/* ============ HERO ============ */
.hero{ position:relative; padding: 90px 0 110px; overflow:hidden; }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 0.88fr 1.28fr; gap:46px; align-items:center; }
/* Grid items default to min-width:auto, which lets a wide child (here,
   the large serif hero title, or the laptop mockup's own internal content)
   force the column — and everything in it — wider than the grid container
   itself. This "grid blowout" is what was cutting off the right edge of
   the laptop mockup and clipping hero text on real phones. min-width:0
   lets the column actually shrink to the available width as intended;
   width:100% on hero-mock makes sure it fills that shrunk column instead
   of sizing itself off its own (wider) content. */
.hero-copy, .hero-mock{ min-width:0; }
.hero-mock{ width:100%; }

.pill-tag{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border:1px solid rgba(16,34,47,.12); border-radius: var(--radius-pill); font-size:11px; letter-spacing:.04em; color: var(--coral); background: var(--cream-2); margin-bottom:28px; font-weight:600; white-space:nowrap; }
.pill-tag .dot{ width:7px; height:7px; border-radius:50%; background: var(--coral); }

.hero-item{ opacity:0; transform: translateY(22px); display:inline-block; transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.pill-tag.hero-item{ display:inline-flex; }
.hero-sub.hero-item, .hero-line.hero-item{ display:block; }
.hero-stats.hero-item{ display:flex; }
a.hero-item{ display:inline-flex; }
body.page-ready .hi-1{ transition-delay:.05s; }
body.page-ready .hi-2{ transition-delay:.15s; }
body.page-ready .hi-3{ transition-delay:.25s; }
body.page-ready .hi-4{ transition-delay:.35s; }
body.page-ready .hi-5{ transition-delay:.48s; }
body.page-ready .hi-6{ transition-delay:.58s; }
body.page-ready .hi-7{ transition-delay:.68s; }
body.page-ready .hi-8{ transition-delay:.8s; }
body.page-ready .hero-item{ opacity:1; transform:none; }

.hero-title{ font-family: var(--font-display); font-size: clamp(42px, 6vw, 68px); line-height:1.06; font-weight:600; margin:0 0 22px; }
.hero-title em{ color: var(--coral); font-style:italic; font-weight:500; }
.hero-sub{ font-size:18px; line-height:1.6; color: var(--gray-700); max-width:520px; margin:0 0 14px; }
.hero-line{ font-size:17px; color: var(--navy); font-weight:500; margin:0 0 32px; }

.hero-stats{ display:flex; gap:36px; margin-top:48px; padding-top:32px; border-top:1px solid rgba(16,34,47,.1); }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat em{ font-family: var(--font-display); font-style:italic; color: var(--coral); font-size:22px; }
.stat span{ font-size:13px; letter-spacing:.05em; color: var(--gray-600); text-transform:uppercase; }

/* ============ HERO DEVICE MOCK — fully coded, fluid, responsive ============ */
.hero-mock{
  position:relative;
  opacity:0; transform: translateY(30px) scale(.97);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1) .5s, transform .9s cubic-bezier(.2,.7,.2,1) .5s;
  padding-bottom: clamp(46px, 11vw, 110px);
  padding-right: clamp(6px, 2.6vw, 30px);
  max-width: 680px;
  margin: 0 auto;
}
body.page-ready .hero-mock{ opacity:1; transform:none; }

/* Wrapper holds just the laptop, so the glow centers on IT, not on the
   extra space reserved for the phone's overhang */
.hero-laptop-wrap{ position:relative; }

/* Soft pink/peach glow — a true fixed circle, sized independently of the
   laptop's own (flat/wide) box so it never stretches into an oval */
.hero-glow{
  position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width: clamp(320px, 38vw, 560px); height: clamp(320px, 38vw, 560px);
  background: radial-gradient(circle, var(--peach) 0%, var(--peach-2) 45%, transparent 72%);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
.device{ position:relative; z-index:1; }

.device-laptop{
  position:relative;
  background: linear-gradient(180deg,#2b2b2d,#1a1a1c);
  border-radius: clamp(9px, .9vw, 14px) clamp(9px, .9vw, 14px) clamp(2px,.3vw,4px) clamp(2px,.3vw,4px);
  padding: clamp(7px, .8vw, 11px) clamp(7px, .8vw, 11px) clamp(2px,.3vw,4px);
  box-shadow: 0 40px 90px -30px rgba(16,34,47,.4);
  animation: hero-float 6s ease-in-out 1.5s infinite;
}
.device-laptop:hover{ animation-play-state: paused; }
@keyframes hero-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@keyframes card-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } }

.device-notch{ position:absolute; top: clamp(2px,.4vw,4px); left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#000; box-shadow: inset 0 0 0 1px #3a3a3a; }
.device-screen{
  background: var(--cream); border-radius: clamp(3px,.5vw,6px); overflow:hidden;
  aspect-ratio: 16 / 10; display:flex; flex-direction:column;
}

/* Base/keyboard-deck bar: single clean thin bar, wider than the screen */
.device-base{
  height: clamp(7px,1vw,11px);
  background: linear-gradient(180deg,#e6e6e6,#b3b3b3);
  border-radius: 0 0 clamp(5px,.8vw,10px) clamp(5px,.8vw,10px);
  margin: 0 clamp(-14px,-2vw,-24px);
  box-shadow: 0 3px 6px -2px rgba(0,0,0,.3);
}

.dev-topbar{ display:flex; align-items:center; justify-content:space-between; gap: clamp(6px,1vw,14px); padding: clamp(6px,.9vw,10px) clamp(12px,1.8vw,22px); background:var(--cream-2); border-bottom:1px solid rgba(16,34,47,.06); flex-shrink:0; overflow:hidden; }
.dev-logo{ display:flex; align-items:center; gap:6px; font-family: var(--font-display); font-weight:600; font-size: clamp(10px,1vw,13px); white-space:nowrap; }
.dev-logo img{ width: clamp(13px,1.3vw,16px); height: clamp(13px,1.3vw,16px); object-fit:contain; }
.dev-nav{ font-size: clamp(8px,.8vw,10px); color: var(--gray-600); display:flex; gap: clamp(6px,.9vw,12px); white-space:nowrap; }
.dev-nav .active{ background:var(--navy); color:#fff; padding:3px 9px; border-radius:99px; }
.dev-icons{ display:none; align-items:center; gap: clamp(6px,.8vw,10px); color: var(--gray-600); flex-shrink:0; }
.dev-icons svg{ width: clamp(11px,1.1vw,14px); height: clamp(11px,1.1vw,14px); }
@media (min-width:640px){ .dev-icons{ display:flex; } }

.dev-body{
  padding: clamp(10px,1.8vw,20px) clamp(16px,2.6vw,30px) clamp(10px,1.6vw,16px);
  text-align:center; flex:1; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap: clamp(6px,1vw,10px);
}
.dev-eyebrow{ font-size: clamp(7px,.65vw,9px); letter-spacing:.14em; color: var(--coral); flex-shrink:0; }
.dev-eyebrow.small{ display:block; margin-top:10px; }
.dev-greeting{ font-family: var(--font-display); font-size: clamp(15px,1.9vw,23px); margin:0; flex-shrink:0; }
.dev-greeting em{ color: var(--coral); }
.dev-sub{ font-size: clamp(9px,.9vw,11px); color: var(--gray-600); margin:0; flex-shrink:0; }

.dev-search{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid rgba(16,34,47,.08); border-radius:99px;
  padding: clamp(6px,.8vw,9px) clamp(5px,.5vw,7px) clamp(6px,.8vw,9px) clamp(12px,1.5vw,18px);
  font-size: clamp(9px,.95vw,12px); text-align:left; color:var(--gray-700);
  box-shadow: 0 8px 20px -14px rgba(16,34,47,.3);
  transition: box-shadow .3s ease, border-color .3s ease;
  flex-shrink:0;
}
.dev-search:focus-within, .dev-search.active-typing{ border-color: rgba(250,112,94,.4); box-shadow: 0 10px 26px -12px rgba(250,112,94,.35); }
.search-spark{ color: var(--coral); font-size:.9em; flex-shrink:0; }
.dev-search .typed-target{ flex:1; overflow:hidden; text-overflow:clip; white-space:nowrap; min-width:0; }
.dev-search-btn{ background: var(--coral); color:#fff; padding: clamp(5px,.6vw,7px) clamp(9px,1.2vw,16px); border-radius:99px; font-size: clamp(8px,.85vw,10px); white-space:nowrap; flex-shrink:0; }
.mock-caret{ animation: blink 1s step-end infinite; color: var(--coral); }
@keyframes blink{ 50%{ opacity:0; } }

.dev-suggestions{ display:flex; gap: clamp(4px,.6vw,7px); justify-content:center; flex-wrap:nowrap; overflow:hidden; flex-shrink:0; width:100%; max-width:100%; box-sizing:border-box; }
.dev-suggestions span{ font-size: clamp(6px,.66vw,8.5px); border:1px solid rgba(16,34,47,.1); padding: clamp(3px,.45vw,5px) clamp(5px,.8vw,9px); border-radius:99px; color: var(--gray-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34%; transition: background .2s ease, color .2s ease, border-color .2s ease; cursor:default; }
.dev-suggestions span:hover{ background: var(--peach-3); border-color:transparent; color: var(--navy); }

.dev-section-label{ display:flex; align-items:center; justify-content:space-between; text-align:left; flex-shrink:0; }
.dev-section-label span{ display:block; font-size: clamp(6.5px,.62vw,8px); letter-spacing:.13em; color:var(--coral); }
.dev-section-label strong{ font-family: var(--font-display); font-size: clamp(11px,1.2vw,15px); font-weight:600; }

.dev-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(7px,1vw,12px); text-align:left; flex-shrink:1; min-height:0; }
.dev-card{
  background:#fff; border-radius: clamp(7px,.9vw,11px); overflow:hidden; border:1px solid rgba(16,34,47,.06);
  display:flex; flex-direction:column;
  opacity:0; transform: translateY(14px);
  transition: opacity .6s ease var(--card-delay,0s), transform .6s ease var(--card-delay,0s), box-shadow .25s ease, transform .25s ease;
}
.dev-cards.in-view .dev-card{ opacity:1; transform:none; }
.dev-card:hover{ box-shadow: 0 16px 30px -16px rgba(16,34,47,.3); transform: translateY(-4px); }
.dev-card-img{ position:relative; flex:1; min-height: clamp(28px,4.4vw,50px); background: linear-gradient(135deg,var(--peach-2),var(--peach)); overflow:hidden; }
.dev-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-fallback img{ display:none; }
.dev-card-tag{ position:absolute; top:5px; left:5px; background:rgba(16,34,47,.7); color:#fff; font-size:6px; letter-spacing:.06em; padding:2px 5px; border-radius:99px; }
.dev-card p{ font-size: clamp(7.5px,.8vw,10px); margin: clamp(5px,.7vw,7px) clamp(5px,.7vw,7px) 2px; font-weight:600; line-height:1.25; flex-shrink:0; }
.dev-card-meta{ display:block; font-size: clamp(6px,.55vw,7.5px); color:var(--gray-500); margin: 0 clamp(5px,.7vw,7px) 3px; flex-shrink:0; }
.dev-progress{ height:3.5px; background:var(--peach-3); margin: 0 clamp(5px,.7vw,7px) 2px; border-radius:99px; overflow:hidden; flex-shrink:0; }
.dev-progress i{ display:block; height:100%; width:0; background: var(--coral); border-radius:99px; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.dev-progress-num{ display:block; font-size: clamp(6px,.55vw,7.5px); color:var(--coral); font-weight:600; margin: 0 clamp(5px,.7vw,7px) clamp(5px,.7vw,7px); text-align:right; flex-shrink:0; }

/* Phone device — anchored to hero-mock (not the laptop wrapper), pushed
   further outside the laptop's right/bottom edges so it only clips the
   corner instead of covering the laptop's content */
.device-phone{
  position:absolute; right: clamp(-18px,-3.8vw,-38px); bottom: clamp(-30px,-7vw,-64px);
  width: clamp(118px,16vw,176px); height: clamp(226px,29vw,320px);
  background:#1a1a1a; border-radius: clamp(16px,2.4vw,26px); padding: clamp(5px,.8vw,8px);
  box-shadow: 0 30px 60px -20px rgba(16,34,47,.4);
  animation: hero-float 6s ease-in-out 2s infinite;
  z-index:2;
}
.device-phone:hover{ animation-play-state: paused; }
.phone-notch{ position:absolute; top: clamp(6px,.9vw,9px); left:50%; transform:translateX(-50%); width: clamp(28px,4vw,42px); height:4px; border-radius:99px; background:#000; z-index:2; }
.phone-screen{
  background: var(--cream); height:100%; border-radius: clamp(12px,1.8vw,20px);
  padding: clamp(14px,2.1vw,19px) clamp(10px,1.4vw,13px) clamp(9px,1.2vw,12px);
  text-align:center; overflow:hidden; display:flex; flex-direction:column;
  gap: clamp(7px,1vw,10px);
}
.phone-statusbar{ font-size: clamp(7px,.82vw,8.5px); color:var(--navy); font-weight:600; text-align:left; flex-shrink:0; }
.phone-topbar{ display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.phone-logo{ display:flex; align-items:center; gap:4px; font-family: var(--font-display); font-weight:700; font-size: clamp(9px,1.05vw,11.5px); color:var(--navy); }
.phone-logo img{ width: clamp(10px,1.2vw,13px); height: clamp(10px,1.2vw,13px); object-fit:contain; }
.phone-icons{ font-size: clamp(8.5px,1vw,10.5px); color:var(--coral); }
.phone-greeting{ font-family:var(--font-display); font-size: clamp(9.5px,1.1vw,12px); margin: 0; line-height:1.25; flex-shrink:0; }
.phone-greeting em{ color:var(--coral); font-style:italic; }
.phone-sub-line{ font-size: clamp(5.5px,.65vw,7px); color:var(--gray-600); margin: 0; flex-shrink:0; }

.phone-search{
  height: clamp(20px,2.8vw,25px); background:#fff; border-radius:99px; border:1px solid rgba(16,34,47,.08);
  display:flex; align-items:center; gap:5px; padding:0 5px 0 11px;
  font-size: clamp(7px,.82vw,8.5px); color:var(--gray-600); overflow:hidden; white-space:nowrap;
  box-shadow: 0 4px 10px -6px rgba(16,34,47,.25); flex-shrink:0;
}
.phone-search .search-spark{ color:var(--coral); font-size:.85em; flex-shrink:0; }
.phone-search .typed-target-mini{ flex:1; text-align:left; overflow:hidden; white-space:nowrap; min-width:0; }
.phone-search-btn{ background:var(--coral); color:#fff; width: clamp(16px,1.9vw,20px); height: clamp(16px,1.9vw,20px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size: clamp(6.5px,.75vw,7.5px); flex-shrink:0; }

.phone-section-label{ display:flex; flex-direction:column; gap:2px; text-align:left; flex-shrink:0; }
.phone-section-label span{ display:block; font-size: clamp(5px,.58vw,6px); letter-spacing:.1em; color:var(--coral); }
.phone-section-label strong{ font-family:var(--font-display); font-size: clamp(8px,.92vw,9.5px); font-weight:600; line-height:1.2; }

.phone-mini-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(5px,.7vw,7px); flex-shrink:0; }
.pmc-wrap{ text-align:left; }
.pmc{ position:relative; height: clamp(34px,5vw,50px); border-radius: clamp(6px,.8vw,9px); overflow:hidden; background: linear-gradient(135deg,var(--peach-2),var(--peach)); }
.pmc img{ width:100%; height:100%; object-fit:cover; }
.pmc.img-fallback img{ display:none; }
.pmc i{ position:absolute; left:3px; right:3px; bottom:3px; height:2px; border-radius:99px; background:rgba(255,255,255,.5); display:block; overflow:hidden; }
.pmc i::after{ content:''; display:block; height:100%; width:0; background:var(--coral); border-radius:99px; transition: width 1.2s ease; }
.pmc.filled i::after{ width: var(--w); }
.pmc-wrap span{ display:block; font-size: clamp(5.5px,.62vw,6.5px); font-weight:600; color:var(--navy); margin-top:3px; line-height:1.2; }

.phone-bottom-nav{
  margin-top: clamp(6px,1vw,10px);
  padding-top: clamp(9px,1.3vw,13px);
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(16,34,47,.06); flex-shrink:0;
}
.phone-bottom-nav span{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size: clamp(6px,.7vw,7px); color:var(--gray-500); }
.nav-dot{ width: clamp(8px,1.05vw,11px); height: clamp(8px,1.05vw,11px); border-radius:50%; border:1.4px solid var(--gray-500); display:block; }
.phone-bottom-nav span.active{ color:var(--coral); }
.phone-bottom-nav span.active .nav-dot{ border-color:var(--coral); background:var(--coral); }

@media (max-width: 1024px){
  .device-phone{ display:none; }
  .hero-mock{ padding-right:0; }
  /* The full desktop header (logo + nav links + CTA button) needs roughly
     820-930px of room to fit without crowding. Below 1024px — which covers
     common tablet portrait widths like 768px and 834px, not just phones —
     switch to the hamburger menu instead, matching the same breakpoint
     already used for the rest of the layout's 2-column -> 1-column shift. */
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  /* .header-cta sits in DOM order right after .main-nav, both direct
     children of .header-inner (logo, nav, cta, toggle). Previously only
     .main-nav got pulled out into its own absolutely-positioned dropdown
     box, while .header-cta was just re-shown in place — still inside
     .header-inner's original top flex row alongside the logo, with no
     room, so it clipped off the right edge.
     Fix: absolutely-position .header-inner's overflow itself. Since
     .logo and .nav-toggle need to stay pinned to the visible top bar,
     the trick is to let .main-nav and .header-cta both become normal
     (static) flow children of a column-direction .header-inner, and pin
     .logo/.nav-toggle into their own absolutely-positioned top row so
     they don't get pushed down by the now-visible dropdown content. This
     avoids guessing pixel heights entirely — the browser handles all
     the stacking via normal flow. */
  .site-header.nav-open .header-inner{
    flex-direction:column; align-items:stretch; height:auto;
    padding-top:0; padding-bottom:16px;
    position:relative;
  }
  .site-header.nav-open .logo{
    /* .header-inner is also .container, which already carries its own
       left/right padding (32px desktop / 20px at the 760px breakpoint
       below) — so these sit flush at 0, inheriting that padding, rather
       than adding a second offset on top of it. */
    position:absolute; top:16px; left:0;
  }
  .site-header.nav-open .nav-toggle{
    position:absolute; top:16px; right:0;
  }
  .site-header.nav-open .main-nav{
    display:flex; flex-direction:column; gap:4px;
    /* 16px top offset + 42px logo-mark height + 16px clearance below it
       (matches .logo-mark's own fixed size, so this isn't a guess). */
    margin-top: calc(16px + 42px + 16px);
  }
  .site-header.nav-open .header-cta{
    display:flex; justify-content:center;
    margin-top: 12px;
  }
}

/* ============ SECTION GENERIC ============ */
section{ padding: 100px 0; }
.section-head{ text-align:center; max-width:760px; margin:0 auto 56px; }
.eyebrow{ display:block; font-size:12px; letter-spacing:.18em; color: var(--coral); font-weight:600; margin-bottom:16px; }
.eyebrow.light{ color: var(--coral); }
.section-title{ font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 46px); line-height:1.15; font-weight:600; margin:0 0 18px; color: var(--navy); }
.section-title em{ color: var(--coral); font-style:italic; font-weight:500; }
.section-title.dark{ color: var(--navy); }
.section-title.light{ color: var(--cream); }
.section-title.light em{ color: var(--coral); }
.section-sub{ font-size:17px; color: var(--gray-700); line-height:1.6; }
.section-sub.light{ color: #b9bcbe; }

.dark-section{ background: var(--dark-bg); }

.pill-stat{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:60px; }
.pill-stat .line{ height:1px; width:80px; background: rgba(16,34,47,.15); }
.dark-section .pill-stat .line{ background: rgba(255,255,255,.2); }
.pill-stat-text{ display:inline-flex; align-items:center; gap:10px; background: var(--peach-3); padding:12px 26px; border-radius:99px; font-size:13px; color: var(--gray-700); }
.dark-section .pill-stat-text{ background: #46464a; color:#ddd; }
.pdot{ width:7px; height:7px; border-radius:50%; background: var(--coral); display:inline-block; }
.pdot.white{ background:#fff; }

/* ============ PROBLEM / RABBIT DIAGRAM ============ */
.problem{
  background: radial-gradient(140% 100% at 15% -10%, var(--peach-2) 0%, var(--peach) 30%, var(--cream) 62%, var(--cream-2) 100%);
  position: relative;
}
.rabbit-diagram{ position:relative; overflow:hidden; margin-top:60px; opacity:0; transform: translateY(24px) scale(.98); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); border-radius: 18px; }
.rabbit-diagram.in-view{ opacity:1; transform:none; }
.rabbit-diagram-photo{
  display:block; width:100%; height:auto;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  animation: rabbit-float 5.5s ease-in-out 1.2s infinite;
}
.rabbit-diagram:hover .rabbit-diagram-photo{ transform: scale(1.015); animation-play-state: paused; }
@keyframes rabbit-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } }

/* Periodic light sweep across the diagram to draw the eye */
.rabbit-diagram::after{
  content:''; position:absolute; top:0; left:-45%; width:30%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-15deg);
  pointer-events:none; z-index:2;
  animation: rabbit-shimmer 5.5s ease-in-out 1s infinite;
}
@keyframes rabbit-shimmer{
  0%{ left:-45%; opacity:0; }
  6%{ opacity:.9; }
  38%{ left:115%; opacity:0; }
  100%{ left:115%; opacity:0; }
}
.rabbit-fallback{ display:none; text-align:center; padding: 30px 20px; }
.diagram-fallback .rabbit-diagram-photo{ display:none; }
.diagram-fallback .rabbit-fallback{ display:block; }
.rabbit-fallback-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 22px; }
.rabbit-fallback-pills span{
  border:1px solid rgba(16,34,47,.14); background:#fff;
  padding:10px 18px; border-radius:99px; font-size:13.5px; font-weight:600;
  color: var(--navy);
}
.rabbit-fallback p{ font-size:13px; color: var(--gray-700); line-height:2; margin:0 0 10px; }
.rabbit-fallback strong{ color: var(--navy); font-weight:600; }
.rabbit-fallback .rf-note{ font-style:italic; color: var(--coral); font-size:14px; }

/* ============ RABBIT-HOLE — mobile-only editorial list ============
   Quiet numerals (01-07) + serif labels + thin horizontal rules,
   closing on an italic line — a print/editorial treatment rather than
   icon-in-a-circle illustrations, which read as too generic/templated
   for investor-facing use. Hidden entirely above the mobile breakpoint
   — see the @media block further down in this file for display:flex
   and the reveal-triggered stagger animation. */
.rabbit-editorial{
  display:none;
  flex-direction:column;
  margin-top:44px;
}
.re-row{
  display:flex; align-items:baseline; gap:16px;
  padding:18px 2px;
  border-bottom:1px solid rgba(16,34,47,.1);
  opacity:0; transform:translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(var(--re-i) * .08s);
}
.re-row:first-child{ padding-top:2px; }
.re-row-last{ border-bottom:none; }
.rabbit-editorial.re-in-view .re-row,
.rabbit-editorial.re-in-view .re-note{ opacity:1; transform:none; }
.re-num{
  font-family: var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.06em; color: var(--coral); flex-shrink:0;
}
.re-label{ font-family: var(--font-display); font-size:19px; color: var(--navy); }
.re-note{
  font-family: var(--font-display); font-style:italic; color: var(--coral);
  font-size:16px; line-height:1.6; margin:22px 2px 0;
  opacity:0; transform:translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(var(--re-i) * .08s);
}

/* ============ SOLUTION RADIAL ============ */
.radial-diagram{
  position:relative;
  width:min(1600px, 98vw); max-width:100%; min-height:200px;
  margin:0 auto;
}
.radial-video{
  display:block; width:100%; height:auto; /* preserves the video's own natural aspect ratio, no guessing needed */
  position:relative; z-index:0;
}
/* The mobile-cropped video is hidden by default (shown only inside the
   mobile @media block further down) so it never affects desktop/tablet
   layout or downloads unnecessarily there. */
.radial-video-mobile{
  display:none; width:100%; height:auto;
  position:relative; z-index:0;
}
/* Soft vignette on top of the video's own edges, fading smoothly to the
   exact section background color, so the rectangle boundary dissolves
   instead of showing a hard-edged box. */
.radial-diagram::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 58%, var(--dark-bg) 100%);
}
@media (prefers-reduced-motion: reduce){
  .radial-video, .radial-video-mobile{ display:none; }
}

/* ============ FEATURE ROWS ============ */
.platform{
  padding: 110px 0 90px;
  background: #FEF9F4;
}
.platform-head{ text-align:center; padding-bottom:76px; }
.platform-row{ padding: 66px 0; }
.feature-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.feature-grid.reverse{ direction: rtl; }
.feature-grid.reverse > *{ direction: ltr; }
.feature-copy .eyebrow{ margin-bottom:14px; }
.feature-title{ font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); line-height:1.2; margin:0 0 18px; font-weight:600; }
.feature-title em{ color: var(--coral); font-style:italic; }
.feature-copy p{ font-size:16px; color: var(--gray-700); line-height:1.65; margin:0 0 26px; max-width:480px; }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.pill-row span{ border:1px solid rgba(16,34,47,.14); padding:9px 18px; border-radius:99px; font-size:13px; color: var(--gray-700); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.pill-row span:hover{ background: var(--coral); color:#fff; border-color:transparent; }

/* Chat mock (Coterie AI) — interactive typing/reply animation */
.chat-mock{
  background: var(--cream-2); border-radius:32px; padding:30px;
  box-shadow: 0 30px 60px -30px rgba(16,34,47,.25);
  max-width:440px; width:100%; margin:0 auto;
  transition: box-shadow .3s ease;
  animation: card-float 6.5s ease-in-out infinite;
}
.chat-mock:hover{ box-shadow: 0 40px 80px -28px rgba(16,34,47,.32); animation-play-state:paused; }
.chat-head{ font-family: var(--font-display); font-size:23px; font-weight:600; margin-bottom:22px; display:flex; align-items:center; justify-content:space-between; }
.chat-menu-icon{ color: var(--navy); flex-shrink:0; }
.chat-menu-icon svg{ width:21px; height:21px; }
.chat-body{ min-height: 300px; }
.chat-step{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.chat-step.shown{ opacity:1; transform:none; }
.chat-bubble.user{ background: var(--peach-3); border-radius:18px 18px 4px 18px; padding:14px 20px; font-size:15px; line-height:1.4; margin-left:auto; max-width:78%; margin-bottom:18px; }
.chat-typing{ display:none; align-items:center; gap:5px; background:var(--peach-3); width:fit-content; padding:14px 18px; border-radius:18px 18px 18px 4px; margin-bottom:18px; }
.chat-typing.shown{ display:flex; }
.chat-typing span{ width:6px; height:6px; border-radius:50%; background: var(--coral); animation: typing-bounce 1.2s ease-in-out infinite; }
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing-bounce{ 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-4px); opacity:1; } }
.chat-answer{ font-size:15px; color: var(--gray-700); line-height:1.6; margin-bottom:16px; }
.chat-answer strong{ display:block; color:var(--navy); font-size:14px; letter-spacing:.02em; margin-bottom:8px; }
.chat-answer ul{ margin-top:10px; padding-left:18px; list-style:disc; }
.chat-answer li{ margin-bottom:2px; }
.chat-followup{ background: var(--peach-3); border-radius:14px; padding:14px 18px; font-size:14px; margin-bottom:10px; cursor:default; transition: background .2s ease, transform .2s ease; }
.chat-followup:hover{ background:#f0dccb; transform: translateX(3px); }
.chat-followup strong{ display:block; margin-bottom:5px; }
.chat-followup span{ color: var(--gray-600); }
.chat-input{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(16,34,47,.1); border-radius:99px; padding:8px 8px 8px 20px; font-size:14px; color: var(--gray-500); margin-top:16px; transition: border-color .2s ease; }
.chat-input:hover{ border-color: rgba(250,112,94,.4); }
.chat-input-text{ flex:1; }
.chat-input-btn{ width:44px; height:44px; border-radius:50%; background: var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-input-btn svg{ width:20px; height:20px; }

/* Generic phone mock (Explore/Marketplace/My Journey) */
.phone-mock{
  background: var(--cream-2); border-radius:32px; padding:30px;
  box-shadow: 0 30px 60px -30px rgba(16,34,47,.25);
  max-width:440px; width:100%; margin:0 auto;
  transition: box-shadow .3s ease;
  animation: card-float 6.5s ease-in-out infinite;
}
.phone-mock:hover{ box-shadow: 0 40px 80px -28px rgba(16,34,47,.32); animation-play-state:paused; }
.phone-head{ font-family: var(--font-display); font-size:26px; font-weight:600; margin-bottom:16px; }
.phone-tabs{ display:flex; gap:16px; font-size:14.5px; color:var(--gray-600); margin-bottom:16px; border-bottom:1px solid rgba(16,34,47,.08); padding-bottom:12px; flex-wrap:wrap; }
.phone-tabs .active{ color: var(--coral); font-weight:600; position:relative; }
.phone-chips{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.phone-chips span{ font-size:12px; padding:7px 14px; border-radius:99px; background: var(--peach-3); color: var(--gray-600); }
.phone-chips .active{ background: var(--navy); color:#fff; }
.phone-label{ font-size:14.5px; font-weight:600; margin: 14px 0 12px; }
.phone-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pc{ border-radius:10px; padding:8px; font-size:9.5px; color: var(--gray-700); height:74px; display:flex; flex-direction:column; justify-content:flex-end; transition: transform .25s ease, box-shadow .25s ease; }
.pc:hover{ transform: translateY(-3px); box-shadow: 0 12px 20px -12px rgba(16,34,47,.3); }
.pc span{ display:block; font-size:8px; color:var(--gray-500); margin-top:2px; }
.pc-a{ background: linear-gradient(135deg,#e9e0f5,var(--peach)); }
.pc-b{ background: linear-gradient(135deg,var(--peach-2),var(--peach)); }
.pc-c{ background: linear-gradient(135deg,#f5c9a0,var(--peach)); }

/* Explore card — matches the real site's image-block + caption-below layout */
.chat-mock{ animation-delay: 0s; }
.explore-mock{ text-align:left; animation-delay: .6s; }
.phone-head-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.phone-head-row .phone-head{ margin-bottom:0; }
.phone-menu-icon{ color:var(--navy); flex-shrink:0; }
.phone-menu-icon svg{ width:17px; height:17px; }
.phone-label-row{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 12px; }
.phone-label-row .phone-label{ margin:0; }
.see-all{ font-size:14.5px; color:var(--coral); font-weight:600; cursor:default; }
.explore-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.explore-cards.trending{ margin-top:10px; }
.ec{
  position:relative; border-radius:12px; aspect-ratio: 1 / 1.15; overflow:hidden;
  background: linear-gradient(135deg,#e9e0f5,var(--peach));
  transition: transform .25s ease, box-shadow .25s ease;
}
.ec:hover{ transform: translateY(-3px); box-shadow: 0 12px 20px -12px rgba(16,34,47,.3); }
.ec-b{ background: linear-gradient(135deg,var(--peach-2),var(--peach)); }
.ec-c, .ec-d{ background: linear-gradient(135deg,#f5c9a0,var(--peach)); }
.ec-e{ background: linear-gradient(135deg,#e9e0f5,var(--peach-2)); }
.ec-f{ background: linear-gradient(135deg,var(--peach-2),#f5c9a0); }
.ec-actions{ position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:8px; color: var(--navy); opacity:.65; }
.icon-heart svg, .icon-bookmark svg{ width:16px; height:16px; display:block; }
.ec-caption{ position:absolute; left:0; right:0; bottom:0; padding:9px 10px; background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.ec-caption p{ font-size:12px; font-weight:700; margin:0; color:var(--navy); line-height:1.3; }
.ec-caption span{ font-size:10.5px; color:var(--gray-500); }

.provider-card{ display:flex; gap:0; border:1px solid rgba(16,34,47,.08); border-radius:16px; padding:0; margin-bottom:18px; overflow:hidden; transition: transform .25s ease, box-shadow .25s ease; }
.provider-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(16,34,47,.3); }
.provider-img{ position:relative; width:34%; min-width:100px; background: linear-gradient(135deg,#e9e0f5,#d8c8ef); flex-shrink:0; }
.provider-actions{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:8px; color:var(--navy); opacity:.65; }
.provider-actions .icon-heart svg, .provider-actions .icon-bookmark svg{ width:18px; height:18px; }
.provider-card > div:last-child{ padding:16px; flex:1; min-width:0; }
.provider-card p{ font-size:17px; font-weight:700; margin:0 0 4px; }
.provider-rating{ display:block; font-size:14px; color: var(--gray-700); margin-bottom:2px; }
.provider-rating em{ font-style:normal; color: var(--gray-500); }
.provider-meta{ display:block; font-size:13px; color: var(--gray-500); margin-bottom:10px; }
.mini-btn{ display:inline-block; margin-top:4px; background:#e9e0f5; color:#5b3f8f; font-size:13px; font-weight:600; padding:9px 20px; border-radius:99px; transition: background .2s ease; }
.mini-btn:hover{ background:#d8c8ef; }

.market-mock{ animation-delay: 1.2s; }
.market-chips span{ background:#fff; border:1px solid rgba(16,34,47,.12); color: var(--gray-600); }
.market-chips .active{ background: var(--peach-3); color: var(--navy); border-color:transparent; font-weight:600; }

.offer-list{ display:flex; flex-direction:column; gap:12px; }
.offer-item{ display:flex; align-items:center; gap:14px; border-radius:16px; padding:16px 18px; transition: transform .2s ease; }
.offer-item:hover{ transform: translateY(-2px); }
.offer-item.highlight{ background: var(--peach-3); }
.offer-item:not(.highlight){ border:1px solid rgba(16,34,47,.08); }
.offer-icon{ width:44px; height:44px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 6px rgba(16,34,47,.08); color: var(--coral); }
.offer-icon svg{ width:22px; height:22px; }
.offer-img{ width:44px; height:44px; border-radius:12px; background: linear-gradient(135deg,var(--peach-2),var(--peach)); flex-shrink:0; object-fit:cover; }
.offer-item > div{ flex:1; min-width:0; }
.offer-label{ display:block; font-size:11px; letter-spacing:.06em; color: var(--coral); margin-bottom:4px; font-weight:700; }
.offer-amt{ display:block; font-size:22px; font-weight:700; color: var(--navy); }
.offer-name{ display:block; font-size:16px; font-weight:700; color: var(--navy); margin-bottom:2px; }
.offer-amt-sm{ display:block; font-size:16px; color: var(--navy); font-weight:700; margin-bottom:2px; }
.offer-note{ display:block; font-size:13px; color: var(--gray-500); }
.offer-chevron{ font-size:20px; color: var(--navy); flex-shrink:0; }

.journey-mock{ text-align:left; animation-delay: 1.8s; }
.journey-card{ border:1px solid rgba(16,34,47,.09); border-radius:16px; padding:16px 18px; margin-bottom:12px; transition: transform .25s ease, box-shadow .25s ease; }
.journey-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(16,34,47,.3); }
.jc-label{ font-size:13.5px; font-weight:600; display:block; margin-bottom:12px; }
.jc-row{ display:flex; align-items:center; gap:14px; }
.jc-icon{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--navy); }
.jc-icon svg{ width:26px; height:26px; }
.jc-img{ width:44px; height:44px; border-radius:10px; background: linear-gradient(135deg,var(--peach-2),var(--peach)); flex-shrink:0; }
.jc-row > div{ flex:1; min-width:0; }
.jc-row p{ font-size:16px; font-weight:700; margin:0; color: var(--navy); }
.jc-row span{ font-size:13px; color: var(--gray-500); }
.jc-chevron{ font-size:20px; color: var(--navy); flex-shrink:0; }
.journey-list-row{ display:flex; align-items:center; gap:14px; border:1px solid rgba(16,34,47,.09); border-radius:16px; padding:16px 18px; margin-bottom:12px; transition: transform .25s ease, box-shadow .25s ease; }
.journey-list-row:hover{ transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(16,34,47,.3); }
.jlr-text{ flex:1; font-size:16px; font-weight:700; color: var(--navy); }

/* Progress ring — real SVG stroke ring (not a conic-gradient hack), so it
   stays a clean thin donut at any size instead of distorting. */
.progress-ring{ position:relative; width:64px; height:64px; flex-shrink:0; }
.progress-ring-svg{ width:100%; height:100%; transform: rotate(-90deg); }
.pr-bg{ fill:none; stroke: var(--peach-3); stroke-width:6; }
.pr-fill{
  fill:none; stroke: var(--coral); stroke-width:6; stroke-linecap:round;
  stroke-dasharray: 169.65; stroke-dashoffset: 169.65;
  transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1);
}
.progress-ring.animate-in .pr-fill{ stroke-dashoffset: 42.4; }
.pr-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color: var(--navy); }

/* ============================================================
   BEAUTY WALLET — matches reference design (final row of the
   single continuous .platform section — no section-level bg here)
   ============================================================ */
/* ============================================================
   BEAUTY WALLET — its own section/division with a deeper peach
   band, separated from the Platform block above by a visible
   seam (matches the live site's structure).
   ============================================================ */
.wallet-band{
  background: linear-gradient(90deg, #F6E6DD 0%, #FEF9F4 100%);
}
.wallet-block{ padding: 74px 0 96px; }
.wallet-block .feature-grid{ grid-template-columns: 0.92fr 1fr; gap:40px; align-items:center; }

.wallet-block .eyebrow{ font-size:13px; letter-spacing:.1em; font-weight:600; margin-bottom:20px; }
.wallet-title-lines{
  font-size: clamp(38px, 4.4vw, 58px);
  line-height:1.14; font-weight:500; margin:0 0 28px; color: var(--navy);
}
.wallet-title-lines em{ color: var(--coral); font-style:italic; font-weight:500; }
.wallet-block .feature-copy p{ font-size:16px; line-height:1.7; color: var(--gray-700); max-width:430px; margin:0 0 30px; }

.wallet-rule{ display:block; height:1px; width:100%; max-width:430px; background: rgba(16,34,47,.15); margin:0 0 26px; }

.wallet-perks{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 30px; margin-bottom:36px; }
.wallet-perk{ display:inline-flex; align-items:center; gap:9px; font-size:16px; color: var(--navy); }
.wallet-perk svg{ width:23px; height:23px; color: var(--coral); flex-shrink:0; }

/* --- Wallet card --- */
.wallet-visual{ position:relative; max-width:540px; width:100%; margin:0 auto; padding: 26px 62px 40px 20px; animation: card-float 6.5s ease-in-out 2.4s infinite; }
.wallet-mock{
  position:relative; z-index:2;
  background: var(--cream-2);
  border-radius:32px;
  padding:30px 28px 16px;
  box-shadow: 0 40px 70px -32px rgba(16,34,47,.28), 0 6px 20px -12px rgba(16,34,47,.1);
  transition: box-shadow .3s ease;
}
.wallet-mock:hover{ box-shadow: 0 50px 90px -32px rgba(16,34,47,.34), 0 6px 20px -12px rgba(16,34,47,.12); }
.wallet-visual:hover{ animation-play-state: paused; }

.wallet-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px; }
.wallet-head-left{ display:flex; align-items:center; gap:14px; }
.wallet-icon{
  width:52px; height:52px; border-radius:50%;
  background:#FBDDCF; color: var(--coral);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.wallet-icon svg{ width:26px; height:26px; }
.wallet-name{ font-family: var(--font-display); font-size:24px; font-weight:700; letter-spacing:.03em; color: var(--navy); }
.wallet-menu{ color: var(--navy); display:flex; align-items:center; flex-shrink:0; }
.wallet-menu svg{ width:24px; height:24px; }

.wallet-label{ font-size:16px; color: var(--gray-700); margin:0 0 16px; }

.wallet-list{
  border:1px solid rgba(16,34,47,.09);
  border-radius:18px; overflow:hidden; background:#fff;
}
.wallet-row{
  display:flex; align-items:center; gap:16px;
  padding:18px 18px;
  border-top:1px solid rgba(16,34,47,.08);
  transition: background .2s ease;
}
.wallet-row:first-child{ border-top:none; }
.wallet-row:hover{ background: #FFF7F3; }

.w-avatar{
  width:60px; height:60px; border-radius:50%;
  background:#fff; border:1.5px solid rgba(16,34,47,.55);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden; color: var(--navy); text-align:center; line-height:1;
}
.av-sephora{ font-family: var(--font-display); font-size:28px; font-style:italic; font-weight:500; }
.av-alle{ font-family: var(--font-display); font-size:19px; font-weight:500; letter-spacing:.01em; }
.av-skinmedica{ font-size:7px; font-weight:700; letter-spacing:.03em; text-align:center; line-height:1.25; }
.av-provider{ background:#EDEDED; border-color:rgba(16,34,47,.2); color: var(--gray-500); }
.av-provider svg{ width:32px; height:32px; }

.wallet-row-copy{ flex:1; min-width:0; }
.wallet-row-copy p{ font-size:19px; font-weight:700; color: var(--navy); margin:0 0 3px; line-height:1.3; }
.wallet-row-copy span{ display:block; font-size:15px; color: var(--gray-600); line-height:1.4; }

.w-pill{
  background: var(--wallet-pill-bg); color: var(--wallet-pill-text);
  font-size:16px; font-weight:700; letter-spacing:.01em;
  padding:11px 18px; border-radius:99px; white-space:nowrap; flex-shrink:0;
}
.w-pill.purple{ background: var(--wallet-purple-bg); color: var(--wallet-purple-text); }

.wallet-more{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:20px 10px 18px 8px; font-size:17px; color: var(--navy);
}
.wallet-more-chevron{ color: var(--navy); display:flex; }
.wallet-more-chevron svg{ width:22px; height:22px; }

/* --- Stickers --- */
.wallet-sticker{
  position:absolute; z-index:3;
  display:flex; align-items:flex-start; gap:10px;
  padding:20px 22px; border-radius:16px;
  font-size:19px; font-weight:600; line-height:1.3; letter-spacing:.01em;
  box-shadow: 0 20px 34px -18px rgba(16,34,47,.38);
  transform: rotate(var(--r,0deg));
  animation: wallet-sticker-float 6s ease-in-out infinite;
}
@keyframes wallet-sticker-float{
  0%,100%{ transform: rotate(var(--r,0deg)) translateY(0); }
  50%{ transform: rotate(var(--r,0deg)) translateY(-7px); }
}
.wallet-sticker .ws-text{ display:block; }
.wallet-sticker strong{ font-weight:700; }
.ws-spark{ width:19px; height:19px; fill:currentColor; opacity:.85; flex-shrink:0; margin-top:2px; }

.sticker-member{
  --r:-9deg;
  left:-10px; top:47%;
  background: var(--wallet-sticker-peach);
  color: var(--wallet-sticker-peach-text);
  animation-delay:.6s;
}
.sticker-week{
  --r:-4deg;
  right:-10px; top:2%;
  background: var(--wallet-purple-bg);
  color: var(--wallet-purple-text);
  font-size:20px;
  animation-delay:0s;
}
.sticker-week strong{ font-size:1.05em; }
.sticker-points{
  --r:-6deg;
  right:-18px; bottom:6%;
  background: var(--wallet-sticker-cream);
  color: var(--wallet-sticker-cream-text);
  animation-delay:1.2s;
}
.sticker-points strong{ font-size:1.3em; display:block; }

/* ============ WHO IT'S FOR ============ */
.whoitsfor{ background: #FEF9F4; }
.tabs{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:50px; }
.tab-btn{ background: var(--cream-2); border:1px solid rgba(16,34,47,.1); padding:12px 26px; border-radius:99px; font-size:14px; color: var(--navy); transition: background .25s ease, color .25s ease; }
.tab-btn.active{ background: var(--coral); color:#fff; border-color: var(--coral); }
.tab-panel{ display:none; grid-template-columns: 1fr 1fr; gap:50px; align-items:center; }
.tab-panel.active{ display:grid; }
.panel-copy h3{ font-family: var(--font-display); font-size: clamp(26px,3vw,34px); margin:0 0 26px; }
.panel-copy ul li{ padding:14px 0; border-bottom:1px solid rgba(16,34,47,.08); font-size:15px; color: var(--gray-700); position:relative; padding-left:20px; }
.panel-copy ul li::before{ content:''; position:absolute; left:0; top:22px; width:6px; height:6px; border-radius:50%; background: var(--coral); }
/* The four illustration PNGs already contain their own stylized pink
   background shape baked into the image pixels. This container previously
   ALSO applied its own peach background-color + gradient underneath each
   PNG (background-size:contain leaves gaps around the image where that
   container background shows through) — stacking a second pink layer on
   top of the pink that's already part of the artwork, which read as one
   oversized flat pink box. Removing the container's own background means
   only what's actually in each PNG is visible — nothing added by the page. */
.panel-illustration{ height:340px; border-radius: var(--radius-lg); background-position:center; background-size:contain; background-repeat:no-repeat; position:relative; }
.illus-member{ background-image: url('assets/illustrationmember.png'); }
.illus-creator{ background-image: url('assets/illustrationcreator.png'); }
.illus-expert{ background-image: url('assets/illustrationexpert.png'); }
.illus-brand{ background-image: url('assets/illustrationbrand.png'); }

/* ============ WHY IT WORKS ============ */
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.why-card{
  position:relative; overflow:hidden;
  background: var(--peach-4); border-radius: var(--radius-md);
  padding:28px 26px; min-height:224px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.why-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 34px -20px rgba(16,34,47,.3); background:#fff; }
.why-card-icon{
  position:absolute; top:2%; left:50%; transform:translateX(-50%);
  width:64%; max-width:190px; height:auto;
  opacity:.9; pointer-events:none; z-index:0;
  transition: opacity .25s ease;
}
.why-card:hover .why-card-icon{ opacity:1; }
.why-card h4{ position:relative; z-index:1; font-family: var(--font-display); font-size:19px; margin:0 0 10px; color: var(--navy); }
.why-card p{ position:relative; z-index:1; font-size:14px; color: var(--gray-700); line-height:1.6; margin:0; }

/* ============ JOIN CTA ============ */
.join-cta{
  position:relative; text-align:center; overflow:hidden;
  padding: 150px 0;
  background: radial-gradient(120% 160% at 12% 15%, #FFFDFB 0%, #FDF3EC 40%, #FBE7DA 75%, #FAE1D3 100%);
}
.join-cta .container{ position:relative; z-index:2; max-width:760px; }
.join-cta .eyebrow{ font-size:13px; letter-spacing:.14em; margin-bottom:20px; }
.join-cta .section-title{ font-size: clamp(34px, 4.6vw, 56px); margin-bottom:24px; }
.join-cta .section-sub{ font-size:17px; max-width:640px; margin:0 auto 40px; }

.rabbit-bg{
  position:absolute; top:0; right:-6%; z-index:1;
  width: clamp(420px, 36vw, 700px);
  aspect-ratio: 3412 / 4132;
  opacity:.95;
  background: url('assets/rabbitlineart.png') top center/contain no-repeat;
}

/* ============ CONTACT ============ */
.contact{
  position:relative; overflow:hidden;
  padding: 150px 0;
  background: #FEF9F4;
}
.compass-bg{
  position:absolute; left:-11%; bottom:-20%; z-index:0;
  width: clamp(460px, 42vw, 760px);
  height: clamp(460px, 42vw, 760px);
  background: url('assets/compasslineart.png') center/contain no-repeat;
  opacity:.65;
}
.contact-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 0.9fr 1.1fr; gap:60px; align-items:center; }
.contact-form{ background:#fff; border-radius: var(--radius-lg); padding:36px; box-shadow: 0 30px 70px -30px rgba(16,34,47,.25); }
.segment-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.seg{ background: var(--cream); border:1px solid rgba(16,34,47,.1); padding:10px 18px; border-radius:99px; font-size:13px; color: var(--navy); transition: background .2s ease, color .2s ease; }
.seg.active{ background: var(--coral); color:#fff; border-color: var(--coral); }
.contact-form label{ display:block; font-size:13px; color: var(--gray-600); margin-bottom:18px; }
.contact-form input, .contact-form textarea{ display:block; width:100%; margin-top:8px; padding:13px 18px; border-radius:14px; border:1px solid rgba(16,34,47,.12); font-family:inherit; font-size:14px; color: var(--navy); background: var(--cream); resize:vertical; transition: border-color .2s ease; }
.contact-form input:focus, .contact-form textarea:focus{ outline:2px solid var(--coral); outline-offset:1px; }
.form-note{ text-align:center; font-size:13px; color: var(--gray-600); margin: 14px 0 0; min-height:18px; }

/* ============ FOOTER ============ */
.site-footer{ background: var(--dark-bg); color: #b9bcbe; padding: 80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap:36px; margin-bottom:60px; }
.footer-brand p{ margin-top:16px; font-size:14px; line-height:1.6; max-width:280px; }
.footer-col h5{ color:#fff; font-size:12px; letter-spacing:.1em; margin:0 0 18px; }
.footer-col a{ display:block; font-size:14px; margin-bottom:14px; color:#b9bcbe; transition: color .2s ease; }
.footer-col a:hover{ color: var(--coral); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); font-size:13px; flex-wrap:wrap; gap:10px; }
.footer-bottom .tagline{ font-family: var(--font-display); font-style:italic; color: var(--coral); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-mock{ margin-top:40px; }
  .feature-grid{ grid-template-columns:1fr; }
  .feature-grid.reverse{ direction:ltr; }
  /* Some platform rows (Explore, My Journey) place the mockup before the
     copy in the HTML, to sit visual-left on desktop's two-column grid.
     Stacked on mobile that reads as "mockup, then unrelated text below
     it" since the mockups are tall. Forcing copy first (regardless of
     source order) keeps every row consistently "description, then
     visual" on mobile only — desktop's own layout is untouched since
     grid `order` has no effect once grid-template-columns is back to two
     columns above this breakpoint. */
  .feature-copy{ order:1; }
  .feature-visual{ order:2; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .why-grid{ grid-template-columns: 1fr 1fr; }
  .tab-panel.active{ grid-template-columns:1fr; }
  .panel-illustration{ order:-1; height:240px; }

  .wallet-block{ padding: 50px 0 70px; }
  .wallet-block .feature-grid{ grid-template-columns:1fr; gap:52px; }
  .wallet-visual{ margin-top:20px; max-width:540px; }
}

@media (max-width: 760px){
  section{ padding:64px 0; }
  .container{ padding:0 20px; }
  .hero{ padding: 50px 0 70px; }

  /* Section eyebrows/titles and feature-row copy are left-aligned by
     design on desktop (they sit beside a mockup in a two-column grid).
     Stacked full-width on mobile that left edge sits flush against the
     20px container padding, so long italic words in headings ("goals.",
     "perspectives") can crowd or clip the edge on narrower phones.
     Centering just these blocks on mobile only mirrors how the Problem/
     Solution sections already read (which were centered to begin with)
     and gives every heading equal breathing room on both sides. */
  .feature-copy{ text-align:center; }
  .feature-copy p{ margin-left:auto; margin-right:auto; }
  .pill-row{ justify-content:center; }
  .wallet-block .feature-copy{ text-align:center; }
  .wallet-perks{ justify-content:center; }
  .wallet-rule{ margin-left:auto; margin-right:auto; }
  .join-cta{ padding: 90px 0; }
  .rabbit-bg{ opacity:.5; right:-18%; width: clamp(300px, 62vw, 460px); }
  .contact{ padding: 90px 0; }
  .compass-bg{ opacity:.5; left:-14%; bottom:-14%; width: clamp(320px, 60vw, 460px); height: clamp(320px, 60vw, 460px); }
  .platform{ padding: 64px 0 0; }
  .platform-head{ padding-bottom:48px; }
  .platform-row{ padding: 44px 0; }
  .hero-stats{ flex-wrap:wrap; gap:24px; }
  .dev-nav{ display:none; }

  /* .pill-stat-text is a border-radius:99px capsule sized for ONE line of
     text, which is all it ever wraps to on desktop's wide container. On
     a narrow phone the same sentence wraps to 2-3 lines, but a 99px
     radius on a tall multi-line box still tries to draw full half-circle
     ends — producing the swollen, mismatched-oval look. Constraining the
     width and easing the radius down only when the box is tall (mobile)
     turns it back into a soft, correctly-proportioned rounded rectangle. */
  .pill-stat{ padding:0 10px; }
  .pill-stat .line{ width:24px; flex-shrink:0; }
  .pill-stat-text{
    max-width: 78%;
    border-radius: 20px;
    text-align:center;
    line-height:1.45;
    /* Base padding (12px 26px) and font-size (13px) are sized for a
       single-line desktop pill; even after the earlier width/radius fix
       it still read as visually heavy relative to the rest of the mobile
       page. Reducing both here specifically brings it in line with the
       page's other mobile-scaled text. */
    padding: 9px 18px;
    font-size: 11.5px;
    gap: 7px;
  }
  .rabbit-diagram{
    display:none;
    /* On phones, the wide horizontal diagram image (~8:1 aspect ratio)
       can't be both fully visible AND legible at once. Rather than show
       either a shrunk/illegible photo or an icon-in-circle illustration,
       this hides the whole desktop diagram (photo + its own pill
       fallback) and shows .rabbit-editorial instead — a quiet numeral
       list built for phone width, defined right after this section in
       the HTML and styled just above the platform-specific rules
       earlier in this file. */
  }
  .rabbit-editorial{ display:flex; }
  /* A separately-exported, side-cropped version of the same video (same
     content, framed tighter) renders the circle — and its baked-in
     labels — larger within a phone's narrower width than the desktop
     video does when simply shrunk to fit. Swap to that cropped video on
     mobile instead of the desktop one; bleeding the box slightly past
     the container's normal side padding (matching the earlier size-boost
     approach) pushes it a bit larger still, fully contained and centered. */
  .radial-diagram{
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin: 0 -20px;
    overflow: hidden;
  }
  .radial-video{ display:none; }
  .radial-video-mobile{ display:block; }

  .why-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .footer-brand{ grid-column: 1 / -1; }
  .segment-row{ gap:8px; }
  .seg{ padding:8px 14px; font-size:12px; }

  .wallet-block{ padding: 46px 0 64px; }
  .wallet-perks{ gap:12px 22px; }
  .wallet-perk{ font-size:14.5px; }
  .wallet-perk svg{ width:21px; height:21px; }
  .wallet-visual{ max-width:460px; padding: 26px 44px 34px 16px; }
  .chat-mock, .phone-mock{
    padding:20px;
    /* Previously these stretched to fill (viewport - 40px container
       padding) with only ~22px internal padding — on a ~390px phone
       that's nearly edge-to-edge, so the mock read as "the whole
       screen" rather than a contained card sitting on the page.
       max-width plus this side margin gives visible page background on
       both sides, so the card's own rounded corners and shadow are
       actually visible as a distinct shape, closer to how it reads on
       desktop next to its copy. */
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  /* .chat-mock/.phone-mock internals use fixed desktop font sizes (23px
     headings, 15-17px body, etc.) meant for a 440px-wide panel sitting
     beside body copy in a two-column grid. Stacked full-width on a
     ~360-390px phone the panel itself is barely narrower than desktop,
     but nothing INSIDE it shrinks — so relative to the rest of the
     (properly mobile-scaled) page, this content reads as oversized /
     "zoomed in". Scaling these down, matching the ratio already used for
     .wallet-row-copy just above, brings them in line with everything
     else on the page at this width. */
  .chat-head{ font-size:19px; margin-bottom:16px; }
  .chat-bubble.user{ font-size:13.5px; padding:12px 16px; }
  .chat-answer{ font-size:13.5px; margin-bottom:12px; }
  .chat-answer strong{ font-size:12.5px; }
  .chat-followup{ font-size:12.5px; padding:12px 15px; }
  .chat-input{ font-size:12.5px; padding:7px 7px 7px 16px; }
  .chat-input-btn{ width:38px; height:38px; }
  .phone-head{ font-size:21px; }
  .phone-tabs{ font-size:12.5px; gap:12px; margin-bottom:12px; padding-bottom:10px; }
  .phone-chips span{ font-size:11px; padding:6px 12px; }
  .phone-label{ font-size:12.5px; margin:12px 0 10px; }
  .see-all{ font-size:12.5px; }
  .ec-caption p{ font-size:11px; }
  .ec-caption span{ font-size:9.5px; }
  .provider-card p{ font-size:15px; }
  .provider-rating{ font-size:12.5px; }
  .provider-meta{ font-size:11.5px; }
  .mini-btn{ font-size:11.5px; padding:8px 16px; }
  .offer-label{ font-size:10px; }
  .offer-amt{ font-size:19px; }
  .offer-name{ font-size:14px; }
  .offer-amt-sm{ font-size:14px; }
  .offer-note{ font-size:11.5px; }
  .jc-label{ font-size:12px; margin-bottom:10px; }
  .jc-row p{ font-size:14px; }
  .jc-row span{ font-size:11.5px; }
  .jlr-text{ font-size:14px; }
  .wallet-mock{ padding:24px 20px 10px; }
  .wallet-icon{ width:44px; height:44px; }
  .wallet-icon svg{ width:22px; height:22px; }
  .wallet-name{ font-size:20px; }
  .wallet-row{ padding:15px 15px; gap:13px; }
  .w-avatar{ width:50px; height:50px; }
  .av-sephora{ font-size:24px; }
  .av-alle{ font-size:16px; }
  .av-skinmedica{ font-size:6px; }
  .av-provider svg{ width:27px; height:27px; }
  .wallet-row-copy p{ font-size:16.5px; }
  .wallet-row-copy span{ font-size:13.5px; }
  .w-pill{ font-size:14px; padding:10px 15px; }
  .wallet-sticker{ font-size:15px; padding:15px 17px; gap:8px; border-radius:14px; }
  .sticker-week{ font-size:16px; }
  .ws-spark{ width:14px; height:14px; }
  .sticker-member{ left:-2px; top:46%; }
  .sticker-week{ right:-2px; top:0%; }
  .sticker-points{ right:-6px; bottom:2%; }
}

@media (max-width: 480px){
  .hero-title{ font-size: 38px; }
  .dev-cards{ grid-template-columns: 1fr 1fr; }
  .dev-cards .dev-card:nth-child(3){ grid-column: span 2; }

  .chat-mock, .phone-mock{ padding:16px; max-width:300px; }
  .wallet-visual{ max-width:400px; padding: 18px 30px 26px 10px; }
  .wallet-mock{ padding:20px 16px 8px; }
  .wallet-icon{ width:40px; height:40px; }
  .wallet-icon svg{ width:20px; height:20px; }
  .wallet-name{ font-size:17px; }
  .wallet-row{ padding:13px 12px; gap:11px; }
  .w-avatar{ width:44px; height:44px; }
  .av-sephora{ font-size:21px; }
  .av-alle{ font-size:14px; }
  .av-skinmedica{ font-size:5.5px; }
  .av-provider svg{ width:24px; height:24px; }
  .wallet-row-copy p{ font-size:15px; }
  .wallet-row-copy span{ font-size:12.5px; }
  .w-pill{ font-size:12px; padding:9px 13px; }
  .wallet-sticker{ font-size:13px; padding:13px 15px; gap:7px; }
  .sticker-week{ font-size:14px; }
  .ws-spark{ width:13px; height:13px; }
  .sticker-member{ left:0; }
  .sticker-week{ right:0; }
  .sticker-points{ right:-2px; }
}