/**
 * Landing page — parchment + gold theme, matching fixkart_brand_site and the
 * booking modal so both properties read as one company.
 *
 * Everything is scoped under .lp- / plain elements inside <main>. This file
 * fully replaces bootstrap.min.css (220 KB), styles.css and owl.css on
 * index.html — the page needs no other stylesheet.
 *
 * Rules carried over from the brand site:
 *   - no prices anywhere, no fixed time promises ("under 60 minutes" is the
 *     approved phrasing)
 *   - gold is #C69214 (deep), never the old #ffc700 sign-yellow
 */

:root {
  --paper: #faf8f4;
  --paper-alt: #f3eee6;
  --surface: #ffffff;
  --elevated: #f5f2ec;
  --gold: #c69214;
  --gold-hover: #a9780d;
  --gold-vivid: #d9a520;
  --gold-tint: rgba(198, 146, 20, 0.10);
  --gold-line: rgba(198, 146, 20, 0.30);
  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #9ca3af;
  --line: #e5e7eb;
  --dark: #111827;
  --dark-soft: #1f2937;
  --wa: #25d366;
  --bar-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Reserve room for the sticky action bar on phones */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

img { max-width: 100%; }
a { color: inherit; }

/* ── Header ─────────────────────────────────────────────────────────── */
.lp-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  /* Whisper of depth so the bar reads as floating over content it passes. */
  box-shadow: 0 1px 14px rgba(17, 24, 39, 0.05);
}
.lp-head-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lp-mark {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.lp-mark span { color: var(--gold); }
.lp-mark img, .lp-mark-img { height: 30px; width: auto; display: block; }
.lp-foot .lp-mark-img { height: 26px; margin: 0 auto; }
.lp-head-actions { display: flex; gap: 8px; }
.lp-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.lp-iconbtn:hover { border-color: var(--gold); color: var(--gold); }
.lp-iconbtn:active { transform: scale(0.94); }
.lp-iconbtn svg { width: 19px; height: 19px; }
.lp-iconbtn.is-wa { color: var(--wa); border-color: rgba(37, 211, 102, 0.4); }
.lp-iconbtn.is-wa:hover { background: var(--wa); color: #fff; border-color: var(--wa); }

/* Call button grows its number on wider screens; icon-only on phones. */
.lp-head-tel-num {
  display: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .lp-head-tel { width: auto; padding: 0 14px; gap: 8px; }
  .lp-head-tel-num { display: inline; }
}

/* Desktop-only header CTA — small gold pill matching the hero button. */
.lp-head-cta {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--gold);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(198, 146, 20, 0.28);
  transition: background .2s ease, transform .12s ease;
}
.lp-head-cta svg { width: 15px; height: 15px; }
.lp-head-cta:hover { background: var(--gold-hover); }
.lp-head-cta:active { transform: scale(0.96); }
@media (min-width: 768px) { .lp-head-cta { display: inline-flex; } }

/* ── Sections ───────────────────────────────────────────────────────── */
section { padding: 44px 16px; }
.lp-in { max-width: 1080px; margin: 0 auto; }
.lp-in--narrow { max-width: 720px; }

.lp-sec-title {
  margin: 0 auto 6px;
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
}
.lp-sec-title::after {
  content: "";
  display: block;
  width: 88px;
  height: 3px;
  border-radius: 3px;
  background: var(--gold);
  margin: 12px auto 0;
}
.lp-sec-sub {
  margin: 14px auto 28px;
  max-width: 44ch;
  text-align: center;
  color: var(--ink-2);
  font-size: 15px;
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding-top: 26px;
  /* The stage is the hero's last element; its ring already carries visual
     air. Full section padding here stacked with the next section's 44px
     top padding into a ~110px dead field before "Choose Your Device". */
  padding-bottom: 6px;
  text-align: center;
}

/* Ambient aurora — two soft gold light-pools drifting very slowly behind
   the content (the Stripe/Linear ambient-gradient pattern, in this brand's
   palette). Blur + low opacity keeps it felt rather than seen; transform-only
   animation keeps it off the layout thread. */
.lp-hero::before,
.lp-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 55vw;
  max-width: 520px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.lp-hero::before {
  top: -18%;
  left: -12%;
  background: radial-gradient(circle, rgba(198, 146, 20, 0.16), transparent 65%);
  animation: lp-drift-a 26s ease-in-out infinite;
}
.lp-hero::after {
  bottom: -22%;
  right: -14%;
  background: radial-gradient(circle, rgba(217, 165, 32, 0.13), transparent 65%);
  animation: lp-drift-b 32s ease-in-out infinite;
}
@keyframes lp-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(9%, 12%) scale(1.15); }
}
@keyframes lp-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1.1); }
  50%      { transform: translate(-10%, -9%) scale(1); }
}

