/* ============================================================================
   noem.ai — AI Sentiment Analysis page (post 2647) — scoped premium polish.
   Loaded ONLY on this page (see functions.php is_page(2647)). Builds on
   tokens.css + components.css. Scoped to .premium-main so it never leaks.
   Each block below is keyed to one section, reviewed section-by-section for
   brand alignment, spacing/rhythm, layout, typography and motion.
   ============================================================================ */

.premium-main { --sent-maxw: 1100px; }

/* ── Section 1 · Announcement bar ──────────────────────────────────────────
   Was a 271px empty band holding one line of dim body text. Recast as a
   compact, centred premium pill that sits just above the hero (no big gap). */
.premium-main .ns-sec--announce{ padding-top:clamp(28px,5vw,44px); padding-bottom:0; }
.premium-main .ns-sec--announce .ns-container{ display:flex; justify-content:center; }
.premium-main .ns-sec--announce .ns-richtext{ margin:0; }
.premium-main .sent-announce{
  display:inline-flex; align-items:center; gap:.6em; margin:0;
  padding:.6em 1.25em; border-radius:var(--r-pill);
  background:var(--grad-brand-soft);
  border:1px solid transparent;
  background-origin:border-box;
  background-clip:padding-box, border-box;
  background-image:var(--grad-brand-soft), var(--grad-border);
  color:var(--ink-80); font-size:var(--fs-small); font-weight:var(--fw-medium);
  letter-spacing:.01em; line-height:1.3; text-align:center;
  box-shadow:0 10px 30px -16px rgba(164,92,224,.5);
  backdrop-filter:blur(var(--blur));
}
.premium-main .sent-announce__dot{
  width:8px; height:8px; flex:0 0 auto; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 0 rgba(255,204,112,.6);
  animation:sent-pulse 2.4s var(--ease-out) infinite;
}
@keyframes sent-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,204,112,.55); }
  70%{ box-shadow:0 0 0 9px rgba(255,204,112,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,204,112,0); }
}
@media (prefers-reduced-motion:reduce){ .premium-main .sent-announce__dot{ animation:none; } }

/* ── Section 2 · Hero ──────────────────────────────────────────────────────
   Was: small 32px headline + full-width report image stacked, copy stranded in
   the left half on desktop. Now a balanced two-column hero — display headline
   and lead left, the report visual right with depth + a soft brand glow. */
.premium-main .ns-sec--hero{ padding-top:clamp(36px,5vw,64px); padding-bottom:var(--section-pad); position:relative; }
.premium-main .ns-hero__grid{ display:grid; gap:var(--space-7); align-items:center; }
@media (min-width:980px){ .premium-main .ns-hero__grid{ grid-template-columns:1.02fr 1.05fr; gap:var(--space-8); } }
.premium-main .ns-hero__title{
  font-size:var(--fs-display); font-weight:var(--fw-bold); line-height:var(--lh-tight);
  letter-spacing:var(--tracking-display); color:var(--ink); margin:0 0 var(--space-5); max-width:14ch;
}
.premium-main .ns-hero__lead{ margin:0 0 var(--space-6); }
.premium-main .ns-hero__lead p{ font-size:var(--fs-lead); line-height:var(--lh-normal); color:var(--ink-60); margin:0; max-width:46ch; }
.premium-main .ns-hero .ns-btnrow{ margin:0; }
/* media: framed, floated card with a brand glow behind it */
.premium-main .ns-hero__media{ position:relative; }
.premium-main .ns-hero__media::before{
  content:""; position:absolute; inset:-12% -8% -8% -6%; z-index:0;
  background:var(--glow-brand); filter:blur(6px); pointer-events:none;
}
.premium-main .ns-hero__media .ns-figure{ position:relative; z-index:1; margin:0; }
.premium-main .ns-hero__media img{
  width:100%; display:block; border-radius:var(--r-xl);
  border:1px solid var(--line-2); box-shadow:var(--shadow-lg);
  transition:transform var(--dur-slow) var(--ease-out);
}
.premium-main .ns-hero__media:hover img{ transform:translateY(-6px) scale(1.012); }
@media (prefers-reduced-motion:reduce){ .premium-main .ns-hero__media:hover img{ transform:none; } }
/* the self-framed inline-SVG "report" card (.sent-hero__report) is a shared
   component — its styles live in components.css so it works on any page. */

