/* ShopDot Pet — Features page styles
   Page-specific styles for "Stop Leaving Retail Revenue on the Table".
   Reuses tokens from colors_and_type.css and base components from site.css. */

/* ── Force-light nav (shared by all "light page" surfaces) ──────────
   Body class `page-features` is the canonical opt-in for the light
   nav treatment. Reused by Pricing.html, Embedded Partners.html, and
   any future page that doesn't sit on a dark photo hero.
   Active link is marked by adding `class="active"` to the relevant
   <a> in the nav — never by URL/href matching. */
body.page-features { background: #fff; }
body.page-features .nav {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--sd-border);
}
body.page-features .nav .nav-links a,
body.page-features .nav .login-link {
  color: var(--sd-neutral-950);
}
body.page-features .nav .nav-links a:hover { color: var(--sd-primary); }
body.page-features .nav .logo-light { display: none; }
body.page-features .nav .logo-dark { display: block; }

/* Active nav link is handled globally in site.css (.nav .nav-links a.active). */

/* ── Page hero (light) ──────────────────────────────────────────── */
.feat-hero {
  position: relative;
  padding: var(--sd-hero-pad-top) 24px var(--sd-hero-pad-bottom);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(800px 480px at 88% 8%, rgba(75,82,126,0.06), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, var(--sd-bg-cream, #fdfbf7) 100%);
}
.feat-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: var(--sd-border);
  opacity: 0.6;
}
.feat-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.feat-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: var(--sd-primary-100);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sd-primary-text);   /* AA — small orange text on light */
  margin-bottom: 24px;
}
.feat-hero .eyebrow::before {
  display: none;
}
.feat-hero h1 {
  font-family: var(--sd-font-display);
  font-weight: 700;
  font-size: var(--sd-text-h1-fluid);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--sd-neutral-950);
  margin: 0 0 24px;
  text-wrap: balance;
}
.feat-hero h1 .accent {
  color: var(--sd-primary);
}
.feat-hero .narrative {
  font-size: var(--sd-text-hero-sub);
  line-height: 1.55;
  color: var(--sd-fg-muted, var(--sd-neutral-600));
  max-width: 720px;
  margin: 0 auto 36px;
  text-wrap: pretty;
}
.feat-hero .narrative em {
  font-style: normal;
  color: var(--sd-neutral-950);
  font-weight: 600;
}
.feat-hero .feat-hero-ctas {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 8px;
}











/* ─── 01 — Storefront (hero) ──────────────────────────────────── */
.art-storefront { padding-top: 8px; }




/* ─── 02 — Share ring ──────────────────────────────────────────── */
.art-share {
  align-items: center;
  padding-bottom: 12px;
}
.share-ring {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
}
.share-ring::before {
  content: "";
  position: absolute;
  inset: 30px;
  border: 1.5px dashed var(--sd-neutral-200);
  border-radius: 50%;
}
.share-ring::after {
  content: "";
  position: absolute;
  inset: 60px;
  border: 1.5px dashed var(--sd-primary-200, #fcd6cc);
  border-radius: 50%;
  opacity: 0.6;
}
.share-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #fef4ee 100%);
  border: 1px solid var(--sd-primary-200, #fcd6cc);
  box-shadow: 0 10px 28px rgba(225,84,57,0.18);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  z-index: 2;
}
.share-center i { width: 22px; height: 22px; color: var(--sd-primary); }
.share-center span { font-size: 9.5px; font-weight: 700; color: var(--sd-neutral-950); letter-spacing: 0.02em; }

.share-pip {
  position: absolute;
  background: #fff;
  border: 1px solid var(--sd-border);
  border-radius: 9999px;
  padding: 7px 12px 7px 8px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 8px 18px rgba(44,47,50,0.08);
  font-size: 10.5px; font-weight: 600;
  color: var(--sd-neutral-950);
  white-space: nowrap;
}
.share-pip i {
  width: 14px; height: 14px;
  color: var(--sd-primary);
  flex: none;
}
.pip-ig   { top: -4px;   left: 50%; transform: translateX(-50%); }
.pip-link { top: 32%;    right: -16px; }
.pip-qr   { bottom: 4px; right: 6px; }
.pip-sms  { bottom: 4px; left: 6px; }
.pip-web  { top: 32%;    left: -16px; }







/* ─── 05 — Unified Checkout ──────────────────────────────────── */
.art-checkout {
  padding: 8px 8px 16px;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}



/* ── Workflow centerpiece ───────────────────────────────────────── */
.workflow {
  padding: var(--sd-sec-y) 24px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}


.flow-node {
  background: #fff;
  border: 1px solid var(--sd-border);
  border-radius: 18px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(44,47,50,0.04);
  transition: transform var(--sd-dur-base) var(--sd-ease),
              box-shadow var(--sd-dur-base) var(--sd-ease);
  position: relative;
  min-height: 280px;
}
.flow-node:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(44,47,50,0.08);
}








