/* Entrance — the Apple-landing pattern: content rises in once, staggered,
   ~600ms, then never moves again. Cheap (opacity+transform only). */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-hero-copy > * { animation: lp-rise 0.55s ease both; }
.lp-hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.lp-hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
.lp-hero-copy > *:nth-child(3) { animation-delay: 0.19s; }
.lp-hero-copy > *:nth-child(4) { animation-delay: 0.26s; }
.lp-hero-copy > *:nth-child(5) { animation-delay: 0.32s; }
.lp-hero-copy > *:nth-child(6) { animation-delay: 0.38s; }
.lp-hero-stagewrap { animation: lp-rise 0.65s ease 0.28s both; }
/* Two columns on desktop — copy left, stage right — matching the brand
   site's hero card. Single column, stage under the CTA, on phones. */
.lp-hero-grid {
  display: grid;
  gap: 8px;
  align-items: center;
}
@media (min-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 24px; text-align: left; }
  .lp-hero-grid .lp-hero-sub, .lp-hero-grid .lp-hero-title { margin-left: 0; margin-right: 0; }
  .lp-hero-copy { order: 1; }
  .lp-hero-stagewrap { order: 2; }
}

/* The Apple-showcase stage in its light form: same spinning dashed ring and
   float, on parchment. A soft gold radial glow stands in for the dark
   section's depth. Only transparent PNGs cycle here — ipad-pro.jpg has a
   baked black background and belongs to the dark section only. */
.lp-hero-stage.lp-stage {
  position: relative;
  /* Generous but still leaving the next section's title peeking above the
     fold on tall phones. */
  max-width: 320px;
  aspect-ratio: 1;
  margin: 2px auto 0;
}
@media (min-width: 900px) { .lp-hero-stage.lp-stage { max-width: 380px; } }
/* Grounded, floating product — the drop shadow moves subtly against the
   float so the device reads as physically hovering, not pasted. */
.lp-hero-stage .lp-stage-item img {
  filter: drop-shadow(0 22px 26px rgba(17, 24, 39, 0.20));
}
/* Let the product fill more of the ring than the dark-stage default (17%). */
.lp-hero-stage .lp-stage-item { inset: 14%; }
.lp-hero-stage::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 146, 20, 0.14), rgba(198, 146, 20, 0.03) 60%, transparent 75%);
}
.lp-hero-stage .lp-stage-ring { inset: 2%; }
/* Comet — a soft gold light-streak orbiting the ring every 12s, masked to a
   thin annulus so only the ring itself lights up as it passes. Gated behind
   @supports: browsers without CSS masks simply keep the dots-only ring. */
@supports (mask: radial-gradient(black, transparent)) or (-webkit-mask: radial-gradient(black, transparent)) {
  .lp-hero-stage.lp-stage::after {
    content: "";
    position: absolute;
    inset: 2%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
      transparent 0deg 290deg,
      rgba(198, 146, 20, 0.05) 310deg,
      rgba(217, 165, 32, 0.55) 352deg,
      rgba(255, 235, 190, 0.9) 359deg,
      transparent 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px));
    mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px));
    animation: lp-spin 12s linear infinite;
    pointer-events: none;
  }
}
/* Satellites — two gold dots pinned to the dashed ring, so the ring's own
   45s spin carries them in orbit. Pure CSS, no extra markup: they're the
   ring's pseudo-elements. A third rides the inner ring the other way. */
