/* ============================================================
   CORAL CLUB — adopted v2 upgrades (loaded AFTER styles.css)
   Only the pieces approved for the official page:
   how (3 steps) · compare modal · member→Creator bridge + impact ·
   sticky mobile CTA · hero ghost-link CTA · product show-more (mobile).
   ============================================================ */

/* Disable iOS/Android double-tap-to-zoom page-wide (keeps pinch-zoom + all scrolling) */
html, body{ touch-action:manipulation; }

/* ---- Hero: de-emphasised secondary CTA (item 8) ---- */
.hero-cta{ align-items:center; gap:14px 20px; }
.btn-ghost-link{
  background:transparent; border:0; box-shadow:none;
  color:var(--teal); font-weight:600; font-size:1rem;
  padding:10px 4px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(14,124,123,.35);
}
.btn-ghost-link:hover{ text-decoration-color:var(--teal); }

/* ---- Hero card — entry-price badge (IM8-style "from X/month") ---- */
.hero-card-price{
  display:inline-flex; align-items:baseline; gap:6px;
  margin:16px 0 2px; padding:8px 15px;
  background:rgba(14,124,123,.09); border:1px solid rgba(14,124,123,.22);
  border-radius:999px; font-size:.82rem; color:var(--ink-2); font-weight:600; letter-spacing:.01em;
}
.hero-card-price b{ color:var(--teal); font-weight:800; font-size:1.02rem; }