/* ═══════════════════════════════════════════════════════════════════
   AUDIENCE VIGNETTES
   ═══════════════════════════════════════════════════════════════════ */
.audience {
  padding: var(--sd-sec-y) 24px;
  background: var(--sd-bg-cream, #fdfbf7);
  position: relative;
  overflow: hidden;
}


@keyframes audFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


@media (max-width: 900px) {


  .audience { padding: 80px 20px; }
}




/* ═══════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════ */
.feat-faq {
  padding: var(--sd-sec-y) 24px;
  background: var(--sd-bg-cream, #fdfbf7);
  position: relative;
}
.feat-faq-inner {
  max-width: 970px;
  margin: 0 auto;
}
.feat-faq-cap {
  text-align: center;
  margin-bottom: 48px;
}
.feat-faq-cap .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sd-primary-text);   /* AA */
  margin-bottom: 18px;
}
.feat-faq-cap .eyebrow::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;  /* match eyebrow text */
}
.feat-faq-cap h2 {
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-section-sub);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--sd-neutral-950);
  margin: 0 0 14px;
  text-wrap: balance;
}
.feat-faq-cap p {
  font-size: 18px;
  color: var(--sd-fg-muted);
  margin: 0;
}
.feat-faq .faq-a-inner code {
  background: #fff;
  border: 1px solid var(--sd-border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  color: var(--sd-primary-text);   /* AA */
  font-family: ui-monospace, monospace;
}

/* ── Closing reinforcement ──────────────────────────────────────── */
.closing {
  padding: var(--sd-sec-y-cta) 24px;
  text-align: center;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 20% 80%, rgba(225,84,57,0.05), transparent 60%),
    radial-gradient(700px 380px at 80% 20%, rgba(75,82,126,0.04), transparent 60%);
  pointer-events: none;
}
.closing-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}


/* ── Reveal ─────────────────────────────────────────────────────── */
.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fade.is-in { opacity: 1; transform: translateY(0); }


/* ═════════════════════════════════════════════════════════════════
   EMBED ANYWHERE — for platforms & software
   ═════════════════════════════════════════════════════════════════ */
.embed {
  padding: var(--sd-sec-y) 24px;
  background: #f5f6f6;
  position: relative;
  overflow: hidden;
}
.embed::before {
  content: none;
}
.embed::after {
  content: none;
}
.embed-inner {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.embed-cap {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.embed-cap .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600;
  color: var(--sd-primary-text);   /* AA */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}
.embed-cap .eyebrow::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;  /* match eyebrow text */
}
.embed-cap h2 {
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-section);
  font-weight: 700;
  line-height: 1.06;
  margin: 0 0 18px;
  color: var(--sd-fg);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.embed-cap p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--sd-fg-muted);
  margin: 0;
  text-wrap: pretty;
}

