/* ═══════════════════════════════════════════════════════════════════════
   Pixel Media — service page design system (flattened, static)
   Replaces the old _ds/ folder + support.js React runtime. No CDN, no JS.
   ═══════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root{
/* base palette */
--blue-50:#EEF4FF;--blue-100:#DCE8FF;--blue-300:#8FB4FD;--blue-500:#3D82FA;--blue-600:#2472F9;--blue-700:#1B5FDD;--blue-800:#1749A8;
--ink-900:#0B1220;--ink-800:#151F31;--ink-700:#33415A;--ink-600:#5B6B84;--ink-500:#74839A;--ink-400:#8B98AC;--ink-300:#AEB9C9;
--navy-900:#070E1E;--navy-850:#09122A;--navy-800:#0C1730;--navy-700:#141F3D;
--gray-50:#F9FAFD;--gray-100:#F2F4F9;--gray-200:#E8ECF3;--gray-300:#DDE3EC;--white:#FFFFFF;

/* light surfaces */
--brand:var(--blue-600);--brand-hover:var(--blue-700);--brand-press:var(--blue-800);--brand-tint:var(--blue-50);
--bg-page:var(--gray-50);--surface-card:var(--white);--surface-raised:var(--white);--surface-sunken:var(--gray-100);
--text-primary:var(--ink-900);--text-secondary:var(--ink-600);--text-tertiary:var(--ink-400);--text-accent:var(--blue-600);--text-on-brand:var(--white);
--border-subtle:var(--gray-200);--border-strong:var(--gray-300);--border-hairline:#EDF0F6;

/* dark surfaces */
--bg-dark:var(--navy-900);--surface-dark-card:var(--navy-800);--surface-dark-footer:#070F1B;
--text-dark-primary:var(--white);--text-dark-secondary:#94A3BE;--text-dark-tertiary:#66748E;
--border-dark:rgba(255,255,255,.09);--border-dark-strong:rgba(255,255,255,.14);

/* type */
--font-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--fs-display:56px;--lh-display:1.04;--ls-display:-0.028em;--fw-display:800;
--fs-h2:34px;--lh-h2:1.18;--ls-h2:-0.022em;
--fs-h3:19px;--lh-h3:1.35;--ls-h3:-0.012em;
--fs-h4:16px;--lh-h4:1.4;--ls-h4:-0.006em;
--fs-body:16px;--lh-body:1.72;
--fs-body-sm:14px;--lh-body-sm:1.62;
--fs-caption:13px;--lh-caption:1.55;
--fs-nav:15px;--fs-button:15px;--fs-button-sm:13px;
--fs-eyebrow:12px;--ls-eyebrow:0.18em;
--fs-mono-label:11.5px;--ls-mono-label:0.14em;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;

/* space */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:28px;--s-8:32px;
--s-10:40px;--s-12:48px;--s-14:56px;--s-16:64px;--s-20:80px;--s-24:96px;--s-30:120px;
--space-section:96px;--space-section-tight:64px;
--space-heading-body:20px;--space-body-actions:32px;--space-eyebrow-heading:14px;
--card-pad:24px;--card-pad-lg:28px;
--container-max:1200px;--container-gutter:40px;--measure:560px;--measure-narrow:420px;
--header-h:64px;

/* radius + shadow */
--r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:12px;--r-2xl:14px;--r-pill:999px;
--shadow-card:0 1px 2px rgba(11,18,32,.04),0 8px 24px -14px rgba(11,18,32,.10);
--shadow-browser:0 1px 3px rgba(11,18,32,.06),0 20px 44px -22px rgba(11,18,32,.20);
--shadow-button:0 1px 2px rgba(11,18,32,.06);
--shadow-none:none;
--ease:cubic-bezier(.22,.61,.36,1);--dur:140ms;
}

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p{margin:0}
dl,dd,ol,ul{margin:0}
dd{margin-inline-start:0}
img,video{max-width:100%}
a{color:var(--brand);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--brand-hover)}
button{font-family:inherit}
::selection{background:var(--blue-100);color:var(--ink-900)}

.pm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pm-skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.pm-skip:focus{left:0;color:#fff}

/* ── shared header ─────────────────────────────────────────────────── */
.pm-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border-subtle)}
.pm-head__in{max-width:var(--container-max);margin:0 auto;padding:0 32px;height:62px;
  display:flex;align-items:center;gap:32px}
