/* Born to Know — Landing Page V2 custom styles */

:root {
  /* Accent palette beyond the base design system */
  --accent-coral:    #D97757;   /* warm terracotta — SAVE stamps, urgency strikes */
  --accent-coral-d:  #B85648;   /* deeper coral / red strike */
  --accent-saffron:  #E8A92C;   /* brighter gold — highlight under price */
  --accent-teal:     #1F6B5B;   /* complementary to forest */
  --review-yellow:   #F5C518;   /* IMDb-style review star */
  --review-yellow-d: #D9A60D;
}

html { scroll-behavior: smooth; scroll-padding-top: 120px; overflow-x: clip; }
body { background: #FAF6EE; overflow-x: clip; width: 100%; max-width: 100%; }

/* a-tag color override defense — design system makes ALL <a> default to gold + forest-hover.
   Force explicit text colors on our CTA buttons so they remain readable. */
a.cta-primary, a.cta-primary:hover, a.cta-primary:focus, a.cta-primary:active { color: #FFFCF5 !important; text-decoration: none !important; }
a.cta-gold,    a.cta-gold:hover,    a.cta-gold:focus,    a.cta-gold:active    { color: #0F0F0F !important; text-decoration: none !important; }
a.cta-ghost,   a.cta-ghost:hover,   a.cta-ghost:focus,   a.cta-ghost:active   { color: #0F0F0F !important; text-decoration: none !important; }
button.cta-primary, button.cta-primary:hover { color: #FFFCF5; }
button.cta-gold,    button.cta-gold:hover    { color: #0F0F0F; }

/* CTA primary \u2014 high-presence, multi-layer glow */
.cta-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #34442C 0%, #2C3A24 50%, #1F2A19 100%);
  color: #FFFCF5;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  border-radius: 10px;
  transition: background 200ms cubic-bezier(0.22,0.61,0.36,1),
              transform 200ms cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 200ms cubic-bezier(0.22,0.61,0.36,1);
  box-shadow:
    0 1px 0 rgba(255,252,245,0.08) inset,
    0 -2px 6px rgba(0,0,0,0.18) inset,
    0 8px 24px rgba(15,15,15,0.18),
    0 0 0 1px rgba(15,15,15,0.06);
  letter-spacing: -0.005em;
  border: 1px solid rgba(15,15,15,0.10);
}
.cta-primary::after {
  /* subtle gold ring on hover */
  content: ""; position: absolute; inset: -3px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(200,162,74,0) 0%, rgba(200,162,74,0.55) 50%, rgba(232,169,44,0) 100%);
  opacity: 0; transition: opacity 250ms cubic-bezier(0.22,0.61,0.36,1);
  z-index: -1; pointer-events: none;
}
.cta-primary:hover {
  background: linear-gradient(180deg, #2F3D26 0%, #1F2A19 50%, #1A2418 100%);
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,252,245,0.10) inset,
    0 -2px 6px rgba(0,0,0,0.22) inset,
    0 14px 36px rgba(15,15,15,0.30),
    0 0 0 1px rgba(200,162,74,0.40),
    0 0 28px rgba(200,162,74,0.20);
}
.cta-primary:hover::after { opacity: 1; }
.cta-primary:active { transform: translateY(1px) scale(0.98); }

/* Shimmer sweep — glides across every few seconds */
.cta-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 52%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.13) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: cta-shimmer 3.8s 1s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.cta-gold::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 52%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: cta-shimmer 3.8s 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
/* Text/icons always above shimmer */
.cta-primary > *, .cta-gold > * {
  position: relative;
  z-index: 2;
}
/* Arrow slides right on hover */
.cta-primary svg, .cta-gold svg {
  transition: transform 0.22s ease;
}
.cta-primary:hover svg, .cta-gold:hover svg {
  transform: translateX(5px);
}

.cta-ghost {
  background: transparent;
  color: #0F0F0F;
  border: 1.5px solid #C8A24A;
  font-family: 'Lora', Georgia, serif;
  border-radius: 10px;
  transition: all 200ms cubic-bezier(0.22,0.61,0.36,1);
}
.cta-ghost:hover { background: #F4EDD8; }

.cta-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #E8A92C 0%, #C8A24A 55%, #A8851F 100%);
  color: #0F0F0F;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  border-radius: 10px;
  transition: all 200ms cubic-bezier(0.22,0.61,0.36,1);
  box-shadow:
    0 1px 0 rgba(255,252,245,0.45) inset,
    0 -3px 8px rgba(0,0,0,0.12) inset,
    0 10px 28px rgba(200,162,74,0.45),
    0 0 0 1px rgba(168,133,31,0.45);
  border: 1px solid rgba(168,133,31,0.45);
}
.cta-gold:hover {
  background: linear-gradient(180deg, #F2B838 0%, #D9A60D 55%, #A8851F 100%);
  color: #0F0F0F;
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,252,245,0.55) inset,
    0 -3px 10px rgba(0,0,0,0.15) inset,
    0 16px 36px rgba(232,169,44,0.50),
    0 0 0 1px rgba(168,133,31,0.55),
    0 0 28px rgba(232,169,44,0.40);
}

/* Pulse for live dot */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(74,124,89,0.6); }
  50%       { transform: scale(1.4); opacity: 0.6; box-shadow: 0 0 0 8px rgba(74,124,89,0); }
}
.live-dot { animation: pulse-dot 2s var(--btk-ease) infinite; }

/* Play button glow */
@keyframes play-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,162,74,0.45), 0 8px 24px rgba(15,15,15,0.15); }
  50%       { box-shadow: 0 0 0 18px rgba(200,162,74,0),   0 12px 32px rgba(15,15,15,0.18); }
}
.play-glow { animation: play-glow 2.4s ease-in-out infinite; }

