/*
  shopify-ai-agents.css
  --------------------------------------------------------------------------
  PAGE-SCOPED premium polish for the "Shopify AI Agents" page (post ID 2617)
  ONLY. Enqueued from functions.php gated on is_page(2617); every rule is
  scoped under body.shopify-lp so nothing here can leak to other pages.

  Builds on the shared design system (tokens.css + components.css
  .premium-main .ns-* rules). This file only ADDS bespoke section layout,
  spacing, typography and motion for this one landing page.

  Sections are polished one at a time (see CLAUDE memory / commit notes).
*/

/* =========================================================================
   Page-wide rhythm
   ========================================================================= */

/* =========================================================================
   S1 — Promo / announcement bar
   Was: muted left-aligned paragraph floating above a big empty gap.
   Now: a centered glass pill with a live pulsing dot + brand "Limited Time"
   lockup, tightened to sit close above the hero.
   ========================================================================= */
.shopify-lp .sh-promo{ padding-top:clamp(20px,4vw,34px); padding-bottom:0; }
.shopify-lp .sh-promo__bar{ display:flex; justify-content:center; }
.shopify-lp .sh-promo__pill{
  display:inline-flex; align-items:center; gap:.6em;
  max-width:100%;
  padding:.6em 1.25em;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 26px -16px rgba(164,92,224,.6);
  color:var(--ink-70,var(--ink-60));
  font-size:var(--fs-small);
  font-weight:var(--fw-medium);
  letter-spacing:.01em;
  text-align:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.shopify-lp .sh-promo__pill strong{
  font-family:var(--font-mono);
  font-size:.82em;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.shopify-lp .sh-promo__dot{
  width:8px; height:8px; flex:0 0 auto; border-radius:50%;
  background:var(--violet,#A45CE0);
  box-shadow:0 0 0 0 rgba(164,92,224,.6);
  animation:sh-promo-pulse 2.4s ease-out infinite;
}
.shopify-lp .sh-promo__sep{
  width:4px; height:4px; flex:0 0 auto; border-radius:50%;
  background:currentColor; opacity:.4;
}
@keyframes sh-promo-pulse{
  0%{ box-shadow:0 0 0 0 rgba(164,92,224,.55); }
  70%{ box-shadow:0 0 0 9px rgba(164,92,224,0); }
  100%{ box-shadow:0 0 0 0 rgba(164,92,224,0); }
}
@media (prefers-reduced-motion:reduce){
  .shopify-lp .sh-promo__dot{ animation:none; }
}
@media (max-width:560px){
  .shopify-lp .sh-promo__pill{ font-size:12px; padding:.55em 1em; }
}

/* =========================================================================
   S2 — Hero
   Was: single left column; the H1 was rendered at ns-subhead (h3) size; the
   product shot sat full-width below the copy; "No Credit Card Needed" was an
   oversized heading.
   Now: balanced two-column hero (copy + framed media), a true display-size
   gradient headline, a lead line, refined body, large CTA, and a subtle
   reassurance line with a brand check. A soft brand glow sits behind the art.
   ========================================================================= */
.shopify-lp .sh-hero{ padding-top:clamp(40px,24px + 4vw,80px); padding-bottom:var(--section-pad); }
.shopify-lp .sh-hero > .ns-container{
  display:grid; gap:clamp(32px,5vw,64px); align-items:center;
}
@media (min-width:980px){
  .shopify-lp .sh-hero > .ns-container{ grid-template-columns:1.08fr .92fr; }
}

.shopify-lp .sh-hero__copy{ position:relative; z-index:1; max-width:736px; }
.shopify-lp .sh-hero__title{
  font-size:clamp(36.8px,24px + 2.6vw,56px);
  font-weight:var(--fw-black,800);
  line-height:1.07;
  letter-spacing:-0.032em;
  color:var(--ink);
  margin:0 0 var(--space-4);
  text-wrap:balance;
}
.shopify-lp .sh-hero__lead{
  font-size:var(--fs-lead,clamp(18.4px,16px + .5vw,23.2px));
  color:var(--ink-80);
  line-height:1.4;
  margin:0 0 var(--space-5);
  max-width:40ch;
}
.shopify-lp .sh-hero__body{ max-width:48ch; }
.shopify-lp .sh-hero__body p{ font-size:17px; line-height:1.62; }
.shopify-lp .sh-hero__body strong{ color:var(--ink); font-weight:600; }

.shopify-lp .sh-hero .ns-btnrow{ margin-top:var(--space-6); }
.shopify-lp .sh-hero .ns-btn--primary{ padding:1.05em 2.1em; font-size:var(--fs-body,17px); }

.shopify-lp .sh-hero__assure{
  list-style:none; margin:var(--space-5) 0 0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.55em 1.4em;
  color:var(--ink-60); font-size:var(--fs-small); font-weight:var(--fw-medium);
}
.shopify-lp .sh-hero__assure li{ display:inline-flex; align-items:center; gap:.5em; }
.shopify-lp .sh-hero__check{
  display:inline-grid; place-items:center;
  width:1.25em; height:1.25em; border-radius:50%;
  background:var(--grad-brand); color:#fff;
  font-size:.72em; font-weight:700; line-height:1;
}

/* Hero video — autoplay muted, works on mobile (playsinline) */
.shopify-lp .sh-hero__media{ position:relative; }
.shopify-lp .sh-hero__media::before{
  content:""; position:absolute; inset:-12% -10% -18% -8%;
  background:radial-gradient(60% 60% at 70% 35%, rgba(164,92,224,.30), transparent 70%),
            radial-gradient(55% 55% at 25% 75%, rgba(77,97,254,.22), transparent 70%);
  filter:blur(14px); z-index:0; pointer-events:none;
}
.shopify-lp .sh-hero__video-wrap{
  position:relative; z-index:1;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg,0 40px 80px -30px rgba(0,0,0,.65));
  aspect-ratio:16/9;
  background:#0a0b10;/* prevent flash of white while loading */
}
.shopify-lp .sh-hero__video{
  display:block; width:100%; height:100%;
  object-fit:cover;
}
@media (max-width:979px){
  .shopify-lp .sh-hero__media{ margin-top:var(--space-6); max-width:620px; }
}

/* Also hide body paragraph gap since we removed it */
.shopify-lp .sh-hero__body{ display:none; }

/* =========================================================================
   S3 — Trust strip
   Was: an oversized "Trusted by…" h2 above a single lonely logo.
   Now: a tight, centered divider band — a tracked mono eyebrow over the
   brand mark, framed by hairline rules so it reads as an intentional seam
   between the hero and the proof points below.
   ========================================================================= */
.shopify-lp .sh-trust{ padding-top:clamp(25.6px,16px + 2vw,41.6px); padding-bottom:clamp(25.6px,16px + 2vw,41.6px); }
.shopify-lp .sh-trust > .ns-container{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
  padding-top:clamp(22.4px,16px + 1.6vw,35.2px);
  border-top:1px solid var(--line-1);
}
.shopify-lp .sh-trust__eyebrow{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--fs-mono,11.52px);
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--ink-40);
}
.shopify-lp .sh-trust__logos{ opacity:1; gap:var(--space-6); }
.shopify-lp .sh-trust__logos img{
  height:34px; filter:none; opacity:.92;
  transition:opacity var(--dur-base,.25s) ease, transform var(--dur-base,.25s) ease;
}
.shopify-lp .sh-trust__logos img:hover{ opacity:1; transform:translateY(-1px); }