.pm-brand{display:flex;align-items:center;margin-right:auto}
.pm-brand img{height:30px;width:auto;display:block}
.pm-nav{display:flex;align-items:center;gap:30px}
.pm-nav>a,.drop__t{font-size:var(--fs-nav);font-weight:500;color:var(--text-secondary);
  letter-spacing:-0.005em;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.pm-nav>a:hover,.drop__t:hover{color:var(--brand)}
.drop{position:relative}
.drop__t svg{width:10px;height:6px;flex:none;transition:transform var(--dur) var(--ease)}
.drop.is-open .drop__t svg{transform:rotate(180deg)}
.drop.is-open .drop__t{color:var(--brand)}
.drop__m{position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-4px);width:340px;max-width:92vw;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:7px;
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.drop.is-open .drop__m{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop__m a{display:block;padding:9px 12px;border-radius:8px;color:var(--text-primary)}
.drop__m a:hover,.drop__m a:focus-visible{background:var(--gray-50);color:var(--brand)}
.drop__m b{display:block;font-size:14px;font-weight:600;letter-spacing:-0.008em}
.drop__m small{display:block;margin-top:2px;font-size:12px;color:var(--text-tertiary);line-height:1.5}

/* ── buttons ───────────────────────────────────────────────────────── */
.pm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:600;letter-spacing:-0.006em;white-space:nowrap;
  border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pm-btn--md{font-size:var(--fs-button);padding:11px 18px}
.pm-btn--lg{font-size:var(--fs-button);padding:13px 22px}
.pm-btn--primary{background:var(--brand);color:var(--text-on-brand);box-shadow:var(--shadow-button)}
.pm-btn--primary:hover{background:var(--brand-hover);color:var(--text-on-brand)}
.pm-btn--primary:active{background:var(--brand-press)}
.pm-btn--secondary{background:var(--surface-card);color:var(--text-primary);border-color:var(--border-strong)}
.pm-btn--secondary:hover{background:var(--gray-50);color:var(--brand);border-color:var(--brand)}

/* ── layout helpers ────────────────────────────────────────────────── */
.pm-wrap{max-width:var(--container-max);margin:0 auto;padding-left:32px;padding-right:32px}
.pm-eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--brand);font-weight:500}
.pm-eyebrow--dark{color:var(--blue-500)}
.pm-crumb{font-family:var(--font-mono);font-size:var(--fs-mono-label);letter-spacing:var(--ls-mono-label);
  color:var(--text-tertiary);display:flex;gap:8px;align-items:center}
.pm-h1{margin:18px 0 0;font-size:var(--fs-display);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);font-weight:var(--fw-black);max-width:760px}
.pm-h1 em{font-style:normal;color:var(--brand)}
.pm-h2{margin:16px 0 0;font-size:var(--fs-h2);line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);font-weight:var(--fw-black)}
.pm-lede{margin:24px 0 0;max-width:620px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-secondary)}
.pm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* metrics strip */
.pm-metrics{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--r-xl);box-shadow:var(--shadow-card);overflow:hidden}
.pm-metrics>div{padding:22px 26px}
.pm-metrics>div+div{border-left:1px solid var(--border-hairline)}
.pm-metrics dt,.pm-metrics__k{font-family:var(--font-mono);font-size:var(--fs-mono-label);
  letter-spacing:var(--ls-mono-label);text-transform:uppercase;color:var(--text-tertiary)}
.pm-metrics__v{margin-top:10px;font-size:20px;font-weight:700;letter-spacing:-0.018em}

/* copy + preview rows */
.pm-row{display:grid;grid-template-columns:320px minmax(0,1fr);gap:40px;
  padding:28px 0;border-bottom:1px solid var(--border-subtle)}
.pm-row h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:700}
.pm-row p{max-width:620px;font-size:15px;line-height:1.7;color:var(--text-secondary)}

.pm-build{display:grid;grid-template-columns:320px minmax(0,1fr);gap:56px;padding:48px 0;border-top:1px solid var(--border-subtle)}
.pm-build:first-child{padding-top:0;border-top:0}
.pm-build:last-child{padding-bottom:0}
.pm-build h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:700}
.pm-build p{margin:14px 0 0;max-width:320px;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--text-secondary)}
.pm-frame{border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;
  background:var(--surface-card);box-shadow:var(--shadow-browser)}
.pm-frame--dark{background:var(--navy-900)}
.pm-frame img,.pm-frame video{display:block;width:100%;height:auto}

/* ad-account screenshots */
.pm-shots{margin:48px 0 0;display:flex;flex-direction:column;gap:44px}
.pm-shot{border:1px solid var(--border-subtle);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-card);box-shadow:var(--shadow-card)}
.pm-shot img{display:block;width:100%;height:auto}