/* CTA glow pulse */
@keyframes cta-glow {
  0%, 100% { box-shadow:
              0 1px 0 rgba(255,252,245,0.08) inset,
              0 -2px 6px rgba(0,0,0,0.18) inset,
              0 8px 24px rgba(15,15,15,0.18),
              0 0 0 1px rgba(15,15,15,0.06),
              0 0 0 0 rgba(200,162,74,0); }
  50%       { box-shadow:
              0 1px 0 rgba(255,252,245,0.10) inset,
              0 -2px 6px rgba(0,0,0,0.20) inset,
              0 12px 32px rgba(15,15,15,0.24),
              0 0 0 1px rgba(15,15,15,0.06),
              0 0 0 8px rgba(200,162,74,0.18); }
}
.cta-pulse { animation: cta-glow 2.8s ease-in-out infinite; }

@keyframes cta-shimmer {
  0%, 28%  { left: -120%; opacity: 0; }
  30%      { opacity: 1; }
  58%      { left: 170%; opacity: 0; }
  59%, 100% { left: 170%; opacity: 0; }
}

/* Hero mockup gentle float */
@keyframes float-up {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.float-loop { animation: float-up 4s ease-in-out infinite; }

/* Reveal on enter */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.22,0.61,0.36,1), transform 700ms cubic-bezier(0.22,0.61,0.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Slide-up sticky */
@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.slide-up { animation: slide-up 400ms cubic-bezier(0.22,0.61,0.36,1) forwards; }

/* Slide-in from bottom (sales notification, sticky CTA) */
@keyframes slide-in-bottom {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes slide-out-bottom {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(120%); opacity: 0; }
}
.notif-in  { animation: slide-in-bottom 420ms cubic-bezier(0.22,0.61,0.36,1) forwards; }
.notif-out { animation: slide-out-bottom 320ms cubic-bezier(0.4,0.0,1,1) forwards; }

/* Hand-drawn underline draw-on */
@keyframes draw-on {
  to { stroke-dashoffset: 0; }
}
.draw-line { stroke-dasharray: 600; stroke-dashoffset: 600; }
.draw-line.in { animation: draw-on 800ms cubic-bezier(0.22,0.61,0.36,1) forwards; animation-delay: 200ms; }

/* Subtle paper grain on dark strips */
.paper-grain {
  background-image: radial-gradient(rgba(200,162,74,0.04) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Card hover */
.card-hov { transition: transform 250ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 250ms cubic-bezier(0.22,0.61,0.36,1), border-color 250ms cubic-bezier(0.22,0.61,0.36,1); }
.card-hov:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,15,15,0.10); border-color: #C8A24A; }

/* FAQ chevron rotation */
.plus-rot { transition: transform 300ms cubic-bezier(0.22,0.61,0.36,1); }
.plus-rot.open { transform: rotate(45deg); }

/* FAQ collapse */
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(0.22,0.61,0.36,1); }
.faq-body.open { grid-template-rows: 1fr; }
.faq-body > div { overflow: hidden; }

/* Polaroid tape look */
.polaroid::before {
  content: ""; position: absolute; left: 50%; top: -10px; width: 60%; height: 18px;
  background: rgba(232,223,204,0.85); transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 1px 2px rgba(15,15,15,0.08);
}

/* Wax-seal rotating text base */
.wax-seal { position: relative; }

/* Caveat utility */
.font-hand { font-family: 'Caveat', cursive; }

/* Strikethrough red price */
.strike-red { position: relative; color: #B85648; }
.strike-red::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 55%;
  height: 2px; background: #B85648; transform: rotate(-8deg);
}

/* === SAVE coral stamp (rotated, hand-stamped feel) === */
.save-stamp {
  background: #D97757;
  color: #FFFCF5;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(217,119,87,0.35), 0 0 0 3px rgba(255,252,245,0.85);
  transform: rotate(8deg);
  display: inline-block;
}

/* === Live ticker chip === */
.ticker-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.65);
  border: 1px solid #E8DFCC;
}