/* =========================================================================
   S4 — Stats / proof metrics
   Was: four metrics stacked vertically, mid-grey, with huge dead space — no
   visual weight, easy to miss.
   Now: a four-up card grid with bold gradient numerals, units styled down,
   hairline-framed glass tiles that lift on hover. Reads as a confident proof
   bar directly under the hero.
   ========================================================================= */
.shopify-lp .sh-stats{ padding-top:clamp(24px,16px + 2vw,48px); padding-bottom:var(--section-pad); }
.shopify-lp .sh-stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px);
}
@media (max-width:840px){ .shopify-lp .sh-stats__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .shopify-lp .sh-stats__grid{ grid-template-columns:1fr; } }

.shopify-lp .sh-stat{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
  padding:clamp(24px,16px + 2vw,36px) clamp(16px,1.5vw,24px);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform var(--dur-base,.25s) var(--ease-out,ease), border-color var(--dur-base,.25s);
}
.shopify-lp .sh-stat:hover{ transform:translateY(-4px); border-color:rgba(164,92,224,.45); }
.shopify-lp .sh-stat__num{
  font-family:var(--font-display,inherit);
  font-size:clamp(41.6px,32px + 2.4vw,57.6px);
  font-weight:800; line-height:1; letter-spacing:-0.02em;
  background:var(--grad-text,linear-gradient(135deg,#fff,#A45CE0));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.shopify-lp .sh-stat__unit{
  font-size:.42em; font-weight:600; letter-spacing:0; margin-left:.25em;
  -webkit-text-fill-color:var(--ink-60); color:var(--ink-60);
}
.shopify-lp .sh-stat__label{
  color:var(--ink-60); font-size:var(--fs-small); line-height:1.35; max-width:22ch;
}

/* =========================================================================
   Reusable two-column "split" layout + promoted section heading
   Used by the alternating copy/image sections (S5–S8). Default = copy left,
   media right; add .sh-split--reverse to flip. Tames the legacy inline
   18pt body type to a calmer reading size.
   ========================================================================= */
.shopify-lp .sh-section-title{
  font-size:clamp(30.4px,21.6px + 1.8vw,43.2px);
  font-weight:700; line-height:1.12; letter-spacing:-0.022em;
  color:var(--ink); margin:0 0 var(--space-5); max-width:18ch;
  text-wrap:balance;
}
.shopify-lp .sh-split > .ns-container{
  display:grid; gap:clamp(32px,5vw,72px); align-items:center;
}
@media (min-width:980px){
  .shopify-lp .sh-split > .ns-container{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shopify-lp .sh-split--reverse .sh-split__media{ order:-1; }
}
.shopify-lp .sh-split__copy{ min-width:0; }
.shopify-lp .sh-split__copy .ns-richtext{ max-width:52ch; }
.shopify-lp .sh-split__copy .ns-richtext p{
  font-size:17px !important; line-height:1.62; color:var(--ink-80);
}
.shopify-lp .sh-split__copy .ns-richtext p span{ font-size:inherit !important; }
.shopify-lp .sh-split__copy .ns-richtext strong{ color:var(--ink); font-weight:600; }
.shopify-lp .sh-split__copy .ns-richtext .colorText{ font-weight:700; }

.shopify-lp .sh-split__media{ position:relative; min-width:0; }
.shopify-lp .sh-split__media::before{
  content:""; position:absolute; inset:-10% -8% -14% -8%;
  background:radial-gradient(58% 58% at 60% 40%, rgba(164,92,224,.22), transparent 70%),
            radial-gradient(52% 52% at 30% 75%, rgba(77,97,254,.16), transparent 70%);
  filter:blur(16px); z-index:0; pointer-events:none;
}
.shopify-lp .sh-split__media .ns-figure{ position:relative; z-index:1; margin:0; }
.shopify-lp .sh-split__media .ns-figure img{
  width:100%; border-radius:var(--r-xl);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg,0 40px 80px -30px rgba(0,0,0,.6));
}

/* =========================================================================
   S6 — How we help you sell : feature checklist + closer line
   Was: a broken <ul>/<li> with nested <p> at 18pt, no visual hierarchy.
   Now: a proper checklist with brand check chips, a bold lead label per row,
   and a highlighted "It's a closer" payoff line.
   ========================================================================= */
.shopify-lp .sh-featurelist{
  list-style:none; margin:var(--space-5) 0 0; padding:0;
  display:grid; gap:var(--space-4); max-width:54ch;
}
.shopify-lp .sh-featurelist li{
  position:relative; padding-left:2.1em;
  color:var(--ink-70,var(--ink-60)); line-height:1.55; font-size:17px;
}
.shopify-lp .sh-featurelist li::before{
  content:"✓"; position:absolute; left:0; top:.12em;
  width:1.4em; height:1.4em; display:grid; place-items:center;
  border-radius:50%; font-size:.78em; font-weight:700; line-height:1;
  color:#fff; background:var(--grad-brand);
  box-shadow:0 6px 16px -8px rgba(164,92,224,.7);
}
.shopify-lp .sh-featurelist__label{ color:var(--ink); font-weight:600; }

.shopify-lp .sh-closer{
  margin:var(--space-6) 0 0; font-size:20px; font-weight:600; color:var(--ink);
}
.shopify-lp .sh-closer .colorText{ font-weight:800; }

/* =========================================================================
   S7 — Support team is drowning
   Was: heading + intro, then two stock images stacked full-width, then a
   42px h3 with a flat run of bold-label paragraphs and a CTA — visually heavy
   and unstructured.
   Now: two alternating split rows — the problem (copy + backlog image) then
   the solution (order-tracking image + checklist + result + CTA). The hook
   line is pulled out as an emphasized callout.
   ========================================================================= */
.shopify-lp .sh-support__row{
  display:grid; gap:clamp(32px,5vw,72px); align-items:center;
}
.shopify-lp .sh-support__row + .sh-support__row{ margin-top:clamp(48px,6vw,88px); }
@media (min-width:980px){
  .shopify-lp .sh-support__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shopify-lp .sh-support__row--rev .sh-support__media{ order:-1; }
}
.shopify-lp .sh-support__copy{ min-width:0; }
.shopify-lp .sh-support__copy .ns-richtext{ max-width:50ch; }
.shopify-lp .sh-support__copy .ns-richtext p{ font-size:17px !important; line-height:1.62; color:var(--ink-80); }
.shopify-lp .sh-support__copy .ns-richtext p span{ font-size:inherit !important; }

.shopify-lp .sh-support__hook{
  margin:var(--space-5) 0 0; font-size:clamp(19.2px,16px + .8vw,24.8px);
  font-weight:700; color:var(--ink); line-height:1.3;
}
.shopify-lp .sh-support__hook .colorText{ font-weight:800; }

.shopify-lp .sh-support__h3{
  font-size:clamp(22.4px,17.6px + 1vw,30.4px); font-weight:700;
  line-height:1.22; letter-spacing:-0.015em; color:var(--ink);
  margin:0 0 var(--space-4); max-width:24ch;
}
.shopify-lp .sh-support__result{
  margin:var(--space-5) 0 0; color:var(--ink-70,var(--ink-60));
  font-weight:600; font-size:17px;
}
.shopify-lp .sh-support .sh-featurelist{ margin-top:var(--space-4); }
.shopify-lp .sh-support .ns-btnrow{ margin-top:var(--space-6); }

.shopify-lp .sh-support__media{ position:relative; min-width:0; }
.shopify-lp .sh-support__media::before{
  content:""; position:absolute; inset:-10% -8% -14% -8%;
  background:radial-gradient(56% 56% at 60% 40%, rgba(164,92,224,.20), transparent 70%),
            radial-gradient(50% 50% at 30% 75%, rgba(77,97,254,.15), transparent 70%);
  filter:blur(16px); z-index:0; pointer-events:none;
}
.shopify-lp .sh-support__media .ns-figure{ position:relative; z-index:1; margin:0; }
.shopify-lp .sh-support__media .ns-figure img{
  width:100%; border-radius:var(--r-xl);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg,0 40px 80px -30px rgba(0,0,0,.6));
}

/* =========================================================================
   S8 — Goldmine of customer insights
   Was: heading + intro, a full-width photo, then four center-aligned 24pt/14pt
   text blobs stacked vertically, a CTA and an italic note — no card structure.
   Now: an intro/photo split on top, the four insights as a hover-lift card
   grid with gradient titles, then a centered CTA + a highlighted "free" note.
   ========================================================================= */
.shopify-lp .sh-insights__top{
  display:grid; gap:clamp(32px,5vw,72px); align-items:center;
  margin-bottom:clamp(40px,5vw,64px);
}
@media (min-width:980px){
  .shopify-lp .sh-insights__top{ grid-template-columns:1.05fr .95fr; }
}
.shopify-lp .sh-insights__copy{ min-width:0; }
.shopify-lp .sh-insights__copy .ns-richtext{ max-width:54ch; }
.shopify-lp .sh-insights__copy .ns-richtext p{ font-size:17px !important; line-height:1.62; color:var(--ink-80); }
.shopify-lp .sh-insights__copy .ns-richtext p span{ font-size:inherit !important; }
.shopify-lp .sh-insights__copy .ns-richtext .colorText{ font-weight:700; }
.shopify-lp .sh-insights__media{ position:relative; min-width:0; }
.shopify-lp .sh-insights__media::before{
  content:""; position:absolute; inset:-10% -8% -14% -8%;
  background:radial-gradient(56% 56% at 60% 40%, rgba(164,92,224,.20), transparent 70%),
            radial-gradient(50% 50% at 30% 75%, rgba(77,97,254,.15), transparent 70%);
  filter:blur(16px); z-index:0; pointer-events:none;
}
.shopify-lp .sh-insights__media .ns-figure{ position:relative; z-index:1; margin:0; }
.shopify-lp .sh-insights__media .ns-figure img{
  width:100%; border-radius:var(--r-xl); border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg,0 40px 80px -30px rgba(0,0,0,.6));
}