.lp-hero-stage .lp-stage-ring::before,
.lp-hero-stage .lp-stage-ring::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(198, 146, 20, 0.55);
}
.lp-hero-stage .lp-stage-ring::before { top: -4px; left: 50%; margin-left: -4px; }
.lp-hero-stage .lp-stage-ring::after {
  bottom: 6%;
  right: 6%;
  width: 5px;
  height: 5px;
  opacity: 0.7;
}
.lp-hero-stage .lp-stage-ring2 { animation: lp-spin-rev 60s linear infinite; }
.lp-hero-stage .lp-stage-ring2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-vivid);
  opacity: 0.8;
  box-shadow: 0 0 8px rgba(217, 165, 32, 0.5);
}
@keyframes lp-spin-rev { to { transform: rotate(-360deg); } }
.lp-hero-stage .lp-stage-item img { mix-blend-mode: multiply; }
/* Three items on a 15s loop — 5s each, brief crossfade. */
.lp-hero-stage .lp-stage-item { animation: lp-cycle3 15s infinite, lp-float 6s ease-in-out infinite; }
.lp-hero-stage .lp-stage-item:nth-child(3) { animation-delay: 0s,  0s; }
.lp-hero-stage .lp-stage-item:nth-child(4) { animation-delay: 5s,  0s; }
.lp-hero-stage .lp-stage-item:nth-child(5) { animation-delay: 10s, 0s; }
@keyframes lp-cycle3 {
  0%    { opacity: 0; transform: scale(0.94); }
  3%    { opacity: 1; transform: scale(1); }
  30%   { opacity: 1; }
  36%   { opacity: 0; transform: scale(0.96); }
  100%  { opacity: 0; }
}
/* Rotating device caption under the stage, synced to the same 15s loop. */
.lp-stage-caps {
  position: relative;
  height: 22px;
  margin-top: 2px;
}
.lp-stage-caps span {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  opacity: 0;
  animation: lp-cycle3 15s infinite;
}
.lp-stage-caps span:nth-child(1) { animation-delay: 0s; }
.lp-stage-caps span:nth-child(2) { animation-delay: 5s; }
.lp-stage-caps span:nth-child(3) { animation-delay: 10s; }
.lp-stage-caps b { color: var(--gold-hover); }
.lp-h1 {
  margin: 0 0 12px;
  color: var(--gold-hover);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
}
.lp-hero-title {
  margin: 0 auto 12px;
  max-width: 17ch;
  /* A notch smaller than before: the old clamp filled three lines on a
     phone and pushed everything premium below the fold. */
  font-size: clamp(1.7rem, 6.8vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.14;
}
.lp-hero-title em {
  font-style: normal;
  /* Living gold — a slow shimmer crossing the accent phrase (7s), the same
     treatment as the Apple section's eyebrow. Falls back to solid gold
     wherever background-clip:text is missing. */
  color: var(--gold);
  background: linear-gradient(90deg, var(--gold-hover) 20%, var(--gold-vivid) 40%, var(--gold-hover) 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lp-shimmer 7s linear infinite;
}

/* ── Rotor — the device word swaps in sync with the stage (same lp-cycle3
     15s clock, same 0/5/10s delays), so headline and product agree.
     Built as an inline-grid with every word stacked in the same cell: the
     box auto-sizes to the widest word ("MacBook?"), each word centres inside
     it, and the "?" travels WITH the word — the fixed-width version left
     short words swimming in the box with an orphaned question mark. The em
     is display:block, so line 1 is always "Broken <device>?" and line 2 is
     always "We come to you." — no mid-phrase wrap. ── */
.lp-rotor {
  display: inline-grid;
  justify-items: center;
  vertical-align: bottom;
  /* The box BREATHES: its width morphs to hug whichever word is live, on
     the same 15s clock as the crossfades. A static box sized for "MacBook?"
     left a hole after "Broken" whenever a shorter word was up. Widths are
     tuned to Poppins 700; nudge here if a fallback font renders. */
  animation: lp-rotor-w 15s ease-in-out infinite;
}
@keyframes lp-rotor-w {
  0%, 31%    { width: 5.9ch; }   /* Phone?  */
  34%, 64%   { width: 6.9ch; }   /* Laptop? */
  67%, 97%   { width: 6.1ch; }   /* Watch?  */
  100%       { width: 5.9ch; }
}
.lp-rotor > span {
  grid-area: 1 / 1;
  opacity: 0;
  color: var(--ink);
  white-space: nowrap;
  animation: lp-cycle3 15s infinite;
}
.lp-rotor > span:nth-child(1) { animation-delay: 0s; }
.lp-rotor > span:nth-child(2) { animation-delay: 5s; }
.lp-rotor > span:nth-child(3) { animation-delay: 10s; }
.lp-hero-title em { display: block; margin-top: 2px; }
.lp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.lp-hero-sub {
  margin: 0 auto 26px;
  max-width: 40ch;
  color: var(--ink-2);
  font-size: 15.5px;
}
/* Second sentence on its own line — two balanced lines instead of an
   orphaned "quote." dangling after a near-full first line. */
.lp-blk { display: block; }

/* Ragged-line insurance where the browser supports it. */
.lp-hero-title, .lp-sec-title, .lp-sec-sub { text-wrap: balance; }
.lp-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 30px;
  border-radius: 14px;
  background: var(--gold);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(198, 146, 20, 0.3);
  transition: background .2s ease, transform .15s ease;
}
/* Specular glint — a highlight sweeps the gold every ~5s (the luxury-button
   staple). The sweep itself lasts 0.9s; the rest of the loop is stillness,
   which is what keeps it classy instead of busy. */
.lp-cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg) translateX(0);
  animation: lp-glint 5.2s ease-in-out infinite;
  pointer-events: none;
}
/* translateX, not `left` — stays on the compositor thread. */
@keyframes lp-glint {
  0%       { transform: skewX(-20deg) translateX(0); }
  17%      { transform: skewX(-20deg) translateX(420%); }
  100%     { transform: skewX(-20deg) translateX(420%); }
}
.lp-cta:hover { background: var(--gold-hover); }
.lp-cta:active { transform: scale(0.97); }
.lp-cta svg { width: 19px; height: 19px; }
.lp-cta-note {
  margin: 10px 0 0;
  color: var(--ink-3);
  font-size: 12.5px;
}