/* What's-included icon grid (3×2) */
.wi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 80px;
}
.wi-tile {
  text-align: center;
  padding: 40px 28px;
  background: #fff;
  border: 1px solid var(--sd-border, #e5e7e8);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(44,47,50,0.04), 0 18px 40px rgba(44,47,50,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wi-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(44,47,50,0.05), 0 26px 52px rgba(225,84,57,0.10);
}
.wi-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--sd-fg);
  color: var(--sd-primary);
  margin-bottom: 20px;
}
.wi-ic i { width: 26px; height: 26px; }
.wi-tile h4 {
  font-family: var(--sd-font-display);
  font-size: 18px; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--sd-fg);
  margin: 0 0 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.wi-opt {
  font-family: var(--sd-font-body, inherit);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--sd-fg-muted, #5c6166);
  background: #eceeee;
  border: 1px solid var(--sd-border, #e1e3e3);
  border-radius: 999px;
  padding: 3px 9px;
}
.wi-tile p {
  font-size: 15px; line-height: 1.6;
  color: var(--sd-fg-muted);
  margin: 0; max-width: 30ch; margin-inline: auto;
  text-wrap: pretty;
}
@media (max-width: 860px) {
  .wi-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .wi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Stage: phone + partner list */
.embed-stage {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 80px;
  padding: 48px 56px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--sd-border, #e5e7e8);
  box-shadow: 0 30px 60px rgba(44,47,50,0.06);
}

/* Phone */
.embed-phone {
  width: 280px;
  margin: 0 auto;
  background: #1c1f22;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 30px 50px rgba(44,47,50,0.18),
              inset 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
}
.embed-phone-screen {
  background: #fdfbf7;
  border-radius: 28px;
  overflow: hidden;
  height: 480px;
  display: flex;
  flex-direction: column;
}
.embed-phone-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 0 8px;
  background: #fff;
}
.embed-phone-bar span {
  width: 4px; height: 4px;
  background: #d6d8da;
  border-radius: 50%;
}
.embed-phone-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border-bottom: 1px solid #ececec;
  padding: 0 4px;
}
.embed-phone-tabs span {
  text-align: center;
  padding: 12px 0 14px;
  font-size: 11px;
  font-weight: 500;
  color: #8c9296;
  position: relative;
}
.embed-phone-tabs span.active {
  color: var(--sd-primary);
  font-weight: 600;
}
.embed-phone-tabs span.active::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 18%; right: 18%;
  height: 2px;
  background: var(--sd-primary);
  border-radius: 2px;
}
.embed-phone-banner {
  background: linear-gradient(135deg, #fee7e2 0%, #fdd6c8 100%);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid rgba(225,84,57,0.12);
}


.embed-banner-title {
  font-size: 14px;
  font-weight: 700;
  color: #2c2f32;
}
.embed-phone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  flex: 1;
}
.epg-tile {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #ececec;
}
.epg-img {
  width: 100%;
  height: 56px;
  border-radius: 6px;
  display: block;
}
.epg-img.a { background: linear-gradient(135deg, #e8e1d6, #d8cbb8); }
.epg-img.b { background: linear-gradient(135deg, #fbe5d8, #f4a783); }
.epg-img.c { background: linear-gradient(135deg, var(--sd-success-100), var(--sd-success-300)); }
.epg-img.d { background: linear-gradient(135deg, #fee7e2, #fdd6c8); }
.epg-cap {
  font-size: 10px;
  font-weight: 600;
  color: #2c2f32;
}
.embed-phone-foot {
  background: var(--sd-primary);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
}
.epf-arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.epf-arrow i { width: 12px; height: 12px; }

/* Partner list */
.embed-partners {
  position: relative;
}
.embed-partners-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--sd-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.embed-partners-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.embed-partners-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 20px;
  background: #fdfbf7;
  border: 1px solid var(--sd-border, #e5e7e8);
  border-radius: 12px;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.embed-partners-list li:hover {
  transform: translateX(2px);
  border-color: rgba(225,84,57,0.3);
}
.ep-mark {
  font-size: 16px;
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 130px;
}
.ep-meta {
  font-size: 14px;
  color: var(--sd-fg-muted);
  line-height: 1.4;
}
.ep-meta b {
  color: var(--sd-fg);
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────
   HOW-IT-WORKS FLOW (for-platforms.html) — ONE 4-step journey,
   scope → live. Replaced the two separate process sections ("How you
   embed" + "How partnerships work"), which overlapped and re-introduced
   the clutter the page rewrite set out to cut. Four icon nodes on a
   dashed connector; partner-as-hero, calm. Light band, no blobs.
   ────────────────────────────────────────────────────────────────── */
.flow {
  padding: var(--sd-sec-y) 24px;
  background: #f5f6f6;
}
/* whats-included (.embed) and how-it-works (.flow) share one #f5f6f6 band —
   drop the flow's top padding so the seam reads as a single 80px section gap. */
.embed + .flow { padding-top: 0; }
.flow .container { max-width: 1170px; }
.flow-track {
  max-width: 1040px;
  margin: 0 auto;
}
.flow-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.flow-steps::before {            /* dashed connector through icon centers */
  content: "";
  position: absolute;
  top: 44px;                     /* = half the 88px icon tile */
  left: 12%;
  right: 12%;
  border-top: 2px dashed var(--sd-primary);
  opacity: 0.4;
  z-index: 0;
}
.flow-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.flow-icon {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: var(--sd-radius-2xl, 20px);
  background: #fff;
  border: 1px solid var(--sd-border);
  box-shadow: 0 18px 36px rgba(44,47,50,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.flow-icon i {
  width: 32px;
  height: 32px;
  color: var(--sd-primary);
}
.flow-num {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sd-primary);
  color: #fff;
  font-family: var(--sd-font-display);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(225,90,55,0.35);
}
.flow-step h4 {
  font-family: var(--sd-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sd-fg);
  margin: 0 0 8px;
}
.flow-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sd-fg-muted);
  margin: 0;
  max-width: 220px;
}
@media (max-width: 860px) {
  .flow-steps { grid-template-columns: repeat(2, 1fr); gap: 44px 28px; }
  .flow-steps::before { display: none; }
}
@media (max-width: 520px) {
  .flow-steps { grid-template-columns: 1fr; gap: 34px; }
  .flow-step p { max-width: 320px; }
}


@media (max-width: 1024px) {
  .embed-stage {
    grid-template-columns: 1fr;
    padding: 40px 32px;
    gap: 48px;
  }
}
@media (max-width: 720px) {
  .embed { padding: var(--sd-sec-y) 20px; }
  .embed-stage { padding: 32px 20px; }
  .ep-mark { min-width: auto; flex-basis: 100%; }
  .embed-partners-list li { flex-direction: column; gap: 6px; align-items: flex-start; }
}
@media (max-width: 480px) {
  /* phone mock + its inner padding must fit a 375px viewport */
  .embed-stage { padding: 24px 14px; }
  .embed-phone { width: 100%; max-width: 280px; }
}




/* ═════════════════════════════════════════════════════════════════
   EMBEDDED PARTNERS PAGE — supporting sections
   ═════════════════════════════════════════════════════════════════ */

/* Why platforms — 3-up value props */
.ep-why {
  padding: var(--sd-sec-y) 24px;
  background: #fff;
}
.ep-why-cap {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.ep-why-cap .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600;
  color: var(--sd-primary-text);   /* AA */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.ep-why-cap .eyebrow::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;  /* match eyebrow text */
}
.ep-why-cap h2 {
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-section);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  color: var(--sd-fg);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ep-why-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
}
.ep-why-card {
  background: var(--sd-bg-cream, #fdfbf7);
  border: 1px solid var(--sd-border, #e5e7e8);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ep-why-num {
  font-family: var(--sd-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--sd-primary-text);   /* AA */
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.ep-why-card h4 {
  font-family: var(--sd-font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--sd-fg);
  line-height: 1.2;
}
.ep-why-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--sd-fg-muted);
  margin: 4px 0 0;
}



/* "Cases" wrap so cp-grid renders cleanly outside its original context */
.ep-cases {
  padding: var(--sd-sec-y) 24px;
  background: #fff;
}
.ep-cases .section-head {
  text-align: center;
  margin-bottom: 56px;
}
.ep-cases .section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600;
  color: var(--sd-primary-text);   /* AA */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}
.ep-cases .section-head .eyebrow::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;  /* match eyebrow text */
}
.ep-cases .section-head h2 {
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-section-sub);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 auto 14px;
  max-width: 800px;
  color: var(--sd-fg);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ep-cases .section-head p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--sd-fg-muted);
  margin: 0 auto;
  max-width: 600px;
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .ep-why-row { grid-template-columns: 1fr; }


}
@media (max-width: 720px) {
  .ep-cases { padding: 88px 20px; }
  .ep-why, .ep-how { padding: 80px 20px; }
}

/* ──────────────────────────────────────────────────────────────────
   WHO EMBEDS SHOPDOT (for-platforms.html) — audience self-recognition,
   3 category cards each with a bespoke inline SVG (phone-with-store,
   booking-calendar-with-storefront, catalog-grid). White cards on a
   light #f5f6f6 band so the art reads cleanly. Replaced the old hero
   one-line "fits" strip — this does that job with more recognition.
   SVGs use brand tokens (tangerine-led, no green/blue, no blobs).
   ────────────────────────────────────────────────────────────────── */
.who {
  padding: var(--sd-sec-y) 24px;
  background: #f5f6f6;
}
.who .container { max-width: 1170px; }
.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.who-card {
  background: #fff;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-2xl, 20px);
  padding: 0 0 28px;
  overflow: hidden;
  box-shadow: 0 18px 36px rgba(44,47,50,0.05);
  transition: transform var(--sd-dur-base) var(--sd-ease),
              box-shadow var(--sd-dur-base) var(--sd-ease);
}
.who-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 46px rgba(44,47,50,0.09);
}
.who-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 176px;
  background: #f2f4f6;            /* neutral stage — not peach (blush bands rejected) */
  border-bottom: 1px solid var(--sd-border);
}
.who-svg {
  width: 86%;
  height: auto;
  display: block;
}
.who-card h3 {
  font-family: var(--sd-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sd-fg);
  margin: 24px 28px 8px;
}
.who-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sd-fg-muted);
  margin: 0 28px;
}
@media (max-width: 880px) {
  .who-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
}