/* === Yellow review star helper === */
.star-y svg { fill: #F5C518; stroke: #F5C518; }


.book-3d { perspective: 2400px; transform-style: preserve-3d; }
.page-static, .page-flipper { position: absolute; inset: 0; }
.page-flipper { transform-style: preserve-3d; will-change: transform; }
.page-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.page-face.back { transform: rotateY(180deg); }

@keyframes page-fwd {
  0%   { transform: rotateY(0deg)    translateZ(0); filter: brightness(1); }
  18%  { transform: rotateY(-18deg)  translateZ(10px); filter: brightness(1.02); }
  50%  { transform: rotateY(-90deg)  translateZ(28px); filter: brightness(1.06); }
  82%  { transform: rotateY(-162deg) translateZ(10px); filter: brightness(0.98); }
  100% { transform: rotateY(-180deg) translateZ(0); filter: brightness(1); }
}
@keyframes page-bwd {
  0%   { transform: rotateY(0deg)    translateZ(0); filter: brightness(1); }
  18%  { transform: rotateY(18deg)   translateZ(10px); filter: brightness(1.02); }
  50%  { transform: rotateY(90deg)   translateZ(28px); filter: brightness(1.06); }
  82%  { transform: rotateY(162deg)  translateZ(10px); filter: brightness(0.98); }
  100% { transform: rotateY(180deg)  translateZ(0); filter: brightness(1); }
}
.flip-fwd { animation: page-fwd 950ms cubic-bezier(0.55, 0.0, 0.45, 1) forwards; transform-origin: left center; }
.flip-bwd { animation: page-bwd 950ms cubic-bezier(0.55, 0.0, 0.45, 1) forwards; transform-origin: right center; }

/* Floor shadow that tracks the lift */
@keyframes lift-shadow {
  0%, 100% { box-shadow: 0 0 0 rgba(15,15,15,0); }
  50%      { box-shadow: 0 28px 36px -8px rgba(15,15,15,0.32); }
}
.lift-shadow { animation: lift-shadow 950ms cubic-bezier(0.55, 0.0, 0.45, 1) forwards; }

/* Glare overlay that sweeps across the page as it tilts (forward) */
@keyframes glare-sweep-fwd {
  0%   { opacity: 0; background-position: 100% 0; }
  35%  { opacity: 0.55; }
  60%  { opacity: 0.40; }
  100% { opacity: 0; background-position: -30% 0; }
}
@keyframes glare-sweep-bwd {
  0%   { opacity: 0; background-position: 0 0; }
  35%  { opacity: 0.55; }
  60%  { opacity: 0.40; }
  100% { opacity: 0; background-position: 130% 0; }
}
.glare-fwd { animation: glare-sweep-fwd 950ms cubic-bezier(0.55, 0.0, 0.45, 1) forwards; }
.glare-bwd { animation: glare-sweep-bwd 950ms cubic-bezier(0.55, 0.0, 0.45, 1) forwards; }

/* book shell sides */
.book-shell {
  background: linear-gradient(180deg, #2C3A24 0%, #1A2418 100%);
  border-radius: 6px;
  box-shadow: 0 36px 70px rgba(15,15,15,0.28);
  padding: 14px;
}


/* Marquee for status bar */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-track { display: inline-flex; gap: 48px; white-space: nowrap; animation: ticker-scroll 38s linear infinite; padding-right: 48px; }
.ticker-mask { mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); }

/* Custom scrollbar — desktop / mouse only. On touch devices we leave the
   native overlay scrollbar so no permanent grey bar appears on the right. */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #E8DFCC; border-radius: 999px; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* Media never forces horizontal overflow */
img, svg, video { max-width: 100%; }

/* Disable user-select on decorative SVGs */
svg.deco { user-select: none; -webkit-user-drag: none; }

/* Image placeholder treatment */
.ph {
  background: linear-gradient(135deg, #F4EDD8 0%, #E8DFCC 100%);
  display: flex; align-items: center; justify-content: center;
  color: #6B655B; font-family: 'Inter', sans-serif; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
}

/* Dotted progress */
.dot-prog span { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: #E8DFCC; margin: 0 3px; transition: background 200ms; }
.dot-prog span.on { background: #C8A24A; }

/* Section base padding */
.sec { padding: 96px 0; }
@media (max-width: 768px) { .sec { padding: 56px 0; } }
.container-x { max-width: 1280px; margin: 0 auto; padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); }

/* Mockup tilt parallax base */
.parallax-base { transform-style: preserve-3d; perspective: 1200px; }

/* Subtle scrim for video card overlays */
.video-scrim {
  background: linear-gradient(180deg, rgba(15,15,15,0) 40%, rgba(15,15,15,0.45) 100%);
}

/* Researcher card editorial border */
.research-card { border-left: 3px solid #C8A24A; border-radius: 0 12px 12px 0; }

/* Comparison table */
.cmp-row + .cmp-row { border-top: 1px solid #E8DFCC; }
.cmp-row:hover { background: rgba(200,162,74,0.05); }

/* Bottom CTA bar shadow */
.sticky-cta { box-shadow: 0 -4px 24px rgba(15,15,15,0.08); }

/* Hide sticky bottom CTA on mobile — too cluttered */
@media (max-width: 767px) {
  .sticky-cta { display: none !important; }
}

/* Mini book thumbnail (for sales popup) */
.mini-book {
  position: relative; flex-shrink: 0;
  width: 44px; height: 56px;
  background: linear-gradient(155deg, #FAF6EE 0%, #F4EDD8 60%, #E8DFCC 100%);
  border-radius: 2px 4px 4px 2px;
  box-shadow: 0 4px 10px rgba(15,15,15,0.18), inset -1px 0 0 rgba(0,0,0,0.06);
  overflow: hidden;
}
.mini-book::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(90deg, rgba(0,0,0,0.18), transparent);
}
.mini-book .mb-title {
  position: absolute; left: 7px; right: 4px; bottom: 6px;
  font-family: 'Playfair Display', serif; font-weight: 800; font-size: 8px; line-height: 1.05;
  color: #0F0F0F; letter-spacing: -0.01em;
}
.mini-book .mb-eyebrow {
  position: absolute; left: 7px; top: 6px; right: 4px;
  font-family: 'Inter', sans-serif; font-size: 4px; letter-spacing: 0.18em; color: #A8851F;
}
.mini-book .mb-accent {
  position: absolute; left: 7px; right: 6px; bottom: 26px; height: 1px;
  background: #C8A24A;
}

/* Hide scrollbar on horizontal scroll containers */
.no-bar::-webkit-scrollbar { display: none; }
.no-bar { scrollbar-width: none; }

/* Marker emphasis container */
.emph { position: relative; display: inline-block; white-space: nowrap; }
.emph svg { position: absolute; left: -4px; right: -4px; bottom: -10px; width: calc(100% + 8px); height: 18px; pointer-events: none; }

/* For inline strike */
.emph-strike { position: relative; display: inline-block; }
.emph-strike svg { position: absolute; left: -6px; right: -6px; top: 0; bottom: 0; width: calc(100% + 12px); height: 100%; pointer-events: none; }

/* Slow medallion ring spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Smooth focus rings */
button:focus-visible, a:focus-visible { outline: 2px solid #C8A24A; outline-offset: 2px; border-radius: 8px; }


/* ============================================================
   Hero mockup — clean book composition with ONE sticky note and
   ONE hand-drawn cursive accent. Pixel-perfect across breakpoints
   by sizing the wrap to its content (book + accents) instead of
   fighting with column-height matching.
   ============================================================ */
.hero-mockups-wrap {
  width: 100%;
  max-width: 560px;
  position: relative;
  margin: 0 auto;
  aspect-ratio: 1 / 1.05;
  overflow: visible;
}
@media (min-width: 1024px) {
  .hero-mockups-wrap {
    max-width: 640px;
    aspect-ratio: 1 / 0.98;
  }
}
@media (min-width: 1280px) {
  .hero-mockups-wrap {
    max-width: 700px;
  }
}

/* Book — fills the wrap, leaves space above for sticky note and below for script */
.hero-book {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
  height: 88%;
  z-index: 2;
}

/* Sticky note — top-left, overlapping the book corner */
.hero-stickynote {
  left: -2%;
  top: 2%;
  z-index: 30;
}

/* Hand-drawn cursive + arrow — bottom-LEFT, arrow points up-right at the book */
.hero-script {
  left: 0%;
  bottom: 1%;
  max-width: 280px;
  z-index: 30;
}

@media (max-width: 1023px) {
  .hero-mockups-wrap { max-width: 520px; aspect-ratio: 1 / 1; }
  .hero-book { width: 92%; height: 80%; }
}
@media (max-width: 640px) {
  .hero-mockups-wrap { max-width: 420px; }
  .hero-stickynote { transform: scale(0.85); transform-origin: top left; left: -2%; top: 0%; }
  .hero-script { transform: scale(0.85); transform-origin: bottom left; left: 0%; bottom: 0%; }
}
@media (max-width: 420px) {
  .hero-mockups-wrap { max-width: 320px; }
  .hero-stickynote { transform: scale(0.72); }
  .hero-script { transform: scale(0.72); transform-origin: bottom left; }
}

/* Hero offer card — soft hover lift for the entire conversion engine */
.hero-offer-card {
  transition: box-shadow 250ms cubic-bezier(0.22,0.61,0.36,1),
              transform 250ms cubic-bezier(0.22,0.61,0.36,1);
}
.hero-offer-card:hover {
  box-shadow: 0 28px 64px rgba(15,15,15,0.14), inset 0 0 0 1px rgba(255,252,245,0.6);
}

/* ============================================================
   Facebook comment polaroid grid (Testimonials section)
   ============================================================ */
.fb-polaroid-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 64px;
  align-items: start;
  padding: 32px 12px;
}
@media (max-width: 640px) {
  .fb-polaroid-grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 48px;
    padding: 16px 0;
  }
}

/* Reveal-wrapper slot — keeps the entry animation transform off the polaroid's rotation */
.fb-polaroid-slot { width: 100%; }

.fb-polaroid {
  position: relative;
  background: #FFFFFF;
  padding: 16px 12px 12px;
  border-radius: 2px;
  box-shadow: 0 12px 28px rgba(15, 15, 15, 0.12);
  transform: rotate(var(--rot, 0deg));
  transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.fb-polaroid:hover,
.fb-polaroid:focus-within {
  transform: rotate(calc(var(--rot, 0deg) * 0.25)) translateY(-6px);
  box-shadow: 0 22px 44px rgba(15, 15, 15, 0.18);
}
.fb-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
}
.fb-polaroid-tape {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 72px;
  height: 20px;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, rgba(232, 223, 204, 0.72), rgba(216, 204, 178, 0.76));
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  border-radius: 1px;
  pointer-events: none;
}

/* ============================================================
   Sticky bottom CTA — cleaner on mobile
   ============================================================ */
@media (max-width: 767px) {
  .sticky-cta .container-x { padding-left: 16px; padding-right: 16px; }
}

/* Sales notification sits low on mobile (no sticky bottom bar there anymore) */
@media (max-width: 767px) {
  .sales-notif-anchor { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
}

/* ============================================================
   Floating video card — clamp negative margins on mobile
   so it doesn't overlap neighbouring sections
   ============================================================ */
@media (max-width: 767px) {
  .video-card-floats {
    margin-top: -60px !important;
    margin-bottom: -60px !important;
  }
}

/* ============================================================
   Section padding tuning for tablet
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .sec { padding: 80px 0; }
}

/* ============================================================
   Authority strip — top padding accounts for the floating video card.
   Desktop video floats -120, mobile -60, so authority padding scales
   accordingly to keep consistent spacing above the eyebrow.
   ============================================================ */
.authority-strip { padding-top: 200px; padding-bottom: 96px; }
@media (max-width: 1023px) { .authority-strip { padding-top: 170px; padding-bottom: 80px; } }
@media (max-width: 767px)  { .authority-strip { padding-top: 130px; padding-bottom: 64px; } }
@media (max-width: 1023px) {
  section#top { padding-top: 36px !important; padding-bottom: 150px !important; }
}
@media (max-width: 640px) {
  section#top { padding-top: 24px !important; padding-bottom: 110px !important; }
}

/* Reduce gap between hero columns on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  section#top .container-x.grid { gap: 32px; }
}

/* ============================================================
   Container side padding tighter on small screens
   ============================================================ */
@media (max-width: 480px) {
  .container-x { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   Long display headlines: keep readable on small screens
   ============================================================ */
@media (max-width: 480px) {
  h1, h2, h3 { word-break: normal; overflow-wrap: break-word; }
}

/* ============================================================
   Flipbook controls — tighter on small screens
   ============================================================ */
@media (max-width: 480px) {
  .book-3d { max-width: 92vw !important; }
}

/* ============================================================
   Top status bar — hide center ticker below xl, shrink chips
   ============================================================ */
@media (max-width: 380px) {
  .ticker-chip { padding: 3px 8px; font-size: 11px; }
}