/* ================================================================
   products-refresh.css · v3
   Unified visual system for /products/{contact-page,mobile-widget,web-widget}

   Design language (aligned with home-refresh v13 + linktr.ee feature pages):
   - Green is the theme; every section is a tonal pale-green wash.
   - Icon cards: white rounded card + soft-green icon pill (image #1).
   - Image cards: solid green tonal card + image mounted inside (image #2).
   - FAQ: floating white accordion rows with rotating chevron.
   - Dark forest slabs reserved for code strips and the final claim panel.
================================================================ */

.products-refresh {
  --pr-ink: #06150e;
  --pr-dark: #06331f;
  --pr-forest: #073d28;
  --pr-mid: #355847;
  --pr-muted: #557262;
  --pr-line: rgba(6, 51, 31, 0.10);
  --pr-line-strong: rgba(6, 51, 31, 0.16);

  --pr-cream: #f4faee;
  --pr-white: #ffffff;

  /* Section washes — same family the homepage uses (very pale → richer) */
  --pr-green-1: #eef7e8;
  --pr-green-2: #e3f2df;
  --pr-green-3: #d7edd9;
  --pr-green-4: #cae7d3;
  --pr-green-5: #bedfca;

  /* Soft accents: distinct hues without the homepage rail's neon intensity. */
  --pr-lime: #e9f7a6;
  --pr-warm-yellow: #f7dfad;
  --pr-grass: #b9dfae;

  /* Solid tonal fills for image cards (image #2 vibe, mapped to green) */
  --pr-card-a: var(--pr-lime);
  --pr-card-b: #8ed9b0;
  --pr-card-c: var(--pr-warm-yellow);
  --pr-card-d: var(--pr-grass);

  --pr-accent: #16ad63;
  --pr-accent-ink: #06150e;

  background: var(--pr-green-1);
  color: var(--pr-ink);
}

/* Remove noisy globals that fight the new look */
.products-refresh .k-promo,
.products-refresh .marquee,
.products-refresh .cp-hero-sticker,
.products-refresh .sticker-field,
.products-refresh .sticker-drop,
.products-refresh .sticker-sweep,
.products-refresh .k-sweep-btn { display: none !important; }

/* Footer: keep the shared .k-foot look identical to the homepage — undo any bleed from products universal typography */
.products-refresh .k-foot,
.products-refresh .k-foot * { font-family: var(--font-sans) !important; }
.products-refresh .k-foot h3,
.products-refresh .k-foot .k-foot-sub {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--k-lemon) !important;
  margin: 0 0 40px !important;
  line-height: 1 !important;
}
.products-refresh .k-foot .k-foot-sub {
  font-size: 10px !important;
  letter-spacing: .12em !important;
  color: rgba(232,255,59,.5) !important;
  margin: 0 0 18px !important;
}
.products-refresh .k-foot a {
  color: rgba(245,239,224,.7) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  transition: color .15s !important;
}
.products-refresh .k-foot a:hover { color: var(--k-lemon) !important; background: transparent !important; }
.products-refresh .k-foot p {
  color: rgba(245,239,224,.6) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.products-refresh .k-foot-bot,
.products-refresh .k-foot-bot * {
  color: rgba(245,239,224,.4) !important;
  font-size: 13px !important;
}

/* -------- Typography: one sans face -------- */
.products-refresh,
.products-refresh p,
.products-refresh li,
.products-refresh a,
.products-refresh span,
.products-refresh b,
.products-refresh code,
.products-refresh summary { font-family: var(--font-sans) !important; }

.products-refresh h1,
.products-refresh h2,
.products-refresh h3,
.products-refresh h4,
.products-refresh .h1 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.045em !important;
  font-weight: 800 !important;
  color: var(--pr-ink);
}
.products-refresh h1 { font-size: clamp(48px, 6.4vw, 96px); line-height: 0.9; }
.products-refresh h2, .products-refresh .h1 { font-size: clamp(38px, 4.6vw, 72px); line-height: 0.92; }
.products-refresh h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
.products-refresh p, .products-refresh li { font-size: 16.5px; line-height: 1.55; color: var(--pr-mid); }
.products-refresh .lead { color: var(--pr-mid); font-weight: 500; }
.products-refresh b, .products-refresh strong { color: var(--pr-ink); font-weight: 700; }