/* ── Section 3 · Trust strip ───────────────────────────────────────────────
   Was a 48px left-aligned H2 "Trusted by…" stranded over one logo. Recast as a
   centred, compact credibility strip with an uppercase tracked label. */
.premium-main .sent-sec--trust{ padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px); text-align:center; }
.premium-main .sent-trust__label{
  margin:0 0 var(--space-5); font-family:var(--font-mono);
  font-size:var(--fs-mono); font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--ink-40);
}
.premium-main .sent-trust__logos{ gap:var(--space-6); }
.premium-main .sent-trust__logos img{ height:34px; filter:none; opacity:.92; }

/* ── Section 4 · Pull-quote ────────────────────────────────────────────────
   Was a small left-aligned lead line. Now a centred premium pull-quote with a
   large gradient quote-mark flourish and a structured attribution. */
.premium-main .sent-sec--quote{ text-align:center; }
.premium-main .sent-quote{ margin:0; position:relative; padding-top:var(--space-7); }
.premium-main .sent-quote::before{
  content:"\201C"; position:absolute; top:-.18em; left:50%; transform:translateX(-50%);
  font-family:Georgia,serif; font-size:clamp(80px,12vw,140px); line-height:1;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; opacity:.9; pointer-events:none;
}
.premium-main .sent-quote__text{
  margin:0 auto var(--space-6); max-width:24ch;
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--fs-h2); line-height:var(--lh-snug); letter-spacing:var(--tracking-tight);
  color:var(--ink); text-wrap:balance;
}
.premium-main .sent-quote__cite{ display:inline-flex; flex-direction:column; gap:2px; }
.premium-main .sent-quote__name{ font-weight:var(--fw-semibold); color:var(--ink); font-size:var(--fs-body); }
.premium-main .sent-quote__role{ font-size:var(--fs-small); color:var(--ink-40); }

/* ── Section 5 · Statement / prose ─────────────────────────────────────────
   Was an oversized (18pt) left-aligned wall of body text under a small div
   heading. Now: a real section heading + a constrained, readable measure with
   a highlighted lead paragraph and consistent vertical rhythm. */
.premium-main .sent-sec--statement .sent-statement__title{
  font-size:var(--fs-h2); font-weight:var(--fw-bold); line-height:var(--lh-snug);
  letter-spacing:var(--tracking-tight); color:var(--ink); margin:0 0 var(--space-6); max-width:18ch;
}
.premium-main .sent-prose{ max-width:62ch; }
.premium-main .sent-prose p{ font-size:var(--fs-lead); line-height:var(--lh-relaxed); color:var(--ink-60); margin:0 0 var(--space-5); }
.premium-main .sent-prose p:last-child{ margin-bottom:0; }
.premium-main .sent-prose__lead{ color:var(--ink-80) !important; }
.premium-main .sent-em{ color:var(--ink); font-weight:var(--fw-semibold); }

/* ── Section 6 · Value prop + testimonial grid ─────────────────────────────
   Was: heading + intro, then FOUR testimonials stacked full-width with
   inline black text (invisible on dark) and inconsistent/empty buttons.
   Now: a two-column value intro + a tidy 2×2 grid of premium testimonial
   cards (legible ink, rounded avatars, company merged into the role line). */
.premium-main .sent-value__grid{ display:grid; gap:var(--space-7); align-items:center; margin-bottom:var(--space-8); }
@media (min-width:980px){ .premium-main .sent-value__grid{ grid-template-columns:1fr 1fr; gap:var(--space-8); } }
.premium-main .sent-value__title{ margin-bottom:var(--space-5); max-width:16ch; }
.premium-main .sent-value__lead p{ font-size:var(--fs-lead); line-height:var(--lh-normal); color:var(--ink-60); margin:0 0 var(--space-4); }
.premium-main .sent-value__media{ margin:0; }
.premium-main .sent-value__media img{ width:100%; display:block; border-radius:var(--r-xl); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); }