/* ──────────────────────────────────────────────────────────────────
   NETWORK CALLOUT — the single nod to the network play, sitting in the
   cream flow between the FAQ and the dark closing CTA. One line, one
   link to sales; no network mechanics on the page.
   ────────────────────────────────────────────────────────────────── */
.ep-net {
  padding: 8px 24px 56px;
  background: var(--sd-bg-cream, #fdfbf7);
}
.ep-net .container { max-width: var(--sd-container); }
.ep-net-line {
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sd-fg-muted);
}
.ep-net-line a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--sd-primary-text);
  white-space: nowrap;
  transition: color var(--sd-dur-base) var(--sd-ease);
}
.ep-net-line a:hover { color: var(--sd-primary-700, #bb341a); }
.ep-net-line a i { width: 15px; height: 15px; }

/* Why-partners cap now carries a subhead */
.ep-why-cap p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--sd-fg-muted);
  margin: 14px auto 0;
  max-width: 600px;
  text-wrap: pretty;
}

/* LAUNCHING-WITH blog-card grid (.blog-*) was promoted to site.css
   2026-06-10 — it is now shared across for-platforms.html, index.html
   (home) and for-brands.html. Edit it there, not here. */

/* ══════════════════════════════════════════════════════════════════
   SECTION-HEADER CANON PARITY (for-platforms.html)
   These caption blocks (.ep-why-cap, .embed-cap,
   .feat-faq-cap, .ep-cases .section-head) each predate the shared
   .section-head and had drifted (12px eyebrows, 16–24px gaps, 1.06–1.12
   line-heights, -0.01/-0.015/-0.025em tracking, -sub title clamp, 48–64px
   header gaps, 72px section padding). Normalized to match site.css
   .section-head exactly. Eyebrow font-size + tracking already aligned
   in-block above; this block fixes the rest in one place.
   ────────────────────────────────────────────────────────────────── */
.ep-why-cap, .embed-cap, .feat-faq-cap,
.ep-cases .section-head {
  margin-bottom: 40px;                /* canon header→content gap */
}
.ep-why-cap .eyebrow,
.embed-cap .eyebrow, .feat-faq-cap .eyebrow,
.ep-cases .section-head .eyebrow {
  letter-spacing: 0.14em;             /* faq was 0.16em */
  margin-bottom: 14px;                /* was 16/18px */
}
.ep-why-cap h2, .embed-cap h2,
.feat-faq-cap h2, .ep-cases .section-head h2 {
  font-size: var(--sd-text-section);  /* faq + ep-cases were -sub (smaller) */
  line-height: 1.1;                   /* was 1.06–1.12 */
  letter-spacing: -0.02em;            /* was -0.01/-0.015/-0.025 */
  margin: 0 auto 16px;                /* preserves centering where max-width set */
}
.ep-cases .section-head p { font-size: 18px; }  /* was 17px */
/* Hero eyebrow is a pill (bespoke); align only its tracking. */
.feat-hero .eyebrow { letter-spacing: 0.14em; }