/* ==========================================================================
   SOCIAL MEDIA — service page
   Hero with a patina silk banner holding the demo Sadza & Co. campaign (a transparent
   photo of two phones: profile grid and short video), a small sample report card and
   two glass chips (plan, WhatsApp enquiry), the three plans and their
   comparison, a sample month, the enquiries report, the ad payment service,
   terms with the Launch Pack, FAQ and the closing band.
   Scoped under .p-social; forge.css tokens only. Sibling of pages/design.css.
   ========================================================================== */

/* ---------- Shared details (same rhythm as the websites and design pages) ---------- */
.p-social .sm-head__title { margin-top: 18px; }
.p-social .sm-head__lead { max-width: 34em; }
.p-social .sm-head__aside { display: grid; gap: 20px; justify-items: start; }
.p-social .sm-head__link { font-size: 0.9375rem; }
.p-social .sm-demo {
  flex: none; margin-left: auto; padding: 0.4em 0.85em; border-radius: var(--r-pill);
  background: var(--ember-soft); color: var(--ember-ink);
  font-size: 0.72em; font-weight: 600; line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
}
.p-social .sm-avatar {
  display: grid; place-items: center; flex: none; width: 2.8em; height: 2.8em; border-radius: 50%;
  background: var(--ink); color: var(--white); font-size: 0.8em; font-weight: 600; letter-spacing: -0.02em;
}
.p-social .sm-up { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.72em; font-weight: 600; color: var(--patina-ink); }
.p-social .sm-up .i { width: 1.2em; height: 1.2em; stroke-width: 2.2; }

/* ==========================================================================
   Hero
   ========================================================================== */
.p-social .sm-hero__title .sm-w { display: inline-block; }
.p-social .sm-hero__lead { max-width: 30em; }

.p-social .sm-media {
  --notch-bg: var(--paper);
  --mh: clamp(460px, 40vw, 600px); /* the banner height, also used to fit the photo */
  container-type: inline-size;
  height: var(--mh);
  background: #3D6739;
  isolation: isolate;
  transform: translateZ(0);
}
.p-social .sm-media__silk {
  position: absolute; inset: -14% -2% -4%; z-index: 0;
  background: #3D6739 url("../../img/silk/banner-patina.webp") center 40% / cover no-repeat;
  background-image: image-set(url("../../img/silk/banner-patina-1600.webp") 1x, url("../../img/silk/banner-patina.webp") 2x);
  will-change: transform;
}
.p-social .sm-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(44% 56% at 50% 104%, rgba(14, 34, 12, 0.4) 0%, rgba(14, 34, 12, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 40%);
}
.p-social .sm-stage { position: absolute; inset: 0; z-index: 2; font-size: 1cqw; }
.p-social .sm-l { position: absolute; will-change: transform; }
.p-social .sm-media__notch { z-index: 4; }

/* ----- The demo campaign: a transparent photo of two phones (profile grid, short video) on the silk.
   The photo has clear margins either side of the phones, so it may run wider than the banner on phones. ----- */
.p-social .sm-l--shot { inset: 0; display: grid; place-items: center; }
.p-social .sm-shot { position: relative; width: min(56cqw, var(--mh) * 0.94 * 1.34); }
.p-social .sm-shot__img { display: block; width: 100%; height: auto; }
.p-social .sm-shot__demo { position: absolute; left: 9%; top: 6%; margin: 0; font-size: clamp(10px, 0.82em, 12px); }
/* plan beside the profile grid, the report up right, the enquiry beside the Order on WhatsApp button */
.p-social .sm-l--plan   { left: -26%; top: 34%; }
.p-social .sm-l--report { left: 86%; top: 9%; }
.p-social .sm-l--chat   { left: 85%; top: 74%; }