.premium-main .sent-tgrid{ display:grid; gap:var(--space-5); }
@media (min-width:760px){ .premium-main .sent-tgrid{ grid-template-columns:repeat(2,1fr); } }
.premium-main .sent-tcard{
  margin:0; display:flex; flex-direction:column; gap:var(--space-5);
  background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:var(--space-6); box-shadow:var(--shadow-md);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.premium-main .sent-tcard:hover{ transform:translateY(-4px); border-color:var(--line-3); }
@media (prefers-reduced-motion:reduce){ .premium-main .sent-tcard:hover{ transform:none; } }
.premium-main .sent-tcard__quote{
  margin:0; flex:1 1 auto; font-size:var(--fs-body); line-height:var(--lh-relaxed); color:var(--ink-80);
}
.premium-main .sent-tcard__quote b{ color:var(--ink); font-weight:var(--fw-semibold); }
.premium-main .sent-tcard__cite{ display:flex; align-items:center; gap:var(--space-4); }
.premium-main .sent-tcard__avatar{ width:48px; height:48px; flex:0 0 auto; border-radius:50%; object-fit:cover; border:2px solid var(--line-3); }
.premium-main .sent-tcard__meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.premium-main .sent-tcard__name{ font-weight:var(--fw-semibold); color:var(--ink); font-size:var(--fs-small); }
.premium-main .sent-tcard__role{ font-size:var(--fs-mono); color:var(--ink-40); }

/* ── Section 7 · "Industry standard" shock ─────────────────────────────────
   Was: heading + oversized prose + full-width image + more oversized prose.
   Now: a two-column intro (copy + shock image), a constrained pricing detail
   with the eye-watering figures dramatised, and a punch-line callout. */
.premium-main .sent-shock__grid{ display:grid; gap:var(--space-7); align-items:center; margin-bottom:var(--space-7); }
@media (min-width:980px){ .premium-main .sent-shock__grid{ grid-template-columns:1.05fr .95fr; gap:var(--space-8); } }
.premium-main .sent-shock__title{ margin-bottom:var(--space-5); max-width:16ch; }
.premium-main .sent-shock__media{ margin:0; }
.premium-main .sent-shock__media img{ width:100%; display:block; border-radius:var(--r-xl); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); }
.premium-main .sent-shock__detail{ max-width:64ch; }
.premium-main .sent-price{ color:var(--danger); font-weight:var(--fw-semibold); white-space:nowrap; }
.premium-main .sent-punch{
  margin:var(--space-6) 0 0; max-width:64ch;
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--fs-h3); line-height:var(--lh-snug); letter-spacing:var(--tracking-tight);
  color:var(--ink);
}
.premium-main .sent-punch::before{ content:""; display:block; width:42px; height:3px; border-radius:var(--r-pill); background:var(--grad-brand); margin-bottom:var(--space-4); }

/* ── Section 8 · "Comes standard" — video + feature accordion ──────────────
   Was: heading, video, an accordion with EMPTY bodies, then the matching
   descriptions floating below as orphan paragraphs. Now paired back together:
   video left, a real accordion (summary + body) right, closing note below. */
