/* Platform pages (/instagram, /tiktok, ...).
 * Blocks below are lifted verbatim from ai-agent/index.html so the platform
 * pages inherit the landing design language exactly. Only the trailing
 * .pf* block is new. Regenerate with tools/build-platform-css.sh. */

/* ── shell: topbar + sky + cloud (ai-agent:182-333) ──────────────────── */
    /* Landing topbar layout: npm (left) · logo (center) · single sign-in (right).
       Scoped to .topbarLanding so the shared dashboard/pricing topbar is untouched. */
    /* Force viewport-relative width: Framer wraps the page in transformed ancestors,
       which makes the fixed topbar's % width resolve against a wider box and overflow. */
    .topbarLanding { grid-template-columns: 1fr auto 1fr; width: min(1200px, calc(100vw - 32px)); max-width: 100vw; }
    /* Menu floats on the hero gradient and scrolls away with the page
       (not fixed/sticky). The shared shell is position:fixed by default — make
       it absolute on the landing so the whole topbar scrolls off. */
    .sc-ai-agent-shared-shell { position: absolute; }
    .topbarLanding {
      position: absolute;
      background: transparent; border: 1px solid transparent; backdrop-filter: none; box-shadow: none;
    }

    /* npm install — left, compact */
    .topbarLanding .topbarInstall {
      justify-self: start;
      width: auto;
      max-width: 100%;
      min-height: 42px;
      padding: 0 16px;
      font-size: 13.5px;
      background: #1c1c1e;
      color: #f4f4f5;
    }
    .topbarLanding .topbarInstall:hover { background: #2c2c2e; }

    /* logo — center: claw mark + wordmark (same as dashboard) */
    .topbarLanding .brand { justify-self: center; gap: 9px; }
    .topbarLanding .brand .brandMark { width: 30px; height: 30px; display: block; flex: 0 0 auto; }
    .topbarLanding .brand .brandName { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

    /* single sign-in — right (reuses existing headerActionBtnPrimary dark style) */
    .topbarLanding .topbarActions { justify-self: end; }
    .topbarLanding .headerActionBtn { width: auto; min-height: 44px; padding: 0 26px; font-size: 15px; font-weight: 700; }
    /* Login = dark version of the "Start free" CTA: same inset-shadow depth recipe,
       dark base instead of the blue (#2E31FF). */
    .topbarLanding .headerActionBtnPrimary {
      background: #0A0920;
      border: none;
      letter-spacing: -0.01em;
      box-shadow:
        inset 5px -2px 4px rgba(255, 255, 255, 0.53),
        inset 5px -28px 24.5px rgba(0, 0, 0, 0.25),
        inset -2px 4px 4px rgba(255, 255, 255, 0.35),
        inset -2px 19px 16px rgba(255, 255, 255, 0.25);
      transition: transform 160ms ease, opacity 160ms ease;
    }
    .topbarLanding .headerActionBtnPrimary:hover {
      transform: translateY(-2px);
      opacity: 0.92;
      box-shadow:
        inset 5px -2px 4px rgba(255, 255, 255, 0.53),
        inset 5px -28px 24.5px rgba(0, 0, 0, 0.25),
        inset -2px 4px 4px rgba(255, 255, 255, 0.35),
        inset -2px 19px 16px rgba(255, 255, 255, 0.25);
    }

    @media (max-width: 820px) {
      /* npm command is too long for a narrow bar: drop to logo (left) + sign-in (right).
         Pin to the shell's edges (left/right:0, no translate) so the nested fixed+transform
         can't push the bar off-screen, and use flex space-between. */
      .topbarLanding { display: flex; align-items: center; justify-content: space-between; left: 0; right: 0; width: auto; transform: none; margin: 0 auto; }
      .topbarLanding .topbarInstall { display: none; }
      .topbarLanding .brand { justify-self: auto; }
      .topbarLanding .brand .brandName { font-size: 17px; }
      .topbarLanding .topbarActions { justify-self: auto; margin-left: auto; }
      /* shared mobile CSS collapses header buttons to 40px icon-only circles; keep ours a real pill */
      .topbarLanding .headerActionBtn {
        width: auto; min-width: 0; height: auto; min-height: 40px;
        padding: 0 18px; border-radius: 999px;
        font-size: 14px; line-height: 1; flex: 0 0 auto;
      }
      .topbarLanding .headerActionBtn::before { display: none; }
    }

    /* Hero sky gradient + cloud sits behind the plain .sc-hero2 markup below. */

    /* Plain hero (1:1 with the old Framer hero: Google Sans, eyebrow 20/400,
       H1 500-weight line-height 1, sizes 59/47/38, col gap 27, hero gap 40). */
    .sc-hero2 {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center;
      gap: 40px; padding: 150px 20px 56px; text-align: center;
    }
    .sc-hero2-col { display: flex; flex-direction: column; align-items: center; gap: 27px; }
    .sc-hero2-socials { width: 600px; max-width: 100%; height: auto; display: block; }
    .sc-hero2-eyebrow {
      margin: 0; font-family: "Google Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 20px; font-weight: 400; line-height: 1; color: #000;
    }
    .sc-hero2-h1 {
      margin: 0; font-family: "Google Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 59px; font-weight: 500; line-height: 1; letter-spacing: 0; color: #000;
    }
    @media (max-width: 1199.98px) { .sc-hero2-h1 { font-size: 47px; } }
    @media (max-width: 809.98px) { .sc-hero2-h1 { font-size: 38px; } .sc-hero2 { padding-top: 120px; } }

    /* Social fan: 3 clean layers stacked in normal flow (icon / lines video /
       carousel). Overlaps via negative margins so they read as one connected graphic. */
    .sc-fan {
      display: flex; flex-direction: column; align-items: center;
      width: 100%; overflow: hidden; padding-bottom: 24px;
    }
    .sc-fan-icon { width: 559px; max-width: 62%; height: auto; display: block; position: relative; z-index: 2; }
    .sc-fan-lines {
      width: 780px; max-width: 92%; height: auto; display: block;
      margin-top: 0; position: relative; z-index: 1;
    }
    .sc-fan-carousel {
      width: 100%; overflow: hidden; margin-top: 0;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }
    .sc-fan-track { display: flex; gap: 22px; width: max-content; animation: sc-ticker 34s linear infinite; }
    .sc-fan-track img { width: 140px; height: 140px; flex: 0 0 auto; display: block; }
    .sc-fan-carousel:hover .sc-fan-track { animation-play-state: paused; }
    @keyframes sc-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) { .sc-fan-track { animation: none; } }
    @media (min-width: 810px) and (max-width: 1199.98px) {
      .sc-fan-icon { width: 453px; } .sc-fan-lines { width: 640px; margin-top: 0; }
    }
    @media (max-width: 809.98px) {
      .sc-fan-icon { width: 250px; } .sc-fan-lines { width: 340px; margin-top: 0; }
      .sc-fan-track img { width: 96px; height: 96px; } .sc-fan-track { gap: 14px; }
    }
    /* --hero-a/--hero-b come from the body's inline style (set per platform
       in renderPlatformPageHtml) — same vars .seoBody uses on blog/SEO pages.
       Stop percentages match .seoBody's proportions (0 / ~10% / ~40%) rather
       than the old hard 4%/13% cutoff, so the color reads as a real band
       instead of a thin sliver at the top; height is taller than .seoBody's
       640px since this hero carries more content below it. */
    .sc-hero-bg {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 960px;
      background: linear-gradient(180deg, var(--hero-a, #84D7FF) 0%, var(--hero-b, #C8EEFF) 10%, #FFFFFF 42%);
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }
    .sc-hero-cloud {
      position: absolute;
      top: -35px; left: 7%;
      width: 300px; height: auto;
      opacity: 0.96;
      will-change: transform;
      animation: scCloudDrift 16s ease-in-out infinite;
    }
    @keyframes scCloudDrift {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(34px, 16px); }
    }
    @media (prefers-reduced-motion: reduce) { .sc-hero-cloud { animation: none; } }
    @media (max-width: 720px) {
      .sc-hero-cloud { width: 190px; top: 36px; left: 4%; }
      .sc-hero-bg { height: 720px; }
    }

/* ── sections (ai-agent:404-792) ─────────────────────────────────────── */
.sc-sec, .sc-sec * { box-sizing: border-box; }
.sc-sec { width: 100%; font-family: var(--sc-public-font); }
/* Default section rhythm: a bare .sc-sec was 0px tall-padding, which made
   every section without an explicit modifier sit flush against its
   neighbors (47+ such sections across the redesigned SEO families). Every
   padded modifier (.pfSteps-sec, .pfRecipes, .pfFeature, .sc-cta, ...) is
   defined AFTER this rule, so it still wins wherever one is present. */
.sc-sec { padding: 64px 0; }
.sc-sec-inner { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
/* Glass pill eyebrow (replaces the old dot + uppercase blue treatment):
   frosted translucent pill, soft outer shadow + inner highlight, sentence-case
   ink text. Optional leading icon chip via .sc-eyebrow-ico. The /ai-agent
   landing keeps its own inline .sc-eyebrow rules (defined after this sheet)
   on purpose — it is excluded from the redesign. */
.sc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;
  padding: 5px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -6px 12px rgba(11, 16, 32, 0.04);
  font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em;
  color: #0b1020; margin: 0 0 16px;
}
.sc-center .sc-eyebrow { align-self: center; justify-self: center; margin-left: auto; margin-right: auto; }
.sc-eyebrow .sc-eyebrow-ico {
  width: 22px; height: 22px; border-radius: 7px; margin-left: -8px;
  background: rgba(46, 49, 255, 0.12); color: #2E31FF;
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-eyebrow .sc-eyebrow-ico svg { width: 12px; height: 12px; }
.sc-h2 {
  margin: 0; font-weight: 600; letter-spacing: -0.04em; line-height: 1.02;
  font-size: clamp(2rem, 4.4vw, 3.1rem); color: #0b1020;
}
.sc-lead { margin: 18px 0 0; max-width: 640px; color: #505b72; font-size: 18px; line-height: 1.6; }
.sc-center { text-align: center; }
.sc-center .sc-lead { margin-left: auto; margin-right: auto; }

/* ── Built for OpenClaw ── */
.sc-built { background: #fafafb; padding: 96px 0; border-top: 1px solid #eef0f3; }
.sc-built-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.sc-code {
  background: #0c1018; border: 1px solid #1b2233; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(11,16,32,0.55); min-width: 0;
}
/* Let grid/flex children shrink so wide code panels scroll instead of
   stretching the layout past the viewport. */
.sc-built-grid > *, .sc-hiw-row > *, .sc-friendly-row > * { min-width: 0; }
.sc-code-head { display: flex; align-items: center; gap: 7px; padding: 14px 16px; border-bottom: 1px solid #161d2c; }
.sc-code-head span { width: 11px; height: 11px; border-radius: 50%; background: #2a3346; }
.sc-code-head span:nth-child(1) { background: #ff5f57; }
.sc-code-head span:nth-child(2) { background: #febc2e; }
.sc-code-head span:nth-child(3) { background: #28c840; }
.sc-code-head em { margin-left: 8px; font-style: normal; font-family: var(--sc-code-font); font-size: 12.5px; color: #5b6678; }
.sc-code pre {
  margin: 0; padding: 20px 22px; overflow-x: hidden;
  font-family: var(--sc-code-font); font-size: 13px; line-height: 1.7; color: #e6edf3;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.sc-code pre .c { color: #6ee7b7; }
.sc-code pre .k { color: #ffd479; }
.sc-code pre .s { color: #7ec8ff; }
.sc-built-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; }
.sc-copy-pill {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  background: #0c1018; color: #e6edf3; border: 1px solid #1b2233; border-radius: 999px;
  padding: 12px 18px; font-family: var(--sc-code-font); font-size: 14px;
}
.sc-copy-pill .sc-copy-ico { width: 16px; height: 16px; opacity: 0.7; }
.sc-copy-pill:hover { border-color: #2E31FF; }
.sc-pill-btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 12px 22px; border-radius: 999px; font-size: 15px; font-weight: 600;
  border: 1px solid rgba(23,32,51,0.14); background: #fff; color: #0b1020;
  transition: transform 160ms ease, border-color 160ms ease;
}
.sc-pill-btn:hover { transform: translateY(-2px); border-color: rgba(23,32,51,0.3); }
.sc-pill-btn img, .sc-pill-btn svg { width: 18px; height: 18px; }

/* ── How it works ── */
.sc-hiw { background: #fff; padding: 100px 0; }
.sc-hiw-rows { display: grid; gap: 88px; margin-top: 64px; }
.sc-hiw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sc-hiw-row:nth-child(even) .sc-hiw-text { order: 2; }
.sc-step-no {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 12px; background: #eef0ff; color: #2E31FF; font-weight: 700; font-size: 16px; margin-bottom: 18px;
}
.sc-hiw-text h3 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -0.03em; color: #0b1020; line-height: 1.1; }
.sc-hiw-text p { margin: 0; color: #505b72; font-size: 17px; line-height: 1.65; max-width: 460px; }
.sc-shot { background: transparent; border: 0; padding: 0; box-shadow: none; }
.sc-shot img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* ── AI Agents love (dark) ── */
.sc-love { position: relative; background: radial-gradient(1200px 600px at 50% -10%, #15203d 0%, #0a0d1a 55%); color: #fff; padding: 110px 0 120px; overflow: hidden; }
.sc-love-mascot { display: block; width: min(360px, 70%); height: auto; margin: 0 auto 28px; }
.sc-love h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 600; letter-spacing: -0.04em; text-align: center; margin: 0; color: #fff; line-height: 1.02; }
.sc-love-sub { text-align: center; color: #9aa6c4; font-size: 18px; margin: 16px auto 0; max-width: 560px; }
.sc-love-card {
  margin: 56px auto 0; max-width: 940px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 24px; padding: 40px;
}
.sc-love-card h3 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.sc-love-card > p { margin: 14px 0 30px; color: #aab4d0; font-size: 17px; line-height: 1.6; max-width: 620px; }
.sc-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.sc-check { display: flex; gap: 13px; align-items: flex-start; color: #dfe5f3; font-size: 16px; line-height: 1.45; }
.sc-check svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.sc-friendly { display: grid; gap: 22px; margin: 32px auto 0; max-width: 1040px; }
.sc-friendly-row { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 36px; align-items: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; padding: 30px; }
.sc-friendly-row:nth-child(even) .sc-friendly-text { order: 2; }
.sc-friendly-text p { margin: 0; color: #cbd3e8; font-size: 16.5px; line-height: 1.65; }
.sc-friendly-text strong { color: #fff; font-weight: 600; }
.sc-friendly .sc-code { box-shadow: none; background: #070a12; }

/* ── For teams ── */
.sc-teams { background: #fafafb; padding: 100px 0; border-top: 1px solid #eef0f3; }
.sc-teams-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 56px; }
.sc-team-card {
  background: #fff; border: 1px solid rgba(23,32,51,0.08); border-radius: 22px; padding: 34px;
  display: flex; gap: 22px; align-items: flex-start; transition: transform 180ms ease, box-shadow 180ms ease;
}
.sc-team-card:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -38px rgba(20,30,60,0.4); }
.sc-team-card img { width: 76px; height: 76px; flex: 0 0 auto; object-fit: contain; }
.sc-team-card h3 { margin: 4px 0 10px; font-size: 1.32rem; font-weight: 600; letter-spacing: -0.02em; color: #0b1020; }
.sc-team-card p { margin: 0; color: #505b72; font-size: 16px; line-height: 1.6; }
.sc-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.sc-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  background: #fff; border: 1px dashed rgba(23,32,51,0.16); border-radius: 18px; padding: 26px 16px; }
.sc-badge img { width: 46px; height: 46px; object-fit: contain; }
.sc-badge span { color: #404a60; font-size: 14.5px; font-weight: 500; line-height: 1.3; }

@media (max-width: 900px) {
  .sc-built-grid { grid-template-columns: 1fr; }
  .sc-hiw-row, .sc-friendly-row { grid-template-columns: 1fr; gap: 28px; }
  .sc-hiw-row:nth-child(even) .sc-hiw-text,
  .sc-friendly-row:nth-child(even) .sc-friendly-text { order: 0; }
  .sc-teams-grid { grid-template-columns: 1fr; }
  .sc-check-grid { grid-template-columns: 1fr; }
  .sc-badges { grid-template-columns: repeat(2, 1fr); }
  .sc-built, .sc-hiw, .sc-teams { padding: 72px 0; }
  .sc-love { padding: 80px 0 88px; }
  .sc-love-card, .sc-friendly-row { padding: 26px; }
}
@media (max-width: 520px) {
  .sc-badges { grid-template-columns: 1fr 1fr; }
  .sc-team-card { flex-direction: column; }
  .sc-sec-inner { width: calc(100% - 32px); }
  .sc-eyebrow { letter-spacing: 0.08em; font-size: 12px; flex-wrap: wrap; }
  .sc-h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .sc-love h2 { font-size: clamp(1.8rem, 9vw, 2.3rem); }
  .sc-lead { font-size: 16px; }
  .sc-code pre { font-size: 12px; padding: 16px; }
}

/* ===== Create Viral Worthy Content ===== */
.sc-viral {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #84D7FF 100%);
  padding: 56px 0 100px;
}
.sc-viral-cloud {
  position: absolute;
  width: 230px; height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.96;
}
.sc-viral-cloud-tr { top: 70px; right: -34px; }
.sc-viral-cloud-bl { bottom: 70px; left: -44px; }

.sc-viral-marquee-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sc-viral-marquee {
  display: flex;
  width: max-content;
  align-items: flex-start;
  animation: scViralScroll 35s linear infinite;
}
.sc-viral-marquee-wrap:hover .sc-viral-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sc-viral-marquee { animation: none; } }
.sc-viral-half { display: flex; gap: 50px; padding-right: 50px; flex: 0 0 auto; }
@keyframes scViralScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Realistic TikTok phone mockup (ported from /viral-video-generator). */
.sc-viral .phone {
  /* Render at the mockup's native 290px (chrome is sized for this), then scale
     the whole phone down with zoom so the TikTok UI stays proportional. */
  width: 290px; aspect-ratio: 1206/2622; border-radius: 40px; background: #000;
  padding: 6px; flex: 0 0 auto;
  zoom: 0.63;            /* ≈184px displayed */
}
.sc-viral .screen {
  position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background: #0c0f1a; display: flex; align-items: center; justify-content: center;
}
.sc-viral .screen > img, .sc-viral .screen > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.sc-viral .tk {
  position: absolute; inset: 0; pointer-events: none; color: #fff; font-size: 11px;
  text-shadow: 0 1px 3px rgba(0,0,0,.45); font-family: -apple-system,"Segoe UI",sans-serif;
}
.sc-viral .tk svg { width: 26px; height: 26px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.sc-viral .tk-status {
  position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: space-between;
  align-items: center; padding: 0 24px; font-weight: 600; font-size: 13px;
}
.sc-viral .tk-status .ic { display: flex; align-items: center; gap: 5px; }
.sc-viral .tk-status .ic svg { height: 11px; width: auto; display: block; filter: none; }
.sc-viral .tk-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 84px; height: 26px; background: #000; border-radius: 14px; }
.sc-viral .tk-tabs { position: absolute; top: 48px; left: 0; right: 0; display: flex; gap: 16px; justify-content: center; font-weight: 600; font-size: 13px; }
.sc-viral .tk-tabs .on { position: relative; }
.sc-viral .tk-tabs .off { opacity: .7; }
.sc-viral .tk-tabs .on:after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.sc-viral .tk-rail { position: absolute; right: 8px; bottom: 74px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sc-viral .tk-rail .act { display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 600; }
.sc-viral .tk-ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#c4b5fd,#f0abfc); border: 1.5px solid #fff; position: relative; margin-bottom: 4px; }
.sc-viral .tk-ava .p { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; background: #fe2c55; border-radius: 50%; color: #fff; font-size: 12px; line-height: 15px; text-align: center; border: 1.5px solid #fff; }
.sc-viral .tk-disc { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle,#444 30%,#111 32%); border: 5px solid #2a2a2a; }
.sc-viral .tk-meta { position: absolute; left: 12px; right: 62px; bottom: 64px; }
.sc-viral .tk-user { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.sc-viral .tk-cap { font-size: 11.5px; line-height: 1.35; max-height: 3.2em; overflow: hidden; }
.sc-viral .tk-sound { font-size: 11px; margin-top: 6px; opacity: .95; }
.sc-viral .tk-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #000; display: flex; align-items: center; justify-content: space-around; }
.sc-viral .tk-nav svg { width: 22px; height: 22px; opacity: .92; }
.sc-viral .tk-nav .add { width: 42px; height: 27px; border-radius: 9px; background: #fff; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: -3px 0 0 #25f4ee, 3px 0 0 #fe2c55; }
.sc-viral .tk-nav .add i { font-style: normal; color: #161823; font-weight: 700; font-size: 20px; line-height: 1; }

.sc-viral-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}
.sc-viral-beta {
  display: inline-block;
  font-size: 16px;
  color: #475569;
  margin-bottom: 10px;
}
.sc-viral-content h2 {
  margin: 0 0 14px;
  font-family: var(--sc-public-font);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #0d1526;
}
.sc-viral-content p {
  margin: 0 auto 28px;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.5;
  color: #475569;
}
.sc-viral-content .sc-hero-start-free { display: inline-flex; }
@media (max-width: 809.98px) {
  .sc-viral { padding: 40px 0 64px; }
  .sc-viral-marquee-wrap { margin-bottom: 40px; }
  .sc-viral .phone { zoom: 0.46; }   /* ≈134px displayed */
  .sc-viral-half { gap: 32px; padding-right: 32px; }
  .sc-viral-cloud { width: 150px; }
  .sc-viral-cloud-tr { top: 30px; right: -30px; }
  .sc-viral-cloud-bl { bottom: 40px; left: -38px; }
}

/* ===== Pulled dashboard sections: How it works / dev tabs / agent cards ===== */
.sc-dash { --text:#101828; --muted:#667085; --line:rgba(15,23,42,.08); --easing-standard:cubic-bezier(0.22,1,0.36,1); }

/* How it works — home bento cards (FAFAFA fill / E7E7E9 stroke per spec) */
.sc-hiw2 .homeCards { display:grid; grid-template-columns:1.1fr 1.1fr 1.1fr; grid-template-areas:"connect connect schedule" "manage integrate generate"; gap:18px; }
.sc-hiw2 .homeCardConnect{grid-area:connect} .sc-hiw2 .homeCardSchedule{grid-area:schedule} .sc-hiw2 .homeCardManage{grid-area:manage} .sc-hiw2 .homeCardIntegrate{grid-area:integrate} .sc-hiw2 .homeCardGenerate{grid-area:generate}
.sc-hiw2 .homeCard { position:relative; border:1px solid #E7E7E9; border-radius:26px; padding:30px 30px 30px; display:flex; flex-direction:column; gap:10px; min-height:262px; text-align:left; overflow:hidden; color:var(--text); background:#FAFAFA; }
.sc-hiw2 .homeCard h2 { margin:auto 0 0; font-size:26px; font-weight:700; line-height:1.08; letter-spacing:-0.02em; font-family:var(--sc-public-font); }
.sc-hiw2 .homeCard p { margin:4px 0 0; font-size:15px; color:rgba(16,24,40,.62); }
.sc-hiw2 .homeCardImg { width:100%; max-height:200px; object-fit:contain; object-position:center; align-self:stretch; }

/* The most developer friendly Social Media Scheduler — tabs */
.sc-devf-mascot { width:210px; height:auto; display:block; margin:0 auto 6px; }
.sc-devf-sub { font-weight:700; font-size:16px; color:var(--text); margin:6px 0 0; }
.sc-devf-sub-link { color:#2E31FF; text-decoration:none; transition:opacity 140ms ease; }
.sc-devf-sub-link:hover { opacity:0.75; text-decoration:underline; }
.sc-devtabs { display:grid; grid-template-columns:210px 1fr; gap:24px; align-items:start; background:#fafafa; border:1px solid #E7E7E9; border-radius:24px; padding:22px; }
.sc-devtabs-rail { display:flex; flex-direction:column; gap:8px; }
.sc-devtab-btn { display:flex; align-items:center; gap:10px; padding:12px 14px; border:0; border-radius:14px; background:transparent; font:inherit; font-size:15px; font-weight:600; color:var(--text); cursor:pointer; text-align:left; width:100%; transition:background-color 140ms ease; }
.sc-devtab-btn img { width:20px; height:20px; object-fit:contain; }
.sc-devtab-btn:hover { background:rgba(15,23,42,.05); }
.sc-devtab-btn.active { background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.sc-devtab-panel { display:none; }
.sc-devtab-panel.active { display:block; }
.sc-dash .devInner { width:100%; margin:0; padding-top:0; }
.sc-dash .devHero { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.sc-dash .devHeroIcon { width:46px; height:46px; object-fit:contain; }
.sc-dash .devHero h3 { margin:0 0 4px; font-size:30px; letter-spacing:-0.02em; font-family:var(--sc-public-font); }
.sc-dash .devHero p { margin:0; color:var(--muted); font-size:15px; max-width:620px; line-height:1.5; }
.sc-dash .devCards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.sc-dash .devCard { border:1px solid var(--line); border-radius:18px; background:#fbfbfb; padding:18px 20px; }
.sc-dash .devCard.devCardWide { grid-column:1/-1; }
.sc-dash .devCard h3 { margin:0 0 10px; font-size:16px; }
.sc-dash .devCard p { margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.sc-dash .devCard code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.sc-dash .devCode { margin:0; padding:14px 16px; border-radius:12px; background:#0e1320; color:#e7ecf5; overflow-x:auto; font-size:13px; line-height:1.5; }
.sc-dash .devCode code { color:inherit; white-space:pre; }
.sc-dash .devDeepLink { display:inline-block; margin-top:22px; color:#2563eb; font-weight:600; font-size:15px; text-decoration:none; }
.sc-dash .devDeepLink:hover { text-decoration:underline; }
.sc-dash .devHeadlineImg { display:block; width:60%; height:auto; border-radius:20px; margin-bottom:28px; }
.sc-dash .devCliAscii { display:block; width:100%; height:auto; margin-top:28px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.sc-devtabs .devCards { margin-top:16px; }

/* Use with your favorite AI Agents — skill agent cards */
.sc-useagents .sc-npx-pill {
  display:inline-block; margin-top:14px; padding:12px 22px; border-radius:999px;
  border: 0; background:#f1f1f3; color:#3a4253;
  font: inherit; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px;
  cursor: pointer; transition: background-color 140ms ease;
}
.sc-useagents .sc-npx-pill:hover { background: #e7e7ea; }
.sc-dash .skillAgentRowWrap { width:100%; margin:0 auto; }
.sc-dash .skillAgentRow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.sc-dash .skillAgentCard { display:flex; flex-direction:column; background:#f4f4f6; border-radius:20px; padding:16px 16px 18px; }
.sc-dash .skillAgentMedia { flex:1; display:flex; align-items:center; justify-content:center; background:#fbfbfc; border-radius:14px; padding:18px; margin-bottom:18px; min-height:220px; overflow:hidden; }
.sc-dash .skillAgentMedia img { width:100%; height:auto; max-height:300px; object-fit:contain; border-radius:8px; }
.sc-dash .skillAgentEyebrow { font-size:13px; color:var(--muted); margin-bottom:2px; }
.sc-dash .skillAgentName { font-size:26px; font-weight:700; letter-spacing:-0.02em; line-height:1.05; font-family:var(--sc-public-font); }

/* Section vertical rhythm (these were missing padding entirely) */
.sc-hiw2, .sc-devfriendly, .sc-useagents { background:#fff; padding:96px 0; }
.sc-hiw2 .homeCards { margin-top:48px; }
.sc-devfriendly .sc-devtabs { margin-top:44px; }
.sc-useagents .skillAgentRowWrap { margin-top:48px; }

/* Dev cards full width so code blocks have room; code wraps (no clipping) */
.sc-devtabs .devCards { grid-template-columns:1fr; }
.sc-devtabs .devCode, .sc-devtabs .devCode code { white-space:pre-wrap; word-break:break-word; }

/* Click-to-copy on code blocks */
.sc-devtabs .devCode { position:relative; cursor:pointer; transition:background-color 140ms ease; }
.sc-devtabs .devCode:hover { background:#141b2d; }
.sc-devtabs .devCode::after { content:"Copy"; position:absolute; top:8px; right:10px; font-size:11px; font-weight:600; color:#9fb0cc; font-family:system-ui,sans-serif; opacity:0; transition:opacity 140ms ease; }
.sc-devtabs .devCode:hover::after { opacity:1; }
.sc-devtabs .devCode.justCopied::after { content:"Copied ✓"; color:#7ee2a8; opacity:1; }

@media (max-width:809.98px){
  .sc-hiw2, .sc-devfriendly, .sc-useagents { padding:64px 0; }
  .sc-hiw2 .homeCards { grid-template-columns:1fr; grid-template-areas:"connect" "schedule" "manage" "integrate" "generate"; }
  .sc-devtabs { grid-template-columns:1fr; padding:16px; }
  .sc-devtabs-rail { flex-direction:row; flex-wrap:wrap; }
  .sc-devtab-btn { width:auto; }
  .sc-dash .skillAgentRow { grid-template-columns:1fr; }
  .sc-dash .devHeadlineImg { width:100%; }
}

/* ===== Ready-to-grow CTA strip ===== */
.sc-cta { padding:40px 0 96px; }
.sc-cta-strip {
  position:relative;
  overflow:hidden;
  border-radius:36px;
  background:linear-gradient(90deg,#C0E7FA 0%,#FFFFFF 100%);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  min-height:220px;
  padding:0 24px;
}
.sc-cta-claw {
  position:absolute;
  left:-40px;
  top:50%;
  transform:translateY(-50%);
  width:300px;
  height:auto;
  pointer-events:none;
  user-select:none;
}
.sc-cta-center { grid-column:2; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; padding:44px 0; }
.sc-cta-center h2 {
  margin:0;
  font-family:var(--sc-public-font);
  font-size:46px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#0F1B2D;
}
.pfCtaNote { margin: 4px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.5; color: #4a5468; }
.sc-cta-socials {
  grid-column:3;
  justify-self:end;
  width:340px;
  max-width:68%;
  height:auto;
  pointer-events:none;
  user-select:none;
}
@media (max-width:899.98px){
  .sc-cta { padding:24px 0 64px; }
  .sc-cta-strip { grid-template-columns:1fr; min-height:0; padding:44px 20px; row-gap:36px; }
  .sc-cta-claw { position:static; transform:none; width:150px; margin:0 auto; }
  .sc-cta-center { grid-column:1; padding:0; gap:28px; }
  .sc-cta-center h2 { font-size:34px; }
  .sc-cta-socials { grid-column:1; justify-self:center; width:80%; max-width:80%; }
}

/* ── legacy overrides: CTA pill, faq, footer (ai-agent:1181-1443) ───── */
:root {
  --sc-public-font: "Google Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sc-code-font: "Google Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  overflow-x: hidden;
  font-family: var(--sc-public-font) !important;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "GRAD" 0;
}

.sc-ai-agent-shared-shell {
  width: min(1200px, calc(100% - 32px));
  padding: 28px 0 12px;
}

code, pre {
  font-family: var(--sc-code-font) !important;
}

.sc-ai-faq-shell {
  width: min(1200px, calc(100% - 32px));
  /* Bottom margin so the last accordion item doesn't sit flush against the
     dark footer band that immediately follows. */
  margin: 72px auto 96px;
}

.sc-ai-faq {
  width: min(860px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

.sc-ai-faq-heading h2 {
  margin: 0;
  font-family: var(--sc-public-font);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-align: center;
  color: #000;
}

.sc-ai-faq-list {
  display: grid;
  gap: 12px;
}

.sc-ai-faq-item {
  border: 0;
  border-radius: 18px;
  background: rgba(250, 250, 250, 0.98);
  overflow: hidden;
}

.sc-ai-faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: #262626;
  font-family: var(--sc-public-font);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.sc-ai-faq-icon {
  flex: 0 0 auto;
  font-family: var(--sc-code-font);
  font-size: 26px;
  line-height: 1;
  transition: transform 180ms ease;
}

.sc-ai-faq-item.is-open .sc-ai-faq-icon {
  transform: rotate(45deg);
}

.sc-ai-faq-panel {
  padding: 0 22px 22px;
}

.sc-ai-faq-panel p {
  margin: 0;
  color: #505b72;
  font-family: var(--sc-public-font);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0;
}

@media (max-width: 809.98px) {
  .sc-ai-agent-shared-shell {
    width: min(100%, calc(100% - 20px));
    padding-top: 20px;
    padding-bottom: 8px;
  }

  .sc-ai-faq-shell {
    width: min(100%, calc(100% - 20px));
    margin-top: 56px;
    margin-bottom: 64px;
  }

  .sc-ai-faq-toggle {
    padding: 18px;
    font-size: 18px;
  }

  .sc-ai-faq-panel {
    padding: 0 18px 18px;
  }
}

/* Start free button */
.sc-hero-start-free {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 36px;
  border-radius: 999px;
  border: none;
  background-color: #2E31FF;
  box-shadow:
    inset 5px -2px 4px rgba(255,255,255,0.53),
    inset 5px -28px 24.5px rgba(0,0,0,0.25),
    inset -2px 4px 4px rgba(255,255,255,0.35),
    inset -2px 19px 16px rgba(255,255,255,0.25);
  color: #ffffff;
  font-family: var(--sc-public-font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, opacity 160ms ease;
}

.sc-hero-start-free:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

@media (max-width: 809.98px) {
  .sc-hero-start-free {
    white-space: nowrap;
    padding: 0 48px;
  }
}

/* Hero video showcase */
.sc-hero-video-wrap {
  position: absolute;
  right: -100px;
  top: 200px;
  width: min(26vw, 364px);
  z-index: 2;
  pointer-events: none;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  clip-path: inset(0 round 20px);
  -webkit-clip-path: inset(0 round 20px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.sc-hero-video-wrap video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  background: #fff;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Left-edge claw with rotated tagline (mirrors the right-edge video). */
.sc-hero-claw {
  position: absolute;
  left: 0;
  top: 350px;
  width: 230px;
  z-index: 2;
  pointer-events: none;
}
.sc-hero-claw img { width: 100%; height: auto; display: block; }
.sc-hero-claw-text {
  position: absolute;
  left: 24px;
  bottom: 100%;
  width: 240px;
  margin-bottom: -10px;
  font-family: "Google Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.15;
  color: #0d1526;
  transform: rotate(-15deg);
  transform-origin: left bottom;
}

.sc-hero-video-mobile {
  display: none;
}

/* Disable the video entirely below 1000px (desktop + mobile variants). */
@media (max-width: 999.98px) {
  .sc-hero-video-wrap,
  .sc-hero-video-mobile,
  .sc-hero-claw {
    display: none !important;
  }
}

@media (max-width: 809.98px) {
  .sc-hero-video-wrap {
    display: none;
  }

  .sc-hero-video-mobile {
    display: block;
    width: 100%;
    padding: 84px 16px 0;
    box-sizing: border-box;
    background: #fff;
  }

  .sc-hero-video-mobile video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    background: #fff;
    object-fit: cover;
    object-position: center;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    clip-path: inset(0 round 18px);
    -webkit-clip-path: inset(0 round 18px);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}

/* ── tail (ai-agent:1596-1609) ──────────────────────────────────────── */
    .sc-reveal, .sc-reveal-scale, .sc-reveal-left, .sc-reveal-right { opacity: 0; transition: opacity .6s ease; }
    .sc-reveal.in-view, .sc-reveal-scale.in-view, .sc-reveal-left.in-view, .sc-reveal-right.in-view { opacity: 1; }
    .sc-reveal-stagger > * { opacity: 0; transition: opacity .6s ease; }
    .sc-reveal-stagger.in-view > * { opacity: 1; }
    .sc-reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
    .sc-reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
    .sc-reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
    .sc-reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }
    .sc-reveal-stagger > *:nth-child(5) { transition-delay: 320ms; }
    .sc-reveal-stagger > *:nth-child(6) { transition-delay: 400ms; }
    .sc-reveal-stagger > *:nth-child(7) { transition-delay: 480ms; }
    /* Original (ai-agent) stopped at 7 — extended here since the platform
       pages' FAQ list runs longer (9 today, and the copy rules above
       actively encourage growing it per platform). Past nth-child(7) with
       no matching rule, a child got no transition-delay at all and popped
       in immediately alongside item 1 instead of continuing the sequence —
       that's the "old ones vs new ones" out-of-order look. */
    .sc-reveal-stagger > *:nth-child(8) { transition-delay: 560ms; }
    .sc-reveal-stagger > *:nth-child(9) { transition-delay: 640ms; }
    .sc-reveal-stagger > *:nth-child(10) { transition-delay: 720ms; }
    .sc-reveal-stagger > *:nth-child(11) { transition-delay: 800ms; }
    .sc-reveal-stagger > *:nth-child(12) { transition-delay: 880ms; }
    .sc-reveal-stagger > *:nth-child(13) { transition-delay: 960ms; }
    .sc-reveal-stagger > *:nth-child(14) { transition-delay: 1040ms; }
    .sc-reveal-stagger > *:nth-child(15) { transition-delay: 1120ms; }
    .sc-reveal-stagger > *:nth-child(16) { transition-delay: 1200ms; }
    @media (prefers-reduced-motion: reduce) {
      .sc-reveal, .sc-reveal-scale, .sc-reveal-left, .sc-reveal-right, .sc-reveal-stagger > * { opacity: 1 !important; transition: none !important; }
    }
/* ── Platform hero (new) ──────────────────────────────────────────────────── */
:root {
  --sc-public-font: "Google Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pf-line: rgba(15, 23, 42, .08);
}

body { margin: 0; font-family: var(--sc-public-font); color: #0b1020; background: #fff; }

html, body { max-width: 100%; overflow-x: hidden; }

/* width:100% + min-width:0 stop the max-content rail below from sizing this
   flex column (which would push the whole page wider than the viewport). */
.pfHero {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 34px; padding: 130px 0 64px; text-align: center;
  width: 100%; max-width: 100%; min-width: 0;
}

/* Ping-pong rail: sweeps right, eases, sweeps back. */
.pfHeroRail {
  width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Frames are authored at full size and scaled down with zoom (same idiom as
   .sc-viral .phone), so the internal type stays proportional instead of
   needing a second set of sizes. */
.pfHeroTrack {
  --pf-zoom: .5;
  zoom: var(--pf-zoom);
  /* Gap is authored pre-zoom, so 72px here lands as ~25-30px more spacing
     than the old 22px once the .5 zoom halves it. */
  display: flex; align-items: center; gap: 72px; width: max-content; padding: 10px 24px;
  height: 470px;
  animation: pfPingPong 44s ease-in-out infinite alternate;
}
/* 100vw is measured outside the zoom, so divide it back into the track's own
   scaled coordinate space or the sweep stops short of the right edge. */
@keyframes pfPingPong {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% + 100vw / var(--pf-zoom))); }
}
.pfHeroRail:hover .pfHeroTrack { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pfHeroTrack { animation: none; } }

/* Every frame fills the rail height so the row reads as one clean band. */
.pfFrame { flex: 0 0 auto; height: 100%; }

/* Instagram feed post — shape carried from the composer .pvIg* preview. */
.pfPost {
  width: 258px; background: #fff; border: 1px solid var(--pf-line); border-radius: 16px;
  overflow: hidden; text-align: left;
  display: flex; flex-direction: column;
}
.pfPostHead { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.pfPostHead strong { font-size: 12.5px; }
.pfPostDots { margin-left: auto; color: #8a93a6; letter-spacing: 1px; font-size: 12px; }
.pfAvatar {
  width: 27px; height: 27px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #f9a03f, #d6336c 55%, #7048e8);
}
.pfPostMedia { flex: 1; min-height: 0; background: #f1f2f5; }
.pfPostMedia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfPostActions { display: flex; gap: 13px; padding: 10px 12px 2px; color: #1b2233; }
.pfPostActions svg { width: 21px; height: 21px; }
.pfPostActions svg:last-child { margin-left: auto; }
.pfPostCaption { margin: 0; padding: 6px 12px 13px; font-size: 12.5px; line-height: 1.4; color: #1b2233; }
.pfPostCaption strong { margin-right: 5px; }

/* Reels phone — shape carried from the composer .pvPhone preview. */
.pfReel {
  width: auto; aspect-ratio: 1206/2622; background: #000; border-radius: 28px; padding: 5px;
}
.pfReelScreen { position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; background: #0c0f1a; }
.pfReelScreen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pfReelLabel {
  position: absolute; top: 13px; left: 13px; color: #fff; font-weight: 700; font-size: 13.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* Right-side like/comment/share rail — ported from the real composer's
   .pvTkRail (dashboard.css), scaled down to match this smaller hero card. */
.pfReelRail {
  position: absolute; right: 7px; bottom: 40px; display: flex; flex-direction: column;
  gap: 9px; color: #fff;
}
.pfReelAct {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 9.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.pfReelAct svg { width: 17px; height: 17px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.pfReelMeta {
  position: absolute; left: 12px; right: 40px; bottom: 14px; color: #fff; text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.pfReelMeta strong { display: block; font-size: 12.5px; }
.pfReelMeta span { display: block; font-size: 11.5px; line-height: 1.35; margin-top: 3px; opacity: .95; }
.pfReelSound { font-size: 10px; margin-top: 5px; opacity: .95; }

/* Hero copy — H1 sizes match the /ai-agent hero (59 / 47 / 38). */
/* h1 <-> lines block <-> button: 25px. The two <p> lines inside get their
   own tight 4px via .pfHeroLines, so they don't inherit this larger gap. */
.pfHeroCopy { display: flex; flex-direction: column; align-items: center; gap: 25px; padding: 0 20px; }
.pfHeroLines { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* Wide enough that "Schedule Posts to <Platform>" breaks after "to" rather
   than balancing onto three lines. */
.pfHeroH1 {
  margin: 0; font-size: 59px; font-weight: 700; line-height: 1.04; letter-spacing: -.02em;
  max-width: 720px;
}
/* Inline platform icon after the platform name in the H1. Sized relative to
   the H1's own font-size (em) so it scales with the three breakpoints below
   instead of needing its own media queries. Pops in once on load (the H1 is
   above the fold, so there's no scroll trigger to hook), then tilts on hover
   of the whole heading as a small "yes, that's clickable-adjacent" nudge. */
.pfHeroH1Icon {
  display: inline-block; vertical-align: -0.14em;
  width: 0.86em; height: 0.86em; margin-left: 0.06em;
  border-radius: 0.2em;
  opacity: 1;
  animation: pfIconPop 640ms cubic-bezier(.34,1.56,.64,1) 460ms both;
  transition: transform 220ms ease;
}
.pfHeroH1:hover .pfHeroH1Icon { transform: scale(1.08) rotate(-6deg); }
@keyframes pfIconPop {
  0% { opacity: 0; transform: scale(.4) rotate(-18deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .pfHeroH1Icon { animation: none; } }
.pfHeroSub { margin: 0; max-width: 640px; font-size: 20px; font-weight: 400; line-height: 1.3; color: #1b2233; }
/* Same font as .pfHeroSub (20/400), stacked as its second line. */
.pfHeroWorks {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: 20px; font-weight: 400; line-height: 1.3; color: #1b2233;
}
.pfHeroWorksIcons { display: inline-flex; gap: 7px; }
/* Hairline border: a couple of the agent icons are white/near-white and
   vanish against the page background without it. Each icon rises in with
   its own delay (staggered after the H1 icon settles) and gets a small
   lift on hover. */
.pfHeroWorksIcons img {
  width: 26px; height: 26px; border-radius: 7px; display: block;
  border: 0.5px solid rgba(15, 23, 42, .14);
  opacity: 0;
  animation: pfIconRise 480ms cubic-bezier(.22,1,.36,1) both;
  transition: transform 160ms ease;
}
.pfHeroWorksIcons img:hover { transform: translateY(-2px) scale(1.12); }
.pfHeroWorksIcons img:nth-child(1) { animation-delay: 760ms; }
.pfHeroWorksIcons img:nth-child(2) { animation-delay: 820ms; }
.pfHeroWorksIcons img:nth-child(3) { animation-delay: 880ms; }
@keyframes pfIconRise {
  from { opacity: 0; transform: translateY(6px) scale(.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pfHeroWorksIcons img { animation: none; opacity: 1; }
}

/* lightHeroSection() — the "normal hero" for non developer surface pages. */
.pfLightHeroActions { display: flex; align-items: center; gap: 22px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.pfLightHeroLink {
  display: inline-flex; align-items: center; gap: 7px;
  color: #1b2233; text-decoration: none; font-size: 15px; font-weight: 600;
  border-bottom: 1px solid rgba(15,23,42,.3); padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.pfLightHeroLink:hover { color: #0b1020; border-color: rgba(15,23,42,.6); }

@media (max-width: 1199.98px) {
  .pfHeroH1 { font-size: 47px; }
  .pfHeroTrack { --pf-zoom: .44; }
}
@media (max-width: 809.98px) {
  .pfHero { padding-top: 110px; gap: 26px; }
  .pfHeroH1 { font-size: 38px; }
  .pfHeroSub { font-size: 17px; }
  .pfHeroTrack { --pf-zoom: .38; }
  .pfHeroWorks { flex-direction: column; gap: 8px; font-size: 15px; }
}

/* Section stubs — designed one at a time. */
.pfStub {
  max-width: 1100px; margin: 0 auto; padding: 90px 20px; text-align: center;
  color: #98a0b0; font-size: 15px; border-top: 1px dashed var(--pf-line);
}

/* ── Feature splits (new) ─────────────────────────────────────────────────── */
.pfFeature { padding: 150px 0; }
/* Same white-to-blue recipe as .sc-viral (the landing page's "Create Viral
   Worthy Content" section) — so the seam coming out of the white hero is a
   fade, not a hard cut. */
.pfFeatureSky {
  background: linear-gradient(180deg, #FFFFFF 0%, #84D7FF 100%);
}
.pfFeatureGrid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px; align-items: center;
}
.pfFeatureFlip .pfFeatureGrid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pfFeatureFlip .pfFeatureCopy { order: 2; }
.pfFeatureFlip .pfFeatureArt { order: 1; }
.pfFeatureCopy { display: flex; flex-direction: column; gap: 14px; }
/* Same glass pill as .sc-eyebrow, slightly tighter (sits inside feature copy).
   width:fit-content + align/justify-self stop flex/grid parents from
   stretching the pill to the full column width. */
.pfFeatureEyebrow {
  display: inline-flex; align-items: center;
  width: fit-content;
  padding: 4px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -6px 12px rgba(11, 16, 32, 0.04);
  font-size: 13px; font-weight: 650; letter-spacing: -0.01em; color: #0b1020;
}

/* Eyebrow glass tints — pick per page/section register (blue for dev/API,
   orange for scheduling/how-to, pink for creative/social, green for
   validation/health). Apply alongside .sc-eyebrow or .pfFeatureEyebrow. */
.sc-eyebrow.eb-blue, .pfFeatureEyebrow.eb-blue { background: rgba(224, 231, 255, 0.72); }
.sc-eyebrow.eb-orange, .pfFeatureEyebrow.eb-orange { background: rgba(255, 236, 214, 0.72); }
.sc-eyebrow.eb-pink, .pfFeatureEyebrow.eb-pink { background: rgba(255, 226, 236, 0.72); }
.sc-eyebrow.eb-green, .pfFeatureEyebrow.eb-green { background: rgba(219, 245, 228, 0.72); }
/* Rides the section's existing scroll-reveal trigger (.pfFeatureGrid.sc-reveal
   gets .in-view from the IntersectionObserver in platform-page.js) instead of
   its own — the icon settles in just after the section fades up. */
.pfFeatureIcon { display: block; margin-bottom: 4px; opacity: 0; transform: translateY(6px) scale(.85); }
.pfFeatureGrid.sc-reveal.in-view .pfFeatureIcon {
  animation: pfIconRise 520ms cubic-bezier(.22,1,.36,1) 120ms both;
}
@media (prefers-reduced-motion: reduce) {
  .pfFeatureIcon { opacity: 1; transform: none; animation: none; }
}
.pfFeatureCopy .sc-h2 { margin: 0; }
.pfFeatureCopy .sc-lead { margin: 0; max-width: 46ch; }
/* :not(.pfFeatureStar) so this doesn't win over .pfFeatureStar's own width
   below — "img" adds a type selector, which outranks a bare class alone.
   :not(.pfFeatureArtAi) so this generic single-image sizing doesn't leak
   into the AI scene's multiple, individually-positioned images. */
.pfFeatureArt:not(.pfFeatureArtAi) img:not(.pfFeatureStar) {
  width: 100%; height: auto; display: block; border-radius: 18px;
}

/* Pink card (Media section): the collage image itself has a transparent
   background, so the card color shows through the gaps between polaroids —
   this padding is what makes that read as a corkboard, not a floating cutout. */
.pfFeatureArtPink {
  position: relative;
  background: #FAC0EB;
  border-radius: 28px;
  padding: 32px;
}
/* Pops in on the same scroll trigger as .pfFeatureIcon above, then settles
   into a slow, low-amplitude twinkle so the card doesn't feel static once
   revealed — deliberately much subtler than the pop so it reads as ambient,
   not distracting. */
.pfFeatureStar {
  position: absolute; top: -5%; left: 3%; z-index: 1;
  width: 15%; height: auto;
  opacity: 0;
}
.pfFeatureGrid.sc-reveal.in-view .pfFeatureStar {
  animation:
    pfStarPop 620ms cubic-bezier(.34,1.56,.64,1) 160ms both,
    pfStarTwinkle 3.2s ease-in-out 900ms infinite;
}
@keyframes pfStarPop {
  0% { opacity: 0; transform: scale(.3) rotate(-35deg); }
  55% { opacity: 1; transform: scale(1.18) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes pfStarTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.08) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pfFeatureStar { opacity: 1; animation: none; }
}

/* AI card (Generate Content section): same background as .skillAgentCard
   (#f4f4f6) per the landing page's agent cards. Fixed aspect-ratio so every
   child's position can be a percentage of the card, measured off the
   reference screenshot's ~720x547 crop (ratio ~1.316). overflow visible
   (not hidden) — the three format icons are meant to bleed past the edges. */
.pfFeatureArtAi {
  position: relative;
  background: #f4f4f6;
  border-radius: 28px;
  aspect-ratio: 1.316;
  overflow: visible;
}
/* Each icon floats on its own duration/delay so the three drift out of sync —
   in sync would read as one thing bobbing, staggered reads as ambient. Pauses
   on hover, same convention as the hero carousel pausing on hover. */
.pfAiIcon { position: absolute; width: 12.5%; height: auto; display: block; animation: pfAiFloat 4s ease-in-out infinite; }
.pfAiIconVideo { top: 3%; left: -10%; animation-duration: 3.6s; animation-delay: 0s; }
.pfAiIconVoice { top: -6%; right: 4%; width: 20%; animation-duration: 4.4s; animation-delay: .4s; }
.pfAiIconMedia { bottom: 8%; left: -10%; animation-duration: 3.9s; animation-delay: .8s; }
.pfFeatureArtAi:hover .pfAiIcon { animation-play-state: paused; }
@keyframes pfAiFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .pfAiIcon { animation: none; } }
.pfAiPhone {
  position: absolute; top: 3%; left: 6%; z-index: 1;
  width: 30%; height: auto; display: block;
}
.pfAiQuote {
  position: absolute; top: 17%; left: 46%; z-index: 1;
  width: 50%; margin: 0;
  font-size: clamp(20px, 2.1vw, 32px); font-weight: 600; line-height: 1.18;
  color: #64748B;
}
.pfAiBanana {
  position: absolute; bottom: -20px; left: 26%; z-index: 0;
  width: 79%; height: auto; display: block; border-radius: 16px;
}

/* Bleed variant (Dashboard section): position:relative + overflow:hidden are
   unconditional so the cloud (always absolute) has a clipping anchor even
   on mobile, where the art itself falls back to normal flow below. Extra
   vertical padding vs. the other feature sections so it reads as a fuller
   band, matching the taller reference screenshot. */
.pfFeatureBleed { position: relative; overflow: hidden; padding: 240px 0; }
.pfFeatureCloud {
  position: absolute; z-index: 0; pointer-events: none;
  width: 230px; height: auto; opacity: .96;
  bottom: -24px; left: -44px;
}

/* Art escapes .sc-sec-inner's max-width and overflows the section's right
   edge, cropped by the section's overflow:hidden rather than shrinking to
   fit — matches the reference .sc-viral layout, where 20-40% of the mockup
   gets cropped at narrower viewports instead of the image resizing down.
   Desktop only; see the 899.98px breakpoint below for the mobile fallback
   to the stacked layout. */
@media (min-width: 900px) {
  .pfFeatureBleed .pfFeatureGrid { grid-template-columns: minmax(0, 1fr); }
  .pfFeatureBleed .pfFeatureArt {
    position: absolute; top: 50%; right: 0; z-index: 0;
    width: min(54vw, 900px); max-width: none;
    transform: translateY(-50%);
  }
  .pfFeatureBleed .sc-sec-inner { position: relative; z-index: 1; }
  .pfFeatureBleed .pfFeatureCopy { max-width: 44%; }
}

/* ── Interface spokes (new) ───────────────────────────────────────────────────
   Full-bleed abstract-gradient background, no border/shadow — ElevenLabs/OpenAI
   product-card style rather than the flat outlined tiles this replaced. */
.pfSpokes { padding: 90px 0 110px; }
.pfSpokeRow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px;
}
.pfSpoke {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5; padding: 26px; border-radius: 24px;
  background-size: cover; background-position: center;
  text-decoration: none; color: #fff;
  transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
.pfSpoke:hover { transform: translateY(-3px); }
/* Bottom-anchored scrim so the label/blurb stay legible over any part of
   the gradient art without needing a separate solid panel. */
.pfSpoke::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(10,15,25,0) 38%, rgba(6,10,18,.74) 100%);
}
/* Huge watermark letters (API/MCP/CLI) centered behind the label — value
   comes from the data-watermark attribute set per card in the markup. */
.pfSpoke::after {
  content: attr(data-watermark);
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(64px, 11vw, 128px); font-weight: 800; letter-spacing: -.02em;
  color: rgba(255,255,255,.32);
  pointer-events: none;
}
/* Solid white circle + dark glyph so the arrow reads on any part of the
   gradient art, unlike the earlier translucent version. */
.pfSpokeArrow {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94);
  color: #0b1020;
  transition: transform 220ms cubic-bezier(.22,1,.36,1), background 220ms ease;
}
.pfSpokeArrow svg { width: 16px; height: 16px; }
.pfSpoke:hover .pfSpokeArrow { transform: translate(3px, -3px); background: #fff; }
.pfSpokeLabel { position: relative; z-index: 1; font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.pfSpoke p { position: relative; z-index: 1; margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.85); }

/* ── Testimonials ─────────────────────────────────────────────────────────
 * Plain white cards, not the spokes' dark image-card treatment — a wall of
 * quotes reads better light, closer to the OpenAI/ElevenLabs reference than
 * to the spoke row right above it. The whole card is the link out to the
 * source (Reddit/G2/Trustpilot/Instagram), so there's no separate
 * "read more" affordance to design around. No hover lift or shadow — the
 * cards are already moving (see the marquee rows below), so a hover
 * position/shadow change on top of that reads as jittery, not polished. */
.pfTestiRows { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
/* Same technique as .sc-fan-track (the landing page's "works with" icon
   strip): the track's own content is duplicated and the whole thing
   translates by exactly -50%, so the loop point is invisible — it just
   looks like it never ends. Row b plays the identical keyframes in reverse
   instead of a second @keyframes rule, which is what gets the two rows
   scrolling toward each other instead of both the same way. */
.pfTestiRow {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pfTestiTrack { display: flex; align-items: stretch; gap: 18px; width: max-content; animation: pfTestiScroll 50s linear infinite; }
.pfTestiTrack-b { animation-direction: reverse; }
.pfTestiRow:hover .pfTestiTrack { animation-play-state: paused; }
.pfTestiTrackDupe { display: contents; }
@keyframes pfTestiScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pfTestiTrack { animation: none; } }

.pfTesti {
  flex: 0 0 auto; width: 360px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 26px; border-radius: 20px;
  background: #fafafa;
  text-decoration: none; color: inherit;
}
.pfTestiHead { display: flex; align-items: center; gap: 10px; }
.pfTestiIcon { width: 22px; height: 22px; border-radius: 6px; display: block; flex: 0 0 auto; object-fit: contain; }
.pfTestiMeta { font-size: 13px; font-weight: 600; color: #70707d; }
/* Real amber rating stars — only rendered for the two cards that actually
   carry a rating (t.rating truthy in testimonialCard()), never decorative. */
.pfTestiStars { margin-left: auto; display: inline-flex; gap: 1px; color: #F5A524; flex: 0 0 auto; }
.pfTestiStars svg { width: 13px; height: 13px; }
/* Text badges, not the platforms' own logo marks — see the comment on
   testimonialIcon() in platform-pages.mjs for why. */
.pfTestiBadge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: -.01em;
}
.pfTestiBadge-g2 { background: #0b1020; color: #fff; }
.pfTestiBadge-trustpilot { background: #00b67a; color: #fff; }
.pfTestiQuote { margin: 0; font-size: 16px; line-height: 1.55; color: #1b2233; letter-spacing: -.005em; }

@media (max-width: 899.98px) {
  .pfFeature { padding: 90px 0; }
  .pfFeatureGrid,
  .pfFeatureFlip .pfFeatureGrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pfFeatureFlip .pfFeatureCopy,
  .pfFeatureFlip .pfFeatureArt { order: initial; }
  .pfSpokeRow { grid-template-columns: minmax(0, 1fr); }
  .pfTesti { width: 300px; padding: 20px; }
  /* Below the bleed breakpoint the art markup (rendered outside .sc-sec-inner
     for bleed sections) just stacks in normal flow — give it the same side
     padding as the text column above it so the edges line up. */
  .pfFeatureBleed { padding: 90px 0; }
  /* Flush with the right edge on mobile too — only the left side keeps the
     text column's padding so the copy above still lines up. */
  .pfFeatureBleed .pfFeatureArt { padding-left: 20px; margin-top: 28px; }
  .pfFeatureCloud { width: 150px; bottom: -14px; left: -30px; }

  /* The three format icons bleed off .pfFeatureArtAi's edges by design on
     desktop, but that same negative positioning pushes the page wider than
     the viewport on mobile (this card isn't inside an overflow:hidden
     section like the bleed/cloud cases above). Pull them fully inside the
     card instead of clipping them. */
  /* Sit above the phone card, badge-style, overlapping its top-left corner
     instead of floating mid-height beside it. */
  .pfAiIconVideo { top: -8%; left: 3%; z-index: 2; }
  .pfAiIconVoice { top: 2%; right: 3%; width: 16%; }
  .pfAiIconMedia { left: 2%; }

  /* Full-width single-column cards at 4/5 read as very tall on a phone —
     shorter ratio so each card doesn't eat most of a screen. */
  .pfSpoke { aspect-ratio: 16 / 11; }
}

/* ── Footer v2 (new, test-only) ──────────────────────────────────────────────
   Full-bleed dark band, content width matches .sc-sec-inner elsewhere on the
   page. Not the live sc-site-footer — see the comment above footerSection()
   in platform-pages.mjs for why. */
.sc-footer2 {
  position: relative;
  overflow: hidden;
  background: #0A0920;
  color: rgba(255,255,255,.62);
  padding: 72px 0 32px;
}
/* Vanilla WebGL rays (see footerRays() in platform-page.js) sitting behind
   the footer content, on top of the flat #0A0920 base — the shader fades to
   near nothing away from its corner, so the solid colour is still what most
   of the footer reads as, this just lights one corner of it. Content stacks
   above via z-index; the canvas is inert (no pointer-events) either way. */
.sc-footer2-rays {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.sc-footer2-inner { position: relative; z-index: 1; }
/* Same strip as the mid-page .sc-cta-strip (claw art + social-platform
   composite image, both reused as-is), dark-adapted: no gradient card, no
   rounded box or min-height — it just sits directly on the footer's own
   dark bg, and the heading goes white instead of navy. */
.sc-footer2-cta {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 8px 24px 44px;
  margin-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.sc-footer2-cta-claw {
  width: 220px; height: auto; pointer-events: none; user-select: none;
  justify-self: start;
}
.sc-footer2-cta-center { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.sc-footer2-cta-center h2 {
  margin: 0; font-family: var(--sc-public-font);
  font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  color: #fff;
}
.sc-footer2-cta-socials {
  grid-column: 3; justify-self: end;
  width: 300px; max-width: 90%; height: auto;
  pointer-events: none; user-select: none;
}

.sc-footer2-brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: rgba(255,255,255,.6);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.sc-footer2-brand:hover { color: #fff; }
.sc-footer2-brand img { border-radius: 6px; display: block; }

.sc-footer2-grid {
  /* 9 categories over 2 rows. The SEO families (compare / alternatives /
     tools) are first-class columns here, not one rolled-up link. */
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 44px 28px;
}
@media (max-width: 1180px) and (min-width: 900px) {
  .sc-footer2-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.sc-footer2-col { display: grid; align-content: start; gap: 11px; }
.sc-footer2-label {
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.36); margin-bottom: 3px;
}
.sc-footer2-col a {
  width: fit-content; font-size: 14.5px; line-height: 1.4;
  color: rgba(255,255,255,.68); text-decoration: none;
  transition: color 160ms ease;
}
.sc-footer2-col a:hover { color: #fff; }
/* Not-yet-built platform pages — same slot as a link, visibly inert. */
.sc-footer2-soon { width: fit-content; font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,.28); cursor: default; }

/* Platforms footer column: icon + label rows, the ones with real spoke
   pages (platformsFooterColumn() in platform-pages.mjs) collapse into an
   Overview/API/MCP/CLI accordion instead of a single flat link. */
.sc-footer2-platform-link {
  display: flex; align-items: center; gap: 8px;
  width: fit-content; font-size: 14.5px; line-height: 1.4;
  color: rgba(255,255,255,.68); text-decoration: none;
  transition: color 160ms ease;
}
.sc-footer2-platform-link:hover { color: #fff; }
.sc-footer2-platform-link img { flex: 0 0 auto; opacity: .9; }
.sc-footer2-platform-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; color: rgba(255,255,255,.68);
  transition: color 160ms ease;
}
.sc-footer2-platform-toggle:hover { color: #fff; }
.sc-footer2-platform-name { display: flex; align-items: center; gap: 8px; }
.sc-footer2-platform-name img { flex: 0 0 auto; opacity: .9; }
.sc-footer2-platform-chev { flex: 0 0 auto; color: rgba(255,255,255,.4); transition: transform 160ms ease; }
.sc-footer2-platform.is-open .sc-footer2-platform-chev { transform: rotate(180deg); }
.sc-footer2-platform-body { display: grid; gap: 8px; margin: 8px 0 2px 22px; }
.sc-footer2-platform-body[hidden] { display: none; }
.sc-footer2-platform-body a {
  width: fit-content; font-size: 13.5px; line-height: 1.4;
  color: rgba(255,255,255,.5); text-decoration: none;
  transition: color 160ms ease;
}
.sc-footer2-platform-body a:hover { color: #fff; }

/* brand + copyright grouped on the left (source order), domain pushed to
   the right via margin-left:auto on the last child rather than
   space-between, which would center the middle item oddly with 3 children. */
.sc-footer2-bottom {
  display: flex; align-items: center; gap: 20px;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 13px; color: rgba(255,255,255,.4);
}
.sc-footer2-bottom > *:last-child { margin-left: auto; }

@media (max-width: 899.98px) {
  .sc-footer2 { padding: 56px 0 28px; }
  .sc-footer2-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 20px; }
  .sc-footer2-cta {
    grid-template-columns: 1fr; row-gap: 32px; padding: 0 0 32px; margin-bottom: 32px;
  }
  .sc-footer2-cta-claw { width: 130px; justify-self: center; }
  .sc-footer2-cta-center { grid-column: 1; }
  .sc-footer2-cta-center h2 { font-size: 30px; }
  .sc-footer2-cta-socials { grid-column: 1; justify-self: center; width: 80%; max-width: 80%; }
}
@media (max-width: 480px) {
  .sc-footer2-grid { grid-template-columns: 1fr 1fr; }
  .sc-footer2-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sc-footer2-bottom > *:last-child { margin-left: 0; }
}

/* ── Site nav v2 (new — test-only for now) ─────────────────────────────────
 * Compact floating pill + hover mega-menus, LobeHub-style: small text (14px),
 * tight paddings, rounded white panel below the bar. Intended to replace both
 * of the header variants currently on the site once approved.
 * Namespaced .scNav* so it can't collide with .topbar / .topbarLanding.
 */
.scNav {
  position: fixed; top: 18px; left: 0; right: 0;
  z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px;
  pointer-events: none;
  font-family: "Google Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.scNavBar, .scNavDrawer { pointer-events: auto; }
.scNavBar {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  /* Sized off the parent, not 100vw: the page has horizontally-bleeding art,
     and 100vw ignores that plus the scrollbar, which overflowed the bar. */
  width: 100%; max-width: 1180px;
  padding: 6px 6px 6px 14px;
  background: rgba(255,255,255,0.95);   /* fallback if no backdrop-filter */
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10,9,32,0.05), 0 8px 28px rgba(10,9,32,0.07);
}

.scNavBrand {
  display: flex; align-items: center; gap: 7px;
  padding-right: 10px;
  text-decoration: none; color: var(--ink, #0A0920);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.scNavBrand img { display: block; width: 26px; height: 26px; }

.scNavItems { display: flex; align-items: center; gap: 2px; margin: 0 auto; }

.scNavItem {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 12px;
  border: 0; background: transparent; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  color: #35353f; cursor: pointer; text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.scNavItem:hover { background: rgba(10,9,32,0.05); color: #0A0920; }
.scNavGroup.is-open > .scNavItem { background: rgba(10,9,32,0.06); color: #0A0920; }
.scNavChev { transition: transform 160ms ease; opacity: 0.55; flex: 0 0 auto; }
.scNavGroup.is-open .scNavChev { transform: rotate(180deg); }
/* Top level item icon (Product/Platforms/Developers/Resources/Pricing) —
   bare currentColor SVG, no chip: unlike .scNavRowIcon's bordered box for
   sublinks below, a bordered chip would be too heavy for this compact
   34px-tall bar, and currentColor already picks up the item's own
   hover/open color for free. */
.scNavItemIcon { display: inline-flex; flex: 0 0 auto; opacity: 0.75; }
.scNavItem:hover .scNavItemIcon, .scNavGroup.is-open > .scNavItem .scNavItemIcon { opacity: 1; }

.scNavActions { display: flex; align-items: center; gap: 6px; }
.scNavNpm {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px;
  border: 0; border-radius: 999px;
  background: rgba(10,9,32,0.05); color: #35353f;
  font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 140ms ease;
}
.scNavNpm:hover { background: rgba(10,9,32,0.09); }
.scNavCta {
  position: relative;
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  border-radius: 999px; text-decoration: none;
  background: #0A0920; color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
}
.scNavCta:hover { opacity: 0.9; transform: translateY(-1px); }
.scNavCtaLabel { position: relative; z-index: 1; }

/* Specular rim highlight — vanilla CSS/JS port of React Bits' SpecularButton
   (see the comment on specularCta() in platform-pages.mjs for why this isn't
   the original WebGL version). A conic-gradient ring, cut down to just the
   border with the padding + mask-composite trick, swept by --sb-angle and
   faded in by --sb-bright — both written every animation frame from the
   pointermove loop in platform-page.js. Two lobes 180deg apart mirror the
   original shader's symmetric abs(dot(normal, light)): both the near and far
   edge relative to the cursor catch a streak, not just the near one. */
.scNavCtaShine {
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  opacity: var(--sb-bright, 0);
  background: conic-gradient(from var(--sb-angle, 0deg),
    #fff 0deg,
    rgba(255,255,255,.35) 15deg,
    transparent 50deg,
    transparent 130deg,
    rgba(255,255,255,.35) 165deg,
    #fff 180deg,
    rgba(255,255,255,.35) 195deg,
    transparent 230deg,
    transparent 310deg,
    rgba(255,255,255,.35) 345deg,
    #fff 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .scNavCtaShine { display: none; }
}

/* ── mega panel ───────────────────────────────────────────────────────── */
/* .scNavPanel only positions and fades; .scNavPanelGlass (below) is the
   solid surface — plain white, no blur. Only the bar itself is glass. */
.scNavPanel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content; max-width: calc(100vw - 24px);
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.scNavPanel[hidden] { display: block; }         /* animate instead of snapping */
.scNavGroup.is-open .scNavPanel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* Panels hang off .scNavBar, not the button, so a wide panel stays centred
   on the bar rather than running off the side of a left-hand menu item. */
.scNavGroup { position: static; }
.scNavGroup .scNavPanel { left: 50%; }

.scNavPanelGlass {
  padding: 22px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(10,9,32,0.05), 0 18px 50px rgba(10,9,32,0.13);
}

.scNavPanelBody { display: flex; gap: 34px; }
.scNavPanelBody-lists > .scNavCol { min-width: 210px; }

.scNavCol { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.scNavColLabel {
  display: block; margin: 0 0 8px 10px;
  font-size: 12.5px; font-weight: 500; color: #9a9aa6; letter-spacing: 0;
}

.scNavRow {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 10px; border-radius: 12px;
  text-decoration: none; transition: background 130ms ease;
}
.scNavRow:hover { background: rgba(10,9,32,0.04); }
.scNavRowIcon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border: 1px solid rgba(10,9,32,0.08); border-radius: 10px; background: rgba(255,255,255,0.55);
  transition: transform 160ms ease;
}
.scNavRow:hover .scNavRowIcon { transform: scale(1.08); }
.scNavRowIcon img { display: block; width: 19px; height: 19px; object-fit: contain; }
.scNavRowIconText {
  font-size: 14px; font-weight: 600; color: #6b6b78;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.scNavRowText { display: flex; flex-direction: column; gap: 2px; }
.scNavRowTitle { font-size: 14.5px; font-weight: 600; color: #0A0920; letter-spacing: -0.01em; }
.scNavRowNote { font-size: 13px; line-height: 1.35; color: #70707d; max-width: 30ch; }

/* Compact list style: comparisons, free tools — no icon chip. */
.scNavLink {
  display: block; padding: 7px 10px; border-radius: 9px;
  font-size: 14px; color: #35353f; text-decoration: none;
  transition: background 130ms ease, color 130ms ease;
}
.scNavLink:hover { background: rgba(10,9,32,0.04); color: #0A0920; }

/* ── developer cards ──────────────────────────────────────────────────── */
.scNavCards { display: flex; gap: 12px; }
.scNavCard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
  width: 200px; padding: 16px 16px 18px;
  border-radius: 16px; background: #f6f6f8;
  text-decoration: none; transition: background 140ms ease;
}
.scNavCard:hover { background: #eeeef2; }
.scNavCard::after {
  content: attr(data-watermark);
  position: absolute; right: 10px; bottom: -14px; z-index: 0;
  font-size: 62px; font-weight: 700; letter-spacing: -0.04em;
  color: rgba(10,9,32,0.045); pointer-events: none;
}
.scNavCardIcon { display: block; position: relative; z-index: 1; width: 26px; height: 26px; margin-bottom: 22px; transition: transform 200ms ease; }
.scNavCard:hover .scNavCardIcon { transform: scale(1.12) rotate(-4deg); }
.scNavCardTitle { position: relative; z-index: 1; font-size: 15px; font-weight: 600; color: #0A0920; }
.scNavCardNote { position: relative; z-index: 1; font-size: 13px; line-height: 1.4; color: #70707d; }

/* Same spoke art as .pfSpoke on the platform pages — full bleed image,
   bottom scrim for legibility, white text/icon/watermark instead of the
   plain gray card's dark ones. */
.scNavCard-img {
  background-size: cover; background-position: center;
  transition: transform 200ms cubic-bezier(.22,1,.36,1);
}
/* No background-color change here (unlike the plain .scNavCard:hover
   above) — these spoke images have soft, partly transparent edges, and a
   background-color swap was showing through inconsistently per image
   (darker against API's dark art, lighter against MCP/CLI's light art).
   Just the lift, matching .pfSpoke's own hover treatment. */
.scNavCard-img:hover { transform: translateY(-2px); }
.scNavCard-img::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Flat wash across the whole card (not just the bottom) — the top of the
     art is often the lightest part of the gradient (see MCP's near white
     top edge), which was leaving the icon and title with too little
     contrast up there. */
  background: linear-gradient(180deg, rgba(6,10,18,.42) 0%, rgba(6,10,18,.85) 100%);
}
.scNavCard-img::after { color: rgba(255,255,255,.22); }
.scNavCard-img .scNavCardIcon { position: relative; z-index: 1; filter: brightness(0) invert(1); }
.scNavCard-img .scNavCardTitle { color: #fff; }
.scNavCard-img .scNavCardNote { color: rgba(255,255,255,.82); }

/* ── platform grid ────────────────────────────────────────────────────── */
.scNavColWide { min-width: 420px; }
.scNavPlatformGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
.scNavPlatform {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  text-decoration: none; transition: background 130ms ease;
}
.scNavPlatform:hover { background: rgba(10,9,32,0.04); }
.scNavPlatform .scNavRowIcon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
.scNavPlatform:hover .scNavRowIcon { transform: scale(1.1); }
.scNavPlatform .scNavRowTitle { font-size: 14px; font-weight: 500; }

/* ── callout row ──────────────────────────────────────────────────────── */
.scNavCallout {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 14px 10px 2px;
  border-top: 1px solid rgba(10,9,32,0.07);
  text-decoration: none;
}
.scNavCalloutBadge {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(46,49,255,0.09); color: #2E31FF;
  font-size: 12.5px; font-weight: 600;
}
.scNavCalloutText { font-size: 14px; color: #35353f; }
.scNavCalloutMono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 13px; }
.scNavCalloutCta { margin-left: auto; font-size: 14px; font-weight: 600; color: #2E31FF; }
.scNavCallout:hover .scNavCalloutCta { text-decoration: underline; }

/* ── mobile ───────────────────────────────────────────────────────────── */
.scNavBurger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; margin-left: auto; padding: 0 9px;
  border: 0; background: rgba(10,9,32,0.05); border-radius: 999px; cursor: pointer;
}
.scNavBurger span { display: block; height: 1.6px; background: #0A0920; border-radius: 2px; transition: transform 160ms ease, opacity 160ms ease; }
.scNavBurger[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.scNavBurger[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

.scNavDrawer {
  width: 100%; max-width: 1180px;
  margin-top: 8px; padding: 6px 14px 20px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(10,9,32,0.05), 0 18px 50px rgba(10,9,32,0.13);
  max-height: calc(100vh - 110px); overflow-y: auto;
}

/* Pricing (no sub-menu) sits in the same divided-row rhythm as the
   accordion heads below it, so it doesn't read as a different kind of item. */
.scNavDrawerTop {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 4px;
  font-size: 15.5px; font-weight: 600; color: #0A0920;
  text-decoration: none;
  border-bottom: 1px solid rgba(10,9,32,0.06);
}
.scNavDrawerTop .scNavItemIcon { opacity: 0.7; }

/* ── mobile accordion (Product / Platforms / Developers / Resources) ────── */
.scNavAcc { border-bottom: 1px solid rgba(10,9,32,0.06); }
.scNavAcc:last-of-type { border-bottom: 0; }
.scNavAccHead {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 4px; border: 0; background: transparent;
  font: inherit; font-size: 15.5px; font-weight: 600; color: #0A0920;
  cursor: pointer;
}
.scNavAccHead > span:first-child { display: flex; align-items: center; gap: 10px; }
.scNavAccHead .scNavItemIcon { opacity: 0.7; }
.scNavAccHead .scNavChev { opacity: 0.5; transition: transform 160ms ease; }
.scNavAcc.is-open .scNavAccHead .scNavChev { transform: rotate(180deg); }
.scNavAccBody { padding: 2px 0 18px; }
.scNavAccBody[hidden] { display: none; }

/* Reuse the desktop panel's icon rows/cards/platform grid, just reflowed
   into one column at drawer width instead of the desktop's side-by-side
   columns and fixed-width cards. */
.scNavAccBody .scNavPanelBody { flex-direction: column; gap: 20px; }
.scNavAccBody .scNavCol,
.scNavAccBody .scNavColWide { min-width: 0; }
.scNavAccBody .scNavCards { flex-direction: column; gap: 10px; }
.scNavAccBody .scNavCard { width: 100%; }
.scNavAccBody .scNavCardIcon { margin-bottom: 14px; }
.scNavAccBody .scNavCallout {
  flex-wrap: wrap; row-gap: 8px;
}
.scNavAccBody .scNavCalloutCta { flex: 1 0 100%; margin-left: 0; }

.scNavDrawerActions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(10,9,32,0.07);
}
.scNavDrawerActions .scNavCta { flex: 1; justify-content: center; height: 42px; }

@media (max-width: 1099.98px) {
  .scNavItems, .scNavActions { display: none; }
  .scNavBurger { display: flex; }
  .scNavBar { padding: 8px 8px 8px 14px; }
}
@media (min-width: 1100px) {
  .scNavDrawer { display: none !important; }
}
/* Icon-less rows (comparisons, free tools, "popular" links): same row box,
   no chip, lighter title so the column reads as a list not a menu of cards. */
.scNavRowBare { padding: 7px 10px; }
.scNavRowBare .scNavRowTitle { font-weight: 500; color: #35353f; }
.scNavRowBare:hover .scNavRowTitle { color: #0A0920; }


/* Frosted glass on the bar only — dropdown panels and the mobile drawer are
   plain white (.scNavPanelGlass / .scNavDrawer above), not blurred. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .scNavBar {
    background: rgba(255,255,255,0.7);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
  }
}

/* Respect the OS "reduce transparency" setting — fall back to opaque. */
@media (prefers-reduced-transparency: reduce) {
  .scNavBar { background: rgba(255,255,255,0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ── Developer hero (new) — /instagram/api, /instagram/mcp, /instagram/cli ──
 * Dark, full bleed hero distinct from the light .pfHero used on the main
 * platform page — same "dark bookend" idea as .sc-footer2 lower down, so a
 * developer page reads dark → light → dark instead of white the whole way.
 * Near black rather than the footer's navy #0A0920 on purpose — this hero's
 * canvas (FaultyTerminal for CLI, PixelBlast for API/MCP — see
 * heroFaultyTerminal()/heroPixelBlast() in platform-page.js) is its own,
 * separate dark moment, not meant to read as the same surface as the
 * footer. */
.pfDevHero {
  position: relative; overflow: hidden;
  background: #0a0a0a; color: #fff;
  padding: 220px 0 120px;
}
.pfDevHeroCanvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  opacity: .55;
}
/* FaultyTerminal's own digit grid reads busier/brighter than PixelBlast's
   dot field at the same opacity (see heroFaultyTerminal() in
   platform-page.js), so the CLI hero dims its canvas further on top of the
   shared opacity above. */
.pfDevHero-terminal .pfDevHeroCanvas { opacity: .4; }
/* 30% dimmer than the shared .55 base above. */
.pfDevHero-pixelblast .pfDevHeroCanvas { opacity: .385; }
.pfDevHeroInner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px; align-items: center;
}
.pfDevHeroCopy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pfDevHeroEyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}
.pfDevHeroH1 {
  margin: 0; font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  color: #fff; max-width: 620px;
}
.pfDevHeroSub { margin: 0; max-width: 46ch; font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.72); }
/* Same install command as .scNavNpm in the nav, sized up for the hero
   (that one is compact because it has to fit a 34px bar; this doesn't). */
.pfDevHeroNpm {
  display: inline-flex; align-items: center; width: fit-content;
  margin-top: 4px; padding: 11px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.1); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: inherit; font-family: var(--sc-code-font); font-size: 15px;
  cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease;
}
.pfDevHeroNpm:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.pfDevHeroActions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 6px; }
.pfDevHeroLink {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: 15px; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.pfDevHeroLink svg { width: 15px; height: 15px; }
.pfDevHeroLink:hover { color: #fff; border-color: rgba(255,255,255,.7); }
.pfDevHeroCode { min-width: 0; }

@media (max-width: 1199.98px) {
  .pfDevHeroH1 { font-size: 42px; }
}
@media (max-width: 899.98px) {
  .pfDevHero { padding: 160px 0 80px; }
  .pfDevHeroInner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pfDevHeroH1 { font-size: 34px; }
  .pfDevHeroSub { font-size: 17px; }
}

/* ── Code panel (new) ─────────────────────────────────────────────────────
 * Tabbed, dark, macOS chrome code block with a real copy button — see the
 * doc comment on codePanel() in platform-pages.mjs for what this replaces
 * (a bare <pre><code> on /mcp, a copy less plain dump elsewhere). Palette is
 * a superset of .sc-code's 3 colors (kept for continuity) plus number,
 * function/command, punctuation, and terminal output tones. */
.pfCode {
  background: #0b0e17; border: 1px solid #1b2233; border-radius: 20px;
  overflow: hidden; min-width: 0;
}
.pfCodeHead {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-bottom: 1px solid #161d2c;
}
.pfCodeDots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.pfCodeDots span { width: 10px; height: 10px; border-radius: 50%; background: #2a3346; display: block; }
.pfCodeDots span:nth-child(1) { background: #ff5f57; }
.pfCodeDots span:nth-child(2) { background: #febc2e; }
.pfCodeDots span:nth-child(3) { background: #28c840; }
.pfCodeLabel { font-family: var(--sc-code-font); font-size: 12.5px; color: #5b6678; }
.pfCodeTabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pfCodeTab {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 11px; border-radius: 8px;
  font-family: var(--sc-code-font); font-size: 12.5px; font-weight: 600;
  color: #6b7690; transition: background-color 140ms ease, color 140ms ease;
}
.pfCodeTab:hover { color: #a7b1c7; }
.pfCodeTab.is-active { background: #171f30; color: #e6edf3; }
.pfCodeCopy {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid #1f293c; background: transparent; color: #6b7690;
  cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.pfCodeCopy svg { width: 15px; height: 15px; }
.pfCodeCopy:hover { color: #e6edf3; border-color: #2E31FF; }
.pfCodeCopy.is-copied { color: #7ee2a8; border-color: #7ee2a8; }
.pfCodeBody { position: relative; }
.pfCodePanel {
  margin: 0; padding: 20px 22px;
  font-family: var(--sc-code-font); font-size: 13px; line-height: 1.7;
  color: #e6edf3; white-space: pre-wrap; overflow-wrap: anywhere;
}
.pfCodeResponse {
  border-top: 1px solid #161d2c; background: #090c14;
  padding: 14px 22px 20px;
}
.pfCodeResponseBadge {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--sc-code-font); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #7ee2a8; background: rgba(126,226,168,.12);
  border-radius: 999px; padding: 4px 10px;
}
.pfCodeResponse pre {
  margin: 0; font-family: var(--sc-code-font); font-size: 12.5px; line-height: 1.65;
  color: #aab4d0; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Hand tokenized syntax colors — see the doc comment on codePanel() in
   platform-pages.mjs for why these are spans authored by hand rather than
   run through a real highlighter. */
.tok-com { color: #6ee7b7; }
.tok-key { color: #ffd479; }
.tok-str { color: #7ec8ff; }
.tok-num { color: #f0a875; }
.tok-fn { color: #c9a4ff; }
.tok-punc { color: #5b6678; }
.tok-out { color: #8a93a6; }

@media (max-width: 520px) {
  .pfCodePanel, .pfCodeResponse { padding-left: 16px; padding-right: 16px; }
  .pfCodePanel { font-size: 12px; }
}

/* Repurposed feature slot (dashboard section → code section) — same sky
   tint/grid as before, this just constrains the panel's width so a short
   code sample doesn't stretch to the full art column on wide viewports. */
.pfFeatureArtCode { max-width: 560px; }
.pfFeatureArtCode .pfCode { width: 100%; }

/* ── Endpoint list (API second section) ───────────────────────────────────
 * Same dark chrome family as .pfCode, styled as a linkable reference list
 * instead of a code block. */
.pfEndpoints {
  background: #0b0e17; border: 1px solid #1b2233; border-radius: 20px;
  padding: 10px;
}
.pfEndpoint {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px; border-radius: 12px;
}
.pfEndpoint + .pfEndpoint { border-top: 1px solid #161d2c; }
.pfEndpointMethod {
  flex: 0 0 auto; font-family: var(--sc-code-font); font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em; border-radius: 6px; padding: 3px 8px;
}
.pfEndpointMethod-get { background: rgba(126,200,255,.14); color: #7ec8ff; }
.pfEndpointMethod-post { background: rgba(126,226,168,.14); color: #7ee2a8; }
.pfEndpointPath {
  flex: 0 0 auto; font-family: var(--sc-code-font); font-size: 13px; color: #e6edf3;
}
.pfEndpointNote { font-size: 13px; color: #8a93a6; line-height: 1.4; }
.pfEndpointsFooter {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 14px 12px 10px;
  font-size: 14px; font-weight: 600; color: #9fb0cc; text-decoration: none;
}
.pfEndpointsFooter svg { width: 15px; height: 15px; }
.pfEndpointsFooter:hover { color: #fff; }

@media (max-width: 809.98px) {
  .pfEndpoint { flex-wrap: wrap; }
  .pfEndpointNote { width: 100%; margin-left: 42px; }
}

/* ── Tool grid (MCP second section) ───────────────────────────────────────
 * Light cards (unlike the dark API/CLI panels) — these are labeled facts
 * about the toolset, not something you'd copy and run, so they read better
 * as plain cards matching .sc-dash's devCard family. */
/* Design-system tool grid (toolGrid() helper): 4-col flat cards on the
   FAQ-accordion surface — no border, no shadow, no hover motion. Named
   pfToolCards/pfToolChip because the interactive /tools/* pages already own
   .pfToolGrid/.pfToolCard for their form + output layout. */
.pfToolCards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
@media (max-width: 1020px) { .pfToolCards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pfToolCards { grid-template-columns: 1fr; } }
/* Inside a feature section's half-width art column, 4-up is too cramped */
.pfFeatureArtCode .pfToolCards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.pfToolChip { border-radius: 18px; background: rgba(250, 250, 250, 0.98); padding: 20px; }
.pfToolChipHead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: #0b1020; }
.pfToolChipHead svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pfToolChipHead code { font-family: var(--sc-code-font); font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: #0b1020; }
.pfToolChip p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #505b72; }
.pfToolName {
  display: inline-block; font-family: var(--sc-code-font); font-size: 13.5px; font-weight: 700;
  color: #2E31FF; background: rgba(46,49,255,.08);
  border-radius: 7px; padding: 3px 9px;
}
.pfToolCard p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #505b72; }

@media (max-width: 809.98px) {
  .pfToolGrid { grid-template-columns: minmax(0, 1fr); } /* mobile */
}

/* ── Posts showcase (moved down carousel, developer pages) ───────────────── */
.pfShowcase { padding: 70px 0 30px; }
.pfShowcase .pfHeroRail { margin-top: 44px; }

/* Dashboard cross link card (see DASHBOARD_SURFACE in platform-pages.mjs) —
   the brand gradient stays as the base layer (first 2 lines), same as the
   3 spoke cards' art relates to their gradient scrim, and the dashboard
   screenshot sits on top of it as a second layer, sized short of full
   width so the gradient still shows on the left, flush to the card's right
   edge rather than centered. */
.pfSpoke-dashboard {
  background-image:
    url('https://d3a8s0fssi8mjd.cloudfront.net/cdn/ui/redesign/platform/pf-dashboard.webp'),
    radial-gradient(120% 140% at 0% 0%, rgba(139,124,255,.9) 0%, rgba(139,124,255,0) 55%),
    linear-gradient(135deg, #2E31FF 0%, #1418A6 100%);
  background-position: right 25%, 0 0, 0 0;
  background-size: 95% auto, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* ── Platforms supported (new) ────────────────────────────────────────────
 * Icon marquee (decorative, see platformsSupportedSection() in
 * platform-pages.mjs) + a compact real text list underneath, a few columns
 * wide, each platform name linking out — that list is the part doing SEO
 * work, the marquee above it is just rhythm. */
.pfPlatformsSupported { padding: 130px 0; }
.pfPlatformsMarquee {
  margin-top: 36px; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pfPlatformsTrack {
  display: flex; align-items: center; gap: 36px; width: max-content;
  animation: pfPlatformsScroll 30s linear infinite;
}
.pfPlatformsTrack img { width: 44px; height: 44px; flex: 0 0 auto; display: block; object-fit: contain; border-radius: 10px; }
.pfPlatformsTrackDupe { display: contents; }
.pfPlatformsMarquee:hover .pfPlatformsTrack { animation-play-state: paused; }
@keyframes pfPlatformsScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pfPlatformsTrack { animation: none; } }

.pfPlatformsList {
  list-style: none; margin: 36px auto 0; padding: 0; max-width: 720px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px;
}
.pfPlatformsList li { display: flex; }
.pfPlatformsList a {
  display: inline-flex; align-items: center; gap: 8px;
  color: #505b72; text-decoration: none; font-size: 14.5px;
  transition: color 140ms ease;
}
.pfPlatformsList a:hover { color: #0b1020; }
.pfPlatformsList img { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; border-radius: 4px; }
/* Real platform, no page to link to yet — same slot as a link, visibly
   inert, same idea as .sc-footer2-soon in the footer (light themed here
   instead of dark). */
.pfPlatformsSoon { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: #b7bcc7; cursor: default; }
.pfPlatformsSoon img { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; border-radius: 4px; opacity: .6; }

@media (max-width: 809.98px) {
  .pfPlatformsSupported { padding: 88px 0; }
  .pfPlatformsTrack { gap: 24px; }
  .pfPlatformsTrack img { width: 34px; height: 34px; }
  .pfPlatformsList { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
}

/* ── Shared section components (site wide migration) ──────────────────────
 * New components for redesigning pages outside the Instagram platform
 * family onto this design system — see the matching doc comment in
 * platform-pages.mjs. */

/* stepsSection() — light numbered step cards. */
.pfSteps-sec { padding: 100px 0; }
/* Flat feature cards (FAQ-accordion surface, no border/shadow/hover) */
.pfFeatCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.pfFeatCard { border-radius: 18px; background: rgba(250, 250, 250, 0.98); padding: 22px; }
.pfFeatCard h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.01em; color: #0b1020; }
.pfFeatCard p { margin: 0; font-size: 14px; line-height: 1.55; color: #505b72; }
.pfFeatCard p code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #2E31FF; }
@media (max-width: 860px) { .pfFeatCards { grid-template-columns: 1fr; } }

/* Steps — grain-card variant (approved): full-bleed grainy gradient, ghost
   numeral watermark, optional minimal white icon. */
.pfStepGrainGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.pfStepGrain {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 250px; padding: 22px; border-radius: 22px; color: #fff;
  background-color: #0d0f16; background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.pfStepGrain::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10,15,25,0) 30%, rgba(6,10,18,.7) 100%); }
.pfStepGrain::after { content: attr(data-num); position: absolute; top: 6px; right: 14px; z-index: 0; font-size: 86px; font-weight: 800; letter-spacing: -0.04em; color: rgba(255,255,255,.13); line-height: 1; }
.pfStepGrainIcon { position: absolute; top: 20px; left: 22px; z-index: 1; color: #fff; }
.pfStepGrainIcon svg { width: 24px; height: 24px; }
.pfStepGrain h3 { position: relative; z-index: 1; margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.pfStepGrain p { position: relative; z-index: 1; margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); }
@media (max-width: 860px) { .pfStepGrainGrid { grid-template-columns: 1fr; } }

/* Steps — editorial variant (approved, default): thin numerals + hairline rules */
.pfStepEdInner { max-width: 860px; }
.pfStepEd { margin-top: 34px; }
.pfStepEdRow { display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid rgba(15,23,42,.1); }
.pfStepEdRow:last-child { border-bottom: 1px solid rgba(15,23,42,.1); }
.pfStepEdNum { font-size: 44px; font-weight: 250; letter-spacing: -0.02em; color: rgba(11,16,32,.35); line-height: 1; }
.pfStepEdText h3 { margin: 2px 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.pfStepEdText p { margin: 0; font-size: 15px; line-height: 1.55; color: #505b72; max-width: 56ch; }
@media (max-width: 640px) { .pfStepEdRow { grid-template-columns: 52px 1fr; gap: 14px; } .pfStepEdNum { font-size: 30px; } }

/* Paired code blocks: two columns spanning the full container (line up with
   the tool grid); a single standalone panel uses .pfCodeCol (780px cap). */
.pfCodeCols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pfCodeCol { max-width: 780px; margin: 0 auto; display: grid; gap: 26px; }
@media (max-width: 900px) { .pfCodeCols { grid-template-columns: 1fr; } }
/* testimonialsSection() had no rule at all — it rendered flush (0px) */
.pfTestimonials { padding: 100px 0 90px; }
.pfStepsGrid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pfStepsGrid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pfStep { border: 1px solid var(--pf-line); border-radius: 20px; padding: 26px; background: #fbfbfc; }
.pfStepNo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: #eef0ff; color: #2E31FF; font-weight: 700; font-size: 15px; margin-bottom: 16px;
}
.pfStep h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: #0b1020; }
.pfStep p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #505b72; }

/* bulletList() — compact fact/limitation list. */
/* Borderless minimal checklist (bordered pill rows rejected Jul 2026) */
.pfBulletList { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 30px; }
.pfBulletList-1col { grid-template-columns: 1fr; margin-top: 16px; }
.pfBulletList-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pfBulletList li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15.5px; font-weight: 550; line-height: 1.4; color: #0b1020;
}
.pfBulletList li svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; color: #2E31FF; }
@media (max-width: 860px) { .pfBulletList { grid-template-columns: 1fr; } }

/* changelog-page.mjs entries — flat card language matching .pfFeatCard/.pfToolChip. */
.pfChangelogEntry { border-radius: 18px; background: rgba(250, 250, 250, 0.98); padding: 28px 30px; }
.pfChangelogDate { display: inline-flex; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #2E31FF; margin-bottom: 10px; }
.pfChangelogEntry h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -0.01em; color: #0b1020; }
.pfChangelogList { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pfChangelogList li { position: relative; padding-left: 22px; color: #505b72; font-size: 15px; line-height: 1.6; }
.pfChangelogList li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #2E31FF; }

/* linkGrid() — related/outbound link cards. */
.pfLinkGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
/* Spoke-card treatment at link scale: grain background image (inline style),
   ghost watermark, bottom scrim, frosted arrow. */
.pfLinkCard {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  min-height: 180px; padding: 20px; border-radius: 22px;
  background-color: #0d0f16; background-size: cover; background-position: center;
  text-decoration: none; color: #fff;
  transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
.pfLinkCard:hover { transform: translateY(-3px); }
.pfLinkCard::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10,15,25,0) 30%, rgba(6,10,18,.72) 100%); }
.pfLinkCard::after {
  content: attr(data-watermark); position: absolute; right: 10px; bottom: -14px; z-index: 0;
  font-size: 62px; font-weight: 800; letter-spacing: -0.03em; color: rgba(255,255,255,.13); line-height: 1;
  pointer-events: none;
}
.pfLinkCardIcon { position: absolute; top: 18px; left: 20px; z-index: 1; color: #fff; }
.pfLinkCardIcon svg { width: 23px; height: 23px; }
.pfLinkCardArrow {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .18s ease, transform .18s ease;
}
.pfLinkCardArrow svg { width: 14px; height: 14px; }
.pfLinkCard:hover .pfLinkCardArrow { background: rgba(255,255,255,.3); transform: translate(2px,-2px); }
.pfLinkCardLabel { position: relative; z-index: 1; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.pfLinkCardNote { position: relative; z-index: 1; font-size: 13px; color: rgba(255,255,255,.78); }

/* recipesSection() — dark text+code rows, same "dark bookend" family as the
   dev hero and footer. */
.pfRecipes { background: #0a0a0a; color: #fff; padding: 100px 0; }
.pfRecipes .sc-h2 { color: #fff; }
.pfRecipes .sc-lead { color: rgba(255,255,255,.68); }
.pfRecipesRows { margin-top: 48px; display: grid; gap: 20px; }
.pfRecipeRow {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: center;
  padding: 8px 0;
}
.pfRecipeText h3 { margin: 0 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.pfRecipeText p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.68); max-width: 42ch; }
.pfRecipeText p strong { color: #fff; font-weight: 600; }
.pfRecipeCode { min-width: 0; }

@media (max-width: 899.98px) {
  .pfStepsGrid, .pfStepsGrid-2col { grid-template-columns: minmax(0, 1fr); }
  .pfLinkGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfRecipeRow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 809.98px) {
  .pfSteps-sec, .pfRecipes { padding: 64px 0; }
  .pfLinkGrid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Sticky CTA bar (ported from seo-pages.css) ────────────────────────────
 * Same .seoCtaBar* markup/classes renderStickyCtaBar() in seo-pages.mjs
 * already generates — ported verbatim under the same class names (not
 * renamed) so that one exported function serves both stylesheets, rather
 * than forking the markup too. .pfBody gets the same bottom padding /
 * support widget offset .seoBody already had, so this behaves identically
 * on pages using this stylesheet. */
.seoCtaBar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 1200;
  display: flex; justify-content: center;
  width: 100%; max-width: 1180px;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.seoCtaBarCard {
  pointer-events: auto; display: flex; align-items: center; gap: 20px;
  color: black; width: fit-content; max-width: calc(100vw - 48px);
  padding: 9px 9px 9px 26px; border-radius: 999px;
  background: rgb(255 255 255 / 50%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(9, 12, 24, 0.38);
}
.seoCtaBarCopy { display: grid; gap: 4px; flex: 0 0 auto; min-width: 0; }
.seoCtaBarTitle {
  color: #111726; font-size: 14.5px; font-weight: 650; line-height: 1.15; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seoCtaBarSub { display: inline-flex; align-items: center; gap: 6px; color: rgba(17, 23, 38, 0.65); font-size: 12px; line-height: 1; white-space: nowrap; }
.seoCtaBarSub img { width: 18px; height: 18px; border-radius: 5px; display: block; }
.seoCtaBarBtn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 24px; border-radius: 999px;
  background-color: #2E31FF;
  box-shadow:
    inset 5px -2px 4px rgba(255, 255, 255, 0.53),
    inset 5px -28px 24.5px rgba(0, 0, 0, 0.25),
    inset -2px 4px 4px rgba(255, 255, 255, 0.35),
    inset -2px 19px 16px rgba(255, 255, 255, 0.25);
  color: #ffffff; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; text-decoration: none; transition: transform 160ms ease;
}
.seoCtaBarBtn:hover { transform: scale(1.03); }
/* Scoped to a modifier, not blanket .pfBody — only pages that actually
   render the sticky bar (new redesigned pages) should reserve room for it;
   the already shipped /instagram pages don't include it and must not
   pick up this clearance as a side effect of loading the same stylesheet.
   The clearance lives INSIDE the dark footer (not as body padding-bottom):
   body padding would paint an 86px strip of the white body background
   below .sc-footer2. Applies to .seoBody too — renderLayout() pages carry
   the same fixed bar over the same dark footer. */
.pfBody-hasStickyCta .sc-footer2,
.seoBody .sc-footer2 { padding-bottom: calc(32px + 86px); }
.pfBody-hasStickyCta .sc-support-widget { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
  .seoCtaBar { justify-content: flex-start; }
  .pfBody-hasStickyCta .sc-support-widget { bottom: 22px; }
}

/* Interactive tool pages (/tools/*) — form + live output, card wrapper
   reuses .pfStep's own light-card treatment, just with a form/output
   specific inner layout. JS only ever queries by data attribute
   (data-tool-kind/data-tool-output/data-copy-tool-output), never by class,
   so these names are free to differ from the old .toolForm/.seoCard ones. */
.pfToolGrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.pfToolForm.pfStep, .pfToolOutputCard.pfStep { display: grid; gap: 14px; align-content: start; }
.pfToolForm label { display: grid; gap: 8px; color: #505b72; font-size: 14px; }
.pfToolForm input, .pfToolForm select, .pfToolForm textarea {
  width: 100%; border: 1px solid var(--pf-line); border-radius: 14px;
  background: #fff; color: #0b1020; font: inherit; padding: 12px 14px;
}
.pfToolForm textarea {
  min-height: 280px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px; line-height: 1.55;
}
.pfToolKicker {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  min-height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--pf-line); background: #fff; color: #505b72; font-size: 13px;
}
.pfToolOutput {
  min-height: 280px; margin: 0; white-space: pre-wrap; overflow: auto;
  border: 1px solid var(--pf-line); border-radius: 14px; background: #fff; padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px; line-height: 1.55; color: #0b1020;
}
@media (max-width: 880px) {
  .pfToolGrid { grid-template-columns: 1fr; }
}

/* Compare page data table + source list (/compare/*). Base table is shared
   with generic in-article markdown tables (.pfArticleBody .pfCompareTable),
   so the SocialClaw-column tint below is scoped to the .pfCompareTable--vs
   modifier that only renderComparisonTable() on /compare/* pages emits. */
.pfTableWrap { overflow-x: auto; border: 1px solid var(--pf-line); border-radius: 20px; background: var(--panel); margin-top: 44px; }
.pfCompareTable { width: 100%; min-width: 760px; border-collapse: collapse; }
.pfCompareTable th, .pfCompareTable td { padding: 18px 20px; border-bottom: 1px solid var(--pf-line); vertical-align: top; text-align: left; line-height: 1.65; }
.pfCompareTable thead th { color: #505b72; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; background: rgba(255,255,255,.6); }
.pfCompareTable tbody th { width: 16%; min-width: 140px; font-size: 15px; font-weight: 600; color: #0b1020; }
.pfCompareTable tbody td { color: #505b72; }
.pfCompareTable tbody tr:last-child th, .pfCompareTable tbody tr:last-child td { border-bottom: 0; }
.pfCompareTable--vs thead th:nth-child(2), .pfCompareTable--vs tbody td:nth-child(2) { background: rgba(22, 163, 74, .07); }
.pfCompareTable--vs thead th:nth-child(2) { color: #157347; }
.pfCompareTable--vs tbody td:nth-child(2) { color: #0b1020; font-weight: 550; }
.pfCompareTable--vs thead th:nth-child(2) .pfCompareWinBadge { display: inline-flex; align-items: center; gap: 5px; }
.pfCompareTable--vs thead th:nth-child(2) .pfCompareWinBadge svg { width: 13px; height: 13px; color: #16a34a; }

/* Compact fact card — a .pfStep with a small pill kicker above the title,
   for proof point / verified fact grids (compare pages' "where SocialClaw
   is strongest" / "what we verified" sections). */
.pfFactCard.pfStep { display: grid; gap: 6px; }
.pfFactIcon { display: inline-flex; color: #2E31FF; margin-bottom: 4px; }
.pfFactIcon svg { width: 22px; height: 22px; }
.pfFactKicker {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 3px 10px; border-radius: 999px; background: #eef0ff;
  color: #2E31FF; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  margin-bottom: 4px;
}
.pfFactKicker-good { background: rgba(22, 163, 74, .12); color: #157347; }
.pfFactCard.pfStep strong { font-size: 16px; color: #0b1020; }
.pfFactCard.pfStep span:last-child { font-size: 14.5px; line-height: 1.55; color: #505b72; }
.pfFactCard--good { border: 1px solid rgba(22, 163, 74, .22); background: rgba(22, 163, 74, .045); }

/* Versus block — the compare-page-only sibling to pfTwoBlock (which stays
   neutral for generic 2-column split content elsewhere). Left card = the
   SocialClaw case, tinted soft green; right card = the competitor case,
   tinted soft rose. Makes it visually obvious who this page is rooting for,
   per direct feedback that pfTwoBlock's all-blue centered columns gave no
   sense of a "winner". */
.pfVersusGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; align-items: start; }
.pfVersusCard { border-radius: 20px; padding: 30px 32px; text-align: left; }
.pfVersusCard--win { background: rgba(22, 163, 74, .055); border: 1px solid rgba(22, 163, 74, .2); }
.pfVersusCard--alt { background: rgba(225, 29, 72, .04); border: 1px solid rgba(225, 29, 72, .14); }
.pfVersusCard h3 { margin: 0 0 18px; font-size: 18px; font-weight: 600; color: #0b1020; }
.pfVersusCard--win h3 { color: #157347; }
.pfVersusCard--alt h3 { color: #9f1239; }
.pfVersusCard p { margin: 0; color: #505b72; line-height: 1.65; }
.pfVersusCard .pfBulletList { margin-top: 0; gap: 14px; }
.pfVersusCard .pfBulletList li { line-height: 1.6; }
.pfVersusCard--win .pfBulletList li svg { color: #16a34a; }
.pfVersusCard--alt .pfBulletList li svg { color: #e11d48; }
@media (max-width: 760px) { .pfVersusGrid { grid-template-columns: 1fr; } }

/* Alternating light band so stacked compare-page sections don't read as one
   endless white scroll. */
.pfCompareBand { background: #fafafb; border-top: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; }

/* Blog article prose (/blog/*) — output of the markdown renderer in
   seo-pages.mjs (renderMarkdownBody + its directive helpers). Class names
   here must stay in lockstep with that function's output since it emits
   these literally; nothing here is dead styling for unrelated markup. */
.pfArticleShell { width: min(720px, 100%); margin-inline: auto; }
.pfArticleBody { color: #0b1020; }
.pfArticleBody > :first-child { margin-top: 0; }
.pfArticleBody h2, .pfArticleBody h3, .pfArticleBody h4 { margin: 34px 0 14px; line-height: 1.15; text-wrap: balance; display: flex; align-items: center; }
.pfArticleBody h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); }
.pfArticleBody h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
.pfArticleBody h4 { font-size: 1.1rem; }
.pfArticleBody p, .pfArticleBody li { font-size: clamp(17px, 2vw, 19px); line-height: 1.8; }
.pfArticleBody p { margin: 0 0 18px; color: #0b1020; }
.pfArticleBody a { color: #2E31FF; text-decoration: underline; text-underline-offset: .15em; }
.pfArticleBody strong { font-weight: 700; }
.pfArticleBody em { font-style: italic; }
.pfArticleBody code { padding: .12em .36em; border-radius: 8px; background: rgba(15,23,42,.06); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .92em; }

.pfArticleList { margin: 0 0 22px; padding-left: 1.3rem; }
.pfArticleList li { margin-bottom: 10px; color: #0b1020; }

.pfArticleDivider { width: 100%; height: 1px; margin: 30px 0; border: 0; background: var(--pf-line); }

.pfArticleQuote { margin: 24px 0; padding: 2px 0 2px 18px; border-left: 3px solid #0b1020; }
.pfArticleQuote p { margin: 0; color: #0b1020; font-weight: 650; }

.pfArticleCode {
  margin: 8px 0 22px; padding: 18px 20px; border-radius: 20px;
  background: #0a0a0a; color: #e8eaf0; overflow-x: auto;
}
.pfArticleCode code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13.5px; line-height: 1.6; background: none; padding: 0; color: inherit;
}

.pfArticleFigure { margin: 32px 0; }
.pfArticleFigure img { width: 100%; display: block; border-radius: 20px; border: 1px solid var(--pf-line); background: #fbfbfc; }
.pfArticleFigure figcaption { margin-top: 10px; color: #657089; font-size: 14px; line-height: 1.5; text-align: center; }

.pfArticleH2Icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; margin-right: 14px; border-radius: 12px;
  color: #d61f1f; background: rgba(255,49,49,.09); border: 1px solid rgba(255,49,49,.16);
}
.pfArticleH2Icon svg { width: 21px; height: 21px; }

.pfArticleTakeaways {
  margin: 28px 0 32px; padding: 22px 24px; border-radius: 18px;
  border: 1px solid rgba(255,49,49,.18);
  background: linear-gradient(180deg, rgba(255,49,49,.07), rgba(255,49,49,.025));
}
.pfArticleTakeaways__head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: #d61f1f;
}
.pfArticleTakeaways__head svg { width: 18px; height: 18px; }
.pfArticleTakeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pfArticleTakeaways li { display: flex; gap: 11px; align-items: flex-start; margin: 0; font-size: 16px; line-height: 1.55; color: #0b1020; }
.pfArticleTakeaways li svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; color: #d61f1f; }

.pfArticleCardGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin: 28px 0; }
.pfArticleIconCard {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px;
  border: 1px solid var(--pf-line); background: #fbfbfc;
  box-shadow: 0 1px 2px rgba(23,32,51,.04), 0 12px 30px rgba(23,32,51,.05);
}
.pfArticleIconCard__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 13px; color: #fff; background: linear-gradient(180deg, #ff4d4d 0%, #e11d1d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 18px rgba(225,29,29,.26);
}
.pfArticleIconCard__icon svg { width: 22px; height: 22px; }
.pfArticleIconCard__body h4 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: #0b1020; }
.pfArticleIconCard__body p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #657089; }

.pfArticleCallout {
  display: flex; gap: 14px; align-items: flex-start; margin: 24px 0; padding: 18px 20px;
  border-radius: 16px; border: 1px solid var(--pf-line); border-left: 3px solid #ff3131; background: #fbfbfc;
}
.pfArticleCallout__icon {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; color: #d61f1f; background: rgba(255,49,49,.09);
}
.pfArticleCallout__icon svg { width: 19px; height: 19px; }
.pfArticleCallout__body p { margin: 0; font-size: 16px; line-height: 1.6; color: #0b1020; }
.pfArticleCallout--tip { border-left-color: #d61f1f; }
.pfArticleCallout--warn { border-left-color: #d9822b; }
.pfArticleCallout--warn .pfArticleCallout__icon { color: #b5641a; background: rgba(217,130,43,.12); }
.pfArticleCallout--note { border-left-color: #657089; }
.pfArticleCallout--note .pfArticleCallout__icon { color: #4a5568; background: rgba(101,112,137,.12); }

.pfArticleBody .pfTableWrap { margin: 26px 0 30px; }
.pfArticleBody .pfCompareTable th, .pfArticleBody .pfCompareTable td { font-size: 15px; }
.pfArticleBody .pfCompareTable td:first-child { color: #0b1020; font-weight: 650; }

@media (max-width: 720px) {
  .pfArticleBody p, .pfArticleBody li { font-size: 16px; }
  .pfArticleH2Icon { width: 32px; height: 32px; margin-right: 10px; }
  .pfArticleH2Icon svg { width: 17px; height: 17px; }
  .pfArticleCardGrid { grid-template-columns: 1fr; }
}

/* Blog hub + related-post cards (/blog, and "more from the blog" strips). */
.pfBlogGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pfBlogCard {
  display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: 20px;
  border: 1px solid var(--pf-line); background: #fbfbfc;
}
.pfBlogThumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; border: 1px solid var(--pf-line); background: #fff; }
.pfBlogThumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pfBlogMeta { display: flex; gap: 8px; flex-wrap: wrap; }
.pfBlogBadge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #eef0ff; color: #2E31FF; font-size: 12px; font-weight: 600; }
.pfBlogCardBody { display: grid; gap: 8px; }
.pfBlogCardBody strong { font-size: 17px; line-height: 1.3; color: #0b1020; }
.pfBlogCardBody p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #505b72; }
.pfBlogCardFooter { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pfBlogCardFooter span { color: #657089; font-size: 13px; }
@media (max-width: 880px) {
  .pfBlogGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pfBlogGrid { grid-template-columns: 1fr; }
}

.pfBlogPagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.pfBlogPaginationPages { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pfBlogPagination a, .pfBlogPaginationCurrent, .pfBlogPaginationEdge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--pf-line); color: #0b1020; text-decoration: none;
}
.pfBlogPaginationCurrent { background: #0b1020; color: #fff; border-color: #0b1020; }
.pfBlogPaginationDisabled { opacity: .45; }

/* Slack landing page (/slack) — official "Add to Slack" badge sizing per
   Slack's own brand asset, and the full-width preview screenshots used in
   the feature/step/privacy/support cards (not small icons, despite the
   generic-sounding class name). */
.slackOfficialInstallButton { display: inline-flex; align-items: center; width: 174px; height: 50px; transition: transform 180ms ease, filter 180ms ease; }
.slackOfficialInstallButton:hover { transform: translateY(-1px); filter: brightness(.98); }
.slackOfficialInstallButton img { width: 174px; height: 50px; display: block; }
.pfSlackIcon { width: 100%; height: 150px; display: block; margin: -10px 0 4px; object-fit: contain; object-position: center; border-radius: 0; }
@media (max-width: 720px) {
  .pfSlackIcon { height: 120px; }
}

/* Hero rail frame for platforms beyond Instagram — same card shape and
   avatar-fallback approach as the real dashboard composer's post preview
   (.pvX/.pvCard/.pvAvatarFallback in dashboard.css), ported here rather
   than linked, since this is a different stylesheet with its own class
   prefix convention. Letter avatar + real per-platform action icon set,
   no photo asset required (matches how the real composer preview falls
   back when an account has no photo), so this works for any platform
   without needing new illustration/photography. */
.pfAvatarNeutral {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #d7dbe6; color: #475467; font-size: 15px; font-weight: 700;
}
/* .pfFrame's shared "height: 100%" stretches every card to the full
   470px rail row (right, so post/reel cards read as one clean band) — but
   a tweet card's real content is much shorter than that, so stretching it
   left a large empty gap under the text. Override to a natural height and
   center it in the row instead of pinning it to the top. Width is sized to
   the real composer preview's own card (.pvCard's 380px max-width in
   dashboard.css), not Instagram's narrower 258px post card — at the
   rail's shared .5 zoom, 258px read as small and left the hero band
   looking mostly empty around the cards. */
.pfFrame.pfPostX { height: auto; align-self: center; }
.pfPostX { width: 380px; padding: 20px; background: #fff; border: 1px solid var(--pf-line); border-radius: 20px; text-align: left; }
.pfPostXRow { display: flex; gap: 14px; }
.pfPostXBody { min-width: 0; flex: 1; }
.pfPostXName { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.pfPostXName strong { font-size: 18px; color: #0b1020; }
.pfPostXName span { color: #8a93a6; font-size: 16px; }
.pfPostXText { margin: 5px 0 14px; font-size: 17px; line-height: 1.4; color: #1b2233; white-space: pre-wrap; }
.pfPostXMedia { margin: 0 0 14px; border-radius: 18px; overflow: hidden; border: 1px solid var(--pf-line); }
.pfPostXMedia img { width: 100%; max-height: 210px; object-fit: cover; display: block; }
.pfPostXActions { display: flex; justify-content: space-between; max-width: 300px; color: #5b647a; }
.pfPostXActions span { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; }
.pfPostXActions svg { width: 19px; height: 19px; }

/* LinkedIn post card — ported from previewLinkedIn()/.pvLi* in dashboard.js
   /.css, same 380px real-composer width and centered-auto-height fix as
   .pfPostX from the start (see the note above .pfFrame.pfPostX). Media
   bleeds to the card edges with a top border, matching .pvLiMedia exactly
   (LinkedIn's real preview has no rounded/inset media, unlike X's). */
.pfFrame.pfPostLi { height: auto; align-self: center; }
.pfPostLi { width: 380px; padding: 20px; background: #fff; border: 1px solid var(--pf-line); border-radius: 20px; text-align: left; }
.pfPostLiRow { display: flex; gap: 12px; }
.pfPostLiName strong { font-size: 18px; color: #0b1020; }
.pfPostLiSub { font-size: 15px; color: #8a93a6; }
.pfPostLiText { margin: 14px 0; font-size: 17px; line-height: 1.45; color: #1b2233; white-space: pre-wrap; }
.pfPostLiMedia { margin: 0 -20px; border-top: 1px solid var(--pf-line); }
.pfPostLiMedia img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.pfPostLiActions { display: flex; justify-content: space-between; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--pf-line); color: #5b647a; }
.pfPostLiActions span { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; }
.pfPostLiActions svg { width: 19px; height: 19px; }

/* Facebook post card — ported from previewFacebook()/.pvFb* in dashboard.js
   /.css. Same shape family as LinkedIn's card (stacked name, full-bleed
   media, top-border action row) but simpler: no connection-degree line,
   only three actions spaced evenly instead of edge to edge. */
.pfFrame.pfPostFb { height: auto; align-self: center; }
.pfPostFb { width: 380px; padding: 20px; background: #fff; border: 1px solid var(--pf-line); border-radius: 20px; text-align: left; }
.pfPostFbRow { display: flex; gap: 12px; }
.pfPostFbName strong { font-size: 18px; color: #0b1020; }
.pfPostFbSub { font-size: 15px; color: #8a93a6; }
.pfPostFbText { margin: 14px 0; font-size: 17px; line-height: 1.45; color: #1b2233; white-space: pre-wrap; }
.pfPostFbMedia { margin: 0 -20px; }
.pfPostFbMedia img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.pfPostFbActions { display: flex; justify-content: space-around; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--pf-line); color: #5b647a; }
.pfPostFbActions span { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; }
.pfPostFbActions svg { width: 18px; height: 18px; }

/* YouTube watch card — ported from previewYouTube()/.pvYt* in dashboard.js
   /.css: 16:9 thumbnail over a channel row (avatar, title, channel/views/
   age), unlike every other new card type this session it's not a text-post
   shape at all, so it gets its own layout rather than reusing pfPostX/Li/Fb's
   stacked-row structure. 360px matches .pvYt's own max-width exactly. */
.pfFrame.pfPostYt { height: auto; align-self: center; }
.pfPostYt { width: 360px; background: #fff; border: 1px solid var(--pf-line); border-radius: 16px; overflow: hidden; text-align: left; }
.pfPostYtThumb { aspect-ratio: 16/9; background: #000; }
.pfPostYtThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfPostYtMeta { display: flex; gap: 12px; padding: 14px; }
.pfPostYtMeta .pfAvatarNeutral { flex: 0 0 auto; }
.pfPostYtTitle { font-size: 16px; font-weight: 700; line-height: 1.3; color: #0b1020; }
.pfPostYtSub { font-size: 13px; margin-top: 5px; color: #8a93a6; }

/* Reddit post card — no real composer preview to port (dashboard.js has no
   "reddit" case), a new design built around Reddit's title-first convention
   rather than adapted from another platform's card. 380px matches the same
   real-composer-scale width every other text-first card on this page uses. */
.pfFrame.pfPostReddit { height: auto; align-self: center; }
.pfPostReddit { width: 380px; padding: 18px 20px; background: #fff; border: 1px solid var(--pf-line); border-radius: 20px; text-align: left; }
.pfPostRedditSub { font-size: 13px; color: #8a93a6; font-weight: 600; }
.pfPostRedditTitle { margin-top: 8px; font-size: 17px; font-weight: 700; line-height: 1.35; color: #0b1020; }
.pfPostRedditMedia { margin-top: 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--pf-line); }
.pfPostRedditMedia img { width: 100%; max-height: 190px; object-fit: cover; display: block; }
.pfPostRedditActions { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pf-line); color: #5b647a; }
.pfPostRedditActions span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.pfPostRedditActions svg { width: 18px; height: 18px; }
.pfPostRedditVote { color: #ff4500; }

/* Pinterest pin card — no real composer preview to port (same gap noted
   above .pfPostReddit). Tall portrait shape, fills the rail height like
   .pfReel does rather than the auto-height/centered text-card pattern. */
.pfPostPin { width: 240px; display: flex; flex-direction: column; text-align: left; }
.pfPostPinMedia { flex: 1; min-height: 0; position: relative; border-radius: 20px; overflow: hidden; background: #f1f2f5; }
.pfPostPinMedia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfPostPinSave { position: absolute; top: 12px; right: 12px; background: #e60023; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 20px; }
.pfPostPinTitle { margin-top: 10px; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #1b2233; }
.pfPostPinBoard { margin-top: 4px; font-size: 12px; color: #8a93a6; }

/* WordPress blog-post card — no real composer preview to port (same gap
   noted above .pfPostReddit). Ordinary blog-card shape: image, site label,
   headline, excerpt. 340px, narrower than the 380px social-post cards since
   a blog card reads better a little tighter with a 16:9-ish image on top. */
.pfFrame.pfPostWp { height: auto; align-self: center; }
.pfPostWp { width: 340px; background: #fff; border: 1px solid var(--pf-line); border-radius: 16px; overflow: hidden; text-align: left; }
.pfPostWpMedia { background: #f1f2f5; }
.pfPostWpMedia img { width: 100%; height: 100%; max-height: 180px; object-fit: cover; display: block; }
.pfPostWpBody { padding: 16px 18px 18px; }
.pfPostWpSite { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6f6af8; }
.pfPostWpTitle { margin-top: 7px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #0b1020; }
.pfPostWpExcerpt { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: #5b647a; }

/* Discord webhook message card — no real composer preview to port (same gap
   noted above .pfPostReddit). Dark theme + blurple #5865F2 on purpose (see
   the note above discordFrame() in platform-pages.mjs). */
.pfFrame.pfPostDiscord { height: auto; align-self: center; }
.pfPostDiscord { width: 360px; padding: 16px 18px; background: #313338; border-radius: 16px; text-align: left; }
.pfPostDiscordRow { display: flex; gap: 12px; }
.pfPostDiscordName { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pfPostDiscordName strong { font-size: 15px; color: #fff; }
.pfPostDiscordBadge { background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; line-height: 1.5; }
.pfPostDiscordTime { font-size: 11.5px; color: #949ba4; }
.pfPostDiscordText { margin-top: 4px; font-size: 15px; line-height: 1.45; color: #dbdee1; white-space: pre-wrap; }
.pfPostDiscordMedia { margin-top: 10px; border-radius: 8px; overflow: hidden; }
.pfPostDiscordMedia img { width: 100%; max-height: 190px; object-fit: cover; display: block; }

/* Telegram channel post card — no real composer preview either. Light +
   Telegram blue, deliberately the opposite theme from the Discord card
   right next to it in the platform lineup. */
.pfFrame.pfPostTg { height: auto; align-self: center; }
.pfPostTg { width: 340px; padding: 18px 20px; background: #fff; border: 1px solid var(--pf-line); border-radius: 20px; text-align: left; }
.pfPostTgRow { display: flex; align-items: center; gap: 10px; }
.pfPostTgName strong { font-size: 15.5px; color: #0b1020; }
.pfPostTgText { margin-top: 10px; font-size: 15.5px; line-height: 1.45; color: #1b2233; white-space: pre-wrap; }
.pfPostTgMedia { margin-top: 10px; border-radius: 12px; overflow: hidden; }
.pfPostTgMedia img { width: 100%; max-height: 190px; object-fit: cover; display: block; }
.pfPostTgMeta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 10px; color: #229ed9; }
.pfPostTgMeta svg { width: 14px; height: 14px; }
.pfPostTgMeta small { font-size: 12px; font-weight: 600; }
.pfPostTgTime { margin-left: 6px; font-size: 12px; color: #8a93a6; }