/* Compact proof pill — puts the two strongest trust numbers inside the very
   first screen, so credibility lands before the visitor scrolls. */
.lp-proof-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.lp-proof-pill .lp-stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.lp-proof-pill b { color: var(--ink); }
.lp-proof-pill i { font-style: normal; color: var(--ink-3); }

/* Trust strip — the gold stat card from the brand site's mobile hero. */
.lp-trust {
  margin: 30px auto 0;
  max-width: 720px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: linear-gradient(180deg, rgba(198, 146, 20, 0.14), rgba(198, 146, 20, 0.07));
  border: 1px solid var(--gold-line);
  border-left: 4px solid var(--gold);
  border-radius: 16px;
  padding: 16px 10px;
}
.lp-trust::-webkit-scrollbar { display: none; }
.lp-trust-item {
  flex: 1 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.lp-trust-ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #fff;
}
.lp-trust-ic svg { width: 20px; height: 20px; }
.lp-trust-item b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
}
.lp-trust-item i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ── Device grid ────────────────────────────────────────────────────── */
.lp-devices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 640px) { .lp-devices { grid-template-columns: repeat(4, 1fr); } }
.lp-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lp-device:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(198, 146, 20, 0.12);
}
.lp-device:active { transform: scale(0.97); }
.lp-device-media {
  height: 72px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-device-media img {
  max-height: 100%;
  max-width: 72%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .2s ease;
}
.lp-device:hover .lp-device-media img { transform: scale(1.08); }

/* ── Brand marquee ──────────────────────────────────────────────────── */
.lp-brands-viewport { overflow: hidden; }
.lp-brands-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: lp-marquee 30s linear infinite;
}
.lp-brands-viewport:hover .lp-brands-track { animation-play-state: paused; }
@keyframes lp-marquee {
  to { transform: translateX(-50%); }
}
.lp-brand {
  flex: none;
  width: 128px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.lp-brand img {
  max-width: 64px;
  max-height: 40px;
  object-fit: contain;
}

/* ── Apple exclusive — light stage, same parchment world as the rest.
     Possible because ipad-pro now ships as a transparent PNG (served
     locally); the old JPEG's black background was the only reason this
     section ever had to be dark. ── */
.lp-apple {
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.lp-apple-eyebrow {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--gold-hover) 20%, var(--gold-vivid) 40%, var(--gold-hover) 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lp-shimmer 3s linear infinite;
}
@keyframes lp-shimmer { to { background-position: -200% center; } }

.lp-stage {
  position: relative;
  max-width: 340px;
  aspect-ratio: 1;
  margin: 8px auto 22px;
}
/* On the light stage every product needs the same grounding as the hero:
   multiply blend melts any white matte into the parchment, and the moving
   drop shadow makes the float read as hovering. */
.lp-apple .lp-stage::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 146, 20, 0.16), rgba(198, 146, 20, 0.04) 60%, transparent 75%);
}
.lp-apple .lp-stage-item img {
  mix-blend-mode: multiply;
  filter: drop-shadow(0 22px 26px rgba(17, 24, 39, 0.20));
}
.lp-stage-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px dashed rgba(198, 146, 20, 0.35);
  animation: lp-spin 45s linear infinite;
}
.lp-stage-ring2 {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1px solid rgba(198, 146, 20, 0.15);
}
@keyframes lp-spin { to { transform: rotate(360deg); } }
/* Four devices stacked; each takes a quarter of an 18s loop. Pure CSS —
   the brand site does this with React state, this does it with delays. */