.premium-main .sent-sec--standard .sent-std__head{ max-width:var(--container-narrow); margin-bottom:var(--space-7); }
.premium-main .sent-std__head .ns-section__title{ margin-bottom:var(--space-4); max-width:20ch; }
.premium-main .sent-std__head .ns-richtext p{ font-size:var(--fs-lead); color:var(--ink-60); line-height:var(--lh-normal); margin:0; }
.premium-main .sent-std__grid{ display:grid; gap:var(--space-7); align-items:start; }
@media (min-width:980px){ .premium-main .sent-std__grid{ grid-template-columns:1.05fr .95fr; gap:var(--space-8); } }
.premium-main .sent-std__video{ position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow-lg); }
.premium-main .sent-std__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.premium-main .sent-std__listlabel{ margin:0 0 var(--space-4); font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--periwinkle); }
/* native <details> accordion */
.premium-main .sent-accordion .ns-accordion__item{ background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-md); margin-bottom:var(--space-3); overflow:hidden; transition:border-color var(--dur-base) var(--ease-out); }
.premium-main .sent-accordion .ns-accordion__item:hover{ border-color:var(--line-3); }
.premium-main .sent-accordion .ns-accordion__item[open]{ border-color:rgba(165,175,246,.4); }
.premium-main .sent-accordion summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:var(--space-5); font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-body); color:var(--ink); }
.premium-main .sent-accordion summary::-webkit-details-marker{ display:none; }
.premium-main .sent-accordion summary::after{ content:"+"; flex:0 0 auto; font-size:1.4em; line-height:1; color:var(--violet); transition:transform var(--dur-base) var(--ease-out); }
.premium-main .sent-accordion .ns-accordion__item[open] summary::after{ content:"−"; }
.premium-main .sent-accordion .ns-accordion__body{ padding:0 var(--space-5) var(--space-5); color:var(--ink-60); line-height:var(--lh-relaxed); font-size:var(--fs-small); }
.premium-main .sent-std__note{ margin:var(--space-7) auto 0; max-width:var(--container-narrow); text-align:center; font-size:var(--fs-lead); color:var(--ink-60); line-height:var(--lh-normal); }

/* ── Section 9 · SMS / WhatsApp callout ────────────────────────────────────
   Was a big H2 over one small left-aligned line. Now a centred glass callout
   card with channel pills and a prominent tap-to-text CTA. */
.premium-main .sent-sms{
  position:relative; text-align:center; padding:clamp(32px,5vw,56px);
  border-radius:var(--r-xl); border:1px solid transparent;
  background:linear-gradient(var(--bg-elev),var(--bg-elev)) padding-box, var(--grad-border) border-box;
  box-shadow:var(--shadow-md); overflow:hidden;
}
.premium-main .sent-sms::before{ content:""; position:absolute; inset:0; background:var(--glow-brand); opacity:.6; pointer-events:none; }
.premium-main .sent-sms > *{ position:relative; z-index:1; }
.premium-main .sent-sms__pills{ display:inline-flex; gap:var(--space-2); margin-bottom:var(--space-4); }
.premium-main .sent-sms__pill{ font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--periwinkle); background:var(--grad-brand-soft); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:.35em .9em; }
.premium-main .sent-sms__title{ font-size:var(--fs-h2); font-weight:var(--fw-bold); letter-spacing:var(--tracking-tight); line-height:var(--lh-snug); color:var(--ink); margin:0 0 var(--space-4); }
.premium-main .sent-sms__text{ font-size:var(--fs-lead); color:var(--ink-60); margin:0 auto var(--space-6); max-width:42ch; line-height:var(--lh-normal); }
.premium-main .sent-sms__cta{ font-variant-numeric:tabular-nums; }

/* ── Section 10 · "Do the math" comparison ─────────────────────────────────
   The embedded table CSS was built for a LIGHT page (#111 text on transparent
   → invisible on dark) and the two CTAs stacked as identical primaries. Re-skin
   the table for the dark system, emphasise the noem $0 column, pair the CTAs. */
.premium-main .sent-math__head{ max-width:var(--container-narrow); margin:0 auto var(--space-6); text-align:center; }
.premium-main .sent-math__head .ns-section__title{ margin-bottom:var(--space-4); margin-inline:auto; max-width:none; }
.premium-main .sent-math__intro p{ font-size:var(--fs-lead); color:var(--ink-60); line-height:var(--lh-normal); margin:0 0 var(--space-3); }
.premium-main .sent-math__intro p:last-child{ margin-bottom:0; }

