/* ============================================================================
   noem.ai — /live (Takeoff Tuesdays, page 1068) — scoped premium polish.
   Loaded ONLY on page 1068 (see functions.php). Safe to scope under
   .premium-main since this file never loads elsewhere.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   SECTION 1 — Announcement pill
   Sits directly above the hero, so it carries reduced vertical rhythm and
   centers a single gradient-bordered "live" pill instead of stray grey text.
   --------------------------------------------------------------------------- */
.premium-main .live-announce{ padding-top:clamp(28px,4vw,52px); padding-bottom:0; text-align:center; }

.premium-main .live-announce__pill{
  display:inline-flex; align-items:center; gap:.65em;
  margin:0; padding:.6em 1.25em .6em 1em;
  font-size:var(--fs-small); font-weight:500; color:var(--ink-80);
  line-height:1.2; letter-spacing:.005em;
  background:var(--grad-brand-soft);
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background-origin:border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -16px rgba(164,92,224,.5);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
/* gradient hairline border via layered backgrounds */
.premium-main .live-announce__pill{
  background:
    var(--grad-brand-soft) padding-box,
    var(--grad-border) border-box;
}
.premium-main .live-announce__label{
  font-family:var(--font-mono); font-size:var(--fs-mono);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:transparent; background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  font-weight:600;
}
.premium-main .live-announce__pulse{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--success);
  box-shadow:0 0 0 0 rgba(70,224,138,.6);
  animation:live-pulse 2s var(--ease-out) infinite;
}
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(70,224,138,.55); }
  70%{ box-shadow:0 0 0 8px rgba(70,224,138,0); }
  100%{ box-shadow:0 0 0 0 rgba(70,224,138,0); }
}
@media (prefers-reduced-motion: reduce){
  .premium-main .live-announce__pulse{ animation:none; }
}

/* ---------------------------------------------------------------------------
   SECTION 2 — Hero (Takeoff Tuesdays + Calendly booking)
   Two-column: copy left, framed booking card right. Fixes the legacy inline
   #333 body text (invisible on dark) and lifts the title to true H1 scale.
   --------------------------------------------------------------------------- */
.premium-main .live-hero{ padding-top:clamp(40px,5vw,72px); padding-bottom:var(--section-pad); }
.premium-main .live-hero__grid{
  display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(32px,4vw,72px);
  align-items:start;
}
.premium-main .live-hero__copy{ position:relative; z-index:1; padding-top:var(--space-4); }

.premium-main .live-hero__title{
  font-size:var(--fs-display); font-weight:800; line-height:var(--lh-tight);
  letter-spacing:var(--tracking-display); color:var(--ink);
  margin:var(--space-4) 0 var(--space-4);
}
.premium-main .live-hero .live-hero__lead{
  font-size:var(--fs-h4); font-weight:700; color:var(--ink);
  margin:0 0 var(--space-5); line-height:var(--lh-snug);
}
.premium-main .live-hero__intro{
  font-size:var(--fs-lead); color:var(--ink-80); line-height:var(--lh-normal);
  max-width:48ch; margin:0 0 var(--space-5);
}
.premium-main .live-hero__intro strong{ color:var(--ink); font-weight:700; }

.premium-main .live-hero__list{
  list-style:none; margin:0 0 var(--space-5); padding:0;
  display:flex; flex-direction:column; gap:var(--space-3);
}
.premium-main .live-hero__list li{
  display:flex; align-items:flex-start; gap:.7em;
  font-size:var(--fs-body); color:var(--ink-80); line-height:var(--lh-normal);
}
.premium-main .live-hero__ico{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:2em; height:2em; font-size:1em; border-radius:var(--r-md);
  background:var(--grad-brand-soft); border:1px solid var(--line-2);
}
.premium-main .live-hero__note{
  font-size:var(--fs-body); color:var(--ink-60); font-style:italic;
  margin:0 0 var(--space-6); line-height:var(--lh-normal); max-width:46ch;
}

/* Booking card — frames the (white) Calendly iframe in a dark brand shell */
.premium-main .live-hero__booking{
  position:relative; scroll-margin-top:120px;
  background:var(--bg-elev); border:1px solid var(--line-2);
  border-radius:var(--r-xl); padding:var(--space-5);
  box-shadow:var(--shadow-lg);
}
.premium-main .live-hero__booking::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.5; pointer-events:none;
}
.premium-main .live-booking__head{ margin:0 0 var(--space-4); }
.premium-main .live-booking__badge{
  display:inline-block; font-family:var(--font-mono); font-size:var(--fs-mono);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; font-weight:600;
  color:var(--success); padding:.3em .8em; border-radius:var(--r-pill);
  background:rgba(70,224,138,.10); border:1px solid rgba(70,224,138,.28);
  margin-bottom:var(--space-3);
}
.premium-main .live-booking__title{
  font-size:var(--fs-h3); font-weight:700; color:var(--ink);
  line-height:var(--lh-snug); margin:0 0 var(--space-2);
}
.premium-main .live-booking__sub{ font-size:var(--fs-small); color:var(--ink-60); margin:0; }
.premium-main .live-booking__embed{
  border-radius:var(--r-lg); overflow:hidden; background:#fff;
  min-height:660px;
}
.premium-main .live-booking__embed .calendly-inline-widget{ border-radius:var(--r-lg); }