/* ----- Report card: a small sample of the monthly report ----- */
.p-social .sm-rep {
  width: 19em; padding: 1.15em 1.2em 1.25em; border-radius: 1.5em;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1.8em 3.6em -1.4em rgba(8, 26, 8, 0.6), 0 0.6em 1.4em -0.8em rgba(8, 26, 8, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.p-social .sm-rep__head { display: flex; align-items: center; gap: 0.7em; }
.p-social .sm-rep__icon { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: 0.8em; background: var(--ink); color: var(--white); }
.p-social .sm-rep__icon .i { width: 1.25em; height: 1.25em; }
.p-social .sm-rep__head b { font-size: 0.92em; font-weight: 600; letter-spacing: -0.01em; }
.p-social .sm-rep__big { display: flex; align-items: flex-end; gap: 0.75em; margin-top: 1em; }
.p-social .sm-rep__big > b {
  font-size: 3.9em; font-weight: 400; line-height: 0.82; letter-spacing: -0.05em;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-social .sm-rep__big > span { display: grid; gap: 0.3em; padding-bottom: 0.05em; }
.p-social .sm-rep__big em { font-style: normal; font-size: 0.84em; font-weight: 500; line-height: 1.2; }
.p-social .sm-rep__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 0.5em; height: 4.2em; margin-top: 1.1em; }
.p-social .sm-rep__bars i { display: block; height: calc(var(--h) * 100%); border-radius: 0.5em 0.5em 0.25em 0.25em; background: rgba(20, 20, 20, 0.09); transform-origin: 50% 100%; }
.p-social .sm-rep__bars .is-hi { background: var(--ember); }

/* ----- Glass chips ----- */
.p-social .sm-chip {
  display: flex; align-items: center; gap: 0.8em; padding: 0.7em 1.35em 0.7em 0.7em;
  font-size: clamp(11px, 1em, 14px); border-radius: 1.35em; white-space: nowrap;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 1.4em 2.8em -1.2em rgba(8, 26, 8, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.p-social .sm-chip__icon { display: grid; place-items: center; flex: none; width: 2.9em; height: 2.9em; border-radius: 0.9em; background: var(--ink); color: var(--white); }
.p-social .sm-chip__icon .i { width: 1.4em; height: 1.4em; }
.p-social .sm-chip__icon--wa { background: #25D366; }
.p-social .sm-chip__icon--ember { background: var(--ember); }
.p-social .sm-chip__text { display: grid; gap: 0.15em; line-height: 1.2; }
.p-social .sm-chip__text b { font-size: 1em; font-weight: 600; letter-spacing: -0.015em; }
.p-social .sm-chip__text small { font-size: 0.82em; color: var(--slate); }

/* Tablet: the phones move right, the two chips stack on the clear silk to their left */
@media (max-width: 959.98px) {
  .p-social .sm-media { --mh: clamp(420px, 60vw, 540px); }
  .p-social .sm-l--shot { justify-items: end; padding-right: 2%; }
  .p-social .sm-shot { width: 66cqw; }
  .p-social .sm-l--plan   { left: -44%; top: 22%; }
  .p-social .sm-l--chat   { left: -44%; top: 64%; }
  .p-social .sm-l--report { display: none; }
}
/* Phone: the phones fill the banner (the photo's clear margins run off its edges), one chip above, one below */
@media (max-width: 599.98px) {
  .p-social .sm-media { --mh: 490px; }
  .p-social .sm-l--shot { justify-items: center; padding-right: 0; }
  .p-social .sm-shot { width: 124%; }
  .p-social .sm-shot__demo { left: auto; right: calc(9.7% + 14px); top: -14%; }
  .p-social .sm-l--plan { left: calc(9.7% + 12px); top: -19%; }
  .p-social .sm-l--chat { left: calc(9.7% + 12px); top: 103%; }
}

/* Intro: hidden only while JS boots (never without JS, never in QA or reduced motion) */
.js.is-loading:not(.is-qa):not(.is-reduced) .p-social .sm-hero__eyebrow,
.js.is-loading:not(.is-qa):not(.is-reduced) .p-social .sm-hero__title,
.js.is-loading:not(.is-qa):not(.is-reduced) .p-social .sm-hero__lead,
.js.is-loading:not(.is-qa):not(.is-reduced) .p-social .sm-hero__cta,
.js.is-loading:not(.is-qa):not(.is-reduced) .p-social .sm-media {
  opacity: 0;
  animation: sm-failsafe 0.6s ease 3s forwards;
}
@keyframes sm-failsafe { to { opacity: 1; } }

/* ==========================================================================
   Plans
   ========================================================================== */
.p-social .sm-tiers { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

.p-social .sm-tier {
  --notch-bg: var(--paper);
  position: relative; display: flex; flex-direction: column; gap: 24px; min-width: 0;
  padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-xl); background: var(--white);
}
.p-social .sm-tier--growth {
  background:
    radial-gradient(90% 55% at 100% 0%, rgba(92, 138, 87, 0.3) 0%, rgba(92, 138, 87, 0) 62%),
    radial-gradient(70% 45% at 0% 100%, rgba(238, 106, 44, 0.12) 0%, rgba(238, 106, 44, 0) 60%),
    var(--coal);
}
.p-social .sm-tier__tabcut { --notch-r: 20px; }
.p-social .sm-tab {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink);
}
.p-social .sm-tab--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.p-social .sm-tab__icons { display: inline-flex; align-items: center; gap: 8px; }
.p-social .sm-tab__icons .i { width: 17px; height: 17px; }
.p-social .sm-tab__icons em { font-style: normal; font-size: 0.75rem; font-weight: 500; color: var(--slate); }
.p-social .sm-tab--dark em { color: rgba(255, 255, 255, 0.6); }

.p-social .sm-tier__top { display: grid; justify-items: start; gap: 22px; min-width: 0; }
.p-social .sm-swatch {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 52px; height: 52px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.p-social .sm-swatch span {
  font-size: 0.75rem; font-weight: 600; color: var(--white); letter-spacing: 0.02em;
  padding: 3px 7px; border-radius: var(--r-pill); background: rgba(20, 20, 20, 0.2);
}
.p-social .sm-tier__id { min-width: 0; }
.p-social .sm-tier__name {
  font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); line-height: 1.05; letter-spacing: var(--tracking-h3); font-weight: 400;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-social .sm-tier__for { margin-top: 6px; font-size: 0.9375rem; line-height: 1.4; color: var(--slate); }
.p-social .sm-tier__pricing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.p-social .sm-tier__amount { display: flex; align-items: baseline; gap: 10px; }
.p-social .sm-tier__amount .t-num {
  font-size: clamp(2.75rem, 2rem + 1.7vw, 3.75rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 400;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-social .sm-tier__amount small { font-size: 1rem; color: var(--slate); }
.p-social .sm-rec {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  background: rgba(227, 160, 58, 0.14); color: var(--brass-soft); font-size: 0.8125rem; font-weight: 500; white-space: nowrap;
}
.p-social .sm-rec .i { width: 14px; height: 14px; color: var(--brass); fill: var(--brass); }

.p-social .sm-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0;
  border-radius: 16px; background: var(--paper);
}
.p-social .dark .sm-stats { background: rgba(255, 255, 255, 0.06); }
.p-social .sm-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 14px 16px; min-width: 0; }
.p-social .sm-stats > div + div { border-left: 1px solid var(--line); }
.p-social .sm-stats dt { font-size: 0.75rem; line-height: 1.3; color: var(--slate); }
.p-social .sm-stats dd { margin: 0; display: flex; align-items: baseline; gap: 5px; font-size: 1.75rem; font-weight: 400; line-height: 1; letter-spacing: -0.03em; }
.p-social .sm-stats dd { flex-wrap: wrap; row-gap: 2px; }
.p-social .sm-stats dd small { font-size: 0.75rem; letter-spacing: 0; color: var(--slate); white-space: nowrap; }
.p-social .sm-stats dd.is-none { color: var(--stone); }

.p-social .sm-tier__list { gap: 12px; font-size: 0.9375rem; align-content: start; }
.p-social .dark .sm-tier__list li::before { background-color: var(--ember); }
.p-social .sm-tier__foot { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); }
.p-social .sm-tier__btn { justify-content: space-between; width: 100%; --btn-h: 52px; }
.p-social .sm-tier__btn .i { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.p-social .sm-tier__btn:hover .i { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .p-social .sm-tier:not(.dark) { transition: box-shadow var(--dur-2) var(--ease-out); }
  .p-social .sm-tier:not(.dark):hover { box-shadow: var(--shadow-2); }
}
/* three columns: the rows line up across the cards (name, price, numbers, list, button).
   Declared after the base card rule so the subgrid wins over its flex column. */
@media (min-width: 1100px) {
  .p-social .sm-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); row-gap: 0; }
  .p-social .sm-tier { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 24px; align-content: start; }
  .p-social .sm-tier > .sm-tier__amount, .p-social .sm-tier > .sm-tier__pricing { align-self: start; }
  .p-social .sm-tier__foot { align-self: end; margin-top: 0; }
}
/* one column: list beside the numbers */
@media (min-width: 720px) and (max-width: 1099.98px) {
  .p-social .sm-tier {
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: 44px; row-gap: 24px;
    grid-template-areas: "top list" "price list" "stats list" "foot foot"; align-content: start;
  }
  .p-social .sm-tier__top { grid-area: top; }
  .p-social .sm-tier__amount, .p-social .sm-tier__pricing { grid-area: price; }
  .p-social .sm-stats { grid-area: stats; align-self: start; }
  .p-social .sm-tier__list { grid-area: list; align-self: start; padding-top: 72px; }
  .p-social .sm-tier__foot { grid-area: foot; }
}

/* comparison */
.p-social .sm-compare { margin-top: clamp(56px, 6vw, 88px); }
.p-social .sm-compare__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px;
  margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.p-social .sm-compare__title { font-size: var(--fs-h4); font-weight: 500; letter-spacing: -0.014em; line-height: 1.25; }
.p-social .sm-compare__note { max-width: 44em; font-size: 0.9375rem; color: var(--slate); }
.p-social .sm-table-wrap { border: 0; border-radius: var(--r-xl); }
.p-social .sm-table-wrap:focus-visible { outline-offset: 4px; border-radius: var(--r-xl); }
.p-social .sm-table { min-width: 780px; table-layout: fixed; font-size: 0.9375rem; line-height: 1.45; }
.p-social .sm-table th, .p-social .sm-table td { padding: 18px 22px; }
.p-social .sm-table thead th {
  position: static; padding-top: 26px; padding-bottom: 20px; background: var(--white);
  font-size: inherit; letter-spacing: 0; color: var(--ink); vertical-align: bottom;
}
.p-social .sm-table thead th:first-child { width: 24%; }
.p-social .sm-table thead b { display: block; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.012em; }
.p-social .sm-table thead small { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; color: var(--slate); }
.p-social .sm-table tbody th { font-weight: 500; color: var(--ink); }
.p-social .sm-table td { color: var(--ink); }
.p-social .sm-table .is-rec { background: rgba(92, 138, 87, 0.07); }
.p-social .sm-table thead .is-rec { position: relative; border-radius: 18px 18px 0 0; }
.p-social .sm-table thead .is-rec b::after {
  content: "Recommended"; display: inline-flex; align-items: center; height: 22px; margin-left: 10px; padding: 0 9px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--white); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: 2px;
}
.p-social .sm-table tbody tr:last-child .is-rec { border-radius: 0 0 18px 18px; }
.p-social .sm-yes { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--patina-ink); }
.p-social .sm-yes .i { width: 16px; height: 16px; stroke-width: 2.4; }
.p-social .sm-no { color: var(--stone); }
.p-social .sm-table tbody tr:last-child th { border-bottom: 0; }
@media (min-width: 700px) and (max-width: 859.98px) {
  .p-social .sm-table { min-width: 0; font-size: 0.875rem; }
  .p-social .sm-table th, .p-social .sm-table td { padding: 16px 14px; }
  .p-social .sm-table thead th:first-child { width: 22%; }
  .p-social .sm-table thead .is-rec b::after { display: flex; width: fit-content; margin: 6px 0 0; }
}
/* phones: each row becomes a small card with the three plans stacked */
@media (max-width: 699.98px) {
  .p-social .sm-table-wrap { overflow: visible; background: transparent; }
  .p-social .sm-table, .p-social .sm-table tbody, .p-social .sm-table tr, .p-social .sm-table th, .p-social .sm-table td { display: block; }
  .p-social .sm-table { min-width: 0; table-layout: auto; }
  .p-social .sm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .p-social .sm-table tbody { display: grid; gap: 10px; }
  .p-social .sm-table tr { padding: 18px 18px 12px; border-radius: 20px; background: var(--white); }
  .p-social .sm-table tbody th { padding: 0 0 10px; border: 0; font-size: 1rem; }
  .p-social .sm-table td {
    display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 10px 0; border: 0; border-top: 1px solid var(--line);
    font-size: 0.9375rem;
  }
  .p-social .sm-table td::before { content: attr(data-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); padding-top: 2px; }
  .p-social .sm-table td.is-rec, .p-social .sm-table tbody tr:last-child .is-rec { background: transparent; border-radius: 0; }
  .p-social .sm-table td.is-rec::before { color: var(--patina-ink); }
}

/* ==========================================================================
   A month with Forge
   ========================================================================== */
.p-social .sm-month__box {
  --c-plan: var(--temper); --c-post: var(--ember); --c-video: var(--brass); --c-session: var(--patina); --c-call: var(--slate); --c-report: var(--ink);
  display: grid; gap: 36px; padding: clamp(20px, 3.6vw, 48px); border-radius: var(--r-xl); background: var(--white);
}
/* side by side only once the calendar's seven columns can hold their chips (below 1200 it runs full width) */
@media (min-width: 1200px) { .p-social .sm-month__box { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); } }
.p-social .sm-month__side { display: grid; align-content: start; gap: 22px; }
@media (min-width: 700px) and (max-width: 1199.98px) {
  .p-social .sm-month__side { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 32px; }
  .p-social .sm-month__summary { min-height: 0; }
  .p-social .sm-key { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
.p-social .sm-seg { justify-self: start; }
/* room under the switcher for its hint (forge.css .hint), kept whether the hint shows or not */
.p-social .sm-seg { margin-bottom: 18px; }
.p-social .sm-seg button { min-width: 84px; }
.p-social .sm-seg button[aria-pressed="true"] { color: var(--ink); background: var(--white); box-shadow: var(--shadow-1); }
.p-social .sm-seg.has-pill button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.p-social .sm-seg:not(.has-pill) .segmented__pill { display: none; }
.p-social .sm-month__summary { min-height: 4.5em; font-size: 0.9375rem; line-height: 1.5; color: var(--slate); }
.p-social .sm-month__summary b { color: var(--ink); font-weight: 500; }
.p-social .sm-key { display: grid; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.p-social .sm-key__item { display: flex; gap: 14px; align-items: flex-start; transition: opacity var(--dur-2) var(--ease-out); }
.p-social .sm-key__dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 4px; background: var(--c-plan); }
.p-social .sm-key__item[data-kind="post"] .sm-key__dot { background: var(--c-post); }
.p-social .sm-key__item[data-kind="session"] .sm-key__dot { background: var(--c-session); }
.p-social .sm-key__item[data-kind="reply"] .sm-key__dot { background: var(--patina-ink); border-radius: 50%; }
.p-social .sm-key__item[data-kind="report"] .sm-key__dot { background: var(--c-report); }
.p-social .sm-key__item b { display: block; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
.p-social .sm-key__item p { margin-top: 3px; font-size: 0.875rem; line-height: 1.5; color: var(--slate); }
.p-social .sm-month__box[data-plan="lite"] .sm-key__item[data-kind="session"],
.p-social .sm-month__box[data-plan="lite"] .sm-key__item[data-kind="reply"] { opacity: 0.42; }

.p-social .sm-cal { min-width: 0; }
.p-social .sm-cal__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.p-social .sm-cal__title { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.p-social .sm-cal__title .i { width: 18px; height: 18px; color: var(--ember); }
.p-social .sm-cal__plan {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--white); font-size: 0.8125rem; font-weight: 500;
}
.p-social .sm-lanes { display: grid; gap: 6px; margin: 18px 0 16px; }

.p-social .sm-lane {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; border-radius: 12px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.35;
}
.p-social .sm-lane .i { width: 16px; height: 16px; flex: none; }
.p-social .sm-lane--reply { background: var(--patina-soft); color: var(--patina-ink); }
.p-social .sm-lane--ads { background: var(--ember-soft); color: var(--ember-ink); }
.p-social .sm-lane--status { background: rgba(37, 211, 102, 0.13); color: #128C4A; }
.p-social .sm-month__box[data-plan="growth"] .sm-lane:not([data-plans~="growth"]) { display: none; }
.p-social .sm-month__box[data-plan="lite"] .sm-lanes { display: none; }

.p-social .sm-cal__dows, .p-social .sm-week { display: grid; grid-template-columns: 62px minmax(0, 1fr); }
.p-social .sm-cal__dows { padding-left: 62px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.p-social .sm-cal__dows span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); padding-left: 8px; }
.p-social .sm-weeks { display: grid; gap: 6px; }
.p-social .sm-week__label { align-self: center; font-size: 0.75rem; font-weight: 600; color: var(--slate); white-space: nowrap; }
.p-social .sm-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.p-social .sm-day {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; min-height: 82px; padding: 6px;
  border-radius: 12px; background: var(--paper);
}
.p-social .sm-day--we { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.p-social .sm-day__dow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p-social .sm-ev {
  display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 7px; border-radius: 8px;
  font-size: 0.71875rem; font-weight: 500; line-height: 1.2; color: var(--ink); background: var(--white);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.06);
}
.p-social .sm-ev::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--k, var(--c-post)); }
.p-social .sm-ev--plan    { --k: var(--c-plan); }
.p-social .sm-ev--post    { --k: var(--c-post); }
.p-social .sm-ev--video   { --k: var(--c-video); }
.p-social .sm-ev--session { --k: var(--c-session); background: var(--patina-soft); color: var(--patina-ink); }
.p-social .sm-ev--call    { --k: var(--c-call); }
.p-social .sm-ev--report  { --k: var(--ember); background: var(--ink); color: var(--white); }
.p-social .sm-month__box[data-plan="lite"] .sm-ev:not([data-plans~="lite"]),
.p-social .sm-month__box[data-plan="growth"] .sm-ev:not([data-plans~="growth"]),
.p-social .sm-month__box[data-plan="pro"] .sm-ev:not([data-plans~="pro"]) { display: none; }
.p-social .sm-cal__foot { margin-top: 14px; font-size: 0.8125rem; color: var(--slate); }

/* what the month adds up to, per plan */
.p-social .sm-tally { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.p-social .sm-tally__label { font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--slate); padding-right: 10px; }
.p-social .sm-tally__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; }
.p-social .sm-tally__list > div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 7px; min-width: 0;
  padding: 12px 12px 13px; border-radius: 12px; background: var(--paper);
}
.p-social .sm-tally__list dt { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; line-height: 1.25; color: var(--slate); }
.p-social .sm-tally__list dt::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--k); }
.p-social .sm-tally__list dd {
  display: block; margin: 0; font-size: 1.75rem; font-weight: 400; line-height: 1; letter-spacing: -0.035em;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-social .sm-tally__list dd.is-zero { color: var(--stone); }

/* phones: switcher and summary, then the calendar, then the key; each week becomes a short list */
@media (max-width: 699.98px) {
  .p-social .sm-month__box { gap: 22px; }
  .p-social .sm-month__side { display: contents; }
  .p-social .sm-key { order: 2; }
  .p-social .sm-cal { padding-top: 22px; border-top: 1px solid var(--line); }
  .p-social .sm-cal__dows { display: none; }
  .p-social .sm-weeks { gap: 10px; }
  .p-social .sm-week { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; border-radius: 16px; background: var(--paper); }
  .p-social .sm-week__label { font-size: 0.8125rem; color: var(--ink); }
  .p-social .sm-days { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .p-social .sm-day { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; padding: 0; background: transparent; }
  .p-social .sm-day--we { box-shadow: none; }
  .p-social .sm-day__dow { position: static; width: 38px; height: auto; overflow: visible; clip: auto; font-size: 0.75rem; font-weight: 600; color: var(--slate); }
  .p-social .sm-month__box[data-plan="lite"] .sm-day:not(:has(.sm-ev[data-plans~="lite"])),
  .p-social .sm-month__box[data-plan="growth"] .sm-day:not(:has(.sm-ev[data-plans~="growth"])),
  .p-social .sm-month__box[data-plan="pro"] .sm-day:not(:has(.sm-ev[data-plans~="pro"])) { display: none; }
  .p-social .sm-seg { justify-self: stretch; display: flex; }
  .p-social .sm-seg button { flex: 1; min-width: 0; }
  .p-social .sm-tally { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .p-social .sm-tally__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .p-social .sm-tally__list > div { grid-column: span 2; }
  .p-social .sm-tally__list > div:nth-child(n+4) { grid-column: span 3; }
}

/* ==========================================================================
   Reporting
   ========================================================================== */
.p-social .sm-report__grid { display: grid; gap: 40px; align-items: center; }
/* the report sheet needs ~620px to breathe, so the copy sits above it until 1200 */
@media (min-width: 1200px) { .p-social .sm-report__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(48px, 5vw, 80px); } }
.p-social .sm-report__lead { margin-top: 30px; max-width: 30em; }
/* keeps the comma on the same line as the highlighted word */
.p-social .sm-nobreak { white-space: nowrap; }
/* the stroke sits below the descender of the q */
.p-social .sm-report .mark .squiggle { bottom: -0.36em; }
.p-social .sm-report__hooks { margin-top: 30px; font-size: 1rem; color: var(--ink); }
.p-social .sm-report__panel {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(16px, 3.4vw, 52px); border-radius: var(--r-xl); background: var(--temper);
}
.p-social .sm-report__silk { position: absolute; inset: -4%; z-index: -1; }
.p-social .sm-sheet {
  position: relative; padding: clamp(16px, 2.2vw, 28px); border-radius: 24px; background: var(--white);
  box-shadow: 0 40px 80px -36px rgba(34, 38, 104, 0.6), 0 0 0 1px rgba(20, 20, 20, 0.04);
}
.p-social .sm-sheet__head { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.p-social .sm-sheet__who { display: grid; line-height: 1.25; }
.p-social .sm-sheet__who b { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.p-social .sm-sheet__who small { font-size: 0.8125rem; color: var(--slate); }
.p-social .sm-sheet__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.p-social .sm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.p-social .sm-kpi { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 14px 16px 16px; border-radius: 16px; background: var(--paper); }
.p-social .sm-kpi small { font-size: 0.75rem; color: var(--slate); }
.p-social .sm-kpi b {
  font-size: clamp(2rem, 1.5rem + 1.2vw, 2.625rem); font-weight: 400; line-height: 1; letter-spacing: -0.045em;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-social .sm-kpi > span { font-size: 0.75rem; line-height: 1.35; color: var(--slate); }
.p-social .sm-kpi--main { background: var(--ink); color: var(--white); }
.p-social .sm-kpi--main small { color: rgba(255, 255, 255, 0.7); }
.p-social .sm-kpi--main .sm-up { color: var(--patina-soft); font-size: 0.75rem; }
.p-social .sm-kpi--muted b { color: var(--stone); }
.p-social .sm-kpi--muted s { text-decoration-thickness: 2px; text-decoration-color: var(--ember); }
.p-social .sm-sheet__row { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 560px) { .p-social .sm-sheet__row { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } }
.p-social .sm-src, .p-social .sm-wk, .p-social .sm-next { padding: 14px 16px 16px; border-radius: 16px; background: var(--paper); min-width: 0; }
.p-social .sm-src__body { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 12px; }
.p-social .sm-donut { width: 104px; height: 104px; transform: rotate(-90deg); overflow: visible; }
.p-social .sm-donut circle { fill: none; stroke-width: 14; }
.p-social .sm-donut__track { stroke: var(--fog); }
.p-social .sm-donut__seg { stroke: var(--c); stroke-dasharray: var(--len) 100; stroke-dashoffset: calc(var(--off) * -1); }
.p-social .sm-donut__mid { position: absolute; left: 0; top: 50%; width: 104px; transform: translateY(-50%); display: grid; justify-items: center; line-height: 1.1; pointer-events: none; }
.p-social .sm-donut__mid b { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.03em; }
.p-social .sm-donut__mid small { font-size: 0.6875rem; color: var(--slate); }
.p-social .sm-src__list { display: grid; gap: 9px; font-size: 0.8125rem; }
.p-social .sm-src__list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.p-social .sm-src__list i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.p-social .sm-src__list b { margin-left: auto; font-weight: 600; }
.p-social .sm-wk__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 10px; height: 118px; margin-top: 12px; }
.p-social .sm-wk__bars span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.p-social .sm-wk__bars b { font-size: 0.75rem; font-weight: 600; }
.p-social .sm-wk__bars i { display: block; width: 100%; max-width: 40px; height: calc(var(--h) * 70px); border-radius: 8px 8px 4px 4px; background: var(--fog); transform-origin: 50% 100%; }
.p-social .sm-wk__bars .is-hi i { background: var(--ember); }
.p-social .sm-wk__bars small { font-size: 0.6875rem; color: var(--slate); }
.p-social .sm-sheet__row--foot { align-items: stretch; }
.p-social .sm-receipt { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); }
.p-social .sm-receipt__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--ember-soft); color: var(--ember-ink); }
.p-social .sm-receipt__icon .i { width: 18px; height: 18px; }
.p-social .sm-receipt__text { display: grid; min-width: 0; line-height: 1.3; }
.p-social .sm-receipt__text b { font-size: 0.8125rem; font-weight: 600; }
.p-social .sm-receipt__text small { font-size: 0.75rem; color: var(--slate); }
.p-social .sm-receipt__tag { flex: none; margin-left: auto; padding: 5px 10px; border-radius: var(--r-pill); background: var(--patina-soft); color: var(--patina-ink); font-size: 0.6875rem; font-weight: 600; }
.p-social .sm-next { background: var(--temper-soft); }
.p-social .sm-next .sm-sheet__label { color: var(--temper-ink); }
.p-social .sm-next p:last-child { margin-top: 6px; font-size: 0.8125rem; line-height: 1.45; color: var(--ink); }
@media (max-width: 479.98px) {
  .p-social .sm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-social .sm-kpi--main { grid-column: 1 / -1; }
  .p-social .sm-src__body { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .p-social .sm-donut, .p-social .sm-donut__mid { width: 92px; }
  .p-social .sm-donut { height: 92px; }
}

/* ==========================================================================
   Ad payment service (folder card, reference f_069)
   ========================================================================== */
.p-social .sm-ads__box {
  display: grid; gap: 44px; align-items: center;
  padding: clamp(22px, 4.4vw, 64px); border-radius: var(--r-xl); background: var(--white);
}
@media (min-width: 1024px) { .p-social .sm-ads__box { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(48px, 5vw, 80px); } }
.p-social .sm-ads__lead { margin-top: 20px; max-width: 32em; }
.p-social .sm-steps { display: grid; gap: 18px; margin-top: 32px; }
.p-social .sm-steps__item { display: flex; gap: 16px; align-items: flex-start; }
.p-social .sm-steps__num {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--white); font-size: 0.875rem; font-weight: 600; letter-spacing: 0;
}
.p-social .sm-steps__item b { display: block; margin-top: 6px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.012em; }
.p-social .sm-steps__item p { margin-top: 3px; font-size: 0.9375rem; line-height: 1.5; color: var(--slate); max-width: 30em; }
.p-social .sm-never {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 14px 18px; border-radius: 16px;
  background: var(--patina-soft); color: var(--patina-ink); font-size: 0.9375rem; font-weight: 500; line-height: 1.45;
}
.p-social .sm-never .i { width: 19px; height: 19px; margin-top: 1px; flex: none; }

.p-social .sm-ads__visual { min-width: 0; padding-left: 18px; }
.p-social .sm-folder {
  --notch-bg: var(--white);
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 540px; padding: 170px clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 28px); border-radius: 30px;
}
.p-social .sm-folder__silk { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.p-social .sm-folder__tabcut { --notch-r: 22px; z-index: 2; }
.p-social .sm-folder__tab {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); font-size: 0.9375rem; font-weight: 500; color: var(--slate);
}
.p-social .sm-paid {
  position: absolute; z-index: 3; left: -22px; top: 56px; display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 26px 8px 8px; border-radius: var(--r-pill); background: var(--white); color: var(--ink);
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 22px 44px -18px rgba(8, 26, 8, 0.55), 0 2px 6px rgba(8, 26, 8, 0.12);
  transform: rotate(-8deg); transform-origin: 20% 50%;
}
.p-social .sm-paid__disc { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--white); }
.p-social .sm-paid__disc .i { width: 21px; height: 21px; }
.p-social .sm-paid--sub {
  left: 16px; top: 122px; gap: 12px; padding: 6px 20px 6px 6px; font-size: 0.9375rem;
  background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px -18px rgba(8, 26, 8, 0.6); transform: rotate(-2deg);
}
.p-social .sm-paid__disc--soft { width: 36px; height: 36px; background: rgba(20, 20, 20, 0.72); }
.p-social .sm-paid__disc--soft .i { width: 17px; height: 17px; }
.p-social .sm-calc { position: relative; z-index: 1; padding: clamp(18px, 2vw, 24px); border-radius: 22px; background: rgba(255, 255, 255, 0.88); }
.p-social .sm-calc__label { font-size: 0.875rem; font-weight: 500; color: var(--ink); }
/* one row always: the four presets shrink a little on narrow cards rather than orphaning $300 */
.p-social .sm-calc__presets { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 12px; }
.p-social .sm-calc__presets button {
  flex: 0 1 64px; min-width: 56px; height: 40px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.p-social .sm-calc__presets button:hover { border-color: var(--ink); }
.p-social .sm-calc__presets button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.p-social .sm-range {
  --p: 9.09%;
  display: block; width: 100%; height: 32px; margin: 16px 0 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.p-social .sm-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--ink) var(--p), var(--fog) var(--p)); }