/* Kill decorative variants */
.products-refresh .serif,
.products-refresh .hand,
.products-refresh .cp-modes-title i,
.products-refresh .cp-mode-p i,
.products-refresh .cp-bio,
.products-refresh .cp-tpl-hint {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  transform: none !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.products-refresh .hl-green,
.products-refresh .lemon,
.products-refresh .stroke,
.products-refresh .hl-line,
.products-refresh h1 .serif,
.products-refresh h2 .serif,
.products-refresh h3 .serif,
.products-refresh h1 .lemon,
.products-refresh h2 .lemon,
.products-refresh h3 .lemon,
.products-refresh h1 span,
.products-refresh h2 span,
.products-refresh .h1 span {
  color: inherit !important;
  background: transparent !important;
  -webkit-text-stroke: 0 !important;
  border: 0 !important;
  font-style: normal !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* -------- Pills / eyebrows -------- */
.products-refresh .pill,
.products-refresh .p-eyebrow,
.products-refresh .cap-tag,
.products-refresh .cp-tpl-card-tag,
.products-refresh .cp-mode-badge,
.products-refresh .mw-hero-webview {
  display: inline-flex; align-items: center;
  padding: 6px 12px !important;
  background: rgba(6, 51, 31, 0.08) !important;
  color: var(--pr-forest) !important;
  border: 1px solid var(--pr-line) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* -------- Buttons -------- */
.products-refresh .btn,
.products-refresh .btn-lg,
.products-refresh .btn-xl {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 22px !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform .2s ease, background .2s ease;
}
.products-refresh .btn-ink,
.products-refresh .btn-dark { background: var(--pr-forest) !important; color: #fff !important; }
.products-refresh .btn-ink:hover { background: #021f14 !important; transform: translateY(-2px); }
.products-refresh .btn-lemon,
.products-refresh .btn-lime {
  background: #fff !important;
  color: var(--pr-forest) !important;
  border: 1px solid var(--pr-line-strong) !important;
}
.products-refresh .btn-lemon:hover { background: var(--pr-green-2) !important; }
.products-refresh .btn-arrow::after { content: " →"; margin-left: 2px; }
.products-refresh .free-note {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  transform: none !important;
  color: var(--pr-mid) !important;
  font-size: 13px;
  font-weight: 600;
}

/* ================================================================
   Section rhythm — all green, ascending density
   HERO: green-1  →  Features: green-2  →  YELLOW-slot: green-3
   BLUE-slot: green-4  →  Second green: green-5
================================================================ */

/* HERO */
.products-refresh .p-hero {
  padding: 150px max(5vw, 22px) 90px !important;
  background: var(--pr-accent) !important;
  border: 0 !important;
}
.products-refresh .p-hero::before,
.products-refresh .p-hero::after { display: none !important; }
.products-refresh .p-hero-inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6vw;
  align-items: center;
}
.products-refresh .p-hero-copy h1,
.products-refresh .cp-h1-single {
  font-family: var(--font-display) !important;
  letter-spacing: -0.055em;
  font-size: clamp(40px, 5.4vw, 96px) !important;
  line-height: 0.92 !important;
  margin: 20px 0 24px !important;
  color: #ffffff !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.products-refresh .p-hero-inner {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
}
.products-refresh .p-hero-visual {
  width: calc(100% + 40px);
  min-width: 0;
}
.products-refresh .p-hero-figma-wide { width: 100%; }
.products-refresh .mw-hero-visual { padding: 0 !important; }
.products-refresh .p-hero .lead {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
}
.products-refresh .p-hero-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 34px;
}
.products-refresh .p-hero-figma-wide {
  border: 0 !important; padding: 0 !important;
  border-radius: 28px !important;
  background: transparent !important;
  box-shadow: 0 30px 60px rgba(6, 34, 20, 0.35) !important;
  transform: none !important;
  overflow: hidden;
}
.products-refresh .p-hero-figma-wide img { width: 100%; height: auto; display: block; }
.products-refresh .p-hero-perks {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px;
}
.products-refresh .p-hero-perks .perk {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 13px; font-weight: 600;
}
.products-refresh .p-hero-perks .perk span {
  width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%;
  background: #ffffff; color: var(--pr-forest);
  font-size: 11px;
}

/* Hero: white text on brand-green slab */
.products-refresh .p-hero .p-eyebrow,
.products-refresh .p-hero .p-eyebrow.fire {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}
.products-refresh .p-hero .p-eyebrow.fire::after { content: none !important; }
.products-refresh .p-hero .p-hero-copy h1,
.products-refresh .p-hero .p-hero-copy .lead,
.products-refresh .p-hero .p-hero-copy .lead b,
.products-refresh .p-hero .p-hero-copy .lead strong {
  color: #ffffff !important;
}
/* Primary CTA on green hero → cream-yellow pill for contrast (matches home hero) */
.products-refresh .p-hero .btn-ink,
.products-refresh .p-hero .btn-dark {
  background: var(--pr-ink) !important;
  color: #ffffff !important;
}

/* ================================================================
   FEATURE GRID (icon cards) — image #1 language
================================================================ */
.products-refresh .p-fgrid-sec {
  padding: 110px max(5vw, 22px) !important;
  background: var(--pr-green-2) !important;
  border: 0 !important;
}
.products-refresh .p-fgrid-inner { max-width: 1240px; margin: 0 auto; }
.products-refresh .p-fgrid-head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.products-refresh .p-fgrid-head .pill { margin-bottom: 16px; }
.products-refresh .p-fgrid-head h2 { margin-bottom: 14px; color: var(--pr-ink); }
.products-refresh .p-fgrid-head p { color: var(--pr-mid); max-width: 640px; margin: 0 auto; }

.products-refresh .p-fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.products-refresh .p-fcard {
  padding: 28px 26px 30px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 1px 2px rgba(6, 51, 31, 0.04) !important;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
  min-height: 260px;
}
.products-refresh .p-fcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(6, 51, 31, 0.10) !important;
}
/* Icon: soft-green circle with monochrome glyph (like image #1's purple circle) */
.products-refresh .p-fcard-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--pr-green-3) !important;
  color: var(--pr-forest) !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 22px; font-weight: 700;
  margin-bottom: 26px;
  box-shadow: none !important;
}
.products-refresh .p-fcard-icon svg { width: 24px; height: 24px; display: block; }
.products-refresh .share-ic svg,
.products-refresh .ww-plat-logo svg { width: 22px; height: 22px; display: block; }
.products-refresh .p-fcard h3 {
  color: var(--pr-ink);
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  font-size: 22px !important;
  line-height: 1.2;
  margin: 0 0 12px;
}
.products-refresh .p-fcard p {
  color: var(--pr-mid);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* Highlight card inside feature grid */
.products-refresh .p-highlight {
  margin-top: 60px;
  padding: 46px 44px !important;
  background: var(--pr-forest) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 32px !important;
  box-shadow: none !important;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.products-refresh .p-highlight h3 { color: #fff; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
.products-refresh .p-highlight p { color: rgba(255, 255, 255, 0.78); margin-top: 18px; }
.products-refresh .p-highlight .pill {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #eafce6 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ================================================================
   Middle band — Modes / Coverage / Platforms  (green-3)
================================================================ */
.products-refresh .cp-modes-sec,
.products-refresh .mw-cov,
.products-refresh .ww-plats {
  padding: 110px max(5vw, 22px) !important;
  background: var(--pr-green-3) !important;
  border: 0 !important;
}
.products-refresh .cp-modes-inner,
.products-refresh .mw-cov-inner,
.products-refresh .ww-plats-inner { max-width: 1240px; margin: 0 auto; }

.products-refresh .cp-modes-head,
.products-refresh .cp-blocks-head,
.products-refresh .cp-tpl-head,
.products-refresh .p-sec-head,
.products-refresh .sec-head { text-align: center; max-width: 820px; margin: 0 auto 48px; }

/* Contact Page — two-mode cards (image #2 language: solid tonal card, image inside) */
.products-refresh .cp-modes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.products-refresh .cp-mode {
  padding: 32px 32px 28px !important;
  background: var(--pr-card-c) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 32px !important;
  box-shadow: none !important;
  transition: transform .25s ease;
  display: flex; flex-direction: column; gap: 18px;
}
.products-refresh .cp-mode:hover { transform: translateY(-4px); }
.products-refresh .cp-mode-tpl { background: var(--pr-card-b) !important; }
.products-refresh .cp-mode-ai  { background: var(--pr-card-a) !important; }
.products-refresh .cp-mode-h,
.products-refresh .cp-mode-p,
.products-refresh .cp-mode-list li { color: rgba(255, 255, 255, 0.95) !important; }
.products-refresh .cp-mode-p { color: rgba(255, 255, 255, 0.78) !important; }
.products-refresh .cp-mode-h {
  font-family: var(--font-display) !important;
  font-weight: 800 !important; font-size: clamp(26px, 2.6vw, 34px) !important;
  letter-spacing: -0.02em !important; line-height: 1.1 !important;
  margin: 0 !important;
}
.products-refresh .cp-mode-badge {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.products-refresh .cp-mode-dot {
  background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important;
  border: 0 !important; border-radius: 6px !important;
}
.products-refresh .cp-mode-shot,
.products-refresh .cp-mode-shot-back,
.products-refresh .cp-mode-shot-front {
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Mobile — coverage matrix */
.products-refresh .mw-cov-table {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 28px rgba(6, 51, 31, 0.08) !important;
  overflow: hidden;
  margin-top: 40px;
}
.products-refresh .mw-cov-row.head {
  background: var(--pr-forest) !important;
  color: #fff !important;
}
.products-refresh .mw-cov-row.head span { color: #eafce6 !important; }
.products-refresh .mw-cov-yes { color: var(--pr-accent) !important; }

/* Web — platform grid (unified white card look, no colored letter chips) */
.products-refresh .ww-plats-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; margin-top: 44px;
}
.products-refresh .ww-plat {
  padding: 26px 18px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(6, 51, 31, 0.04) !important;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.products-refresh .ww-plat:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(6, 51, 31, 0.10) !important;
}
.products-refresh .ww-plat-logo,
.products-refresh .ww-plat-logo[style] {
  background: var(--pr-green-3) !important;
  color: var(--pr-forest) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  width: 52px; height: 52px;
  margin: 0 auto 14px !important;
  font-family: var(--font-display) !important;
  font-weight: 800; font-size: 18px;
}
.products-refresh .ww-plat b {
  font-family: var(--font-display) !important;
  color: var(--pr-ink) !important;
  font-size: 16px; letter-spacing: -0.01em;
}
.products-refresh .ww-plat span {
  color: var(--pr-mid) !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px; letter-spacing: 0;
}
.products-refresh .ww-plat-check {
  background: rgba(22, 173, 99, 0.10) !important;
  color: var(--pr-accent) !important;
  border: 0 !important;
  border-radius: 999px !important;
  margin-top: 12px;
  font-family: var(--font-sans) !important;
  letter-spacing: 0.05em;
}
@media (max-width: 900px) {
  .products-refresh .ww-plats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   Blocks band — Contact Page .cp-blocks-sec  (green-4)
================================================================ */
.products-refresh .cp-blocks-sec {
  padding: 110px max(5vw, 22px) !important;
  background: var(--pr-green-4) !important;
  border: 0 !important;
}
.products-refresh .cp-blocks-inner { max-width: 1180px; margin: 0 auto; }
.products-refresh .cp-blocks-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.products-refresh .cp-block {
  padding: 22px 20px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(6, 51, 31, 0.04) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.products-refresh .cp-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(6, 51, 31, 0.10) !important;
}
.products-refresh .cp-block b {
  font-family: var(--font-display) !important; font-weight: 700 !important;
  font-size: 17px !important; color: var(--pr-ink) !important;
}
.products-refresh .cp-block span { color: var(--pr-mid) !important; font-size: 13.5px !important; }
.products-refresh .cp-block-more {
  background: var(--pr-forest) !important;
}
.products-refresh .cp-block-more b,
.products-refresh .cp-block-more span { color: #eafce6 !important; }

/* ================================================================
   FAQ — floating accordion rows
================================================================ */
.products-refresh .faq {
  padding: 110px max(5vw, 22px) !important;
  background: var(--pr-green-2) !important;
  border: 0 !important;
}
.products-refresh .faq-inner { max-width: 820px; margin: 0 auto; }
.products-refresh .faq .sec-head { max-width: 820px; margin: 0 auto 44px; text-align: center; }
.products-refresh .faq-list { display: grid; gap: 14px; }
.products-refresh .faq-item {
  padding: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(6, 51, 31, 0.07) !important;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.products-refresh .faq-item:hover {
  box-shadow: 0 12px 28px rgba(6, 51, 31, 0.11) !important;
}
.products-refresh .faq-item[open] {
  box-shadow: 0 18px 40px rgba(6, 51, 31, 0.14) !important;
  transform: translateY(-1px);
}
.products-refresh .faq-item summary {
  list-style: none;
  padding: 22px 60px 22px 24px;
  position: relative;
  cursor: pointer;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 17.5px !important;
  color: var(--pr-ink) !important;
  letter-spacing: -0.01em;
  transition: color .2s ease;
}
.products-refresh .faq-item summary::-webkit-details-marker,
.products-refresh .faq-item summary::marker { display: none; content: ''; }
.products-refresh .faq-item summary::after {
  content: '';
  position: absolute;
  right: 22px; top: 50%;
  width: 12px; height: 12px;
  border-right: 2px solid var(--pr-forest);
  border-bottom: 2px solid var(--pr-forest);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s ease;
}
.products-refresh .faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.products-refresh .faq-item p.faq-answer {
  margin: 0 !important;
  padding: 0 24px 22px !important;
  color: var(--pr-mid) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  animation: faqSlide .28s ease both;
}
.products-refresh .faq-item code {
  background: var(--pr-green-2) !important; color: var(--pr-forest) !important;
  padding: 2px 6px; border-radius: 6px; font-family: var(--font-mono);
}
@keyframes faqSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================
   Code strips — dark forest slab
================================================================ */
.products-refresh .mw-code-strip,
.products-refresh .ww-code-strip {
  padding: 110px max(5vw, 22px) !important;
  background: var(--pr-forest) !important;
  color: #eafce6 !important;
}
.products-refresh .mw-code-inner,
.products-refresh .ww-code-inner { max-width: 1180px; margin: 0 auto; }
.products-refresh .ww-code-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.products-refresh .mw-code-strip h2,
.products-refresh .ww-code-strip h2 { color: #fff !important; }
.products-refresh .mw-code-strip .pill,
.products-refresh .ww-code-strip .pill,
.products-refresh .mw-code-strip .p-eyebrow,
.products-refresh .ww-code-strip .p-eyebrow {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #eafce6 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.products-refresh .mw-code-strip p,
.products-refresh .ww-code-strip p { color: rgba(255, 255, 255, 0.78) !important; }
.products-refresh .mw-code-strip p b,
.products-refresh .ww-code-strip p b { color: var(--pr-accent) !important; }
.products-refresh .mw-code-box,
.products-refresh .ww-code-block {
  padding: 26px 28px !important;
  background: #041a10 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  font-family: var(--font-mono) !important;
  font-size: 13.5px;
  line-height: 1.65;
  color: #d8f0e0;
  overflow-x: auto;
}
.products-refresh .mw-code-c,
.products-refresh .ww-code-c { color: rgba(255, 255, 255, 0.35) !important; }
.products-refresh .mw-code-box b,
.products-refresh .ww-code-block b { color: var(--pr-accent) !important; font-weight: 700; }
.products-refresh .mw-code-box i { color: #9ec3ff !important; font-style: normal; }
.products-refresh .mw-code-box em { color: #ffb896 !important; font-style: normal; }

/* Contact Page share slab & final CTA (default) */
.products-refresh .share-sec,
.products-refresh .final {
  padding: 110px max(5vw, 22px) !important;
  background: var(--pr-forest) !important;
  color: #eafce6 !important;
  border-radius: 0 !important;
}
.products-refresh .share-inner,
.products-refresh .final-inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.products-refresh .share-inner h2,
.products-refresh .final-inner h2 { color: #fff !important; margin: 20px 0 30px !important; }
.products-refresh .share-inner h2 .lemon,
.products-refresh .final-inner h2 .lemon,
.products-refresh .final-inner h2 .serif { color: inherit !important; }
.products-refresh .share-inner .pill,
.products-refresh .final-inner .pill {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #eafce6 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.products-refresh .share-inner p,
.products-refresh .final-inner p { color: rgba(255, 255, 255, 0.7) !important; }
.products-refresh .share-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  max-width: 960px; margin: 44px auto 0;
}
.products-refresh .share-place {
  padding: 22px 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  transition: background .2s ease, transform .2s ease;
}
.products-refresh .share-place:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  transform: translateY(-3px);
}
.products-refresh .share-ic {
  width: 40px; height: 40px; margin: 0 auto 12px !important;
  background: transparent !important; color: #eafce6 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 700;
}
.products-refresh .share-place b { color: #fff !important; font-family: var(--font-display) !important; }
.products-refresh .share-place span { color: rgba(255, 255, 255, 0.55) !important; }

@media (max-width: 900px) {
  .products-refresh .share-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   Contact Page — AI Generate video section (green-3 band)
================================================================ */
.products-refresh .cp-ai-video {
  padding: 110px max(5vw, 22px) !important;
  background: var(--pr-green-3) !important;
}
.products-refresh .cp-ai-video-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: 60px; align-items: center;
}
.products-refresh .cp-ai-video-copy h2 {
  margin: 18px 0 20px;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 0.95;
  color: var(--pr-ink);
}
.products-refresh .cp-ai-video-copy p {
  color: var(--pr-mid);
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 30px;
  max-width: 520px;
}
.products-refresh .cp-ai-video-media {
  border-radius: 28px;
  overflow: hidden;
  background: var(--pr-forest);
  box-shadow: 0 30px 60px rgba(6, 51, 31, 0.18);
}
.products-refresh .cp-ai-video-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--pr-forest);
}
@media (max-width: 900px) {
  .products-refresh .cp-ai-video-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ================================================================
   Contact Page — Claim your handle (final section replacement)
================================================================ */
.products-refresh .cp-claim {
  padding: 130px max(5vw, 22px) !important;
  background: var(--pr-forest) !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
}
.products-refresh .cp-claim::before {
  content: '';
  position: absolute; inset: -40% -20% auto auto;
  width: 620px; height: 620px;
  background: radial-gradient(closest-side, rgba(22, 173, 99, 0.32), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}
.products-refresh .cp-claim::after {
  content: '';
  position: absolute; inset: auto auto -30% -10%;
  width: 520px; height: 520px;
  background: radial-gradient(closest-side, rgba(190, 223, 202, 0.22), transparent 70%);
  pointer-events: none;
}
.products-refresh .cp-claim-inner {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto; text-align: center;
}
.products-refresh .cp-claim h2 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(44px, 5.4vw, 88px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
  color: #ffffff !important;
  margin: 0 0 18px;
}
.products-refresh .cp-claim h2 .serif,
.products-refresh .cp-claim h2 .lemon { color: inherit !important; font-family: inherit !important; font-style: normal !important; }
.products-refresh .cp-claim p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px; line-height: 1.55;
  max-width: 620px; margin: 0 auto 42px;
}
.products-refresh .cp-claim-form {
  display: inline-flex; align-items: stretch;
  gap: 10px;
  background: #ffffff;
  padding: 8px;
  border-radius: 999px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  width: min(560px, 100%);
  max-width: 100%;
}
.products-refresh .cp-claim-prefix {
  padding: 0 4px 0 18px;
  display: inline-flex; align-items: center;
  color: var(--pr-muted);
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 600;
  white-space: nowrap;
}
.products-refresh .cp-claim-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  padding: 12px 6px 12px 0;
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600;
  color: var(--pr-ink);
}
.products-refresh .cp-claim-input::placeholder { color: rgba(6, 51, 31, 0.35); }
.products-refresh .cp-claim-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border: 0; cursor: pointer;
  background: var(--pr-accent);
  color: var(--pr-accent-ink);
  font-family: var(--font-sans);
  font-weight: 700; font-size: 15px; letter-spacing: 0;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.products-refresh .cp-claim-btn:hover { background: #0f9457; transform: translateY(-2px); }
.products-refresh .cp-claim-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.products-refresh .cp-claim-note {
  margin-top: 20px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
}
@media (max-width: 640px) {
  .products-refresh .cp-claim-form {
    flex-direction: column;
    border-radius: 24px;
    padding: 14px;
    gap: 12px;
  }
  .products-refresh .cp-claim-prefix { padding: 0 0 0 6px; }
  .products-refresh .cp-claim-btn { justify-content: center; padding: 14px 18px; }
}

/* ================================================================
   Neutralize legacy inline colors and mocks
================================================================ */
.products-refresh .p-highlight [style*="background: var(--k-ink-2)"],
.products-refresh .p-highlight [style*="background:var(--k-ink-2)"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.products-refresh .p-highlight [style*="background: var(--k-lemon)"] {
  background: #ffffff !important;
  color: var(--pr-forest) !important;
}
.products-refresh .live-dot {
  background: var(--pr-accent) !important;
  box-shadow: 0 0 0 4px rgba(22, 173, 99, 0.2) !important;
}
.products-refresh [data-cursor] { cursor: pointer; }

/* ================================================================
   Responsive
================================================================ */
@media (max-width: 1024px) {
  .products-refresh .p-hero-inner { grid-template-columns: 1fr !important; gap: 40px; }
  .products-refresh .p-hero-visual { width: 100%; }
  .products-refresh .p-fgrid { grid-template-columns: repeat(2, 1fr); }
  .products-refresh .cp-blocks-grid { grid-template-columns: repeat(3, 1fr); }
  .products-refresh .p-highlight { grid-template-columns: 1fr; }
  .products-refresh .ww-code-inner { grid-template-columns: 1fr; }
  .products-refresh .cp-modes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .products-refresh .p-hero { padding: 96px 18px 56px !important; }
  .products-refresh .p-hero-copy h1,
  .products-refresh .cp-h1-single { font-size: 12vw !important; }
  .products-refresh .p-fgrid { grid-template-columns: 1fr; }
  .products-refresh .cp-blocks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .products-refresh * { animation: none !important; transition: none !important; transform: none !important; }
}

/* Contact Page: automatic template showcase */
.products-refresh .cp-tpl-sec {
  padding: 112px 0 98px;
  background: #eaf6e9;
  overflow: hidden;
}
.products-refresh .cp-tpl-inner { max-width: 1440px; margin: auto; }
.products-refresh .cp-tpl-head { max-width: 760px; margin: 0 auto 50px; padding: 0 24px; text-align: center; }
.products-refresh .cp-tpl-head .pill { margin-bottom: 18px; }
.products-refresh .cp-tpl-title { color: var(--pr-ink); margin: 0 0 18px; }
.products-refresh .cp-tpl-sub { color: var(--pr-mid); font-size: 17px; line-height: 1.55; margin: 0 auto; max-width: 590px; }
.products-refresh .cp-showcase { --showcase-width: min(31vw, 410px); position: relative; }
.products-refresh .cp-showcase-stage { height: min(58vw, 740px); min-height: 580px; position: relative; perspective: 1200px; }
.products-refresh .cp-showcase-card {
  position: absolute; top: 50%; left: 50%; width: var(--showcase-width); aspect-ratio: 9 / 16;
  margin: 0; overflow: hidden; border-radius: 24px; background: #fff;
  box-shadow: 0 25px 60px rgba(6, 51, 31, .13);
  opacity: 1; visibility: visible; z-index: var(--depth);
  transform: translate(calc(-50% + var(--offset-x)), calc(-50% + var(--stack-y))) scale(var(--stack-scale)) rotate(var(--tilt));
  transition: transform .75s cubic-bezier(.2,.7,.2,1), opacity .65s ease, visibility .65s;
}
.products-refresh .cp-showcase-card.is-active { z-index: 11; transform: translate(-50%, -50%) scale(1); box-shadow: 0 36px 90px rgba(6, 51, 31, .23); }
.products-refresh .cp-showcase-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.products-refresh .cp-showcase-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 22px 20px;
  background: linear-gradient(transparent, rgba(4,22,17,.82)); color: #fff;
  display: flex; flex-direction: column; gap: 3px;
}
.products-refresh .cp-showcase-card figcaption span { font: 700 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.products-refresh .cp-showcase-card figcaption strong { font: 800 22px var(--font-display); }
.products-refresh .cp-showcase-caption { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--pr-ink); font: 700 12px var(--font-mono); letter-spacing: .06em; }
.products-refresh .cp-showcase-rule { width: min(20vw, 180px); height: 3px; background: rgba(6,51,31,.16); border-radius: 3px; overflow: hidden; }
.products-refresh .cp-showcase-rule span { display: block; width: 0; height: 100%; background: var(--pr-forest); }
.products-refresh .cp-showcase-rule span.is-running { animation: cp-showcase-progress 3s linear forwards; }
@keyframes cp-showcase-progress { to { width: 100%; } }

/* Compact catalog of the 18 available blocks */
.products-refresh .p-fgrid-sec { background: #f6f9ef !important; }
.products-refresh .p-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.products-refresh .p-fcard { min-height: 188px; padding: 22px 24px !important; border: 1px solid rgba(6,51,31,.08) !important; }
.products-refresh .p-fcard-pinned { background: #d9f4d7 !important; }
.products-refresh .p-fcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.products-refresh .p-fcard-number { color: var(--pr-forest); font: 800 12px var(--font-mono); letter-spacing: .08em; }
.products-refresh .p-fcard-status { padding: 5px 10px; border-radius: 99px; background: #fff; color: var(--pr-forest); font: 800 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.products-refresh .p-fcard h3 { font-size: 20px !important; margin-bottom: 8px; }
.products-refresh .p-fcard p { font-size: 14px; line-height: 1.45; }
@media (max-width: 900px) {
  .products-refresh .cp-showcase { --showcase-width: min(48vw, 350px); }
  .products-refresh .cp-showcase-stage { height: 660px; min-height: 0; }
  .products-refresh .p-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .products-refresh .cp-tpl-sec { padding: 74px 0 70px; }
  .products-refresh .cp-tpl-head { margin-bottom: 26px; }
  .products-refresh .cp-showcase { --showcase-width: min(68vw, 310px); }
  .products-refresh .cp-showcase-stage { height: 570px; }
  .products-refresh .cp-showcase-card { border-radius: 18px; }
  .products-refresh .p-fgrid { grid-template-columns: 1fr; }
  .products-refresh .p-fcard { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .products-refresh .cp-showcase-card { transition: none; }
  .products-refresh .cp-showcase-rule span.is-running { animation: none; }
}

/* Visible ten-card fan, manual controls, and denser feature catalog. */
.products-refresh .cp-showcase-card{transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s,filter .3s;pointer-events:auto;cursor:pointer;filter:brightness(.88)}
.products-refresh .cp-showcase-card.is-active,.products-refresh .cp-showcase-card:hover,.products-refresh .cp-showcase-card:focus-visible{filter:brightness(1)}
.products-refresh .cp-showcase-card:focus-visible{outline:4px solid #145d3d;outline-offset:5px}
.products-refresh .cp-showcase-card:not(.is-active) figcaption{opacity:0}
.products-refresh .cp-showcase-stage{touch-action:pan-y;cursor:grab}
.products-refresh .cp-showcase-nav{width:42px;height:42px;border:1px solid rgba(6,51,31,.18);border-radius:50%;background:#fff;color:var(--pr-ink);font-size:20px;cursor:pointer;transition:background .2s,transform .2s}
.products-refresh .cp-showcase-nav:hover{background:#d7f3d8;transform:scale(1.07)}
.products-refresh .cp-showcase-cta{text-align:center;margin-top:26px}
.products-refresh .p-fgrid-sec{padding:78px max(5vw,22px) 90px!important}
.products-refresh .p-fgrid-head{margin-bottom:36px}
.products-refresh .p-fgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.products-refresh .p-fcard{min-height:142px;padding:17px 19px!important;border-radius:18px!important}
.products-refresh .p-fcard-top{margin-bottom:13px}
.products-refresh .p-fcard h3{font-size:17px!important;margin-bottom:6px}
.products-refresh .p-fcard p{font-size:12.5px;line-height:1.4}
@media(max-width:900px){.products-refresh .p-fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.products-refresh .cp-showcase-card{transform:translate(calc(-50% + var(--offset-x)),calc(-50% + var(--stack-y))) scale(var(--stack-scale)) rotate(var(--tilt))}.products-refresh .cp-showcase-caption{gap:9px}.products-refresh .cp-showcase-rule{width:50px}.products-refresh .p-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.products-refresh .p-fcard{padding:15px!important;min-height:150px}.products-refresh .p-fcard h3{font-size:16px!important}.products-refresh .p-fcard p{font-size:12px}}
@media(max-width:380px){.products-refresh .p-fgrid{grid-template-columns:1fr}.products-refresh .p-fcard{min-height:0}}

.products-refresh .cp-feature-cta{text-align:center;margin:28px 0 48px}

/* Keep the 18 available blocks readable without letting the catalog dominate. */
.products-refresh .p-fgrid-inner{max-width:1320px}
.products-refresh .p-fgrid-sec{padding:64px max(5vw,22px) 76px!important}
.products-refresh .p-fgrid-head{margin-bottom:30px}
.products-refresh .p-fgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.products-refresh .p-fcard{min-height:118px;padding:13px 15px!important;border-radius:14px!important}
.products-refresh .p-fcard-top{margin-bottom:10px}
.products-refresh .p-fcard h3{font-size:15px!important;line-height:1.1;margin-bottom:5px}
.products-refresh .p-fcard p{font-size:11.5px;line-height:1.3}
@media(max-width:1100px){.products-refresh .p-fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.products-refresh .p-fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.products-refresh .p-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.products-refresh .p-fcard{min-height:116px;padding:12px!important}.products-refresh .p-fcard h3{font-size:14px!important}.products-refresh .p-fcard p{font-size:11px}}
@media(max-width:380px){.products-refresh .p-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Web Widget examples supplied for the product page. */
.products-refresh .ww-scenes{padding:96px max(5vw,22px) 104px;background:#eaf5ec}
.products-refresh .ww-scenes-inner{max-width:1320px;margin:0 auto}
.products-refresh .ww-scenes-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}
.products-refresh .ww-scenes-head .pill{margin-bottom:20px}
.products-refresh .ww-scenes-head h2{margin:0;color:var(--pr-ink)}
.products-refresh .ww-scenes-head p{max-width:320px;margin:0 0 8px;color:var(--pr-mid);font-size:17px;line-height:1.5}
.products-refresh .ww-scenes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:36px}
.products-refresh .ww-scene{margin:0;padding:12px;border:1px solid rgba(6,51,31,.11);border-radius:26px;background:#fff;box-shadow:0 15px 35px rgba(6,51,31,.07)}
.products-refresh .ww-scene img{display:block;width:100%;aspect-ratio:1.42;object-fit:cover;object-position:center 38%;border-radius:17px}
.products-refresh .ww-scene figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:19px 12px 12px;color:var(--pr-ink)}
.products-refresh .ww-scene figcaption span{flex:none;font:800 11px var(--font-mono);letter-spacing:.08em}
.products-refresh .ww-scene figcaption strong{font:700 16px/1.35 var(--font-display);text-align:right}
@media(max-width:900px){.products-refresh .ww-scenes{padding:72px 22px 80px}.products-refresh .ww-scenes-head{align-items:start;flex-direction:column;gap:14px}}
@media(max-width:640px){.products-refresh .ww-scenes-grid{grid-template-columns:1fr;gap:17px}.products-refresh .ww-scene{padding:8px;border-radius:20px}.products-refresh .ww-scene img{border-radius:13px}.products-refresh .ww-scene figcaption{flex-direction:column;gap:5px;padding:14px 9px 10px}.products-refresh .ww-scene figcaption strong{text-align:left;font-size:15px}}

/* Align the template gallery with the block catalog and soften each change. */
.products-refresh .cp-tpl-sec{padding:112px max(5vw,22px) 90px}
.products-refresh .cp-tpl-inner{max-width:1320px}
.products-refresh .cp-showcase-stage::before{content:"";position:absolute;inset:12% 8%;border-radius:50%;background:radial-gradient(ellipse at 38% 50%,rgba(116,218,174,.34),transparent 55%),radial-gradient(ellipse at 70% 45%,rgba(242,227,167,.36),transparent 55%);filter:blur(34px);animation:cp-gallery-breathe 6s ease-in-out infinite alternate;pointer-events:none}
.products-refresh .cp-showcase-card.is-active img{animation:cp-gallery-focus 3s ease-out both}
.products-refresh .cp-showcase-card:not(.is-active):hover{box-shadow:0 32px 75px rgba(6,51,31,.24)}
@keyframes cp-gallery-breathe{from{transform:scale(.94);opacity:.65}to{transform:scale(1.04);opacity:1}}
@keyframes cp-gallery-focus{from{transform:scale(1.035)}to{transform:scale(1)}}

/* Make the primary action in all three product heroes easier to notice. */
.products-refresh .p-hero-actions .btn-lg{min-width:244px;min-height:76px;justify-content:space-between;padding:21px 30px!important;border-radius:18px!important;font-size:20px!important}
@media(max-width:600px){.products-refresh .cp-tpl-sec{padding:74px 22px 70px}.products-refresh .p-hero-actions .btn-lg{min-width:220px;min-height:66px;padding:17px 25px!important;font-size:18px!important}}
@media(prefers-reduced-motion:reduce){.products-refresh .cp-showcase-stage::before,.products-refresh .cp-showcase-card.is-active img{animation:none}}

/* Make the two chat entry points and their shared inbox explicit. */
.products-refresh .ww-inbox-highlight{gap:54px}
.products-refresh .ww-inbox-highlight .pill{margin-bottom:18px}
.products-refresh .ww-inbox-highlight h3{max-width:500px}
.products-refresh .ww-inbox-highlight p{max-width:520px;line-height:1.55}
.products-refresh .ww-inbox-flow{padding:22px;border:1px solid rgba(255,255,255,.22);border-radius:26px;background:rgba(255,255,255,.08)}
.products-refresh .ww-inbox-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.products-refresh .ww-inbox-source{min-width:0;padding:19px 16px;background:#f3f9ee;border-radius:16px;color:var(--pr-ink);display:flex;flex-direction:column;gap:4px}
.products-refresh .ww-inbox-source-icon{width:32px;height:32px;display:grid;place-items:center;margin-bottom:7px;border-radius:9px;background:#d6edd7;color:var(--pr-forest);font-size:23px;line-height:1}
.products-refresh .ww-inbox-source strong,.products-refresh .ww-inbox-destination strong{font:800 18px/1.15 var(--font-display)}
.products-refresh .ww-inbox-source small,.products-refresh .ww-inbox-destination small{font:500 12px/1.35 var(--font-sans);opacity:.72}
.products-refresh .ww-inbox-connector{display:flex;align-items:center;gap:12px;margin:10px auto;color:#e9fbab;width:70%;font-size:25px;line-height:1}
.products-refresh .ww-inbox-connector span{height:1px;flex:1;background:rgba(233,251,171,.35)}
.products-refresh .ww-inbox-destination{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#dff391;color:var(--pr-ink);border-radius:17px}
.products-refresh .ww-inbox-destination>span{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--pr-forest);color:#fff;font-size:26px;line-height:1}
.products-refresh .ww-inbox-destination div{display:flex;flex-direction:column;gap:4px}
@media(max-width:600px){.products-refresh .ww-inbox-highlight{gap:28px}.products-refresh .ww-inbox-flow{padding:12px;border-radius:20px}.products-refresh .ww-inbox-sources{gap:8px}.products-refresh .ww-inbox-source{padding:13px 11px;border-radius:12px}.products-refresh .ww-inbox-source strong{font-size:14px}.products-refresh .ww-inbox-destination{padding:14px}.products-refresh .ww-inbox-destination strong{font-size:16px}}

/* Give the Web Widget hero enough room to show the full product scene. */
.products-refresh .ww-hero .p-hero-inner{width:100%!important;max-width:1440px!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:4vw}
.products-refresh .ww-hero .p-hero-visual{width:100%!important}
@media(max-width:1024px){.products-refresh .ww-hero .p-hero-inner{grid-template-columns:1fr!important;gap:36px}}

/* Keep the supplied hero artwork, and give it more of the first screen. */
@media(min-width:1025px){
  .products-refresh .p-hero-inner,
  .products-refresh .ww-hero .p-hero-inner{max-width:1520px!important;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)!important;gap:clamp(32px,3vw,58px)!important}
  .products-refresh .p-hero-visual{width:100%!important}
}

/* Six complete Web Widget examples, with the chat control visible at bottom right. */
.products-refresh .ww-scenes-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.products-refresh .ww-scene{padding:10px;border-radius:22px}
.products-refresh .ww-scene img{aspect-ratio:1/1;object-fit:contain;object-position:center;background:#f5f8f7;border-radius:15px}
.products-refresh .ww-scene figcaption{padding:14px 8px 8px;gap:9px}
.products-refresh .ww-scene figcaption strong{font-size:14px}
@media(max-width:900px){.products-refresh .ww-scenes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.products-refresh .ww-scenes-grid{grid-template-columns:1fr}.products-refresh .ww-scene img{aspect-ratio:1/1}}

/* Show the Contact Page chat journey in plain steps. */
.products-refresh .cp-chat-flow{gap:clamp(30px,4vw,70px);scroll-margin-top:140px}
.products-refresh .cp-chat-flow-copy .pill{margin-bottom:18px}
.products-refresh .cp-chat-flow-copy p{max-width:540px;line-height:1.55}
.products-refresh .cp-chat-flow-offline{font-size:14px!important;color:#d5e8dc!important}
.products-refresh .cp-chat-flow-steps{display:grid;gap:10px;min-width:0}
.products-refresh .cp-chat-flow-step{display:grid;grid-template-columns:38px 1fr;column-gap:14px;row-gap:4px;padding:16px 18px;border-radius:16px;background:#f3f9ee;color:var(--pr-ink)}
.products-refresh .cp-chat-flow-step span{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#d6edd7;color:var(--pr-forest);font:800 12px var(--font-mono)}
.products-refresh .cp-chat-flow-step strong{font:800 18px/1.2 var(--font-display)}
.products-refresh .cp-chat-flow-step small{font:500 13px/1.35 var(--font-sans);color:#496157}
@media(max-width:600px){.products-refresh .cp-chat-flow-step{padding:13px}}

/* Keep the ten-card fan balanced around the section center. */
.products-refresh .cp-showcase{--showcase-width:min(24vw,300px)}
.products-refresh .cp-showcase-stage{height:min(45vw,570px);min-height:500px}
.products-refresh .cp-showcase-card.is-active{transform:translate(-50%,-50%) rotate(-1.5deg)}
@media(max-width:900px){.products-refresh .cp-showcase{--showcase-width:min(43vw,320px)}.products-refresh .cp-showcase-stage{height:590px;min-height:0}}
@media(max-width:600px){.products-refresh .cp-showcase{--showcase-width:min(64vw,280px)}.products-refresh .cp-showcase-stage{height:520px}}

/* Simplified Chinese: calmer product headings and more readable supporting copy. */
html[lang="zh-Hans"] body.products-refresh h1,
html[lang="zh-Hans"] body.products-refresh .p-hero-copy h1,
html[lang="zh-Hans"] body.products-refresh .cp-h1-single{font-size:clamp(36px,4.6vw,72px)!important;line-height:1.18!important;letter-spacing:-.04em!important}
html[lang="zh-Hans"] body.products-refresh h2,
html[lang="zh-Hans"] body.products-refresh .h1{font-size:clamp(30px,3.6vw,56px)!important;line-height:1.2!important;letter-spacing:-.035em!important}
html[lang="zh-Hans"] body.products-refresh .p-hero .lead,
html[lang="zh-Hans"] body.products-refresh .p-hero-copy .lead{font-size:clamp(16px,1.25vw,18px)!important;line-height:1.65!important}
html[lang="zh-Hans"] body.products-refresh .cp-contact-hero{padding:126px max(5vw,22px) 58px!important}
@media(max-width:720px){
  html[lang="zh-Hans"] body.products-refresh h1,
  html[lang="zh-Hans"] body.products-refresh .p-hero-copy h1,
  html[lang="zh-Hans"] body.products-refresh .cp-h1-single{font-size:clamp(34px,9vw,54px)!important;line-height:1.2!important}
  html[lang="zh-Hans"] body.products-refresh .cp-contact-hero{padding:86px 18px 42px!important}
  html[lang="zh-Hans"] body.products-refresh .p-hero .lead,
  html[lang="zh-Hans"] body.products-refresh .p-hero-copy .lead{font-size:16px!important;line-height:1.65!important}
}