/* Final Figma parity layer. The visible surface comes from editable SVG exports;
   semantic HTML remains in the document for links, keyboard access and hand-off. */
@layer figma-parity {
  .site-nav {
    overflow: hidden;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .role-page .site-nav { background-image: url("vector/static/page-role-nav-desktop.svg?v=20260729-9"); }
  .creator-page .site-nav { background-image: url("vector/static/page-creator-nav-desktop.svg?v=20260729-9"); }
  .advertiser-page .site-nav { background-image: url("vector/static/page-advertiser-nav-desktop.svg?v=20260729-9"); }
  /* Keep the real navigation as an accessible hit layer over the Figma
     surface. Individual controls appear only while keyboard-focused. */
  .site-nav .nav-inner { opacity: 1; }
  .site-nav .nav-inner > .brand,
  .site-nav .menu-button,
  .site-nav .nav-menu > * { opacity: 0; }
  .site-nav .nav-inner > .brand:focus-visible,
  .site-nav .menu-button:focus-visible,
  .site-nav .nav-menu > *:focus-visible { opacity: 1; }

  .figma-surface,
  .role-page .role-hero,
  .role-page .role-grid,
  .creator-page .hero,
  .creator-page #payment,
  .creator-page #verification,
  .creator-page #catalog,
  .creator-page #offer,
  .creator-page #status,
  .creator-page .final-cta,
  .advertiser-page .hero,
  .advertiser-page #payment,
  .advertiser-page #start,
  .advertiser-page #create,
  .advertiser-page #launch,
  .advertiser-page #videos,
  .advertiser-page #manage,
  .advertiser-page .final-cta {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
  }
  .advertiser-page #launch { image-rendering: -webkit-optimize-contrast; }

  .role-page .role-hero > *,
  .role-page .role-grid > *,
  .creator-page .hero > *,
  .creator-page #payment > *,
  .creator-page #verification > *,
  .creator-page #catalog > *,
  .creator-page #offer > *,
  .creator-page #status > *,
  .creator-page .final-cta > *,
  .advertiser-page .hero > *,
  .advertiser-page #payment > *,
  .advertiser-page #start > *,
  .advertiser-page #create > *,
  .advertiser-page #launch > *,
  .advertiser-page #videos > *,
  .advertiser-page #manage > *,
  .advertiser-page .final-cta > * {
    opacity: 0;
    pointer-events: none;
  }

  /* The visible surface is the exported artboard, and it already shows every
     screen at full size. The semantic zoom buttons sit at their own invisible
     layout coordinates, which do not match the artwork — so they must not
     capture the pointer (they used to swallow clicks over unrelated artwork and
     show a magnifier cursor). The mobile catalog is the one place where the
     button itself is the visible artwork, so it keeps working. */
  :is(.creator-page, .advertiser-page) [data-lightbox] {
    cursor: default;
    pointer-events: none;
  }
  :is(.creator-page, .advertiser-page) .catalog-mobile [data-lightbox] {
    cursor: zoom-in;
    pointer-events: auto;
  }
  :is(.creator-page, .advertiser-page) .final-cta .final-route { display: none !important; }
  :is(.creator-page, .advertiser-page) .parity-lightbox-focus-marker {
    position: absolute;
    z-index: 24;
    display: block;
    opacity: 1 !important;
    border: 3px solid #111827;
    border-radius: 22px;
    box-shadow: 0 0 0 6px #fff, 0 12px 34px rgba(17,24,39,.22);
    pointer-events: none;
  }

  /* The semantic HTML underneath the exact SVG surface is intentionally
     transparent. Stop its former decorative loops so only the visible,
     section-specific motion layer consumes animation frames. */
  :is(.role-page, .creator-page, .advertiser-page) :is(
    .hero-art-main,
    .hero-route,
    .flow-art,
    .pulse-dot,
    .layered-scene .scene-layer-a,
    .layered-scene .scene-layer-b,
    .layered-scene .scene-layer-c
  ),
  :is(.role-page, .creator-page, .advertiser-page) :is(
    .cpm-art,
    .hero-art,
    .final-cta
  )::before,
  :is(.role-page, .creator-page, .advertiser-page) :is(
    .cpm-art,
    .hero-art,
    .final-cta
  )::after {
    animation: none !important;
  }
  :is(.role-page, .creator-page, .advertiser-page) .layered-scene .scene-layer {
    will-change: auto;
  }

  .parity-motion {
    --pm-lime: #b7ed00;
    --pm-dark: #111827;
    --pm-p1x: var(--pm-p1x-d, -100px);
    --pm-p1y: var(--pm-p1y-d, -100px);
    --pm-p2x: var(--pm-p2x-d, -100px);
    --pm-p2y: var(--pm-p2y-d, -100px);
    --pm-p3x: var(--pm-p3x-d, -100px);
    --pm-p3y: var(--pm-p3y-d, -100px);
    --pm-p4x: var(--pm-p4x-d, -100px);
    --pm-p4y: var(--pm-p4y-d, -100px);
    --pm-p5x: var(--pm-p5x-d, -100px);
    --pm-p5y: var(--pm-p5y-d, -100px);
    --pm-area-x: var(--pm-area-x-d, 0%);
    --pm-area-y: var(--pm-area-y-d, 0%);
    --pm-area-w: var(--pm-area-w-d, 0%);
    --pm-area-h: var(--pm-area-h-d, 0%);
    position: absolute;
    z-index: 6;
    inset: 0 auto 0 50%;
    width: min(100%, 1440px);
    overflow: hidden;
    opacity: 1 !important;
    pointer-events: none;
    transform: translateX(-50%);
  }
  .parity-motion i,
  .parity-motion i::before,
  .parity-motion i::after {
    box-sizing: border-box;
    animation-play-state: paused !important;
  }
  .parity-motion i {
    position: absolute;
    display: none;
    pointer-events: none;
    will-change: auto;
  }
  .parity-motion[data-active] i { will-change: transform, opacity; }
  .parity-motion[data-active] i,
  .parity-motion[data-active] i::before,
  .parity-motion[data-active] i::after { animation-play-state: running !important; }

  .parity-motion .pm-node {
    width: 18px;
    height: 18px;
    margin: -9px;
    border: 2px solid var(--pm-dark);
    border-radius: 50%;
    background: var(--pm-lime);
    color: var(--pm-dark);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .14);
    opacity: 0;
  }
  .parity-motion .pm-node::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 800 11px/1 Arial, sans-serif;
  }
  .parity-motion .pm-node-a { left: var(--pm-p1x); top: var(--pm-p1y); }
  .parity-motion .pm-node-b { left: var(--pm-p2x); top: var(--pm-p2y); }
  .parity-motion .pm-node-c { left: var(--pm-p3x); top: var(--pm-p3y); }
  .parity-motion .pm-node-d { left: var(--pm-p4x); top: var(--pm-p4y); }
  .parity-motion .pm-node-e { left: var(--pm-p5x); top: var(--pm-p5y); }

  .parity-motion .pm-halo,
  .parity-motion .pm-sweep,
  .parity-motion .pm-meter,
  .parity-motion .pm-meter-fill {
    left: var(--pm-area-x);
    top: var(--pm-area-y);
    width: var(--pm-area-w);
    height: var(--pm-area-h);
  }

  /* Role choice: two decisions breathe in turn; the hero gets a quiet orbit. */
  .parity-motion[data-motion="role-choice"] .pm-node-a,
  .parity-motion[data-motion="role-choice"] .pm-node-b,
  .parity-motion[data-motion="access-choice"] .pm-node-a,
  .parity-motion[data-motion="access-choice"] .pm-node-b {
    display: block;
    width: 34px;
    height: 34px;
    margin: -17px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(17,24,39,.24), 0 10px 24px rgba(17,24,39,.18);
    animation: pm-choice 5.2s cubic-bezier(.2,.8,.2,1) infinite;
  }
  .parity-motion[data-motion="role-choice"] .pm-node-b,
  .parity-motion[data-motion="access-choice"] .pm-node-b { animation-delay: 2.6s; }
  .parity-motion[data-motion="role-choice"] .pm-node::after,
  .parity-motion[data-motion="access-choice"] .pm-node::after { content: "✓"; font-size: 16px; }
  .parity-motion[data-motion="role-choice"] .pm-halo,
  .parity-motion[data-motion="access-choice"] .pm-halo {
    display: block;
    border: 2px dashed rgba(183,237,0,.7);
    border-radius: 999px;
    opacity: 0;
    animation: pm-orbit 7.2s ease-in-out infinite;
  }

  /* Hero artwork: independent star hits and a soft ring, not a moving box. */
  .parity-motion[data-motion="creator-hero"] .pm-node-a,
  .parity-motion[data-motion="creator-hero"] .pm-node-b,
  .parity-motion[data-motion="creator-hero"] .pm-node-c,
  .parity-motion[data-motion="advertiser-hero"] .pm-node-a,
  .parity-motion[data-motion="advertiser-hero"] .pm-node-b,
  .parity-motion[data-motion="advertiser-hero"] .pm-node-c {
    display: block;
    width: 14px;
    height: 14px;
    margin: -7px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
    box-shadow: none;
    animation: pm-star 4.8s ease-in-out infinite;
  }
  .parity-motion[data-motion="creator-hero"] .pm-node-b,
  .parity-motion[data-motion="advertiser-hero"] .pm-node-b { animation-delay: 1.6s; }
  .parity-motion[data-motion="creator-hero"] .pm-node-c,
  .parity-motion[data-motion="advertiser-hero"] .pm-node-c { animation-delay: 3.2s; }
  .parity-motion[data-motion="creator-hero"] .pm-halo,
  .parity-motion[data-motion="advertiser-hero"] .pm-halo {
    display: block;
    border: 2px solid rgba(183,237,0,.26);
    border-radius: 50%;
    opacity: 0;
    animation: pm-hero-halo 6.4s ease-in-out infinite;
  }

  /* CPM: three important values react in sequence; advertiser also gets a fill. */
  .parity-motion[data-motion="creator-cpm"] .pm-node-a,
  .parity-motion[data-motion="creator-cpm"] .pm-node-b,
  .parity-motion[data-motion="creator-cpm"] .pm-node-c,
  .parity-motion[data-motion="advertiser-cpm"] .pm-node-a,
  .parity-motion[data-motion="advertiser-cpm"] .pm-node-b,
  .parity-motion[data-motion="advertiser-cpm"] .pm-node-c {
    display: block;
    width: 28px;
    height: 28px;
    margin: -14px;
    border: 2px solid #fff;
    animation: pm-value 6s cubic-bezier(.2,.8,.2,1) infinite;
  }
  .parity-motion[data-motion="creator-cpm"] .pm-node-b,
  .parity-motion[data-motion="advertiser-cpm"] .pm-node-b { animation-delay: 1.5s; }
  .parity-motion[data-motion="creator-cpm"] .pm-node-c,
  .parity-motion[data-motion="advertiser-cpm"] .pm-node-c { animation-delay: 3s; }
  .parity-motion[data-motion="creator-cpm"] .pm-node-a::after,
  .parity-motion[data-motion="advertiser-cpm"] .pm-node-a::after { content: "₽"; }
  .parity-motion[data-motion="creator-cpm"] .pm-node-b::after,
  .parity-motion[data-motion="advertiser-cpm"] .pm-node-b::after { content: "▶"; font-size: 9px; }
  .parity-motion[data-motion="creator-cpm"] .pm-node-c::after,
  .parity-motion[data-motion="advertiser-cpm"] .pm-node-c::after { content: "↗"; }
  .parity-motion[data-motion="advertiser-cpm"] .pm-meter,
  .parity-motion[data-motion="advertiser-cpm"] .pm-meter-fill {
    display: block;
    border-radius: 999px;
    transform-origin: left center;
  }
  .parity-motion[data-motion="advertiser-cpm"] .pm-meter { background: rgba(17,24,39,.15); }
  .parity-motion[data-motion="advertiser-cpm"] .pm-meter-fill {
    background: var(--pm-lime);
    animation: pm-meter-fill 6s cubic-bezier(.16,1,.3,1) infinite;
  }

  /* Five-step instructions: one check per real step. */
  .parity-motion[data-motion="verify-steps"] .pm-node,
  .parity-motion[data-motion="launch-steps"] .pm-node,
  .parity-motion[data-motion="creator-check-list"] .pm-node,
  .parity-motion[data-motion="advertiser-check-list"] .pm-node {
    display: block;
  }
  .parity-motion[data-motion="verify-steps"] .pm-node {
    animation: pm-step 6.4s cubic-bezier(.16,1,.3,1) infinite;
  }
  .parity-motion[data-motion="launch-steps"] .pm-node {
    animation: pm-launch-step 7.2s cubic-bezier(.16,1,.3,1) infinite;
  }
  .parity-motion[data-motion="creator-check-list"] .pm-node {
    animation: pm-creator-check 6.8s cubic-bezier(.16,1,.3,1) infinite;
  }
  .parity-motion[data-motion="advertiser-check-list"] .pm-node {
    animation: pm-advertiser-check 7.4s cubic-bezier(.16,1,.3,1) infinite;
  }
  .parity-motion[data-motion="verify-steps"] .pm-node::after,
  .parity-motion[data-motion="launch-steps"] .pm-node::after,
  .parity-motion[data-motion="creator-check-list"] .pm-node::after,
  .parity-motion[data-motion="advertiser-check-list"] .pm-node::after { content: "✓"; }
  .parity-motion[data-motion="verify-steps"] .pm-node-b,
  .parity-motion[data-motion="launch-steps"] .pm-node-b,
  .parity-motion[data-motion="creator-check-list"] .pm-node-b,
  .parity-motion[data-motion="advertiser-check-list"] .pm-node-b { animation-delay: .8s; }
  .parity-motion[data-motion="verify-steps"] .pm-node-c,
  .parity-motion[data-motion="launch-steps"] .pm-node-c,
  .parity-motion[data-motion="creator-check-list"] .pm-node-c,
  .parity-motion[data-motion="advertiser-check-list"] .pm-node-c { animation-delay: 1.6s; }
  .parity-motion[data-motion="verify-steps"] .pm-node-d,
  .parity-motion[data-motion="launch-steps"] .pm-node-d,
  .parity-motion[data-motion="creator-check-list"] .pm-node-d,
  .parity-motion[data-motion="advertiser-check-list"] .pm-node-d { animation-delay: 2.4s; }
  .parity-motion[data-motion="verify-steps"] .pm-node-e,
  .parity-motion[data-motion="launch-steps"] .pm-node-e,
  .parity-motion[data-motion="creator-check-list"] .pm-node-e,
  .parity-motion[data-motion="advertiser-check-list"] .pm-node-e { animation-delay: 3.2s; }

  /* Catalog: a clipped sheen scans only the UI screenshot. */
  .parity-motion[data-motion$="-scan-catalog"] .pm-sweep {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(183,237,0,.2);
    border-radius: 24px;
    opacity: 0;
    animation: pm-scan-frame 6.8s ease-in-out infinite;
  }
  .parity-motion[data-motion$="-scan-catalog"] .pm-sweep::before {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -22%;
    width: 18%;
    background: linear-gradient(90deg, transparent, rgba(183,237,0,.25), rgba(255,255,255,.5), transparent);
    transform: skewX(-12deg) translateX(0);
    animation: pm-sheen 6.8s cubic-bezier(.16,1,.3,1) infinite;
  }
  .parity-motion[data-motion$="-scan-catalog"] .pm-node-a,
  .parity-motion[data-motion$="-scan-catalog"] .pm-node-b,
  .parity-motion[data-motion$="-scan-catalog"] .pm-node-c {
    display: block;
    width: 12px;
    height: 12px;
    margin: -6px;
    border: 2px solid #fff;
    animation: pm-catalog-hit 6.8s ease-out infinite;
  }
  .parity-motion[data-motion$="-scan-catalog"] .pm-node-b { animation-delay: 1.2s; }
  .parity-motion[data-motion$="-scan-catalog"] .pm-node-c { animation-delay: 2.4s; }
  .parity-motion[data-motion="advertiser-scan-catalog"] .pm-sweep {
    animation-name: pm-advertiser-scan-frame;
  }
  .parity-motion[data-motion="advertiser-scan-catalog"] .pm-sweep::before {
    left: auto;
    right: -22%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), rgba(183,237,0,.28), transparent);
    transform: skewX(12deg) translateX(0);
    animation-name: pm-advertiser-sheen;
  }
  .parity-motion[data-motion="advertiser-scan-catalog"] .pm-node-a,
  .parity-motion[data-motion="advertiser-scan-catalog"] .pm-node-b,
  .parity-motion[data-motion="advertiser-scan-catalog"] .pm-node-c {
    animation-name: pm-advertiser-catalog-hit;
  }

  /* Creator brief: document, play and link appear as three different actions. */
  .parity-motion[data-motion="brief-flow"] .pm-node-a,
  .parity-motion[data-motion="brief-flow"] .pm-node-b,
  .parity-motion[data-motion="brief-flow"] .pm-node-c {
    display: block;
    width: 32px;
    height: 32px;
    margin: -16px;
    border: 2px solid #fff;
    border-radius: 9px;
    animation: pm-brief 5.8s cubic-bezier(.16,1,.3,1) infinite;
  }
  .parity-motion[data-motion="brief-flow"] .pm-node-a::after { content: "ТЗ"; font-size: 9px; }
  .parity-motion[data-motion="brief-flow"] .pm-node-b::after { content: "▶"; font-size: 10px; }
  .parity-motion[data-motion="brief-flow"] .pm-node-c::after { content: "↗"; font-size: 14px; }
  .parity-motion[data-motion="brief-flow"] .pm-node-b { animation-delay: 1.4s; }
  .parity-motion[data-motion="brief-flow"] .pm-node-c { animation-delay: 2.8s; }

  /* Creator statuses: review, approval, screenshot, payout. */
  .parity-motion[data-motion="status-flow"] .pm-node {
    display: block;
    width: 24px;
    height: 24px;
    margin: -12px;
    border: 2px solid #fff;
    animation: pm-status 7s cubic-bezier(.16,1,.3,1) infinite;
  }
  .parity-motion[data-motion="status-flow"] .pm-node-a::after { content: "•••"; font-size: 8px; }
  .parity-motion[data-motion="status-flow"] .pm-node-b::after { content: "✓"; }
  .parity-motion[data-motion="status-flow"] .pm-node-c::after { content: "▣"; }
  .parity-motion[data-motion="status-flow"] .pm-node-d::after { content: "₽"; }
  .parity-motion[data-motion="status-flow"] .pm-node-e::after { content: "?"; }
  .parity-motion[data-motion="status-flow"] .pm-node-b { animation-delay: 1s; }
  .parity-motion[data-motion="status-flow"] .pm-node-c { animation-delay: 2s; }
  .parity-motion[data-motion="status-flow"] .pm-node-d { animation-delay: 3s; }
  .parity-motion[data-motion="status-flow"] .pm-node-e { animation-delay: 4.6s; }

  /* Advertiser review: offer -> video -> approve/reject -> technical check. */
  .parity-motion[data-motion="review-decision"] .pm-node {
    display: block;
    width: 28px;
    height: 28px;
    margin: -14px;
    border: 2px solid #fff;
    animation: pm-review 7.2s cubic-bezier(.16,1,.3,1) infinite;
  }
  .parity-motion[data-motion="review-decision"] .pm-node-a::after { content: "ТЗ"; font-size: 9px; }
  .parity-motion[data-motion="review-decision"] .pm-node-b::after { content: "▶"; font-size: 9px; }
  .parity-motion[data-motion="review-decision"] .pm-node-c::after { content: "✓"; }
  .parity-motion[data-motion="review-decision"] .pm-node-d { background: #fff; border-color: #ff6b6b; color: #e74343; }
  .parity-motion[data-motion="review-decision"] .pm-node-d::after { content: "×"; font-size: 16px; }
  .parity-motion[data-motion="review-decision"] .pm-node-e::after { content: "↻"; }
  .parity-motion[data-motion="review-decision"] .pm-node-b { animation-delay: 1.1s; }
  .parity-motion[data-motion="review-decision"] .pm-node-c { animation-delay: 2.2s; }
  .parity-motion[data-motion="review-decision"] .pm-node-d { animation-delay: 3.3s; }
  .parity-motion[data-motion="review-decision"] .pm-node-e { animation-delay: 4.4s; }

  /* Budget: only the real budget bar fills; option cards answer afterwards. */
  .parity-motion[data-motion="budget"] .pm-meter,
  .parity-motion[data-motion="budget"] .pm-meter-fill {
    display: block;
    border-radius: 999px;
    transform-origin: left center;
  }
  .parity-motion[data-motion="budget"] .pm-meter { background: rgba(255,255,255,.24); }
  .parity-motion[data-motion="budget"] .pm-meter-fill {
    background: var(--pm-lime);
    animation: pm-budget-fill 7s cubic-bezier(.16,1,.3,1) infinite;
  }
  .parity-motion[data-motion="budget"] .pm-node-a,
  .parity-motion[data-motion="budget"] .pm-node-b,
  .parity-motion[data-motion="budget"] .pm-node-c {
    display: block;
    animation: pm-budget-option 7s ease-out infinite;
  }
  .parity-motion[data-motion="budget"] .pm-node-a::after { content: "!"; }
  .parity-motion[data-motion="budget"] .pm-node-b::after { content: "+"; }
  .parity-motion[data-motion="budget"] .pm-node-c::after { content: "✎"; }
  .parity-motion[data-motion="budget"] .pm-node-b { animation-delay: 2.4s; }
  .parity-motion[data-motion="budget"] .pm-node-c { animation-delay: 3.6s; }

  @keyframes pm-choice {
    0%, 10%, 48%, 100% { opacity: 0; transform: translateY(6px) scale(.72); }
    18%, 34% { opacity: .94; transform: translateY(0) scale(1); }
    42% { opacity: 0; transform: translateY(-4px) scale(1.24); }
  }
  @keyframes pm-orbit {
    0%, 100% { opacity: 0; transform: scale(.9) rotate(-4deg); }
    20%, 72% { opacity: .48; }
    52% { transform: scale(1.03) rotate(4deg); }
  }
  @keyframes pm-star {
    0%, 12%, 62%, 100% { opacity: 0; transform: translateY(8px) scale(.4) rotate(0); }
    22%, 38% { opacity: .96; transform: translateY(0) scale(1) rotate(45deg); }
    54% { opacity: 0; transform: translateY(-8px) scale(1.65) rotate(90deg); }
  }
  @keyframes pm-hero-halo {
    0%, 100% { opacity: 0; transform: scale(.84); }
    22%, 64% { opacity: .5; }
    76% { opacity: 0; transform: scale(1.08); }
  }
  @keyframes pm-value {
    0%, 10%, 58%, 100% { opacity: 0; transform: translateY(7px) scale(.65); }
    18%, 36% { opacity: .95; transform: translateY(0) scale(1); }
    50% { opacity: 0; transform: translateY(-3px) scale(1.26); }
  }
  @keyframes pm-meter-fill {
    0%, 10%, 100% { opacity: 0; transform: scaleX(0); }
    16% { opacity: .4; transform: scaleX(.08); }
    42%, 72% { opacity: .9; transform: scaleX(.84); }
    88% { opacity: 0; transform: scaleX(.92); }
  }
  @keyframes pm-step {
    0%, 8%, 56%, 100% { opacity: 0; transform: scale(.55); }
    16%, 34% { opacity: .96; transform: scale(1); }
    46% { opacity: 0; transform: scale(1.45); }
  }
  @keyframes pm-launch-step {
    0%, 8%, 60%, 100% { opacity: 0; transform: translateX(-12px) scale(.72); }
    17%, 38% { opacity: .96; transform: translateX(0) scale(1); }
    50% { opacity: 0; transform: translateX(10px) scale(1.12); }
  }
  @keyframes pm-creator-check {
    0%, 10%, 60%, 100% { opacity: 0; transform: translateY(9px) rotate(-12deg) scale(.64); }
    20%, 40% { opacity: .96; transform: translateY(0) rotate(0) scale(1); }
    52% { opacity: 0; transform: translateY(-6px) rotate(8deg) scale(1.2); }
  }
  @keyframes pm-advertiser-check {
    0%, 10%, 64%, 100% { opacity: 0; transform: translateX(-9px) scale(.62); }
    20%, 42% { opacity: .96; transform: translateX(0) scale(1); }
    54% { opacity: 0; transform: translateX(8px) scale(1.3); }
  }
  @keyframes pm-scan-frame {
    0%, 10%, 92%, 100% { opacity: 0; }
    18%, 82% { opacity: 1; }
  }
  @keyframes pm-sheen {
    0%, 12% { opacity: 0; transform: skewX(-12deg) translateX(0); }
    24% { opacity: .95; }
    72% { opacity: .7; transform: skewX(-12deg) translateX(690%); }
    84%, 100% { opacity: 0; transform: skewX(-12deg) translateX(690%); }
  }
  @keyframes pm-advertiser-scan-frame {
    0%, 12%, 90%, 100% { opacity: 0; transform: scale(.985); }
    22%, 78% { opacity: 1; transform: scale(1); }
  }
  @keyframes pm-advertiser-sheen {
    0%, 12% { opacity: 0; transform: skewX(12deg) translateX(0); }
    24% { opacity: .9; }
    72% { opacity: .72; transform: skewX(12deg) translateX(-690%); }
    84%, 100% { opacity: 0; transform: skewX(12deg) translateX(-690%); }
  }
  @keyframes pm-catalog-hit {
    0%, 10%, 58%, 100% { opacity: 0; transform: scale(.55); }
    18%, 34% { opacity: .95; transform: scale(1); }
    48% { opacity: 0; transform: scale(1.5); }
  }
  @keyframes pm-advertiser-catalog-hit {
    0%, 12%, 62%, 100% { opacity: 0; transform: translateY(8px) scale(.5); }
    22%, 42% { opacity: .95; transform: translateY(0) scale(1); }
    54% { opacity: 0; transform: translateY(-7px) scale(1.35); }
  }
  @keyframes pm-brief {
    0%, 10%, 58%, 100% { opacity: 0; transform: translateY(8px) rotate(-4deg) scale(.7); }
    18%, 36% { opacity: .94; transform: translateY(0) rotate(0) scale(1); }
    50% { opacity: 0; transform: translateY(-5px) rotate(3deg) scale(1.16); }
  }
  @keyframes pm-status {
    0%, 10%, 62%, 100% { opacity: 0; transform: translateY(6px) scale(.6); }
    18%, 38% { opacity: .96; transform: translateY(0) scale(1); }
    52% { opacity: 0; transform: translateY(-4px) scale(1.28); }
  }
  @keyframes pm-review {
    0%, 10%, 58%, 100% { opacity: 0; transform: translateX(-5px) scale(.66); }
    18%, 38% { opacity: .96; transform: translateX(0) scale(1); }
    50% { opacity: 0; transform: translateX(5px) scale(1.2); }
  }
  @keyframes pm-budget-fill {
    0%, 10%, 100% { opacity: 0; transform: scaleX(0); }
    16% { opacity: .45; transform: scaleX(.08); }
    38%, 64% { opacity: .95; transform: scaleX(.96); }
    78% { opacity: 0; transform: scaleX(.96); }
  }
  @keyframes pm-budget-option {
    0%, 14%, 66%, 100% { opacity: 0; transform: translateY(7px) scale(.65); }
    24%, 46% { opacity: .94; transform: translateY(0) scale(1); }
    58% { opacity: 0; transform: translateY(-4px) scale(1.28); }
  }

  @media (prefers-reduced-motion: reduce) {
    .parity-motion { display: none !important; }
  }

  /* Static delivery mode: no motion or helper overlays above the approved
     artwork. */
  :is(.role-page, .creator-page, .advertiser-page),
  :is(.role-page, .creator-page, .advertiser-page) *,
  :is(.role-page, .creator-page, .advertiser-page) *::before,
  :is(.role-page, .creator-page, .advertiser-page) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :is(.role-page, .creator-page, .advertiser-page) .parity-motion,
  :is(.role-page, .creator-page, .advertiser-page) .layered-scene .scene-layer-b,
  :is(.role-page, .creator-page, .advertiser-page) .layered-scene .scene-layer-c {
    display: none !important;
  }

  /* The exported Figma surface is the only visible artwork. Legacy decorative
     pseudo-elements from the semantic fallback must never bleed over it. */
  .role-page .role-main::before,
  .role-page .role-main::after,
  .role-page .role-hero::before,
  .role-page .role-hero::after,
  .role-page .role-grid::before,
  .role-page .role-grid::after,
  .creator-page .hero::before,
  .creator-page .hero::after,
  .creator-page #payment::before,
  .creator-page #payment::after,
  .creator-page #verification::before,
  .creator-page #verification::after,
  .creator-page #catalog::before,
  .creator-page #catalog::after,
  .creator-page #offer::before,
  .creator-page #offer::after,
  .creator-page #status::before,
  .creator-page #status::after,
  .creator-page .final-cta::before,
  .creator-page .final-cta::after,
  .advertiser-page .hero::before,
  .advertiser-page .hero::after,
  .advertiser-page #payment::before,
  .advertiser-page #payment::after,
  .advertiser-page #start::before,
  .advertiser-page #start::after,
  .advertiser-page #create::before,
  .advertiser-page #create::after,
  .advertiser-page #launch::before,
  .advertiser-page #launch::after,
  .advertiser-page #videos::before,
  .advertiser-page #videos::after,
  .advertiser-page #manage::before,
  .advertiser-page #manage::after,
  .advertiser-page .final-cta::before,
  .advertiser-page .final-cta::after { display: none !important; content: none !important; }

  /* Bitmaps restored on top of the artboards (see artwork.js). */
  .parity-art-layer {
    position: absolute;
    z-index: 15;
    inset: 0;
    display: block;
    opacity: 1 !important;
    pointer-events: none !important;
  }
  .parity-art {
    position: absolute;
    display: block;
    max-width: none;
    opacity: 1 !important;
    pointer-events: none !important;
    object-position: center;
  }

  .parity-hit {
    position: absolute;
    z-index: 20;
    display: block;
    opacity: 1 !important;
    border-radius: 999px;
    background-color: transparent;
    pointer-events: auto !important;
    cursor: pointer;
    transform-origin: 50% 50%;
    transition: transform 220ms cubic-bezier(.22,1,.36,1) !important;
  }
  /* One interaction standard for every clickable area on the site: a slight
     zoom in on hover, a short press-in on click. No borders, no shadows,
     no glows. */
  .parity-hit:hover,
  .parity-hit:focus-visible {
    transform: scale(1.035);
  }
  .parity-hit:active {
    transform: scale(.965);
    transition-duration: 90ms !important;
  }
  /* Same standard for the semantic buttons (header, hero) — declared here so the
     parity layer cannot reset their transition. */
  :is(.role-page, .creator-page, .advertiser-page) .button {
    transition: transform 220ms cubic-bezier(.22,1,.36,1) !important;
    box-shadow: none !important;
  }
  :is(.role-page, .creator-page, .advertiser-page) .button:hover,
  :is(.role-page, .creator-page, .advertiser-page) .button:focus-visible {
    transform: scale(1.035) !important;
  }
  :is(.role-page, .creator-page, .advertiser-page) .button:active {
    transform: scale(.965) !important;
    transition-duration: 90ms !important;
  }
  :is(.role-page, .creator-page, .advertiser-page) .button:hover::after {
    transform: none !important;
  }
  .parity-hit:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 3px;
  }
  .hero-hit-primary { left: 8.3333%; top: 68%; width: 17.0833%; height: 8.5366%; }
  .hero-hit-login { left: 26.25%; top: 68%; width: 10%; height: 8.5366%; }
  .final-hit-primary { left: 6.9444%; top: 69.2308%; width: 22.9167%; height: 9.2308%; }
  .final-hit-login { left: 31.25%; top: 69.2308%; width: 10.4167%; height: 9.2308%; }
  .role-hit { top: 78.5417%; width: 35.8333%; height: 5.8333%; }
  .role-hit-creator { left: 10.5556%; }
  .role-hit-advertiser { left: 53.6111%; }

  .role-page .role-main {
    height: 960px;
    padding: 0;
    overflow: hidden;
    background: url("vector/static/page-role-full-desktop.svg?v=20260729-9") center -64px / 100% auto no-repeat;
  }
  .role-page .role-main > .container { opacity: 0; }
  .role-page .role-hero { height: 336px; background-image: none; }
  .role-page .role-grid { height: 624px; margin: 0; background-image: none; }

  .creator-page .hero,
  .advertiser-page .hero {
    height: 656px !important;
    min-height: 656px !important;
    background-position: center -64px;
    background-size: 100% auto;
  }
  .creator-page .hero { background-image: url("vector/static/page-creator-hero-desktop.svg?v=20260729-9"); }
  .creator-page #payment { background-image: url("vector/static/page-creator-cpm-desktop.svg?v=20260729-9"); }
  .creator-page #verification { background-image: url("vector/static/page-creator-verification-desktop.svg?v=20260729-9"); }
  .creator-page #catalog { background-image: url("vector/static/page-creator-catalog-desktop.svg?v=20260729-9"); }
  .creator-page #offer { background-image: url("vector/static/page-creator-offer-desktop.svg?v=20260729-9"); }
  .creator-page #status { background-image: url("vector/static/page-creator-status-desktop.svg?v=20260729-9"); }
  .creator-page .final-cta { background-image: url("vector/static/page-creator-final-desktop.svg?v=20260729-9"); }

  .advertiser-page .hero { background-image: url("vector/static/page-advertiser-hero-desktop.svg?v=20260729-9"); }
