/* =============================================================================
   OFFER PAGES (/free-beauty-website, /beauty-website): body.funnel
   =============================================================================
   Loaded after eden.css + home.css. Keeps the centered, one-action funnel
   layout but dresses it in the homepage's studio style: framed column, tight
   spacing, medium-weight Figtree headlines, white hairline cards, flat icons,
   and the dark sections turned into rounded blocks inside the frame.
   ========================================================================== */

/* ---- Type ------------------------------------------------------------------ */
.funnel h1, .funnel h2 { font-weight: 500; }
.funnel h2 { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; }
.funnel h3 { font-weight: 500; letter-spacing: -0.02em; }
.funnel .label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; }
.funnel .label b { font-weight: 600; }
.funnel .muted, .funnel .sec-head p { color: var(--sub); }
.funnel .sec-head p { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.45; }
.funnel .lede { font-weight: 400; color: var(--sub); }

/* ---- Sections: tight rhythm, no heavy rules, one page background ------------- */
.funnel .sec { padding: clamp(40px, 5vw, 72px) 0; border-top: 0; }
.funnel .sec--tight { padding: clamp(32px, 4vw, 56px) 0; }
.funnel .sec--blush, .funnel .sec--white { background: transparent; }
.funnel .sec-head { margin-bottom: clamp(28px, 3.5vw, 44px); max-width: 780px; }
.funnel .sec-head .label { margin-bottom: 14px; }

/* Dark sections become rounded blocks inside the frame */
.funnel .sec--ink { background: transparent; color: var(--ink); padding: clamp(16px, 2vw, 28px) 0; }
.funnel .sec--ink > .container {
  width: calc(100% - 2 * var(--pad)); max-width: calc(var(--frame) - 2 * var(--pad)); margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) clamp(22px, 4vw, 64px); border-radius: calc(var(--radius) + 4px); color: #fff;
  background: radial-gradient(70% 90% at 100% 100%, rgba(176, 101, 118, 0.5), transparent 60%), linear-gradient(160deg, #23232b, #0c0c10);
}
.funnel .sec--ink .muted, .funnel .sec--ink .sec-head p { color: rgba(255, 255, 255, 0.62); }
.funnel .sec--ink .lede { color: rgba(255, 255, 255, 0.7); }
.funnel .sec--ink em { color: var(--rose-ink); }

/* ---- Header: the funnel's single CTA stays rose ------------------------------ */
.funnel .site-header .btn { --b-bg: var(--rose); }
.funnel .site-header .btn:hover { background: var(--rose-deep); }

/* ---- Hero ------------------------------------------------------------------------ */
.funnel .f-hero { padding: clamp(20px, 3.5vw, 48px) 0 clamp(36px, 4vw, 56px); }
.funnel .f-hero .label {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 7px 14px; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem; letter-spacing: 0.08em;
}
.funnel .f-hero h1 { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.25rem); line-height: 0.97; letter-spacing: -0.045em; }
.funnel .f-hero__visual { max-width: 680px; }
.funnel .f-hero__visual img.laptop { border-radius: var(--radius); box-shadow: 0 40px 80px -44px rgba(30, 32, 70, 0.55); }
.funnel .f-hero__visual .prop--blob { display: none; }
.funnel .f-hero__visual .prop--coin { box-shadow: 0 18px 30px -16px rgba(160, 110, 30, 0.55); }
.funnel .f-hero .f-hero__sub { color: var(--sub); font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); max-width: 40ch; }
.funnel .social-proof { color: var(--ink-2); font-weight: 500; }

/* Marquee */
.funnel .marquee-band { border-top: 0; padding: 0 0 clamp(24px, 3vw, 40px); }
.funnel .marquee-label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.86rem; color: var(--sub); }

/* ---- Cards --------------------------------------------------------------------------- */
.funnel .card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.funnel .card, .funnel .pcard, .funnel .logo-chip { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.funnel .card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(30, 32, 70, 0.4); }

/* In short: pillars as three cards */
.funnel .pillars { border-top: 0; gap: 20px; max-width: 1040px; margin-bottom: 32px; }
.funnel .pillars > div { padding: 26px 24px; border: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); border-radius: var(--radius); background: #fff; }
.funnel .pillars b { font-weight: 500; font-size: 1.2rem; }
.funnel .pillars span { color: var(--sub); }
@media (max-width: 760px) { .funnel .pillars > div + div { border-top: 1px solid var(--line-soft); } }

/* Pain cards on the dark block */
.funnel .pcard { border-radius: var(--radius-sm); border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); }
.funnel .pcard:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.07); }
.funnel .pcard h3 { font-size: 1.2rem; }
.funnel .pcard p { color: rgba(255, 255, 255, 0.62); }