/* dark process band */
.pm-dark{margin-top:104px;background:var(--bg-dark)}
.pm-dark .pm-wrap{padding-top:88px;padding-bottom:96px}
.pm-dark .pm-h2{color:var(--text-dark-primary)}
.pm-steps{margin:44px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pm-step{background:var(--surface-dark-card);border:1px solid var(--border-dark);
  border-radius:12px;padding:26px 24px 30px}
.pm-step__n{font-family:var(--font-mono);font-size:var(--fs-mono-label);
  letter-spacing:var(--ls-mono-label);text-transform:uppercase;color:var(--blue-500)}
.pm-step h3{margin:14px 0 0;font-size:var(--fs-h3);letter-spacing:var(--ls-h3);
  font-weight:700;color:var(--text-dark-primary)}
.pm-step p{margin:12px 0 0;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--text-dark-secondary)}

/* closing CTA */
.pm-cta{display:grid;grid-template-columns:440px minmax(0,1fr);gap:80px;align-items:start}
.pm-svc{margin-top:18px;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);box-shadow:var(--shadow-card);overflow:hidden}
.pm-svc a{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px 22px;font-size:15px;font-weight:500;color:var(--text-primary)}
.pm-svc a+a{border-top:1px solid var(--border-hairline)}
.pm-svc a:hover{background:var(--gray-50);color:var(--brand)}
.pm-svc span:last-child{color:var(--text-tertiary)}
.pm-svc a:hover span:last-child{color:var(--brand)}

/* footer — matches .foot in styles.css so all pages end identically */
.pm-foot{margin-top:96px;background:var(--ink-900);color:#fff;padding:44px 0}
.pm-foot .pm-wrap{display:grid;gap:8px}
.pm-foot__b{font-family:var(--font-sans);font-weight:800;font-size:20px;letter-spacing:-.01em}
.pm-foot__t{font:400 13px/1 var(--font-mono);color:var(--text-dark-secondary);letter-spacing:.06em}
.pm-foot__l{margin-top:6px}
.pm-foot__l a{color:#6FA6FF;font:500 14px/1.6 var(--font-sans)}
.pm-foot__l a:hover{color:#6FA6FF;text-decoration:underline}
.pm-foot__c{margin-top:14px;font:400 12.5px/1.6 var(--font-sans);color:var(--text-dark-secondary);max-width:70ch}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:980px){
  .pm-metrics{grid-template-columns:repeat(2,1fr)}
  .pm-metrics>div:nth-child(3){border-left:0}
  .pm-metrics>div:nth-child(n+3){border-top:1px solid var(--border-hairline)}
  .pm-build{grid-template-columns:1fr;gap:20px}
  .pm-row{grid-template-columns:1fr;gap:10px}
  .pm-steps{grid-template-columns:repeat(2,1fr)}
  .pm-cta{grid-template-columns:1fr;gap:44px}
}
@media (max-width:760px){
  .pm-nav{display:none}
  .pm-head__in,.pm-wrap{padding-left:20px;padding-right:20px}
  :root{--fs-display:36px;--fs-h2:26px}
  .pm-steps{grid-template-columns:1fr}
  .pm-metrics{grid-template-columns:1fr}
  .pm-metrics>div+div{border-left:0;border-top:1px solid var(--border-hairline)}
  .pm-shot{overflow-x:auto}
  .pm-shot img{min-width:720px;max-width:none}
  .pm-dark{margin-top:64px}
}

/* ── FAQ (AEO) ──────────────────────────────────────────────────────
   Answers live in the HTML so answer engines can extract them, and the
   questions are phrased the way people actually ask them. */
.faq{max-width:820px}
.faq__i{border-bottom:1px solid var(--border-subtle)}
.faq__i:first-child{border-top:1px solid var(--border-subtle)}
.faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:20px 0;cursor:pointer;list-style:none;font-weight:600;font-size:16.5px;
  letter-spacing:-.008em;color:var(--text-primary)}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--brand)}
.faq__q::after{content:"";flex:none;width:11px;height:11px;margin-top:5px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.faq__i[open] .faq__q::after{transform:rotate(-135deg);margin-top:9px}
.faq__i[open] .faq__q{color:var(--brand)}
.faq__a{padding:0 40px 22px 0;margin:0;color:var(--text-secondary);font-size:15px;line-height:1.72}
.faq__a p+p{margin-top:12px}
.faq__a strong{color:var(--text-primary);font-weight:600}