.advertiser-page #payment { background-image: url("vector/static/page-advertiser-cpm-desktop.svg?v=20260729-9"); }
  .advertiser-page #start { background-image: url("vector/static/page-advertiser-start-desktop.svg?v=20260729-9"); }
  .advertiser-page #create { background-image: url("vector/static/page-advertiser-create-desktop.svg?v=20260729-9"); }
  .advertiser-page #launch { background-image: url("vector/static/page-advertiser-launch-desktop.svg?v=20260729-9"); }
  .advertiser-page #videos { background-image: url("vector/static/page-advertiser-videos-desktop.svg?v=20260729-9"); }
  .advertiser-page #manage { background-image: url("vector/static/page-advertiser-manage-desktop.svg?v=20260729-9"); }
  .advertiser-page .final-cta { background-image: url("vector/static/page-advertiser-final-desktop.svg?v=20260729-9"); }

  /* Figma desktop artboards stay 1440px wide on large monitors. Stretching
     them beyond their native width distorts text and creates vertical seams. */
  @media (min-width: 1441px) {
    .site-nav { background-size: 1440px 64px; background-position: center top; background-color: #fff; }
    .role-page .role-main {
      background-size: 1440px 1024px;
      background-position: center -64px;
      background-color: #fafafa;
    }
    .creator-page .hero,
    .advertiser-page .hero {
      background-size: 1440px 720px;
      background-position: center -64px;
      background-color: #fafafa;
    }
    .creator-page #payment,
    .advertiser-page #payment { background-size: 1440px 900px; background-color: #f9fafc; }
    .creator-page #verification { background-size: 1440px 1900px; background-color: #fafafa; }
    .creator-page #catalog { background-size: 1440px 680px; background-color: #fafafa; }
    .creator-page #offer { background-size: 1440px 680px; background-color: #111827; }
    .creator-page #status { background-size: 1440px 1100px; background-color: #f2ffd2; }
    .creator-page .final-cta,
    .advertiser-page .final-cta { background-size: 1440px 520px; background-color: #111827; }
    .advertiser-page #start { background-size: 1440px 680px; background-color: #fafafa; }
    .advertiser-page #create { background-size: 1440px 900px; background-color: #fafbfc; }
    .advertiser-page #launch { background-size: 1440px 900px; background-color: #f2ffd7; }
    .advertiser-page #videos { background-size: 1440px 900px; background-color: #f7f8fa; }
    .advertiser-page #manage { background-size: 1440px 680px; background-color: #f7f9fa; }
    .hero-hit-primary { left: calc(50% - 600px); width: 246px; }
    .hero-hit-login { left: calc(50% - 342px); width: 144px; }
    .final-hit-primary { left: calc(50% - 620px); width: 330px; }
    .final-hit-login { left: calc(50% - 270px); width: 150px; }
    .role-hit { width: 516px; }
    .role-hit-creator { left: calc(50% - 568px); }
    .role-hit-advertiser { left: calc(50% + 52px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .role-page .role-main { background-image: url("vector/static/page-role-full-desktop.svg?v=20260729-9"); }
    .creator-page .hero { background-image: url("vector/static/page-creator-hero-desktop.svg?v=20260729-9"); }
    .creator-page #payment { background-image: url("vector/static/page-creator-cpm-desktop.svg?v=20260729-9"); }
    .creator-page #verification { background-image: url("vector/static/page-creator-verification-desktop.svg?v=20260729-9"); }
    .creator-page #catalog { background-image: url("vector/static/page-creator-catalog-desktop.svg?v=20260729-9"); }
    .creator-page #offer { background-image: url("vector/static/page-creator-offer-desktop.svg?v=20260729-9"); }
    .creator-page #status { background-image: url("vector/static/page-creator-status-desktop.svg?v=20260729-9"); }
    .creator-page .final-cta { background-image: url("vector/static/page-creator-final-desktop.svg?v=20260729-9"); }
    .advertiser-page .hero { background-image: url("vector/static/page-advertiser-hero-desktop.svg?v=20260729-9"); }
.advertiser-page #payment { background-image: url("vector/static/page-advertiser-cpm-desktop.svg?v=20260729-9"); }
    .advertiser-page #start { background-image: url("vector/static/page-advertiser-start-desktop.svg?v=20260729-9"); }
    .advertiser-page #create { background-image: url("vector/static/page-advertiser-create-desktop.svg?v=20260729-9"); }
    .advertiser-page #launch { background-image: url("vector/static/page-advertiser-launch-desktop.svg?v=20260729-9"); }
    .advertiser-page #videos { background-image: url("vector/static/page-advertiser-videos-desktop.svg?v=20260729-9"); }
    .advertiser-page #manage { background-image: url("vector/static/page-advertiser-manage-desktop.svg?v=20260729-9"); }
    .advertiser-page .final-cta { background-image: url("vector/static/page-advertiser-final-desktop.svg?v=20260729-9"); }
  }

  @media (min-width: 721px) and (max-width: 1440px) {
    .role-page .role-main {
      height: calc(100vw * 960 / 1440);
      background-position: center calc(100vw * -64 / 1440);
    }
    .role-page .role-hero { height: calc(100vw * 336 / 1440); }
    .role-page .role-grid { height: calc(100vw * 624 / 1440); }
    .creator-page .hero,
    .advertiser-page .hero { height: calc(100vw * 656 / 1440) !important; min-height: 0 !important; background-position: center calc(100vw * -64 / 1440); }
    .creator-page #payment,
    .advertiser-page #payment { height: calc(100vw * 900 / 1440); }
    .creator-page #verification { height: calc(100vw * 1900 / 1440); }
    .creator-page #catalog,
    .creator-page #offer,
    .advertiser-page #start,
    .advertiser-page #manage { height: calc(100vw * 680 / 1440); }
    .creator-page #status { height: calc(100vw * 1100 / 1440); }
    .advertiser-page #create,
    .advertiser-page #launch,
    .advertiser-page #videos { height: calc(100vw * 900 / 1440); }
    .creator-page .final-cta,
    .advertiser-page .final-cta { height: calc(100vw * 520 / 1440); }
  }

  /* The tablet artboard still uses the desktop navigation. Keep the real
     keyboard/click layer in that same layout instead of switching to an
     invisible hamburger at 980px. */
  @media (min-width: 721px) and (max-width: 980px) {
    .site-nav .menu-button { display: none; }
    .site-nav .nav-menu {
      display: flex;
      position: static;
      inset: auto;
      padding: 0;
      flex-direction: row;
      align-items: center;
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    .site-nav .nav-menu .button { width: auto; }
  }

  @media (max-width: 720px) {
    .parity-motion {
      --pm-p1x: var(--pm-p1x-m, var(--pm-p1x-d, -100px));
      --pm-p1y: var(--pm-p1y-m, var(--pm-p1y-d, -100px));
      --pm-p2x: var(--pm-p2x-m, var(--pm-p2x-d, -100px));
      --pm-p2y: var(--pm-p2y-m, var(--pm-p2y-d, -100px));
      --pm-p3x: var(--pm-p3x-m, var(--pm-p3x-d, -100px));
      --pm-p3y: var(--pm-p3y-m, var(--pm-p3y-d, -100px));
      --pm-p4x: var(--pm-p4x-m, var(--pm-p4x-d, -100px));
      --pm-p4y: var(--pm-p4y-m, var(--pm-p4y-d, -100px));
      --pm-p5x: var(--pm-p5x-m, var(--pm-p5x-d, -100px));
      --pm-p5y: var(--pm-p5y-m, var(--pm-p5y-d, -100px));
      --pm-area-x: var(--pm-area-x-m, var(--pm-area-x-d, 0%));
      --pm-area-y: var(--pm-area-y-m, var(--pm-area-y-d, 0%));
      --pm-area-w: var(--pm-area-w-m, var(--pm-area-w-d, 0%));
      --pm-area-h: var(--pm-area-h-m, var(--pm-area-h-d, 0%));
      width: 100%;
    }

    .role-page .site-nav { background-image: url("vector/static/page-role-nav-mobile.svg?v=20260729-9"); }
    .creator-page .site-nav { background-image: url("vector/static/page-creator-nav-mobile.svg?v=20260729-9"); }
    .advertiser-page .site-nav { background-image: url("vector/static/page-advertiser-nav-mobile.svg?v=20260729-9"); }

    .role-page .role-main {
      height: 1666px;
      background-image: url("vector/static/page-role-full-mobile.svg?v=20260729-9");
      background-position: center -64px;
      background-size: 100% calc(100% + 64px);
    }
    .role-page .role-hero { height: 420px; background-image: none; }
    .role-page .role-grid { height: 1246px; background-image: none; }

    .creator-page .hero,
    .advertiser-page .hero {
      height: 696px !important;
      min-height: 696px !important;
      background-position: center -64px;
      background-size: 100% calc(100% + 64px);
    }
    .creator-page .hero { background-image: url("vector/static/page-creator-hero-mobile.svg?v=20260729-9"); }
  .creator-page #payment { background-image: url("vector/static/page-creator-cpm-mobile.svg?v=20260729-9"); }
    .creator-page #verification { background-image: url("vector/static/page-creator-verification-mobile.svg?v=20260729-9"); }
    .creator-page #catalog { background-image: url("vector/static/page-creator-catalog-mobile.svg?v=20260729-9"); }
    .creator-page #offer { background-image: url("vector/static/page-creator-offer-mobile.svg?v=20260729-9"); }
    .creator-page #status { background-image: url("vector/static/page-creator-status-mobile.svg?v=20260729-9"); }
    .creator-page .final-cta { background-image: url("vector/static/page-creator-final-mobile.svg?v=20260729-9"); }

    .advertiser-page .hero { background-image: url("vector/static/page-advertiser-hero-mobile.svg?v=20260729-9"); }
.advertiser-page #payment { background-image: url("vector/static/page-advertiser-cpm-mobile.svg?v=20260729-9"); }
    .advertiser-page #start { background-image: url("vector/static/page-advertiser-start-mobile.svg?v=20260729-9"); }
    .advertiser-page #create { background-image: url("vector/static/page-advertiser-create-mobile.svg?v=20260729-9"); }
    .advertiser-page #launch { background-image: url("vector/static/page-advertiser-launch-mobile.svg?v=20260729-9"); }
    .advertiser-page #videos { background-image: url("vector/static/page-advertiser-videos-mobile.svg?v=20260729-9"); }
    .advertiser-page #manage { background-image: url("vector/static/page-advertiser-manage-mobile.svg?v=20260729-9"); }
    .advertiser-page .final-cta { background-image: url("vector/static/page-advertiser-final-mobile.svg?v=20260729-9"); }

    .creator-page .hero-hit-primary { left: 4.1026%; top: 81.0345%; width: 91.7949%; height: 8.046%; }
    .advertiser-page .hero-hit-primary { left: 4.1026%; top: 84.4828%; width: 91.7949%; height: 8.046%; }
    .hero-hit-login { display: none; }
    .final-hit-primary { left: 6.1538%; top: 70.8696%; width: 87.6923%; height: 10.4348%; }
    .final-hit-login { left: 6.1538%; top: 83.913%; width: 87.6923%; height: 10.4348%; }
    .role-hit { left: 13.3333%; width: 73.3333%; height: 3.3613%; }
    .role-hit-creator { top: 53.6014%; }
    .role-hit-advertiser { top: 87.2749%; }
  }

  @media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .role-page .role-main { background-image: url("vector/static/page-role-full-mobile.svg?v=20260729-9"); }
    .creator-page .hero { background-image: url("vector/static/page-creator-hero-mobile.svg?v=20260729-9"); }
    .creator-page #payment { background-image: url("vector/static/page-creator-cpm-mobile.svg?v=20260729-9"); }
    .creator-page #verification { background-image: url("vector/static/page-creator-verification-mobile.svg?v=20260729-9"); }
    .creator-page #catalog { background-image: url("vector/static/page-creator-catalog-mobile.svg?v=20260729-9"); }
    .creator-page #offer { background-image: url("vector/static/page-creator-offer-mobile.svg?v=20260729-9"); }
    .creator-page #status { background-image: url("vector/static/page-creator-status-mobile.svg?v=20260729-9"); }
    .creator-page .final-cta { background-image: url("vector/static/page-creator-final-mobile.svg?v=20260729-9"); }
    .advertiser-page .hero { background-image: url("vector/static/page-advertiser-hero-mobile.svg?v=20260729-9"); }
.advertiser-page #payment { background-image: url("vector/static/page-advertiser-cpm-mobile.svg?v=20260729-9"); }
    .advertiser-page #start { background-image: url("vector/static/page-advertiser-start-mobile.svg?v=20260729-9"); }
    .advertiser-page #create { background-image: url("vector/static/page-advertiser-create-mobile.svg?v=20260729-9"); }
    .advertiser-page #launch { background-image: url("vector/static/page-advertiser-launch-mobile.svg?v=20260729-9"); }
    .advertiser-page #videos { background-image: url("vector/static/page-advertiser-videos-mobile.svg?v=20260729-9"); }
    .advertiser-page #manage { background-image: url("vector/static/page-advertiser-manage-mobile.svg?v=20260729-9"); }
    .advertiser-page .final-cta { background-image: url("vector/static/page-advertiser-final-mobile.svg?v=20260729-9"); }
  }
}

/* High-resolution creator catalog. The source frame is shown once; no zoom hit-area. */
@media (min-width: 721px) {
  .creator-page #catalog .catalog-hires-overlay {
    position: absolute;
    z-index: 5;
    left: 39.5833%;
    top: 15.5147%;
    display: block;
    width: 53.4722%;
    height: 67.5%;
    overflow: hidden;
    opacity: 1 !important;
    pointer-events: none !important;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 12px 28px rgb(102 112 69 / 14%);
  }

  .creator-page #catalog .catalog-hires-overlay img {
    position: absolute;
    left: -5.4026%;
    top: -3.2244%;
    display: block;
    width: 111.6883%;
    max-width: none;
    height: 129.3028%;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .creator-page #catalog .catalog-account-mask {
    position: absolute;
    z-index: 2;
    top: 0.2397%;
    right: 1.039%;
    display: block;
    width: 8.3636%;
    height: 8.25%;
    opacity: 1 !important;
    background: #fff;
    pointer-events: none !important;
  }

  .creator-page #catalog .catalog-account-mask::after {
    content: "";
    position: absolute;
    top: 6px;
    left: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f4f6f8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='10.5' r='4.25' fill='%2398A0AD'/%3E%3Cpath d='M7.75 24.25c0-4.65 3.25-8 7.25-8s7.25 3.35 7.25 8v1H7.75v-1Z' fill='%2398A0AD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    box-shadow: inset 0 0 0 1px #dfe3e8;
  }
}

