/*
 * Cleo product-page module vocabulary.
 *
 * Geometry is measured from Cleo's flagship product page (web.meetcleo.com/autopilot)
 * and is identical on card / money-iq / save. Section heights, in CSS pixels:
 *
 *   module                 1440x900   390x844
 *   sign-up   (hero)            900       844   (= 100vh)
 *   intro                       612       663
 *   highlight                   900       515
 *   block-grid                  452       489   (+72px margin above and below)
 *   carousel-features           900       688
 *   immersive                   900      1021
 *   header                      417       360
 *   qr                          653       575
 *   footnotes                    80       121
 *
 * Type scale: h1 54.4px @1440 / 32.256px @390. h2 48px @1440 / 32px @390.
 * The same numbers are already calibrated in products-page.css for products.html;
 * this file restates them under role-named .cleo-* classes so every product page
 * (Vedika, Lal Kitab, Pricing, palm, tarot, numerology) can reuse one vocabulary.
 *
 * Transitions use Cleo's own computed contract: .2s linear.
 */

.cleo-page {
  --cleo-ink: #27242b;
  --cleo-paper: #f8f6f2;
  --cleo-muted: #6e686f;
  --cleo-accent: #7052a4;
  --cleo-line: rgba(39, 36, 43, .18);
  --cleo-radius: 40px;
  color: var(--cleo-ink);
  background: var(--cleo-paper);
}

.cleo-page .product-detail,
.cleo-page main { overflow: clip; }