/* ---- Sticky mobile conversion bar ---- */
.sticky-cta{ display:none; }
@media (max-width:900px){
  .sticky-cta{
    display:flex; align-items:center; justify-content:center;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:6px 14px calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 18px -16px rgba(10,26,36,.22);
    transform:translateY(130%); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .32s ease, opacity .24s ease, visibility .32s;   /* hidden until scrolled past the hero */
  }
  .sticky-cta.show{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  /* text dropped on mobile; a smaller, docked CTA — calm, clear of the chat + to-top FABs */
  .sticky-cta-txt{ display:none; }
  .sticky-cta-btn{ flex:0 0 auto; white-space:nowrap; min-height:40px; padding:0 22px; font-size:.88rem; }
  body{ padding-bottom:58px; }
}

/* ---- How it works — 3 steps ---- */
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
.how-step{ position:relative; padding:0; overflow:hidden; }
.how-num{
  position:absolute; top:14px; left:14px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:var(--teal); color:#fff; font-weight:800; font-size:1rem;
  display:grid; place-items:center; box-shadow:var(--shadow-sm);
}
.how-media{
  height:200px; background-size:cover; background-position:center;
  background-color:var(--bg-3); border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.how-step h3{ margin:16px 20px 6px; font-size:1.12rem; }
.how-step p{ margin:0 20px 20px; color:var(--ink-2); font-size:.92rem; line-height:1.5; }
@media (max-width:700px){ .how-grid{ grid-template-columns:1fr; } .how-media{ height:220px; } }
.how-step-link{ cursor:pointer; }
.how-step-link:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.how-step-link:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.how-step-link p{ margin-bottom:6px; }
.how-more{ display:inline-block; margin:0 20px 20px; color:var(--teal); font-weight:600; font-size:.86rem; }
.how-step-link:hover .how-more{ text-decoration:underline; }
button.how-more{ background:none; border:0; cursor:pointer; font-family:inherit; padding:0; text-align:left; }
button.how-more:hover{ text-decoration:underline; }

/* ---- Compare modal (opened from step 3) ---- */
.cmp-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.cmp-modal[hidden]{ display:none; }
.cmp-modal-backdrop{ position:absolute; inset:0; background:rgba(6,26,26,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cmp-modal-box{ position:relative; z-index:1; width:min(680px,100%); max-height:92vh; overflow:auto; background:var(--white); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:20px 22px 16px; }
.cmp-modal-close{ position:absolute; top:14px; right:16px; width:38px; height:38px; border:0; background:var(--bg-2); border-radius:50%; font-size:22px; line-height:1; color:var(--ink-2); cursor:pointer; }
.cmp-modal-close:hover{ background:var(--bg-3); }
.cmp-modal .section-head{ margin-bottom:8px; }
.cmp-modal .display-3{ font-size:1.42rem; line-height:1.1; }
.cmp-modal .compare-table{ margin-top:2px; }
.cmp-modal .ct-row{ padding:6px 0; min-height:0; }
.cmp-modal .ct-head{ padding:8px 0; }
.cmp-modal .ct-feat{ font-size:.84rem; line-height:1.2; }
.cmp-modal .ct-us, .cmp-modal .ct-them{ font-size:.84rem; }
.cmp-modal-cta{ margin-top:10px; width:100%; }
@media (max-width:560px){
  .cmp-modal{ padding:8px; }
  .cmp-modal-box{ padding:14px 15px 12px; max-height:96vh; }
  .cmp-modal .section-head{ margin-bottom:0; }
  .cmp-modal .eyebrow{ font-size:.7rem; }
  .cmp-modal .display-3{ font-size:1.1rem; }
  .cmp-modal .compare-table{ margin-top:2px; }
  .cmp-modal .ct-head{ padding:4px 0; }
  .cmp-modal .ct-row{ padding:3px 0; }
  .cmp-modal .ct-feat,
  .cmp-modal .ct-us,
  .cmp-modal .ct-them{ font-size:.77rem; line-height:1.18; }
  .cmp-modal-cta{ margin-top:8px; min-height:46px; }
}

/* ---- Member → Coral Creator bridge ---- */
.cb-card{ display:grid; grid-template-columns:1.15fr .85fr; gap:0; background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); }
.cb-copy{ padding:48px; }
.cb-copy .display-2{ margin:10px 0 16px; }
/* creators title: readable 3-line heading on mobile — wider (less padding) so the font can stay large */
@media (max-width:600px){
  .cb-card .cb-copy{ padding:16px; }
  .cb-copy .display-2{ font-size:1.75rem; line-height:1.15; letter-spacing:-.012em; }
}
.cb-copy .lead{ margin-bottom:8px; }
.cb-copy .cre-em{ color:var(--teal); font-weight:700; }   /* percentages highlighted in-text (no duplicate stat block) */
.cb-points{ list-style:none; padding:0; margin:22px 0 28px; display:flex; flex-wrap:wrap; gap:18px 30px; }
.cb-points li{ display:flex; flex-direction:column; gap:2px; }
.cb-points b{ font-family:var(--ff-display); font-weight:600; font-size:1.7rem; line-height:1; color:var(--teal); }
.cb-points span{ font-size:.82rem; color:var(--ink-3); max-width:160px; }
.cb-cta{ display:flex; align-items:center; gap:14px 24px; flex-wrap:wrap; }
.cb-fine{ margin-top:16px; font-size:.8rem; color:var(--ink-3); }
.cb-visual{ position:relative; min-height:380px; overflow:hidden; background:linear-gradient(155deg,var(--teal-800),var(--teal-900)); display:flex; align-items:flex-end; }
.cb-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 32%; }
.cb-visual::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 55%,rgba(6,64,62,.5)); }
.cb-visual-label{ position:relative; z-index:2; color:#fff; font-weight:600; font-size:.86rem; padding:18px 22px; text-shadow:0 1px 4px rgba(0,0,0,.4); }
@media (max-width:860px){ .cb-card{ grid-template-columns:1fr; } .cb-visual{ min-height:200px; order:-1; } .cb-copy{ padding:30px; } }

/* ---- Impact row + community mini ---- */
.impact-row{ display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; align-items:center; margin-top:72px; padding-top:56px; border-top:1px solid var(--line); }
.impact-img img{ width:100%; height:auto; border-radius:var(--r-xl); box-shadow:var(--shadow); display:block; }
.impact-copy .display-3{ margin:8px 0 12px; }
.community-mini{ display:flex; gap:14px; margin-top:24px; }
.community-mini img{ width:50%; height:172px; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.community-mini img:last-child{ object-fit:contain; background:var(--teal-900); }
@media (max-width:860px){ .impact-row{ grid-template-columns:1fr; gap:24px; margin-top:48px; padding-top:40px; } .impact-img img{ max-width:360px; margin:0 auto; } .community-mini img{ height:140px; } }

/* ---- Product grid — "show more" (first row of 3, desktop + mobile) ---- */
.pg-more{ display:none; margin:22px auto 4px; width:max-content; max-width:100%; }
.product-grid.pg-collapsed .product:nth-child(n+4){ display:none; }

/* ---- FAQ — mobile "show all" (keep first 2, reveal the rest) ---- */
.faq-more{ display:none; margin:18px auto 0; width:max-content; max-width:100%; }
@media (max-width:700px){ .faq-list.faq-collapsed .faq-item:nth-child(n+3){ display:none; } }

/* ---- Reviews carousel (horizontal scroll-snap, desktop + mobile) ---- */
.review-carousel{ position:relative; margin-top:10px; }
.review-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity;
  scroll-padding:0 2px; padding:6px 2px 12px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  overscroll-behavior-x:contain;   /* keep horizontal swipe inside the carousel (no browser back) */
}
/* native swipe scroll on the whole strip, but no double-tap zoom / gesture delay */
.review-track, .review-track *{ touch-action:manipulation; }
.review-track::-webkit-scrollbar{ display:none; }
.review-track .review{ flex:0 0 clamp(280px, 32%, 360px); scroll-snap-align:start; margin:0; }
.rc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); box-shadow:0 5px 18px -4px rgba(10,26,36,.34); cursor:pointer;
  font-size:26px; line-height:1; color:var(--teal); display:grid; place-items:center;
  transition:opacity .2s, background .2s, transform .15s;
}
.rc-arrow:hover{ background:var(--bg-2); }
.rc-arrow:active{ transform:translateY(-50%) scale(.93); }
.rc-arrow[disabled]{ opacity:0; pointer-events:none; }
.rc-prev{ left:-14px; }
.rc-next{ right:-14px; }
@media (max-width:900px){
  .review-track{ gap:14px; }
  .review-track .review{ flex:0 0 86%; padding:20px 18px; }   /* one card + a peek of the next */
  .review-track .review blockquote{ font-size:.92rem; line-height:1.42; }
  .review-track .review .stars{ margin-bottom:10px; }
  .review-track .review figcaption{ margin-top:14px; }
  /* prominent, always-there arrows on mobile — the guaranteed control */
  .rc-arrow{ width:44px; height:44px; font-size:24px; background:var(--white);
    box-shadow:0 3px 14px -2px rgba(10,26,36,.42); border-color:rgba(14,124,123,.4); }
  .rc-prev{ left:8px; }
  .rc-next{ right:8px; }
}