@media (max-width: 720px) {
  .creator-page #catalog .catalog-hires-overlay {
    display: none !important;
  }
}

.creator-page #catalog .creator-catalog-static {
  pointer-events: none !important;
}

.creator-page #catalog .creator-catalog-static::before,
.creator-page #catalog .creator-catalog-static::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 721px) {
  :is(.creator-page, .advertiser-page) .site-nav .role-link {
    position: relative;
    padding: 20px 14px;
    margin: -20px -14px;
    transform: translateX(-74px);
  }
}

/* The role-page labels are part of the Figma SVG. Keep their real links on
   the same coordinates instead of relying on the hidden flex navigation. */
@media (min-width: 721px) and (max-width: 1440px) {
  .role-page .nav-role-hit-creator { left: 52.82%; }
  .role-page .nav-role-hit-advertiser { left: 61.36%; }
}

@media (min-width: 1441px) {
  .role-page .nav-role-hit-creator { left: calc(50% + 40.6px); }
  .role-page .nav-role-hit-advertiser { left: calc(50% + 163.6px); }
}

@media (min-width: 721px) {
  .role-page .nav-role-hit {
    position: absolute;
    z-index: 3;
    inset-block: 0;
    display: block;
    opacity: 0;
    pointer-events: auto;
  }
  .role-page .nav-role-hit-creator { width: min(112px, 8vw); }
  .role-page .nav-role-hit-advertiser { width: min(160px, 12vw); }
  .role-page .nav-role-hit:focus-visible { opacity: 1; background: rgb(183 235 0 / 14%); }
}