.lp-stage-item {
  position: absolute;
  inset: 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: lp-cycle 18s infinite, lp-float 6s ease-in-out infinite;
}
.lp-stage-item img { max-width: 82%; max-height: 92%; object-fit: contain; }
.lp-stage-item:nth-child(3) { animation-delay: 0s,   0s; }
.lp-stage-item:nth-child(4) { animation-delay: 4.5s, 0s; }
.lp-stage-item:nth-child(5) { animation-delay: 9s,   0s; }
.lp-stage-item:nth-child(6) { animation-delay: 13.5s, 0s; }
@keyframes lp-cycle {
  0%      { opacity: 0; transform: scale(0.94); }
  2.5%    { opacity: 1; transform: scale(1); }
  25%     { opacity: 1; }
  30%     { opacity: 0; transform: scale(0.96); }
  100%    { opacity: 0; }
}
@keyframes lp-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}
.lp-apple-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.lp-apple-tag {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: var(--surface);
  color: var(--gold-hover);
  font-size: 12.5px;
  font-weight: 600;
}
.lp-apple-cta {
  display: block;
  text-align: center;
}

/* ── Reviews ────────────────────────────────────────────────────────── */
.lp-rev-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}
.lp-rev-score {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  padding: 14px 22px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05), 0 10px 26px -14px rgba(198, 146, 20, 0.35);
}
.lp-rev-meta { display: flex; flex-direction: column; align-items: flex-start; }
.lp-rev-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lp-rev-line { display: flex; align-items: baseline; gap: 8px; }
.lp-rev-line b {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.lp-rev-g {
  font-size: 24px;
  font-weight: 700;
  color: #4285f4;
}
.lp-rev-glogo { width: 34px; height: 34px; flex: none; }
.lp-rev-score b { font-size: 21px; letter-spacing: -0.02em; }
.lp-rev-score .lp-stars { color: var(--gold); letter-spacing: 1px; font-size: 13px; }
.lp-rev-score i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-3);
}
.lp-reviews {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 14px;
  scrollbar-width: none;
}
.lp-reviews::-webkit-scrollbar { display: none; }

/* Carousel chrome — a control bar BELOW the swipe row (prev · dots · next).
   Overlay arrows sat on the peeking card's text and clipped at the screen
   edge; down here nothing can collide at any width. The row itself stays a
   native scroll-snap strip, so swiping works with or without JS. */
.lp-rev-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}
.lp-rev-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--gold-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.lp-rev-arrow:hover { border-color: var(--gold); color: var(--gold); }
.lp-rev-arrow:active { transform: scale(0.92); }
.lp-rev-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lp-rev-arrow svg { width: 19px; height: 19px; }

/* Position dots — the active one stretches into a gold pill. */
.lp-rev-dots { display: flex; align-items: center; gap: 7px; }
.lp-rev-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d1d5db;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.lp-rev-dots button.is-on {
  width: 22px;
  background: var(--gold);
}
.lp-review {
  flex: 0 0 84%;
  max-width: 340px;
  scroll-snap-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}
@media (min-width: 768px) { .lp-review { flex-basis: 340px; } }
.lp-review-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.lp-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-tint);
  border: 1px solid var(--gold-line);
  color: var(--gold-hover);
  font-weight: 700;
  font-size: 14px;
}
.lp-review-top b { font-size: 14px; display: block; line-height: 1.25; }
.lp-review-top i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-3);
}
.lp-review .lp-stars { color: var(--gold); font-size: 12px; letter-spacing: 1.5px; margin-bottom: 8px; }
.lp-review p {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}
.lp-review-device {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--elevated);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
}
.lp-rev-link {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  color: var(--gold-hover);
  font-size: 13.5px;
  font-weight: 600;
}