/* ============================================================
   Creators — modern "creator economy" card (dark teal + live reels)
   ============================================================ */
.cb-card.cb-live{ background:radial-gradient(95% 130% at 84% 0%, #0A5654, #06302E); border:0; color:#fff; overflow:hidden; position:relative; }
.cb-live .cb-copy{ padding:56px 48px; }
/* tag pill */
.cb-live .cb-tag{ display:inline-flex; align-items:center; gap:9px; margin-bottom:22px; padding:8px 16px; border-radius:100px;
  background:rgba(95,224,138,.10); border:1px solid rgba(95,224,138,.34); color:#7EE8A0;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.cb-live .cb-dot{ width:7px; height:7px; border-radius:50%; background:#5FE08A; animation:cbPulse 2s infinite; }
@keyframes cbPulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
/* bold headline (Bricolage) */
.cb-live .cb-h1{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800;
  font-size:clamp(2.4rem,5.4vw,4.4rem); line-height:.98; letter-spacing:-.03em; color:#fff; margin:0 0 20px; }
.cb-live .cb-h1 em{ color:#5FE08A; font-style:normal; }
.cb-live .lead{ color:rgba(255,255,255,.80); max-width:44ch; }
.cb-live .lead b{ color:#fff; font-weight:700; }
.cb-live .cb-trust{ margin:18px 0 26px; font-size:.9rem; font-weight:500; color:rgba(255,255,255,.66); }
.cb-live .cb-trust .chk{ color:#5FE08A; font-weight:800; margin-right:4px; }
.cb-live .cb-trust .cb-sep{ margin:0 6px; opacity:.5; }
/* green primary button + scribble */
.cb-btn-green{ background:#5FE08A; color:#06302E; box-shadow:0 12px 26px -10px rgba(95,224,138,.6); }
.cb-btn-green:hover{ background:#6FEB98; box-shadow:0 16px 32px -10px rgba(95,224,138,.7); }
.cb-live .cb-scribble{ font-family:"Caveat",cursive; font-size:1.55rem; color:#7EE8A0; transform:rotate(-4deg); display:inline-block; margin-top:24px; }

/* phone mockups (scoped) */
.cb-phones{ position:relative; min-height:508px; }
.cb-phones .phone{ position:absolute; width:188px; height:384px; border-radius:32px; background:#050f0d; border:7px solid #05100e; box-shadow:0 30px 70px rgba(0,0,0,.5); overflow:hidden; }
.cb-phones .screen{ position:absolute; inset:0; border-radius:27px; overflow:hidden; }
.cb-phones .vid{ position:absolute; inset:0; z-index:0; }
.cb-phones .clip{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.cb-phones .ph-ov{ position:absolute; inset:0; z-index:2; background:radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.12),transparent 55%),linear-gradient(to top,rgba(0,0,0,.5),transparent 42%); }
.cb-phones .ph-progress{ position:absolute; top:11px; left:12px; right:12px; display:flex; gap:4px; z-index:4; }
.cb-phones .ph-progress span{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.34); overflow:hidden; }
.cb-phones .ph-progress span::after{ content:""; display:block; height:100%; width:0; background:#fff; border-radius:3px; }
.cb-phones .ph-progress span.active::after{ animation:cbFill 5s linear infinite; }
@keyframes cbFill{ to{ width:100%; } }
.cb-phones .ph-top{ position:absolute; top:24px; left:14px; right:14px; display:flex; align-items:center; gap:8px; z-index:4; }
.cb-phones .ph-av{ width:28px; height:28px; border-radius:50%; border:2px solid #fff; display:grid; place-items:center; font-weight:800; font-size:12px; color:#0a1a12; background:#fff; }
.cb-phones .ph-name{ font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.cb-phones .ph-live{ margin-left:auto; font-size:9px; font-weight:800; letter-spacing:.08em; color:#06302E; background:rgba(95,224,138,.95); padding:3px 7px; border-radius:5px; }
.cb-phones .react{ position:absolute; right:18px; bottom:70px; font-size:18px; z-index:4; opacity:0; }
.cb-phones .r1{ animation:cbRise 3.6s ease-in infinite; }
.cb-phones .r2{ animation:cbRise 3.6s ease-in infinite 1.2s; right:34px; }
.cb-phones .r3{ animation:cbRise 3.6s ease-in infinite 2.4s; right:12px; }
@keyframes cbRise{ 0%{opacity:0;transform:translateY(0) scale(.5);}18%{opacity:1;}100%{opacity:0;transform:translateY(-130px) scale(1.15);} }
.cb-phones .ph-cap{ position:absolute; left:14px; right:50px; bottom:44px; font-size:11.5px; color:#fff; font-weight:600; line-height:1.35; text-shadow:0 1px 5px rgba(0,0,0,.5); z-index:4; }
.cb-phones .ph-sticker{ position:absolute; bottom:15px; left:14px; background:#fff; color:#0a1a12; font-weight:800; font-size:11px; padding:5px 10px; border-radius:8px; z-index:4; transform:rotate(-3deg); box-shadow:0 4px 14px rgba(0,0,0,.25); }
.cb-phones .p1{ left:6%; top:34px; transform:rotate(-7deg); z-index:2; animation:cbFl1 7s ease-in-out infinite; }
.cb-phones .p2{ right:5%; top:58px; transform:rotate(6deg); z-index:1; animation:cbFl2 8s ease-in-out infinite; }
@keyframes cbFl1{ 0%,100%{transform:rotate(-7deg) translateY(0);}50%{transform:rotate(-7deg) translateY(-12px);} }
@keyframes cbFl2{ 0%,100%{transform:rotate(6deg) translateY(0);}50%{transform:rotate(6deg) translateY(11px);} }
@media (max-width:860px){
  .cb-card.cb-live .cb-copy{ padding:28px 16px 6px; }   /* 16px sides keeps the 3-line title */
  .cb-phones{ min-height:412px; order:2; }
  .cb-phones .p1{ left:8%; } .cb-phones .p2{ right:6%; }
}
@media (max-width:520px){
  .cb-live .cb-h1{ font-size:1.75rem; }
  .cb-phones{ min-height:372px; }
  .cb-phones .phone{ width:136px; height:278px; }
  .cb-phones .p1{ left:6%; top:16px; transform:rotate(-5deg); animation:none; }
  .cb-phones .p2{ right:6%; top:40px; transform:rotate(5deg); animation:none; }
}
@media (prefers-reduced-motion:reduce){
  .cb-phones .phone, .cb-phones .react, .cb-phones .ph-progress span.active::after{ animation:none!important; }
}

/* ---- Ocean Glow campaign: auto pop-up (top-center toast) ---- */
#ocgPopup{
  position:fixed; top:96px; left:50%; transform:translateX(-50%) translateY(-24px);
  z-index:9999; width:min(92vw,460px); box-sizing:border-box;
  background:radial-gradient(120% 150% at 14% 0%,#0E7C7B,#06403E);
  color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:18px;
  padding:15px 46px 15px 18px; box-shadow:0 18px 50px rgba(0,0,0,.30);
  font-family:inherit; font-size:14.5px; line-height:1.5; font-weight:600;
  opacity:0; transition:opacity .35s ease, transform .35s ease;
}
#ocgPopup.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#ocgPopup .ocg-msg b{ color:#FFDE8A; }
#ocgPopup .ocg-close{
  position:absolute; top:9px; right:10px; width:28px; height:28px; padding:0;
  background:rgba(255,255,255,.14); border:none; color:#fff; border-radius:50%;
  font-size:18px; line-height:1; cursor:pointer; transition:background .15s;
}
#ocgPopup .ocg-close:hover{ background:rgba(255,255,255,.28); }
@media (max-width:520px){ #ocgPopup{ top:78px; font-size:13.5px; padding:13px 42px 13px 15px; } }

/* ---- Ocean Glow "limited offer" pill (used in the gift modal + quiz result) ---- */
.ocg-tag{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:11px; padding:7px 12px; border-radius:12px;
  background:#FFE7B3; color:#7A4A00; border:1px solid #F1D080;
  font-weight:800; font-size:12.5px; line-height:1.3; letter-spacing:.01em;
}
.rc-urgency + .ocg-tag{ margin-top:8px; }