.shopify-lp .sh-insights__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px);
}
@media (max-width:900px){ .shopify-lp .sh-insights__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .shopify-lp .sh-insights__grid{ grid-template-columns:1fr; } }
.shopify-lp .sh-icard{
  position:relative; overflow:hidden;
  padding:clamp(22.4px,16px + 1.4vw,30.4px);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform var(--dur-base,.25s) var(--ease-out,ease), border-color var(--dur-base,.25s);
}
.shopify-lp .sh-icard::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--grad-brand); opacity:.85;
}
.shopify-lp .sh-icard:hover{ transform:translateY(-4px); border-color:rgba(164,92,224,.45); }
.shopify-lp .sh-icard__title{
  font-size:19.2px; font-weight:700; margin:0 0 8px; letter-spacing:-0.01em;
  background:var(--grad-text,linear-gradient(135deg,#fff,#A45CE0));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.shopify-lp .sh-icard p{ margin:0; color:var(--ink-60); font-size:var(--fs-small); line-height:1.5; }

.shopify-lp .sh-insights__foot{
  margin-top:clamp(40px,5vw,64px);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-5); text-align:center;
}
.shopify-lp .sh-insights__foot .ns-btnrow{ margin:0; }
.shopify-lp .sh-insights__note{
  max-width:60ch; margin:0; font-style:italic; color:var(--ink-70,var(--ink-60));
  font-size:16px; line-height:1.55;
  padding:var(--space-4) var(--space-5);
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--grad-brand-soft,rgba(164,92,224,.06));
}
.shopify-lp .sh-insights__note strong{ color:var(--ink); font-style:normal; }

/* Centered variant of the promoted section heading (used by S9 / centered blocks) */
.shopify-lp .sh-section-title--center{
  max-width:24ch; margin-inline:auto; text-align:center;
}

/* =========================================================================
   S9 — Set it up Sunday / demo video
   Was: left-aligned heading + intro, a bare video, more left text, a CTA.
   Now: a centered demo block — narrow centered headline + lead, the video
   framed inside a glowing brand halo at a controlled width, a centered
   payoff line and a large centered CTA.
   ========================================================================= */
.shopify-lp .sh-setup > .ns-container{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.shopify-lp .sh-setup__head{ max-width:760px; }
.shopify-lp .sh-setup__lead{
  margin:var(--space-4) auto 0; max-width:62ch;
  color:var(--ink-70,var(--ink-60)); font-size:18px; line-height:1.55;
}
.shopify-lp .sh-setup__videowrap{
  position:relative; width:100%; max-width:900px;
  margin:clamp(32px,4vw,48px) auto 0;
}
.shopify-lp .sh-setup__videowrap::before{
  content:""; position:absolute; inset:-6% -4% -10% -4%;
  background:radial-gradient(60% 60% at 50% 30%, rgba(164,92,224,.28), transparent 70%),
            radial-gradient(50% 50% at 50% 90%, rgba(77,97,254,.18), transparent 70%);
  filter:blur(18px); z-index:0; pointer-events:none;
}
.shopify-lp .sh-setup__videowrap .ns-video{ position:relative; z-index:1; margin:0; }
.shopify-lp .sh-setup__outro{
  margin:clamp(32px,4vw,44px) auto 0; max-width:64ch;
  color:var(--ink-80); font-size:17px; line-height:1.6;
}
.shopify-lp .sh-setup__outro strong{ color:var(--ink); font-weight:700; }
.shopify-lp .sh-setup__cta{ margin-top:var(--space-6); }

/* =========================================================================
   S10 — SMS / WhatsApp
   Was: a bare heading ("What to support Text Messaging?") + one sentence with
   an inline phone link.
   Now: a single premium horizontal card — gradient chat icon, eyebrow, clear
   headline + copy, and the phone number as a tappable pill button.
   ========================================================================= */
.shopify-lp .sh-sms__card{
  display:flex; align-items:center; gap:clamp(20px,3vw,32px);
  max-width:920px; margin-inline:auto;
  padding:clamp(24px,16px + 2vw,36px) clamp(24px,16px + 2.5vw,44px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 70px -40px rgba(164,92,224,.55);
}
.shopify-lp .sh-sms__icon{
  flex:0 0 auto; width:56px; height:56px; display:grid; place-items:center;
  border-radius:var(--r-md); background:var(--grad-brand);
  box-shadow:0 12px 28px -10px rgba(164,92,224,.7);
}
.shopify-lp .sh-sms__body{ flex:1 1 auto; min-width:0; }
.shopify-lp .sh-sms__eyebrow{
  display:inline-block; font-family:var(--font-mono); font-size:var(--fs-mono,11.52px);
  text-transform:uppercase; letter-spacing:.16em; color:var(--ink-40); margin-bottom:5.6px;
}
.shopify-lp .sh-sms__title{
  margin:0; font-size:clamp(22.4px,17.6px + 1vw,30.4px); font-weight:700;
  letter-spacing:-0.02em; color:var(--ink); line-height:1.15;
}
.shopify-lp .sh-sms__desc{ margin:8px 0 0; color:var(--ink-60); font-size:16px; line-height:1.5; }
.shopify-lp .sh-sms__cta{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:720px){
  .shopify-lp .sh-sms__card{ flex-direction:column; align-items:flex-start; text-align:left; }
  .shopify-lp .sh-sms__cta{ width:100%; }
}

/* =========================================================================
   S11 — "Do the math" comparison table
   Now uses the CANONICAL design-system table: .ns-table-wrap > .ns-table
   .ns-table--usecases (gradient-tinted header, light-on-dark, hairline rows,
   highlighted "Using NOEM" winner column, row-hover, td strong emphasis, and
   mobile horizontal scroll) — all from components.css. No bespoke table CSS.
   Only page-local rule left: centre the section head + intro to match the
   centred table, and lay out the primary + ghost CTA pair.
   ========================================================================= */
.shopify-lp .sh-compare .ns-section__title{
  text-align:center; max-width:none; margin-inline:auto;
}
.shopify-lp .sh-compare > .ns-container > .ns-richtext{
  text-align:center; max-width:72ch; margin-inline:auto;
}
.shopify-lp .sh-compare > .ns-container > .ns-richtext p span{ font-size:17px !important; }

/* "Using NOEM" winner column header — full brand gradient + white text so it
   clearly owns the eye (components.css only gives it grad-brand-soft ~18% opacity). */
.shopify-lp .sh-compare .ns-table--usecases th:last-child{
  background-image:var(--grad-brand);
  color:#fff !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.15);
}

.shopify-lp .sh-compare__cta{
  display:flex; justify-content:center; gap:var(--space-4); flex-wrap:wrap;
  margin-top:var(--space-7);
}

/* =========================================================================
   S12 — Featured testimonials
   Was: four testimonials stacked vertically — company as a heading, quote,
   author, an empty/broken "See it in action" button, then an avatar.
   Now: a real section heading + a 2x2 quote-card grid; each card has a brand
   quote mark, the quote, and an avatar + name + role/company footer.
   ========================================================================= */
.shopify-lp .sh-testi__head{ text-align:center; margin-bottom:clamp(40px,5vw,64px); }
.shopify-lp .sh-testi__eyebrow{
  display:inline-block; margin-bottom:var(--space-3);
  font-family:var(--font-mono); font-size:var(--fs-mono,11.52px);
  text-transform:uppercase; letter-spacing:.2em; color:var(--ink-40);
}
.shopify-lp .sh-testi__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.5vw,28px);
}
@media (max-width:760px){ .shopify-lp .sh-testi__grid{ grid-template-columns:1fr; } }

.shopify-lp .sh-quote{
  position:relative; margin:0; display:flex; flex-direction:column;
  padding:clamp(25.6px,16px + 2vw,36px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -44px rgba(0,0,0,.7);
  transition:transform var(--dur-base,.25s) var(--ease-out,ease), border-color var(--dur-base,.25s);
}
.shopify-lp .sh-quote:hover{ transform:translateY(-4px); border-color:rgba(164,92,224,.42); }
.shopify-lp .sh-quote__mark{
  font-family:Georgia, serif; font-size:51.2px; line-height:.6; height:.5em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; opacity:.9;
}
.shopify-lp .sh-quote__text{
  margin:var(--space-3) 0 var(--space-5); color:var(--ink-80);
  font-size:17.2px; line-height:1.6; flex:1 1 auto;
}
.shopify-lp .sh-quote__text strong{ color:var(--ink); font-weight:600; }
.shopify-lp .sh-quote__by{ display:flex; align-items:center; gap:var(--space-3); }
.shopify-lp .sh-quote__avatar{
  width:48px; height:48px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--line-2);
}
.shopify-lp .sh-quote__meta{ display:flex; flex-direction:column; min-width:0; }
.shopify-lp .sh-quote__name{ color:var(--ink); font-weight:600; font-size:15.6px; }
.shopify-lp .sh-quote__role{ color:var(--ink-40); font-size:var(--fs-small); }

/* =========================================================================
   S13 — Integrations ("Work with the tools you already use")
   Was: left heading, full-width map image, a row of LIGHT grey pills (off
   brand on the dark theme) and three tiny zinc-grey blurbs.
   Now: centered head + lead, the map framed, the pills re-skinned as dark
   glass chips that light up on hover, and the three blurbs as a 3-up card row.
   ========================================================================= */
.shopify-lp .sh-integrations__head{ text-align:center; }
.shopify-lp .sh-integrations__lead{
  margin:var(--space-4) auto 0; max-width:58ch;
  color:var(--ink-70,var(--ink-60)); font-size:17px; line-height:1.55;
}
.shopify-lp .sh-integrations__map{
  margin:clamp(32px,4vw,48px) auto 0; max-width:920px;
}
.shopify-lp .sh-integrations__map img{
  width:100%; border-radius:var(--r-xl); border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg,0 40px 80px -30px rgba(0,0,0,.6));
}
/* Re-skin embedded pills for the dark theme */
.shopify-lp .sh-integrations .pills-container{
  justify-content:center; max-width:880px; margin:clamp(24px,3vw,36px) auto 0; padding:0;
}
.shopify-lp .sh-integrations .pill{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border:1px solid var(--line-2) !important;
  color:var(--ink-80) !important;
  font-weight:500;
  transition:transform var(--dur-fast,.15s) ease, border-color var(--dur-fast,.15s) ease, background var(--dur-fast,.15s) ease;
}
.shopify-lp .sh-integrations .pill:hover{
  background:rgba(164,92,224,.12) !important;
  border-color:rgba(164,92,224,.5) !important;
  transform:translateY(-2px);
}
.shopify-lp .sh-integrations .pill img{ filter:none; }