/* Floating role-page navigation.
   The Figma export remains the base, while the two account actions are real,
   fully clickable controls placed closer together. */
:is(.role-page, .creator-page, .advertiser-page) .site-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 300;
  width: 100%;
  margin-inline: auto;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  transition:
    top 220ms ease,
    width 220ms ease,
    border-radius 220ms ease,
    box-shadow 220ms ease !important;
}

:is(.role-page, .creator-page, .advertiser-page) .site-nav[data-scrolled] {
  top: 12px !important;
  width: min(calc(100% - 24px), 1440px);
  border-radius: 22px;
  box-shadow: 0 14px 38px rgb(17 24 39 / 14%) !important;
}

@media (min-width: 721px) {
  :is(.role-page, .creator-page, .advertiser-page) .site-nav::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 3% 0 72%;
    background: #fff;
    pointer-events: none;
  }

  :is(.role-page, .creator-page, .advertiser-page) .site-nav .nav-inner {
    position: relative;
    z-index: 2;
  }

  :is(.role-page, .creator-page, .advertiser-page) .site-nav .nav-menu {
    gap: 14px;
  }

  :is(.role-page, .creator-page, .advertiser-page) .site-nav .nav-menu > [data-platform-link="login"],
  :is(.role-page, .creator-page, .advertiser-page) .site-nav .nav-menu > .button-small {
    opacity: 1;
  }

  :is(.role-page, .creator-page, .advertiser-page) .site-nav .nav-menu > [data-platform-link="login"] {
    color: #737373;
    font-size: 14px;
    font-weight: 400;
  }

  :is(.role-page, .creator-page, .advertiser-page) .site-nav .nav-menu > .button-small {
    width: 116px;
    min-height: 40px;
    padding-inline: 12px;
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  :is(.role-page, .creator-page, .advertiser-page) .site-nav[data-scrolled] {
    top: 8px !important;
    width: calc(100% - 16px);
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.role-page, .creator-page, .advertiser-page) .site-nav {
    transition: none !important;
  }
}