/* Fluid type solved for Cleo's two measured widths. */
.cleo-page h1 { font: 300 clamp(32.256px, calc(24.032px + 2.1089vw), 54.4px)/1.0625 PPNeue, Arial, sans-serif; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.cleo-page h2 { font: 300 clamp(32px, calc(26.057px + 1.5238vw), 48px)/1.083 PPNeue, Arial, sans-serif; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.cleo-page h3 { font: 450 17px/1.25 PPNeue, Arial, sans-serif; margin: 0; }

.cleo-kicker { display: flex; align-items: center; gap: 9px; margin: 0; font: 500 12px/1.2 Simplon, monospace; letter-spacing: .1em; text-transform: uppercase; }
.cleo-kicker::before { content: ""; width: 6px; height: 6px; flex: none; background: currentColor; }

.cleo-pill {
  min-height: 60px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 26px; border: 1px solid var(--cleo-ink); border-radius: 30px;
  color: #fff; background: var(--cleo-ink); text-decoration: none;
  transition: color .2s linear, background .2s linear, border-color .2s linear, transform .2s linear;
}
.cleo-pill:hover, .cleo-pill:focus-visible { color: var(--cleo-ink); background: var(--cleo-paper); }
.cleo-pill--quiet { color: var(--cleo-ink); background: transparent; border-color: var(--cleo-line); }
.cleo-pill--quiet:hover, .cleo-pill--quiet:focus-visible { color: #fff; background: var(--cleo-ink); }

/* Round-2 ledger item 23 (owner): "Visit the Shop" pill CTA inside the mega-menu Shop panel.
   Explicit brand-purple rather than reusing .cleo-pill's var(--cleo-ink), which is only defined
   inside a .cleo-page ancestor the mega-menu panel does not have. */
.mega-shop-cta {
  grid-column: 1 / -1;
  min-height: 60px;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border: 1px solid #3e246f;
  border-radius: 30px;
  color: #fff;
  background: #3e246f;
  text-decoration: none;
  font: 500 13.6px/1.2 PPNeue, Arial, sans-serif;
  transition: color .2s linear, background .2s linear;
}
.mega-shop-cta:hover, .mega-shop-cta:focus-visible { color: #3e246f; background: #e5dee7; }

/* 0 — sign-up module. Full-bleed film, copy in the upper third, 100vh. */
.cleo-hero {
  position: relative; min-height: 100vh; margin: 0; overflow: hidden;
  display: grid; align-content: start; padding: 176px 32px 40px;
  color: var(--cleo-ink); isolation: isolate;
}
/* One swappable background layer. Cleo renders this module's background as a
   three.js <canvas>; anything full-bleed dropped in here inherits the geometry. */
.cleo-hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cleo-hero__stage > video, .cleo-hero__stage > img, .cleo-hero__stage > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cleo-hero > :not(.cleo-hero__stage) { position: relative; z-index: 1; }
/* Cleo's hero reads as dark ink on a light field at the left, product film at the right.
   The Autopilot film is warm and dark, so the paper wash carries that same composition. */
.cleo-hero__wash { position: absolute; inset: 0; background: linear-gradient(96deg, rgba(248, 246, 242, .97) 12%, rgba(248, 246, 242, .8) 34%, rgba(248, 246, 242, .12) 62%, rgba(248, 246, 242, 0)); }
.cleo-hero h1 { max-width: 16ch; margin-top: 22px; }
/* Offer capsule. Cleo's own pill component, reused verbatim: 29px frosted rail with
   8px padding around a 41px / 22px-radius / 13px pill (its carousel tab geometry). */
.cleo-offer { width: max-content; max-width: 100%; min-height: 57px; margin: 30px 0 0; padding: 8px; display: flex; align-items: center; border-radius: 29px; background: rgba(255, 255, 255, .28); backdrop-filter: blur(16px); }
.cleo-offer span { min-height: 41px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 22px; color: var(--cleo-ink); background: rgba(255, 255, 255, .78); font-size: 13px; white-space: nowrap; }

/* 1 — intro module. Label left, one large statement right. Cleo uses no heading here. */
.cleo-intro { min-height: 612px; padding: 220px 32px; display: grid; grid-template-columns: .5fr 1fr; gap: 32px; align-items: start; }
.cleo-intro__statement { max-width: 676px; margin: -4px 0 0; font-size: 22px; line-height: 1.42; }

/* 2 + 4 — highlight module. One full-bleed film with a text slot. */
.cleo-highlight { position: relative; height: 900px; padding: 8px; overflow: hidden; }
.cleo-highlight video, .cleo-highlight img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--cleo-radius); }
/* Cleo sets the centred word on a plain sky field. Ours sits over a busier frame,
   so a soft paper halo restores the same reading condition without touching the film. */
.cleo-highlight__word { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0; padding: 0 24px; font: 300 clamp(32px, calc(26.057px + 1.5238vw), 48px)/1.083 PPNeue, Arial, sans-serif; text-align: center; background: radial-gradient(44% 26% at 50% 50%, rgba(248, 246, 242, .96), rgba(248, 246, 242, .74) 52%, rgba(248, 246, 242, 0) 78%); }
.cleo-highlight__lead { position: absolute; left: 64px; top: 115px; z-index: 1; max-width: 580px; color: #fff; }
.cleo-highlight__lead h2 { margin-top: 24px; color: inherit; }

/* 3 — block grid. "How X works": one heading, four steps. */
.cleo-block-grid { min-height: 452px; margin: 72px 0; padding: 0 32px; overflow: hidden; }
.cleo-block-grid__list { margin: 66px 0 0; padding: 0; list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cleo-block-grid__list::-webkit-scrollbar { display: none; }
.cleo-block-grid__list li { min-width: calc((100% - 36px) / 4); min-height: 316px; padding: 30px 40px; border-radius: 28px; background: #f6f3f1; scroll-snap-align: start; }
.cleo-block-grid__mark { display: block; width: 40px; height: 40px; margin-bottom: 36px; background-image: radial-gradient(circle, rgba(112, 82, 164, .55) 1.4px, transparent 1.5px); background-size: 8px 8px; }
/* Cleo's step title and body share one 22px/28px rhythm; only the colour separates them. */
.cleo-block-grid li h3 { font: 400 22px/1.27 PPNeue, Arial, sans-serif; }
.cleo-block-grid li p { margin: 0; color: #a99a99; font: 300 22px/1.27 PPNeue, Arial, sans-serif; }

/* 5 — carousel features. Copy left, product media right, pill rail over the media. */
.cleo-carousel-features { height: 900px; padding: 8px; display: grid; grid-template-columns: .39fr .61fr; gap: 0; }
.cleo-carousel-features__copy { min-height: 0; padding: 315px 70px 80px 101px; }
.cleo-carousel-features__copy h2 { margin-top: 18px; }
.cleo-carousel-features__copy > p:not(.cleo-kicker) { max-width: 350px; margin: 22px 0 0; color: var(--cleo-muted); font-size: 18px; line-height: 1.45; }
.cleo-carousel-features__copy .cleo-pill { margin-top: 30px; }
/* Cleo puts a rendered product still on a soft field here, with room around it.
   Our app capture is contained rather than cropped so it reads as a product still. */
.cleo-carousel-features__media { position: relative; min-height: 0; overflow: hidden; border-radius: var(--cleo-radius); background: linear-gradient(157deg, #e8e2f2, #dfe6ec 46%, #e9e4dd); }
.cleo-carousel-features__media > img { position: absolute; inset: 118px 24px 0; width: calc(100% - 48px); height: calc(100% - 118px); object-fit: contain; object-position: center top; filter: drop-shadow(0 30px 46px rgba(40, 32, 56, .22)); }
.cleo-carousel-features__tabs {
  position: absolute; left: 50%; top: 37px; z-index: 2; transform: translateX(-50%);
  width: min(620px, calc(100% - 48px)); min-height: 57px; padding: 8px; display: flex; gap: 4px;
  border-radius: 29px; background: rgba(255, 255, 255, .3); backdrop-filter: blur(16px);
}
.cleo-carousel-features__tabs button {
  min-height: 41px; flex: 1; border: 0; border-radius: 22px; color: #fff; background: transparent;
  font: inherit; font-size: 13px; cursor: pointer;
  transition: color .2s linear, background .2s linear;
}
.cleo-carousel-features__tabs button[aria-selected="true"] { color: var(--cleo-ink); background: rgba(255, 255, 255, .8); }

/* 6 — immersive module. Two media panels, caption bottom-left of each. */
.cleo-immersive { height: 900px; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cleo-immersive article { position: relative; overflow: hidden; border-radius: var(--cleo-radius); color: #fff; }
.cleo-immersive video, .cleo-immersive img { width: 100%; height: 100%; object-fit: cover; }
.cleo-immersive article::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(24, 22, 27, .86)); }
.cleo-immersive article > div { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 1; max-width: 380px; }
.cleo-immersive h3 { font-size: 17px; }
.cleo-immersive p { margin: 10px 0 0; color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.4; }

/* 7 — header module. One centred statement, second clause in the accent. */
.cleo-header { min-height: 417px; display: grid; place-items: center; padding: 70px 24px; text-align: center; }
.cleo-header h2 { max-width: 860px; }
.cleo-header em { color: var(--cleo-accent); font-style: normal; }

/* 8 — qr module. Cleo's conversion block: action left, QR right.
   Cleo's action is a "get the app" pill; ours is the live Vedika question form,
   compacted to the same proportions so the module keeps Cleo's 653px stage. */
.cleo-qr { min-height: 653px; padding: 64px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.cleo-qr__copy { justify-self: end; width: min(500px, 100%); }
.cleo-qr__copy h2 { margin-top: 14px; }
.cleo-qr figure { margin: 0; display: grid; justify-items: center; }
.cleo-qr img { width: 240px; height: auto; border-radius: 24px; }
.cleo-qr figcaption { margin-top: 14px; font: 500 12px/1 Simplon, monospace; text-transform: uppercase; letter-spacing: .1em; }
/* The live form keeps its product-detail.css class; drop that card shell inside the module.
   Its own kicker and "Start ..." heading would repeat the module heading above it. */
.cleo-qr .pd-launch__form { min-height: 0; padding: 0; border-radius: 0; background: transparent; }
.cleo-qr .pd-launch__form > .pd-kicker, .cleo-qr .pd-launch__form > h2 { display: none; }
.cleo-qr .pd-field { margin-top: 12px; }
.cleo-qr .pd-field label { margin-bottom: 5px; font-size: 12px; }
.cleo-qr .pd-field textarea { min-height: 72px; }
.cleo-qr .pd-field input, .cleo-qr .pd-field select, .cleo-qr .pd-field textarea { min-height: 46px; padding: 11px 16px; border-radius: 16px; font-size: 15px; }
.cleo-qr [data-product-form] > button { width: auto; min-height: 52px; margin-top: 14px; padding: 0 26px; border-radius: 26px; }
.cleo-qr .pd-status { min-height: 0; margin-top: 8px; font-size: 13px; }
.cleo-qr .pd-status:empty { display: none; }
.cleo-qr .pd-actions { margin-top: 14px; }
.cleo-qr .pd-actions .pd-button { min-height: 48px; font-size: 14px; }
.cleo-qr .pd-app-note { margin-top: 10px !important; font-size: 12px !important; }

/* 9 — footnotes module. */
.cleo-footnotes { min-height: 80px; padding: 20px 32px; display: grid; align-content: center; }
.cleo-footnotes p { margin: 0; color: var(--cleo-muted); font-size: 12px; line-height: 1.5; }

/* Scroll choreography. Reuses the shared .reveal observer in page-system.js (threshold .12). */
.cleo-page .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s linear, transform .7s cubic-bezier(.16, 1, .3, 1); }
.cleo-page .reveal.is-visible { opacity: 1; transform: none; }
.cleo-highlight video, .cleo-highlight img, .cleo-immersive video, .cleo-immersive img { transform: scale(1.06); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.cleo-highlight.is-visible video, .cleo-highlight.is-visible img,
.cleo-immersive.is-visible video, .cleo-immersive.is-visible img { transform: none; }

@media (max-width: 730px) {
  .cleo-hero { min-height: 100svh; padding: 132px 16px 32px; }
  .cleo-hero h1 { max-width: none; }
  /* Phone: copy stacks over the film, so the paper field runs to just below the capsule. */
  .cleo-hero__wash { background: linear-gradient(178deg, rgba(248, 246, 242, .96) 27%, rgba(248, 246, 242, .74) 46%, rgba(248, 246, 242, .12) 70%, rgba(248, 246, 242, 0)); }
  .cleo-intro { min-height: 663px; padding: 145px 16px; grid-template-columns: 1fr; gap: 80px; }
  .cleo-intro__statement { margin: 0; font-size: 20px; }
  .cleo-highlight { height: 515px; }
  .cleo-highlight video, .cleo-highlight img { border-radius: 32px; }
  .cleo-highlight__lead { left: 40px; right: 24px; top: 72px; }
  .cleo-block-grid { min-height: 489px; padding: 0 16px; }
  .cleo-block-grid__list { margin-inline: -16px; padding-left: 16px; }
  .cleo-block-grid__list li { min-width: 289px; min-height: 270px; }
  .cleo-carousel-features { height: 688px; display: flex; flex-direction: column; }
  .cleo-carousel-features__media { height: 337px; flex: none; order: -1; border-radius: 32px; }
  .cleo-carousel-features__copy { padding: 40px 24px; text-align: center; }
  .cleo-carousel-features__copy .cleo-kicker { justify-content: center; }
  .cleo-carousel-features__copy > p:not(.cleo-kicker) { margin-inline: auto; }
  .cleo-carousel-features__tabs { top: 12px; width: calc(100% - 24px); min-height: 50px; padding: 5px; }
  .cleo-immersive { height: 1021px; grid-template-columns: 1fr; }
  .cleo-immersive article { height: 499px; border-radius: 32px; }
  .cleo-immersive article > div { left: 26px; right: 26px; bottom: 26px; }
  .cleo-header { min-height: 360px; padding: 40px 16px; }
  .cleo-qr { min-height: 575px; padding: 24px 16px; grid-template-columns: 1fr; text-align: center; }
  .cleo-qr__copy { justify-self: center; width: auto; }
  .cleo-qr .cleo-kicker { justify-content: center; }
  /* A QR code cannot be scanned by the phone displaying it: on phones the module
     keeps Cleo's stage but gives the whole column to the live question form. */
  .cleo-qr figure { display: none; }
  .cleo-qr .pd-field label { text-align: left; }
  .cleo-qr [data-product-form] > button, .cleo-qr .pd-actions { width: 100%; }
  .cleo-qr .pd-actions { display: grid; gap: 8px; }
  .cleo-footnotes { min-height: 121px; padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cleo-page .reveal { opacity: 1; transform: none; transition: none; }
  .cleo-highlight video, .cleo-highlight img, .cleo-immersive video, .cleo-immersive img { transform: none; transition: none; }
  .cleo-pill, .cleo-carousel-features__tabs button { transition: none; }
}