.premium-main .compare-wrap{ color:var(--ink-80); max-width:var(--sent-maxw); margin-inline:auto; }
.premium-main .compare{ border:1px solid var(--line-2); box-shadow:var(--shadow-md); }
.premium-main .compare thead th{ background:var(--grad-brand); font-size:var(--fs-small); letter-spacing:.01em; }
.premium-main .compare tbody td{ border-bottom-color:var(--line-1); color:var(--ink-80); font-size:var(--fs-body); }
.premium-main .compare tbody td.platform{ background:transparent; }
.premium-main .compare tbody td.platform .brand{ color:var(--ink); font-weight:var(--fw-semibold); }
/* competitor column reads as a cost; noem column reads as a win */
.premium-main .compare tbody td:nth-child(2){ color:var(--ink-40) !important; }
.premium-main .compare tbody td:nth-child(3){ color:var(--success) !important; font-weight:var(--fw-semibold); }
/* mobile card mode: dark elevated cards */
@media (max-width:900px){
  .premium-main .compare tr{ background:var(--bg-elev); border-color:var(--line-2); box-shadow:var(--shadow-sm); }
  .premium-main .compare td{ border-bottom-color:var(--line-1); }
  .premium-main .compare td[data-label]::before{ color:var(--ink-40); }
  .premium-main .compare td.platform{ background:var(--grad-brand); }
  .premium-main .compare td.platform .brand{ color:#fff; }
}
.premium-main .sent-math__outro{ max-width:62ch; margin:var(--space-7) auto 0; text-align:center; }
.premium-main .sent-math__outro p{ font-size:var(--fs-lead); color:var(--ink-60); line-height:var(--lh-normal); margin:0 0 var(--space-3); }
.premium-main .sent-math__cta{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; margin-top:var(--space-6); }

/* ── Section 11 · "What's in the report" feature list ──────────────────────
   Was oversized paragraphs each prefixed with a broken "?" glyph (lost icons).
   Now a two-column layout: a gradient-check feature list + the report image. */
.premium-main .sent-report__grid{ display:grid; gap:var(--space-7); align-items:center; }
@media (min-width:980px){ .premium-main .sent-report__grid{ grid-template-columns:1.1fr .9fr; gap:var(--space-8); } }
.premium-main .sent-report__title{ margin-bottom:var(--space-6); max-width:18ch; }
.premium-main .sent-featlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-5); }
.premium-main .sent-featlist__item{ display:flex; gap:var(--space-4); align-items:flex-start; }
.premium-main .sent-featlist__icon{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--grad-brand); position:relative; box-shadow:0 6px 18px -6px rgba(164,92,224,.6); margin-top:2px; }
.premium-main .sent-featlist__icon::after{ content:""; position:absolute; left:9px; top:7px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.premium-main .sent-featlist__body{ margin:0; font-size:var(--fs-body); line-height:var(--lh-normal); color:var(--ink-60); }
.premium-main .sent-featlist__title{ color:var(--ink); font-weight:var(--fw-semibold); }
.premium-main .sent-report__media{ margin:0; }
.premium-main .sent-report__media img{ width:100%; display:block; border-radius:var(--r-xl); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); }

/* ── Section 12 · Integrations ─────────────────────────────────────────────
   Was: heading + image + light-grey pills (built for a white page) + three
   unstyled (Tailwind-classed) blurbs. Now: centred head, framed image, dark
   brand pills, and a 3-up card grid for the capability blurbs. */
.premium-main .sent-intg__head{ max-width:var(--container-narrow); margin:0 auto var(--space-7); text-align:center; }
.premium-main .sent-intg__head .ns-section__title{ margin-inline:auto; margin-bottom:var(--space-3); max-width:none; }
.premium-main .sent-intg__lead{ font-size:var(--fs-lead); color:var(--ink-60); margin:0; }
.premium-main .sent-intg__media{ margin:0 auto var(--space-6); max-width:var(--sent-maxw); }
.premium-main .sent-intg__media img{ width:100%; display:block; border-radius:var(--r-xl); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); }
/* dark brand pills (override the embedded light styles) */
.premium-main .pills-container{ justify-content:center; gap:10px; max-width:var(--sent-maxw); margin-inline:auto; padding:0; }
.premium-main .pills-container .pill{
  background:var(--bg-elev); border:1px solid var(--line-2); color:var(--ink-80);
  border-radius:var(--r-pill); padding:.55em 1.1em; font-size:var(--fs-small); font-weight:var(--fw-medium);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.premium-main .pills-container .pill:hover{ background:var(--bg-elev-2); border-color:var(--periwinkle); transform:translateY(-2px); }
.premium-main .pills-container .pill img{ width:18px; height:18px; }
@media (prefers-reduced-motion:reduce){ .premium-main .pills-container .pill:hover{ transform:none; } }
/* capability cards */
.premium-main .sent-intg__features{ display:grid; gap:var(--space-5); margin-top:var(--space-8); }
@media (min-width:760px){ .premium-main .sent-intg__features{ grid-template-columns:repeat(3,1fr); } }
.premium-main .sent-intg__card{ background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--space-6); box-shadow:var(--shadow-md); }
.premium-main .sent-intg__card-title{ font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--ink); margin:0 0 var(--space-3); }
.premium-main .sent-intg__card-text{ font-size:var(--fs-small); color:var(--ink-60); line-height:var(--lh-relaxed); margin:0; }