/* Copy blocks */
.funnel .copy .lede { color: var(--ink-2); }
.funnel .pull { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-weight: 500; letter-spacing: -0.035em; }

/* Steps */
.funnel .steps { gap: 20px; }
.funnel .step { padding: 26px 24px 28px; }
.funnel .step__num { width: 44px; height: 44px; font-size: 0.85rem; font-weight: 600; margin-bottom: 26px; background: var(--blush); box-shadow: none; color: var(--rose-deep); }
.funnel .step--hl { background: linear-gradient(165deg, #23232b, #0e0e12); color: #fff; border-color: transparent; }
.funnel .step--hl p { color: rgba(255, 255, 255, 0.65); }
.funnel .step--hl .step__num { background: linear-gradient(150deg, #f6d595, #dba243); color: var(--ink); }
.funnel .step h3 { font-size: 1.25rem; }
.funnel .step p { color: var(--sub); }

/* What's included: a single white card of ticks */
.funnel .features { border-top: 0; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 28px; column-gap: 32px; }
.funnel .features li { border-bottom-color: var(--line-soft); font-weight: 400; padding: 16px 0 16px 34px; }
.funnel .features li::before {
  width: 20px; height: 20px; margin-top: -10px; box-shadow: none;
  background: var(--rose) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 20px no-repeat;
}

/* Booking platforms */
.funnel .booking-lede { font-weight: 500; letter-spacing: -0.03em; }
.funnel .logo-chip { border-color: var(--line-soft); border-radius: var(--radius-sm); }
.funnel .logo-chip:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -26px rgba(30, 32, 70, 0.45); }

/* Add-ons */
.funnel .addons { gap: 20px; }
.funnel .addon { padding: 26px; }
.funnel .addon__icon.clay { border-radius: 16px; box-shadow: none; }
.funnel .addon__icon.clay--rose { background: linear-gradient(150deg, #e3a7b3, #b06576); }
.funnel .addon__icon.clay--gold { background: linear-gradient(150deg, #f6d595, #dba243); }
.funnel .addon h3 { font-size: 1.2rem; }
.funnel .addon p { color: var(--sub); }

/* Why work with us: one white card */
.funnel .why-list { border-top: 0; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 6px 28px; margin-bottom: 32px; }
.funnel .why-list li { border-bottom-color: var(--line-soft); }
.funnel .why-list li:last-child { border-bottom: 0; }
.funnel .why-list b { font-weight: 500; }
.funnel .why-list span span { color: var(--sub); }

/* Track record (dark block) */
.funnel .stat-row { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.funnel .stat__num { font-weight: 500; }
.funnel .stat__label { font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.funnel .service-tag { font-weight: 500; border-color: rgba(255, 255, 255, 0.2); }

/* Pricing (single centered card, offer pages) */
.funnel .price-solo { border-radius: var(--radius); background: #fff; border: 1px solid var(--line-soft); box-shadow: none; }

/* FAQ */
.funnel .faq { max-width: 860px; margin: 0 auto; }

/* Final CTA (dark block) */
.funnel .final h2 { font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.5rem); }
.funnel .final .lede { color: rgba(255, 255, 255, 0.65); }
.funnel .final .label { color: var(--rose-ink) !important; }

/* Hero video — muted preview loop + big play button; click plays from the start with sound */
.hero-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #e9dfdd; box-shadow: 0 40px 80px -44px rgba(30, 32, 70, 0.55); isolation: isolate; }
.hero-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video:not(.is-playing)::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(9, 9, 9, 0.28), rgba(9, 9, 9, 0.08) 45%, rgba(9, 9, 9, 0) 70%); pointer-events: none; z-index: 1; }
.hero-video__play { --size: clamp(72px, 13vw, 108px); position: absolute; left: 50%; top: 50%; z-index: 2; width: var(--size); height: var(--size); margin: 0; padding: 0; border: 0; border-radius: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rose); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 clamp(6px, 1.1vw, 10px) rgba(255, 255, 255, 0.28), 0 20px 44px -14px rgba(9, 9, 9, 0.5); transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.25s ease, color 0.25s ease; }
.hero-video__play svg { display: block; width: 52%; height: 52%; fill: currentColor; }
.hero-video__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.75); animation: hero-video-pulse 2.2s ease-out infinite; pointer-events: none; }
.hero-video:hover .hero-video__play, .hero-video__play:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: var(--rose); color: var(--white); }
.hero-video.is-playing .hero-video__play { display: none; }
.hero-video:not(.is-playing) { cursor: pointer; }
@keyframes hero-video-pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-video__ring { animation: none; opacity: 0; } }