/* ============================================================================
   product.css — scoped premium styles for the Product pages
   (Features, How It Works, Integrations). Enqueued in functions.php gated on the
   three page IDs. Builds on tokens.css + components.css (.ns-* design system);
   everything here is scoped to `.premium-main .pr-page` so it can't leak.
   ============================================================================ */

/* ---- hero ---------------------------------------------------------------- */
/* physical longhands (not padding-block): legacy style.min.css ships
   section{padding-bottom:0} which beats logical padding-block. Also the spaces
   in the clamp math matter — `3rem+6vw` without spaces is invalid CSS. */
.premium-main .pr-page .pr-hero{ padding-top:clamp(5rem, 3rem + 6vw, 8rem); padding-bottom:var(--section-pad); }
.premium-main .pr-page .pr-hero .ns-section__title{ font-size:var(--fs-h1); max-width:20ch; }
.premium-main .pr-page .pr-actions{
  display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-6);
}
/* freshness caption (visible dateModified signal for AEO/GEO) */
.premium-main .pr-page .pr-dateline{
  margin:var(--space-5) 0 0; text-align:center; color:var(--ink-40);
  font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.04em;
}

/* ---- shared icon tile (features cards / section accents) ----------------- */
.premium-main .pr-page .pr-ico{
  width:52px; height:52px; border-radius:var(--r-md); display:grid; place-items:center;
  font-size:26px; line-height:1; background-image:var(--grad-brand-soft);
  border:1px solid var(--line-2); margin-bottom:var(--space-4);
}

/* ---- 3-up "outcome" cards ------------------------------------------------ */
.premium-main .pr-page .pr-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
@media (max-width:860px){ .premium-main .pr-page .pr-cols{ grid-template-columns:1fr; } }

/* ---- How It Works: numbered steps --------------------------------------- */
.premium-main .pr-page .pr-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); counter-reset:step; }
@media (max-width:860px){ .premium-main .pr-page .pr-steps{ grid-template-columns:1fr; } }
.premium-main .pr-page .pr-step{
  position:relative; background:var(--bg-elev); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:var(--space-6);
}
.premium-main .pr-page .pr-step__num{
  width:46px; height:46px; border-radius:var(--r-pill); display:grid; place-items:center;
  font-weight:800; color:#fff; background-image:var(--grad-brand); margin-bottom:var(--space-4);
}
.premium-main .pr-page .pr-step h3{ margin:0 0 var(--space-2); color:var(--ink); }
.premium-main .pr-page .pr-step p{ margin:0; color:var(--ink-60); }