.shopify-lp .sh-integrations__feats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px);
  margin-top:clamp(40px,5vw,64px);
}
@media (max-width:760px){ .shopify-lp .sh-integrations__feats{ grid-template-columns:1fr; } }
.shopify-lp .sh-feat{
  padding:clamp(22.4px,16px + 1.4vw,29.6px);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform var(--dur-base,.25s) var(--ease-out,ease), border-color var(--dur-base,.25s);
}
.shopify-lp .sh-feat:hover{ transform:translateY(-4px); border-color:rgba(164,92,224,.42); }
.shopify-lp .sh-feat__title{
  margin:0 0 8px; font-size:18.4px; font-weight:700; letter-spacing:-0.01em;
  background:var(--grad-text,linear-gradient(135deg,#fff,#A45CE0));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.shopify-lp .sh-feat p{ margin:0; color:var(--ink-60); font-size:var(--fs-small); line-height:1.55; }

/* =========================================================================
   S14 — Community review wall (masonry)
   Was: a heading buried AFTER a masonry of bright WHITE cards (black text on
   white, jarring on the dark theme).
   Now: the heading moved to the top with an eyebrow; the masonry cards
   re-skinned as dark glass tiles with a brand-gradient border on hover.
   ========================================================================= */
.shopify-lp .sh-reviews__head{ text-align:center; margin-bottom:clamp(16px,2vw,24px); }
.shopify-lp .sh-reviews .masonry-grid{ padding-top:0; }
.shopify-lp .sh-reviews .masonry-grid-item{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border:1px solid var(--line-2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 50px -40px rgba(0,0,0,.7) !important;
}
.shopify-lp .sh-reviews .masonry-grid-item:hover{
  background:linear-gradient(rgba(11,13,19,1), rgba(11,13,19,1)) padding-box,
            var(--grad-brand) border-box !important;
  border:1px solid transparent !important;
}
.shopify-lp .sh-reviews .testimonial-text{ color:var(--ink-80) !important; }
.shopify-lp .sh-reviews .testimonial-text strong{ color:var(--ink); }
.shopify-lp .sh-reviews .testimonial-name{ color:var(--ink-60) !important; }
.shopify-lp .sh-reviews .testimonial-avatar{ border:1px solid var(--line-2); }

/* =========================================================================
   S15 — "Turn your chat into a checkout in 3 steps" (final CTA)
   Was: left heading + intro, then three shield icons each followed by a
   subhead + paragraph stacked vertically, then a CTA.
   Now: centered head; three numbered step cards in a row with a gradient
   number badge + icon, connected on desktop; a large centered final CTA.
   ========================================================================= */
.shopify-lp .sh-steps__head{ text-align:center; }
.shopify-lp .sh-steps__lead{
  margin:var(--space-4) auto 0; max-width:54ch;
  color:var(--ink-70,var(--ink-60)); font-size:17px; line-height:1.55;
}
.shopify-lp .sh-steps__grid{
  list-style:none; margin:clamp(40px,5vw,64px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,32px);
}
@media (max-width:820px){ .shopify-lp .sh-steps__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.shopify-lp .sh-step{
  position:relative;
  padding:clamp(28px,16px + 2.4vw,40px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -44px rgba(0,0,0,.7);
  transition:transform var(--dur-base,.25s) var(--ease-out,ease), border-color var(--dur-base,.25s);
}
.shopify-lp .sh-step:hover{ transform:translateY(-5px); border-color:rgba(164,92,224,.45); }
/* kill the theme's global ordered-list counter (li::before { content:counter(...) }) */
.shopify-lp .sh-steps__grid .sh-step::before{ content:none !important; }
/* connector line between cards on desktop, aligned to the icon's centre */
@media (min-width:821px){
  .shopify-lp .sh-step + .sh-step::after{
    content:""; position:absolute; top:calc(clamp(28px,16px + 2.4vw,40px) + 36px);
    left:-1em; width:2em; height:2px;
    background:linear-gradient(90deg, rgba(164,92,224,.55), rgba(164,92,224,0));
    transform:translateX(-50%);
  }
}
.shopify-lp .sh-step__icon{
  display:inline-grid; place-items:center; width:72px; height:72px; margin-bottom:var(--space-4);
  filter:drop-shadow(0 12px 24px rgba(164,92,224,.35));
}
.shopify-lp .sh-step__icon img{ width:100%; height:100%; object-fit:contain; }
.shopify-lp .sh-step__title{
  margin:0 0 8px; font-size:20px; font-weight:700; letter-spacing:-0.01em; color:var(--ink);
}
.shopify-lp .sh-step p{ margin:0; color:var(--ink-60); font-size:16px; line-height:1.55; }
.shopify-lp .sh-steps__cta{
  display:flex; justify-content:center; margin-top:clamp(40px,5vw,56px);
}

/* =========================================================================
   PREMIUM PASS v2 — global polish on top of the per-section work.
   Goal: stop bright portrait mockups from dominating, tighten the vertical
   rhythm, lift body contrast, and unify media framing so the photographic
   assets sit inside the dark brand system instead of fighting it.
   ========================================================================= */

/* --- Tighter, more deliberate vertical rhythm for this page --- */
.shopify-lp .ns-section{ padding-top:clamp(48px, 26px + 4vw, 92px); padding-bottom:clamp(48px, 26px + 4vw, 92px); }

/* --- Contain & centre section media ---------------------------------------
   Portrait phone shots were rendering at full column width (huge, bright).
   Cap by height + centre so they read as contained product shots; landscape
   photos still fill the column (their height stays under the cap). --------- */
.shopify-lp .sh-split__media .ns-figure img,
.shopify-lp .sh-support__media .ns-figure img,
.shopify-lp .sh-insights__media .ns-figure img{
  display:block; margin-inline:auto;
  width:auto; max-width:100%;
  max-height:clamp(340px, 46vh, 460px);
}

/* Copy leads, media supports — keeps the bright mockups from owning the row */
@media (min-width:980px){
  .shopify-lp .sh-split > .ns-container{ grid-template-columns:1.15fr .85fr; }
  .shopify-lp .sh-support__row{ grid-template-columns:1.15fr .85fr; }
  .shopify-lp .sh-insights__top{ grid-template-columns:1.12fr .88fr; }
}
/* Landscape photos (office backlog / executive) should still fill the column */
.shopify-lp .sh-support__row:not(.sh-support__row--rev) .sh-support__media .ns-figure img,
.shopify-lp .sh-insights__media .ns-figure img{
  width:100%; max-height:480px; object-fit:cover; border-radius:var(--r-xl);
}

/* Calmer halos so the glow supports rather than smears the art */
.shopify-lp .sh-split__media::before,
.shopify-lp .sh-support__media::before,
.shopify-lp .sh-insights__media::before{
  inset:-6% -6% -10% -6%; filter:blur(22px); opacity:.8;
}

/* --- Body readability: a touch larger + higher contrast --- */
.shopify-lp .sh-split__copy .ns-richtext p,
.shopify-lp .sh-support__copy .ns-richtext p,
.shopify-lp .sh-insights__copy .ns-richtext p{
  font-size:17.2px !important; line-height:1.65; color:var(--ink-80);
}
.shopify-lp .sh-featurelist li{ color:var(--ink-80); }
.shopify-lp .sh-featurelist li::before{ top:.18em; }

/* --- Unified framing for every photographic figure on the page ---
   A consistent hairline + soft inner ring + drop shadow ties the bright
   stock/UI images into the dark glass aesthetic. ------------------------- */
.shopify-lp .ns-figure img{
  box-shadow:0 30px 70px -40px rgba(0,0,0,.78),
            inset 0 0 0 1px rgba(255,255,255,.06),
            inset 0 0 64px 4px rgba(7,8,12,.28);
}

/* --- Section heading rhythm: a hair tighter, balanced wrapping --- */
.shopify-lp .sh-section-title{ margin-bottom:var(--space-5); }

/* --- Hero: trim the over-long copy block so it reads premium, not wordy --- */
.shopify-lp .sh-hero__body{ color:var(--ink-70, var(--ink-60)); }
.shopify-lp .sh-hero__body p{ font-size:17px; line-height:1.6; }

/* =========================================================================
   CHAOS → ORDER (brand-guide signature) — used once on this page, on the
   "Your support team is drowning → 80% of those tickets just disappeared"
   beat. Replaces the stock office photo in the support row. The scattered
   task rows settle into a green-checked list as the section scrolls
   (driven by motion.js initChaos via --p). On-brand glass rows + success
   green checks straight from the design system.
   ========================================================================= */
.shopify-lp .sh-support__chaos{ position:relative; }
.shopify-lp .sh-support__chaos::before{
  content:""; position:absolute; inset:-16% -8%; z-index:0; pointer-events:none;
  background:radial-gradient(56% 56% at 50% 42%, rgba(164,92,224,.16), transparent 70%),
            radial-gradient(48% 48% at 60% 80%, rgba(70,224,138,.10), transparent 72%);
  filter:blur(22px);
}
.shopify-lp .sh-support__chaos .ns-chaos{
  position:relative; z-index:1; max-width:none; margin:0;
}
.shopify-lp .sh-support__chaos .ns-chaos__item{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.shopify-lp .sh-support__chaos .ns-chaos__label{ font-size:16px; line-height:1.3; }
@media (max-width:979px){
  /* On small screens reduce the horizontal scatter so rows don't fly off-card */
  .shopify-lp .sh-support__chaos .ns-chaos__item{ --sx:0px !important; }
}

/* =========================================================================
   CONVERSION ADDITIONS (content adopted from shopify.noem.ai)
   - FAQ accordion (objection handling) using the brand-guide canonical
     <details> component — the page had none.
   - Risk-reversal trio on the hero + a money-back guarantee row on the
     final CTA.
   ========================================================================= */

/* FAQ — uses the shared .premium-main details.ns-accordion__item styling;
   just give the band its rhythm + center the head. */
.shopify-lp .sh-faq .ns-section__head{ text-align:center; margin-bottom:clamp(32px,4vw,48px); }
.shopify-lp .sh-faq .ns-eyebrow{
  display:inline-block; margin-bottom:var(--space-3);
  font-family:var(--font-mono); font-size:var(--fs-mono,11.52px);
  text-transform:uppercase; letter-spacing:.2em; color:var(--ink-40);
}
.shopify-lp .sh-faq .ns-section__title--center{ text-align:center; max-width:none; margin-inline:auto; }
.shopify-lp .sh-faq .ns-accordion{ margin-inline:auto; }
.shopify-lp .sh-faq .ns-accordion__panel a{ color:var(--periwinkle); font-weight:600; }

/* Final-CTA guarantee / risk-reversal row (mirrors the hero assurance) */
.shopify-lp .sh-steps__assure{
  list-style:none; margin:var(--space-5) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55em 1.5em;
  color:var(--ink-60); font-size:var(--fs-small); font-weight:var(--fw-medium);
}
.shopify-lp .sh-steps__assure li{ display:inline-flex; align-items:center; gap:.5em; }
.shopify-lp .sh-step-check{
  display:inline-grid; place-items:center; width:1.25em; height:1.25em;
  border-radius:50%; background:var(--grad-brand); color:#fff;
  font-size:.72em; font-weight:700; line-height:1;
}

/* =========================================================================
   NEW SECTIONS — imported from shopify.noem.ai
   ========================================================================= */

/* Problem section — 3 stat cards replacing old split layout */
.shopify-lp .sh-problem{ text-align:center; }
.shopify-lp .sh-problem__head{ max-width:64ch; margin:0 auto var(--space-8); }
.shopify-lp .sh-problem__lead{
  margin:var(--space-4) auto 0; max-width:56ch;
  font-size:17px; line-height:1.62; color:var(--ink-70);
}
.shopify-lp .sh-problem__cards{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:720px){ .shopify-lp .sh-problem__cards{ grid-template-columns:1fr; } }

.shopify-lp .sh-problem-card{
  text-align:left; padding:clamp(24px,3vw,36px);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s ease, transform .25s ease;
}
.shopify-lp .sh-problem-card:hover{ border-color:rgba(164,92,224,.4); transform:translateY(-3px); }
.shopify-lp .sh-problem-card__stat{
  display:block; margin-bottom:var(--space-3);
  font-size:clamp(40px,5vw,56px); font-weight:800; line-height:1; letter-spacing:-0.03em;
  background:var(--grad-text,linear-gradient(135deg,#fff,#A45CE0));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.shopify-lp .sh-problem-card__stat small{
  font-size:.42em; font-weight:600; letter-spacing:0;
  -webkit-text-fill-color:var(--ink-60); color:var(--ink-60);
}
.shopify-lp .sh-problem-card__title{
  font-size:18px; font-weight:700; color:var(--ink); margin:0 0 var(--space-3);
}
.shopify-lp .sh-problem-card__body{ font-size:15px; line-height:1.6; color:var(--ink-60); margin:0; }

/* Why Now — urgency beat */
.shopify-lp .sh-whynow{ padding-top:0; }
.shopify-lp .sh-whynow__card{
  max-width:680px; margin:0 auto;
  padding:clamp(32px,4vw,52px) clamp(28px,4vw,56px);
  background:linear-gradient(135deg, rgba(77,97,254,.12), rgba(200,74,241,.08));
  border:1px solid rgba(164,92,224,.25);
  border-radius:var(--r-xl);
  box-shadow:0 0 80px -40px rgba(164,92,224,.35);
  text-align:center;
}
.shopify-lp .sh-whynow__kicker{
  display:inline-block; margin-bottom:var(--space-3);
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.2em; color:var(--violet);
}
.shopify-lp .sh-whynow__title{
  font-size:clamp(24px,2.8vw,34px); font-weight:700; line-height:1.15;
  letter-spacing:-0.02em; color:var(--ink); margin:0 0 var(--space-4);
}
.shopify-lp .sh-whynow__body{
  font-size:17px; line-height:1.62; color:var(--ink-70); margin:0;
}

/* Differentiators — 3-card "Why NOEM" section */
.shopify-lp .sh-diff__head{ text-align:center; margin-bottom:clamp(32px,4vw,48px); }
.shopify-lp .sh-diff__head .ns-eyebrow{
  display:inline-block; margin-bottom:var(--space-3);
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.2em; color:var(--ink-40);
}
.shopify-lp .sh-diff__grid{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:840px){ .shopify-lp .sh-diff__grid{ grid-template-columns:1fr; } }

.shopify-lp .sh-diff-card{
  padding:clamp(24px,3vw,36px);
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s ease, transform .25s ease;
}
.shopify-lp .sh-diff-card:hover{ border-color:rgba(77,97,254,.35); transform:translateY(-3px); }
.shopify-lp .sh-diff-card__icon{
  display:block; font-size:28px; margin-bottom:var(--space-4); line-height:1;
}
.shopify-lp .sh-diff-card__title{
  font-size:18px; font-weight:700; color:var(--ink); margin:0 0 var(--space-3);
}
.shopify-lp .sh-diff-card__body{ font-size:15px; line-height:1.65; color:var(--ink-60); margin:0; }

/* sh-problem head eyebrow (reuses .ns-eyebrow pattern scoped here) */
.shopify-lp .sh-problem__head .ns-eyebrow{
  display:inline-block; margin-bottom:var(--space-3);
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.2em; color:var(--ink-40);
}