/* Section: chooseus-pink — ported verbatim from the live block #bolt-chooseus-pink <style>.
   Only change: literal hexes replaced by exact-match tokens from base.css. */

/* ===== TOKENS / BASE (Pink background ONLY, with BLUE accents like the blue section’s pink accents) ===== */
#bolt-chooseus-pink{
  --pink:var(--mp-pink);
  --pink-dark:var(--mp-pink-dark);
  --blue:var(--mp-blue);              /* accents */
  --text:var(--mp-ink);
  --muted:var(--mp-ink-muted-pink);
  --outline:rgba(255,255,255,.25);
  --glassTop:rgba(255,255,255,.12);
  --glassBot:rgba(255,255,255,.06);
  --mx:50%; --my:50%;
  position:relative; isolation:isolate; overflow:hidden;
  color:var(--text);
  padding:90px 0;
  background: radial-gradient(130% 160% at 70% 0%, var(--pink) 0%, var(--pink-dark) 60%, var(--mp-pink-deep) 100%);
}

/* BG highlights */
#bolt-chooseus-pink::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(780px 780px at 22% 38%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(640px 640px at 80% 72%, rgba(255,255,255,.06), transparent 65%);
  mix-blend-mode:screen; opacity:.5;
  animation:bcpFloat 24s ease-in-out infinite alternate;
}
@keyframes bcpFloat{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-4%,3%) scale(1.05);}
  100%{transform:translate(4%,-3%) scale(1);}
}
#bolt-chooseus-pink::after{
  content:""; position:absolute; inset:-10% -40%; z-index:0;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.15) 50%, transparent 65%);
  transform:skewX(-12deg);
  animation:bcpSheen 7s linear infinite;
}
@keyframes bcpSheen{
  0%{transform:translateX(-40%) skewX(-12deg);}
  100%{transform:translateX(40%)  skewX(-12deg);}
}

/* Mouse-follow glow */
#bolt-chooseus-pink .bcp-mouse{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(360px 360px at var(--mx) var(--my), rgba(255,255,255,.18) 0%, transparent 60%);
  filter: blur(50px);
}

/* Layout 50/50 */
#bolt-chooseus-pink .bcp-inner{
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; gap:40px; grid-template-columns:1fr;
}
@media(min-width:1024px){
  #bolt-chooseus-pink .bcp-inner{ grid-template-columns:5fr 6fr; align-items:center; }
}
#bolt-chooseus-pink .bcp-left{ max-width:620px; }

/* Type */
#bolt-chooseus-pink h2,#bolt-chooseus-pink h3{
  font-family:"DM Serif Display",serif; font-weight:400; color:#fff;
}
#bolt-chooseus-pink .bcp-title{ font-size:40px; line-height:1.2; margin:0 0 14px; }
#bolt-chooseus-pink .bcp-sub{ font-family:"Montserrat",sans-serif; font-size:16px; line-height:1.8; margin:0 0 26px; }

/* Badge */
#bolt-chooseus-pink .bcp-badge{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:6px 14px; margin:0 0 12px;
  border:1px solid var(--blue);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(37,52,153,.15), rgba(208,36,121,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 22px rgba(0,0,0,.28);
  color:var(--muted);
  font:12px/1 "Montserrat",sans-serif; letter-spacing:.14em; text-transform:uppercase;
  position:relative; overflow:hidden;
}
#bolt-chooseus-pink .bcp-badge i{ color:var(--mp-gold); font-style:normal; font-size:13px; }
#bolt-chooseus-pink .bcp-badge em{ font-style:normal; }

/* CTA */
#bolt-chooseus-pink .bcp-cta{
  display:inline-block; padding:12px 30px; border-radius:12px;
  font:600 15px/1 "Montserrat",sans-serif; color:#fff; text-decoration:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 28%),
    linear-gradient(90deg, var(--blue) 0%, var(--pink) 100%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition:all .25s ease;
}
#bolt-chooseus-pink .bcp-cta:hover{
  transform:translateY(-3px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%),
    linear-gradient(90deg, #3a4bd1 0%, #e03b8d 100%);
  box-shadow:0 18px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28);
  filter:saturate(1.05);
}

/* Cards grid 2×2 */
#bolt-chooseus-pink .bcp-grid{
  display:grid; grid-template-columns:repeat(2, minmax(240px,1fr)); gap:22px;
}
@media(max-width:1023px){
  #bolt-chooseus-pink .bcp-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:720px){ #bolt-chooseus-pink .bcp-grid{ grid-template-columns:1fr; } }

/* Cards */
#bolt-chooseus-pink .bcp-card{
  position: relative;
  border:1px solid var(--outline); border-radius:14px;
  background:linear-gradient(180deg, var(--glassTop), var(--glassBot));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 10px 25px rgba(0,0,0,.3);
  backdrop-filter:blur(10px);
  padding:22px 20px; min-height:140px;
  opacity:0; transform:translateY(40px);
  transition:all .65s cubic-bezier(.16,.84,.44,1);
  will-change: transform, box-shadow, border-color, filter;
  transform-style: preserve-3d;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}