/* ---- Integrations grid --------------------------------------------------- */
.premium-main .pr-page .pr-cat{ margin-bottom:var(--space-6); }
.premium-main .pr-page .pr-cat .ns-eyebrow{ margin-bottom:var(--space-4); }
.premium-main .pr-page .pr-int-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
@media (max-width:1024px){ .premium-main .pr-page .pr-int-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .premium-main .pr-page .pr-int-grid{ grid-template-columns:1fr; } }
.premium-main .pr-page .pr-int{
  display:flex; align-items:center; gap:var(--space-3); background:var(--bg-elev);
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:var(--space-4);
  transition:border-color var(--dur-base), transform var(--dur-base);
}
.premium-main .pr-page .pr-int:hover{ border-color:rgba(164,92,224,.5); transform:translateY(-2px); }
.premium-main .pr-page .pr-int__ico{
  width:42px; height:42px; flex:0 0 42px; border-radius:10px; display:grid; place-items:center;
  font-size:21px; line-height:1; background:var(--bg-glass); border:1px solid var(--line-2);
}
/* vendor logos in brand color by default; white filter only for near-black logos */
.premium-main .pr-page .pr-int__ico img{ width:24px; height:24px; object-fit:contain; }
.premium-main .pr-page .pr-int__ico--dark img{ filter:brightness(0) invert(1); opacity:.85; }
/* very bright logos (intercom cyan, mailchimp yellow) toned down slightly */
.premium-main .pr-page .pr-int__ico--bright img{ opacity:.75; }
.premium-main .pr-page .pr-int__txt{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.premium-main .pr-page .pr-int__name{ font-weight:600; color:var(--ink); line-height:1.2; }
.premium-main .pr-page .pr-int__desc{ font-size:var(--fs-small); color:var(--ink-60); }
/* "how it connects" badge — Native vs via Zapier / Make / API / Webhook */
.premium-main .pr-page .pr-int__via{
  align-self:flex-start; font-family:var(--font-mono); font-size:var(--fs-mono); line-height:1;
  color:var(--periwinkle); background:var(--bg-glass); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:4px 8px; letter-spacing:.02em;
}
.premium-main .pr-page .pr-int__via--native{ color:var(--indigo); border-color:rgba(77,97,254,.35); }

/* ====================================================================
   Features page — redesign layer (page-scoped, token-only).
   Composing system components into a premium rhythm needs a few rules the
   shared library doesn't cover: a bento MOSAIC on the 4-col premium grid,
   spotlight UI mockups, a stats band (premium-main has no .ns-stats
   container), 4-up cards, and hero proof chips. All scoped to
   .premium-main .pr-page; every value is a token.
   ==================================================================== */

/* "New" tag */
.premium-main .pr-page .pr-new{
  display:inline-block; margin-left:.4em; padding:.1em .55em; vertical-align:middle;
  font-family:var(--font-mono); font-size:.62em; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background-image:var(--grad-brand); border-radius:var(--r-pill);
}

/* hero proof chips */
.premium-main .pr-page .pr-proof{ display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; margin-top:var(--space-6); }
.premium-main .pr-page .pr-proof span{
  font-family:var(--font-mono); font-size:var(--fs-mono); color:var(--ink-60);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:.45em 1em; background:var(--bg-glass);
}

/* shared tile bullet list (mosaic feature tile + studio cards) */
.premium-main .pr-page .pr-tile__list{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:var(--space-2); }
.premium-main .pr-page .pr-tile__list li{ position:relative; padding-left:1.4em; color:var(--ink-60); line-height:var(--lh-snug); }
.premium-main .pr-page .pr-tile__list li::before{ content:"\2192"; position:absolute; left:0; color:var(--periwinkle); }

/* BENTO MOSAIC — vary tile size on the premium 4-col grid (base --wide=span 8/12
   is wrong here, so define spans tuned to repeat(4,1fr); dense fills the gaps). */
.premium-main .pr-page .pr-mosaic{ grid-auto-flow:dense; align-items:stretch; }
/* components.css gives every .ns-bento__tile grid-column:span 4 (for its 12-col
   base) and premium-main never resets it, so each tile fills the row. Reset to
   one cell, then opt specific tiles back up to mosaic sizes. */
.premium-main .pr-page .pr-mosaic > .ns-bento__tile{ grid-column:auto; grid-row:auto; }
.premium-main .pr-page .pr-mosaic > .pr-tile--feature{ grid-column:span 2; grid-row:span 2; background-image:var(--grad-brand-soft); }
.premium-main .pr-page .pr-mosaic > .pr-tile--wide{ grid-column:span 2; }
@media (max-width:560px){
  .premium-main .pr-page .pr-mosaic > .pr-tile--feature,
  .premium-main .pr-page .pr-mosaic > .pr-tile--wide{ grid-column:auto; grid-row:auto; }
}

/* SPOTLIGHT — full-width mediacard with a centered UI mock in the media panel */
.premium-main .pr-page .pr-spot{ align-items:stretch; }
.premium-main .pr-page .pr-spot .ns-mediacard__media{
  display:grid; place-items:center; padding:var(--space-6); min-height:360px;
  /* base .ns-mediacard__media sets height:100% (a definite size) which kills the
     flex stretch; height:auto lets the gradient panel fill the full card height. */
  height:auto; align-self:stretch;
  background-image:var(--grad-brand-soft);
}
.premium-main .pr-page .pr-spot .ns-mediacard__body{ flex:1 1 0; gap:var(--space-4); }
.premium-main .pr-page .pr-spot .ns-mediacard__body .ns-section__title{ font-size:var(--fs-h3); }
.premium-main .pr-page .pr-spot .ns-eyebrow{ margin-bottom:var(--space-1); }
.premium-main .pr-page .pr-spot__note{ font-size:var(--fs-small); color:var(--ink-40); margin:0; }

/* glass UI mock (form / cart / report) */
.premium-main .pr-page .pr-mock{
  width:100%; max-width:340px; background:var(--bg-elev-2); border:1px solid var(--line-2);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; font-size:var(--fs-small);
}
.premium-main .pr-page .pr-mock__head{
  display:flex; align-items:center; gap:6px; padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--line-2); color:var(--ink-40);
  font-family:var(--font-mono); font-size:var(--fs-mono);
}
.premium-main .pr-page .pr-mock__dot{ width:9px; height:9px; border-radius:var(--r-pill); background:var(--line-3); }
.premium-main .pr-page .pr-mock__title{ margin-left:auto; }
.premium-main .pr-page .pr-mock__title--left{ margin-left:0; color:var(--ink); }
.premium-main .pr-page .pr-mock__bag{ font-size:15px; }
.premium-main .pr-page .pr-mock__tag{ margin-left:auto; color:var(--periwinkle); }
.premium-main .pr-page .pr-mock__body{ padding:var(--space-4); display:grid; gap:var(--space-3); }
.premium-main .pr-page .pr-mock__field{ display:grid; gap:5px; }
.premium-main .pr-page .pr-mock__label{ color:var(--ink-40); font-family:var(--font-mono); font-size:var(--fs-mono); }
.premium-main .pr-page .pr-mock__val{
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-2);
  color:var(--ink); background:var(--bg-elev); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:.55em .7em;
}
.premium-main .pr-page .pr-mock__fill{ font-style:normal; color:var(--success); font-family:var(--font-mono); font-size:var(--fs-mono); }
.premium-main .pr-page .pr-mock__muted{ color:var(--ink-40); }
.premium-main .pr-page .pr-mock__btn{
  margin-top:var(--space-1); border:0; border-radius:var(--r-pill); padding:.65em 1em;
  font-weight:var(--fw-semibold); color:#fff; background-image:var(--grad-brand); cursor:default; width:100%;
}
.premium-main .pr-page .pr-mock__prod{ display:flex; align-items:center; gap:var(--space-3); }
.premium-main .pr-page .pr-mock__thumb{
  width:38px; height:38px; flex:0 0 38px; border-radius:var(--r-sm); display:grid; place-items:center;
  background-image:var(--grad-brand-soft); border:1px solid var(--line-2);
}
.premium-main .pr-page .pr-mock__pname{ color:var(--ink); }
.premium-main .pr-page .pr-mock__meta{ color:var(--ink-40); font-family:var(--font-mono); font-size:var(--fs-mono); }
.premium-main .pr-page .pr-mock__price{ margin-left:auto; color:var(--ink); font-weight:var(--fw-semibold); }
.premium-main .pr-page .pr-mock__row{ display:flex; justify-content:space-between; color:var(--ink-60); }
.premium-main .pr-page .pr-mock__row--total{ color:var(--ink); font-weight:var(--fw-semibold); border-top:1px solid var(--line-2); padding-top:var(--space-2); }
.premium-main .pr-page .pr-mock__disc{ color:var(--success); }
.premium-main .pr-page .pr-mock__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); text-align:center; }
.premium-main .pr-page .pr-mock__big{ font:800 30px/1 var(--font-display); }
.premium-main .pr-page .pr-mock__cap{ color:var(--ink-40); font-family:var(--font-mono); font-size:var(--fs-mono); margin-top:4px; }
.premium-main .pr-page .pr-mock__bars{ display:grid; gap:7px; }
.premium-main .pr-page .pr-mock__bars span{ display:block; height:8px; border-radius:var(--r-pill); background-image:var(--grad-brand); width:var(--w); }
.premium-main .pr-page .pr-mock__tldr{ color:var(--ink-60); border-top:1px solid var(--line-2); padding-top:var(--space-3); }