@media (max-width: 980px){
  .premium-main .live-hero__grid{ grid-template-columns:1fr; gap:var(--space-7); }
  .premium-main .live-hero__copy{ padding-top:0; }
  .premium-main .live-hero__intro,
  .premium-main .live-hero__note{ max-width:none; }
}

/* ---------------------------------------------------------------------------
   SECTION 3 — "What you'll get" benefits
   Replaces the giant stacked banner image + icon stack with a tidy 4-up card
   grid (2-up tablet, 1-up mobile). Icons reuse the design-system card icon.
   --------------------------------------------------------------------------- */
.premium-main .live-benefits__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
}
.premium-main .live-benefit{ text-align:left; }
.premium-main .live-benefit .ns-card__icon{
  width:32px; height:32px; padding:14px;
  background:var(--grad-brand-soft); border:1px solid var(--line-2);
  border-radius:var(--r-md);
}
.premium-main .live-benefits__cta{
  display:flex; justify-content:center; margin-top:var(--space-7);
}
@media (max-width: 900px){
  .premium-main .live-benefits__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .premium-main .live-benefits__grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   SECTION 4 — Video ("What does it look like")
   Centered head + a constrained, glowing video frame instead of a raw
   full-width iframe. Secondary (ghost) CTA so it doesn't compete with "book".
   --------------------------------------------------------------------------- */
.premium-main .live-video .ns-section__head .ns-section__title{ max-width:none; }
.premium-main .live-video__frame{
  position:relative; max-width:940px; margin-inline:auto;
}
.premium-main .live-video__frame::before{
  content:""; position:absolute; left:50%; top:8%; transform:translateX(-50%);
  width:80%; height:70%; z-index:0; pointer-events:none;
  background:var(--glow-brand); filter:blur(20px); opacity:.9;
}
.premium-main .live-video__frame .ns-video{ position:relative; z-index:1; margin:0; }
.premium-main .live-video__cta{
  display:flex; justify-content:center; margin-top:var(--space-6);
}

/* ---------------------------------------------------------------------------
   SECTION 5 — Testimonials wall
   Was a stray "great company" card at the bottom + white masonry cards. Now a
   proper section head on top + dark brand glass cards (gradient border on
   hover) so the wall belongs to the dark premium system. Overrides the legacy
   inline styles that ship in the post HTML embed.
   --------------------------------------------------------------------------- */
.premium-main .live-wall .masonry-grid{
  column-count:3; column-gap:var(--space-5);
  max-width:var(--container); margin:0 auto; padding:0;
}
.premium-main .live-wall .masonry-grid-item{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  background:var(--bg-elev); border:1px solid var(--line-2);
  border-radius:var(--r-lg); margin:0 0 var(--space-5); padding:var(--space-6);
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.premium-main .live-wall .masonry-grid-item:hover{
  transform:translateY(-4px); border-color:rgba(164,92,224,.45);
  box-shadow:var(--shadow-lg);
  background:
    linear-gradient(var(--bg-elev),var(--bg-elev)) padding-box,
    var(--grad-brand) border-box;
  border:1px solid transparent;
}
.premium-main .live-wall .testimonial-text{
  font-size:var(--fs-body); line-height:var(--lh-normal);
  color:var(--ink-80); margin:0 0 var(--space-5);
}
.premium-main .live-wall .testimonial-text strong{ color:var(--ink); }
.premium-main .live-wall .testimonial-footer{ display:flex; align-items:center; gap:var(--space-3); }
.premium-main .live-wall .testimonial-avatar{
  width:44px !important; height:44px !important; border-radius:50% !important;
  object-fit:cover; border:1px solid var(--line-3);
}
.premium-main .live-wall .testimonial-name{
  font-weight:600; color:var(--ink); font-size:var(--fs-small);
}
@media (max-width:1024px){
  .premium-main .live-wall .masonry-grid{ column-count:2; }
}
@media (max-width:600px){
  .premium-main .live-wall .masonry-grid{ column-count:1; }
}