#bolt-chooseus-pink .bcp-card::before,
#bolt-chooseus-pink .bcp-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
  opacity:0; transition:opacity .28s ease;
}
#bolt-chooseus-pink .bcp-card::before{
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 18%);
}
#bolt-chooseus-pink .bcp-card::after{
  background: radial-gradient(260px 220px at 18% 10%, rgba(255,255,255,.10), transparent 60%);
  mix-blend-mode:screen;
}
#bolt-chooseus-pink .bcp-card.in-view{ opacity:1; transform:translateY(0); }

#bolt-chooseus-pink .bcp-card:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255,255,255,.35);
  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.18) inset;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  filter: saturate(1.02);
}
#bolt-chooseus-pink .bcp-card:hover::before,
#bolt-chooseus-pink .bcp-card:hover::after{ opacity:1; }

#bolt-chooseus-pink .bcp-card h3{
  font-size:22px; margin:0 0 8px; color:#fff; font-weight:400;
}
#bolt-chooseus-pink .bcp-card p{
  font-family:"Montserrat",sans-serif; font-size:15px; margin:0; color:#fff;
}

/* tiny 3D tilt */
#bolt-chooseus-pink .bcp-card{ --rx:0deg; --ry:0deg;
  transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

/* Ensure no horizontal scroll from grid/cards */
#bolt-chooseus-pink .bcp-right{ min-width:0; }
#bolt-chooseus-pink .bcp-grid{ min-width:0; }
#bolt-chooseus-pink .bcp-card{ min-width:0; }

/* ===== MOBILE POLISH (same style, just more natural) ===== */
@media (max-width: 900px){
  #bolt-chooseus-pink{ padding:70px 0; }
  #bolt-chooseus-pink .bcp-inner{ gap:28px; }
}
@media (max-width: 720px){
  #bolt-chooseus-pink{ padding:58px 0; }

  /* Make left side feel centered and intentional on mobile */
  #bolt-chooseus-pink .bcp-left{ max-width:680px; margin:0 auto; text-align:center; }
  #bolt-chooseus-pink .bcp-badge{ margin:0 auto 12px; }

  /* Keep your typography, just scale it down for comfort */
  #bolt-chooseus-pink .bcp-title{ font-size:30px; line-height:1.18; margin:0 0 12px; }
  #bolt-chooseus-pink .bcp-sub{ font-size:15px; line-height:1.7; margin:0 0 18px; }

  /* CTA feels better as a button on mobile (still same style) */
  #bolt-chooseus-pink .bcp-cta{ width:auto; display:inline-block; }

  /* Cards spacing & height feel less “boxy” on phones */
  #bolt-chooseus-pink .bcp-grid{ gap:14px; }
  #bolt-chooseus-pink .bcp-card{ padding:18px 18px; min-height:0; }
  #bolt-chooseus-pink .bcp-card h3{ font-size:20px; }
  #bolt-chooseus-pink .bcp-card p{ font-size:14px; line-height:1.65; }

  /* On touch devices, disable tilt (it feels weird on mobile) */
  #bolt-chooseus-pink .bcp-card{ transform: translateY(0); }
  #bolt-chooseus-pink .bcp-card:hover{ transform: translateY(-3px) scale(1.01); }
}
@media (max-width: 420px){
  #bolt-chooseus-pink .bcp-title{ font-size:28px; }
  #bolt-chooseus-pink .bcp-sub{ font-size:14.5px; }
}

/* Touch devices: soften heavy hover/tilt without changing desktop */
@media (hover: none){
  #bolt-chooseus-pink .bcp-card{
    transition: box-shadow .28s ease, border-color .28s ease, background .28s ease, opacity .65s cubic-bezier(.16,.84,.44,1), transform .65s cubic-bezier(.16,.84,.44,1);
    transform: translateY(0);
  }
  #bolt-chooseus-pink .bcp-card:hover{
    transform: translateY(0);
  }
  #bolt-chooseus-pink .bcp-card:hover::before,
  #bolt-chooseus-pink .bcp-card:hover::after{ opacity:0; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #bolt-chooseus-pink::before,#bolt-chooseus-pink::after{ animation:none; }
  #bolt-chooseus-pink .bcp-mouse{ display:none; }
}