.p-social .sm-range::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--fog); }
.p-social .sm-range::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--ink); }
.p-social .sm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--ink); box-shadow: 0 2px 8px rgba(20, 20, 20, 0.2);
}
.p-social .sm-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); }
.p-social .sm-range:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 8px; }
.p-social .sm-calc__out { display: grid; gap: 8px; margin: 14px 0 0; }
.p-social .sm-calc__out > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 0.9375rem; }
.p-social .sm-calc__out dt { color: var(--slate); }
.p-social .sm-calc__out dd { margin: 0; font-weight: 500; }
.p-social .sm-calc__total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.p-social .sm-calc__total dt { color: var(--ink); font-weight: 500; }
.p-social .sm-calc__total dd {
  display: inline-block; font-size: 2rem; font-weight: 400; line-height: 1; letter-spacing: -0.035em;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-social .sm-calc__note { margin-top: 12px; font-size: 0.8125rem; line-height: 1.45; color: var(--slate); }
@media (max-width: 559.98px) {
  .p-social .sm-ads__visual { padding-left: 10px; }
  .p-social .sm-calc__presets { flex-wrap: nowrap; }
  .p-social .sm-calc__presets button { flex: 1; min-width: 0; padding: 0 6px; }
  .p-social .sm-folder { min-height: 0; padding-top: 150px; }
  .p-social .sm-paid { left: -12px; top: 58px; font-size: 0.9375rem; padding-right: 20px; }
  .p-social .sm-paid__disc { width: 40px; height: 40px; }
  .p-social .sm-paid--sub { left: 12px; top: 112px; font-size: 0.8125rem; }
}

/* management by plan */
.p-social .sm-mgmt { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .p-social .sm-mgmt { grid-template-columns: repeat(3, minmax(0, 1fr)); } .p-social .sm-mgmt__intro { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .p-social .sm-mgmt { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .p-social .sm-mgmt__intro { grid-column: auto; } }
.p-social .sm-mgmt__intro { display: grid; align-content: center; gap: 6px; padding: 18px 8px 18px 4px; }
.p-social .sm-mgmt__title { font-size: var(--fs-h4); font-weight: 500; letter-spacing: -0.014em; line-height: 1.25; }
.p-social .sm-mgmt__intro p { font-size: 0.9375rem; line-height: 1.5; color: var(--slate); max-width: 34em; }
.p-social .sm-mgmt__card { display: grid; align-content: start; gap: 6px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--white); }
.p-social .sm-mgmt__card--rec { background: var(--coal); color: var(--white); }
.p-social .sm-mgmt__plan { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.p-social .sm-mgmt__card--rec .sm-mgmt__plan { color: rgba(255, 255, 255, 0.62); }
.p-social .sm-mgmt__val { margin-top: 6px; font-size: 1.125rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
.p-social .sm-mgmt__val .t-num { font-size: 2.25rem; letter-spacing: -0.04em; }
.p-social .sm-mgmt__val--none { font-size: 1.375rem; color: var(--stone); }
.p-social .sm-mgmt__sub { font-size: 0.875rem; color: var(--slate); }
.p-social .sm-mgmt__card--rec .sm-mgmt__sub { color: rgba(255, 255, 255, 0.66); }

/* ==========================================================================
   Terms + Launch Pack
   ========================================================================== */
.p-social .sm-terms__grid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .p-social .sm-terms__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: stretch; } }
.p-social .sm-terms__col { padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r-xl); background: var(--white); }
.p-social .sm-terms__list { margin: 0; }
.p-social .sm-terms__list > div { display: grid; gap: 6px 28px; padding: 22px 0; border-top: 1px solid var(--line); }
.p-social .sm-terms__list > div:first-child { padding-top: 0; border-top: 0; }
.p-social .sm-terms__list > div:last-child { padding-bottom: 0; }
@media (min-width: 560px) { .p-social .sm-terms__list > div { grid-template-columns: 200px minmax(0, 1fr); } }
/* two columns but a narrower card: give the answers the room */
@media (min-width: 1024px) and (max-width: 1279.98px) { .p-social .sm-terms__list > div { grid-template-columns: 168px minmax(0, 1fr); gap: 6px 20px; } }
.p-social .sm-terms__list dt { display: flex; align-items: center; gap: 10px; align-self: start; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; }
.p-social .sm-terms__list dt .i { width: 18px; height: 18px; color: var(--ember); flex: none; }
.p-social .sm-terms__list dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--slate); }