/* ── Section 13 · Testimonial wall (masonry) ───────────────────────────────
   Was: a WHITE-card masonry grid (built for a light page) with the section
   title orphaned at the BOTTOM as a card. Title moved to a proper head; cards
   re-skinned to dark elevated tiles (keeps the gradient-border hover). */
.premium-main .sent-wall__head{ max-width:var(--container-narrow); margin:0 auto var(--space-5); text-align:center; }
.premium-main .sent-wall__head .ns-section__title{ margin-inline:auto; margin-bottom:var(--space-3); max-width:none; }
.premium-main .sent-wall__lead{ font-size:var(--fs-lead); color:var(--ink-60); margin:0; }
.premium-main .masonry-grid{ padding-top:0; }
.premium-main .masonry-grid-item{
  background:var(--bg-elev) !important; border:1px solid var(--line-2) !important;
  box-shadow:var(--shadow-md) !important; border-radius:var(--r-lg) !important;
}
.premium-main .masonry-grid-item:hover{
  background:linear-gradient(var(--bg-elev),var(--bg-elev)) padding-box,
             linear-gradient(120deg,var(--indigo),var(--magenta)) border-box !important;
  border:1px solid transparent !important;
}
.premium-main .masonry-grid-item .testimonial-text{ color:var(--ink-80) !important; }
.premium-main .masonry-grid-item .testimonial-text strong{ color:var(--ink); }
.premium-main .masonry-grid-item .testimonial-name{ color:var(--ink) !important; }
.premium-main .masonry-grid-item .testimonial-avatar{ border:2px solid var(--line-3); }

/* ── Section 14 · "Checkout in 3 steps" ────────────────────────────────────
   Was: heading + three stacked icon/title/paragraph blocks + a lone button.
   Now: centred head + a numbered 3-step card grid + a centred CTA. */
.premium-main .sent-steps__head{ max-width:var(--container-narrow); margin:0 auto var(--space-8); text-align:center; }
.premium-main .sent-steps__head .ns-section__title{ margin-inline:auto; margin-bottom:var(--space-3); max-width:none; }
.premium-main .sent-steps__lead{ font-size:var(--fs-lead); color:var(--ink-60); margin:0; }
.premium-main .sent-steps__grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-5); counter-reset:step; }
@media (min-width:860px){ .premium-main .sent-steps__grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-6); } }
.premium-main .sent-step{
  position:relative; background:var(--bg-elev); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:var(--space-6); box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; gap:var(--space-3);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.premium-main .sent-step:hover{ transform:translateY(-4px); border-color:var(--line-3); }
@media (prefers-reduced-motion:reduce){ .premium-main .sent-step:hover{ transform:none; } }
.premium-main .sent-step__num{
  position:absolute; top:var(--space-5); right:var(--space-5);
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-h2);
  line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; opacity:.7;
}
.premium-main .sent-step__icon{ margin:0; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-md); background:var(--grad-brand-soft); border:1px solid var(--line-2); }
.premium-main .sent-step__icon img{ width:32px; height:32px; object-fit:contain; }
.premium-main .sent-step__title{ font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--ink); margin:var(--space-2) 0 0; }
.premium-main .sent-step__text{ font-size:var(--fs-small); color:var(--ink-60); line-height:var(--lh-relaxed); margin:0; }
.premium-main .sent-steps__cta{ display:flex; justify-content:center; margin-top:var(--space-8); }