/* comparison table: make the Noem (last) column the clear visual winner.
   Tints the whole column into a lane, adds a green check to each Noem cell and a
   muted cross to the generic-chatbot cell. */
.premium-main .pr-page .pr-vs th:last-child,
.premium-main .pr-page .pr-vs td:last-child{
  background-image:var(--grad-brand-soft);
  box-shadow:inset 1px 0 0 rgba(169,67,251,.30), inset -1px 0 0 rgba(169,67,251,.30);
}
.premium-main .pr-page .pr-vs thead th:last-child{ box-shadow:inset 1px 0 0 rgba(169,67,251,.45), inset -1px 0 0 rgba(169,67,251,.45), inset 0 2px 0 var(--violet); }
.premium-main .pr-page .pr-vs tbody td:nth-child(2)::before{ content:"\2715"; color:var(--ink-40); font-weight:700; margin-right:.55em; }
.premium-main .pr-page .pr-vs tbody td:last-child::before{ content:"\2713"; color:var(--success); font-weight:800; margin-right:.55em; }

/* STATS band — premium-main has no .ns-stats container layout (only premium-home does) */
.premium-main .pr-page .pr-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); text-align:center;
  background:var(--bg-glass); background-image:var(--grad-brand-soft);
  border:1px solid var(--line-2); border-radius:var(--r-xl); padding:clamp(28px,3vw,44px) var(--space-4);
  box-shadow:var(--shadow-md);
}
@media (max-width:760px){ .premium-main .pr-page .pr-stats{ grid-template-columns:repeat(2,1fr); } }
.premium-main .pr-page .pr-stats .ns-stat{ align-items:center; gap:var(--space-1); }
.premium-main .pr-page .pr-stats .ns-stat__num{ font:800 clamp(34px,4vw,52px)/1 var(--font-display); }
.premium-main .pr-page .pr-stats .ns-stat__label{ color:var(--ink-60); font-size:var(--fs-small); }

/* 4-up cards (Studio) — pr-cols is 3-up by default */
.premium-main .pr-page .pr-cols--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .premium-main .pr-page .pr-cols--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .premium-main .pr-page .pr-cols--4{ grid-template-columns:1fr; } }

/* mini chat illustration used inside a use-case spotlight's gradient panel */
.premium-main .pr-page .pr-chat{ display:grid; gap:var(--space-2); width:100%; max-width:340px; }
.premium-main .pr-page .pr-chat__msg{
  font-size:var(--fs-small); line-height:1.35; padding:.6em .85em; border-radius:14px; max-width:88%;
}
.premium-main .pr-page .pr-chat__msg--user{
  justify-self:end; background:var(--bg-elev-2); border:1px solid var(--line-2);
  color:var(--ink-80); border-bottom-right-radius:4px;
}
.premium-main .pr-page .pr-chat__msg--bot{
  justify-self:start; background-image:var(--grad-brand); color:#fff; border-bottom-left-radius:4px;
}

/* ---- spacing between same-page sections ----------------------------------
   Uniform section rhythm now lives in components.css (.premium-main .ns-section
   adjacency rules) so every premium page shares one convention. The old
   .pr-page-scoped rules here netted to a double gap on alternating layouts. */