.p-social .sm-pack {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
  min-height: 460px; padding: clamp(14px, 2vw, 24px); border-radius: var(--r-xl); background: #EE8C45;
}
.p-social .sm-pack__silk { position: absolute; inset: -4%; z-index: -1; }
.p-social .sm-pack__card { width: 100%; padding: clamp(20px, 2.4vw, 30px); border-radius: 22px; background: rgba(255, 255, 255, 0.88); color: var(--ink); }
.p-social .sm-pack__kicker { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ember-ink); }
.p-social .sm-pack__title { margin-top: 10px; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.018em; }
.p-social .sm-pack__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 16px; }
.p-social .sm-pack__price .t-num {
  font-size: clamp(2.75rem, 2.3rem + 1vw, 3.25rem); font-weight: 400; line-height: 1; letter-spacing: -0.045em;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-social .sm-pack__price small { font-size: 0.875rem; color: var(--slate); }
.p-social .sm-pack__list { display: grid; margin-top: 14px; }
.p-social .sm-pack__list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.p-social .sm-pack__list li .t-num { color: var(--slate); }
.p-social .sm-pack__then { margin-top: 12px; font-size: 0.875rem; color: var(--slate); }
.p-social .sm-pack__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.p-social .sm-pack__actions .link { font-size: 0.9375rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.p-social .sm-faq__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .p-social .sm-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .p-social .sm-faq__head { position: sticky; top: calc(var(--header-h) + 24px); }
}
.p-social .sm-faq__head { display: grid; gap: 20px; justify-items: start; }
.p-social .sm-faq__head .sm-head__title { margin-top: 0; }
.p-social .sm-faq__link { margin-top: 4px; font-size: 0.9375rem; }
.p-social .sm-faq__q { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.p-social .sm-faq__list .acc-trigger { font-weight: 400; color: var(--ink); }
.p-social .sm-faq__list .acc-trigger:hover .acc-icon { border-color: var(--ink); }

/* ==========================================================================
   Closing band
   ========================================================================== */
@media (min-width: 960px) { .p-social .sm-cta .cta-band__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } }
.p-social .sm-cta .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(15, 15, 15, 0.5) 0%, rgba(15, 15, 15, 0.2) 50%, rgba(15, 15, 15, 0.55) 100%);
}
.p-social .sm-cta__aside { display: grid; gap: 28px; justify-items: start; }
.p-social .sm-cta__lead { max-width: 30em; font-size: var(--fs-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.74); }
.p-social .sm-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.p-social .sm-cta__btns .btn--ghost { --btn-h: 56px; padding: 0 26px; font-size: 1rem; }