/* ── Why us chips ───────────────────────────────────────────────────── */
.lp-why {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 640px) { .lp-why { grid-template-columns: repeat(3, 1fr); } }
.lp-why-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.lp-why-item svg { width: 19px; height: 19px; color: var(--gold); flex: none; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.lp-faq { max-width: 720px; margin: 0 auto; }
.lp-faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  margin-bottom: 10px;
  overflow: hidden;
}
.lp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 44px 15px 16px;
  font-size: 14.5px;
  font-weight: 600;
  position: relative;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 20px;
  font-weight: 500;
  transition: transform .2s ease;
}
.lp-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lp-faq details[open] summary { border-bottom: 1px solid var(--line); }
.lp-faq .lp-faq-a {
  padding: 13px 16px 16px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}
.lp-faq .lp-faq-a a { color: var(--gold-hover); font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.lp-foot {
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
  padding: 30px 16px calc(26px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.lp-foot .lp-mark { font-size: 19px; }
.lp-foot-addr {
  margin: 12px auto 4px;
  max-width: 42ch;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}
.lp-foot-tel {
  color: var(--gold-hover);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}
.lp-foot-note {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 11.5px;
}

/* ── Sticky mobile action bar (screenshot #2) ───────────────────────── */
.lp-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .lp-bar { display: none; } }
.lp-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease;
}
.lp-bar a:active { transform: scale(0.96); }
.lp-bar svg { width: 17px; height: 17px; }
.lp-bar-call {
  flex: 1;
  background: var(--elevated);
  border: 2px solid #d1d5db;
  color: var(--ink);
}
.lp-bar-book {
  flex: 2;
  background: var(--gold);
  color: #fff;
  box-shadow: 0 4px 14px rgba(198, 146, 20, 0.3);
}
.lp-bar-wa {
  flex: 1;
  background: rgba(37, 211, 102, 0.10);
  border: 2px solid rgba(37, 211, 102, 0.40);
  color: #128c46;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-brands-track, .lp-stage-ring, .lp-apple-eyebrow { animation: none; }
  /* Entrance rise: skip it — elements simply appear in place. */
  .lp-hero-copy > *, .lp-hero-stagewrap { animation: none; }
  /* Ambient/decorative motion off: aurora still, glint gone, orbits parked,
     comet gone, shimmer frozen, rotor pinned to its first word. */
  .lp-hero::before, .lp-hero::after,
  .lp-cta::after,
  .lp-hero-stage.lp-stage::after,
  .lp-hero-title em,
  .lp-hero-stage .lp-stage-ring2 { animation: none; }
  .lp-rotor { animation: none; width: 5.9ch; }
  .lp-rotor > span { animation: none; opacity: 0; }
  .lp-rotor > span:nth-child(1) { opacity: 1; }
  /* Freeze every stage on its first device, hide the rest. */
  .lp-stage-item, .lp-stage-caps span { animation: none; opacity: 0; }
  .lp-stage-item:nth-child(3), .lp-stage-caps span:nth-child(1) { opacity: 1; }
  * { transition: none !important; }
}

/* Legal footer lines — required by ads policy: independence disclaimer,
   hardware-only scope, and visible privacy/terms. */
.lp-foot-legal {
  margin: 14px auto 4px;
  max-width: 64ch;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.6;
}
.lp-foot-links { margin: 6px 0 0; font-size: 12px; }
.lp-foot-links a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.lp-foot-links a:hover { color: var(--gold-hover); }

/* Book Now buttons scroll here — offset clears the sticky header so the
   heading lands fully visible, not tucked underneath it. */
#choose-device { scroll-margin-top: 84px; }

/* Book Now relocated to sit just above the device picker it leads into. */
.lp-cta-lead { text-align: center; margin-bottom: 24px; }

/* The bar starts off-screen and slides in only after the visitor scrolls
   past the on-page Book Now — it takes over exactly when that button
   leaves the viewport, so two gold CTAs are never stacked. */
.lp-bar {
  transform: translateY(110%);
  transition: transform 0.28s ease;
}
.lp-bar.is-shown { transform: translateY(0); }

/* Live review text can be long — clamp so cards stay even. */
.lp-review p {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}