/* ============================================ BRANDS — ported from the earnon-brands-page design reference. Reuses the Event Marketplace page's design system (Public Sans/Rubik — same typefaces as the rest of the site, cream/coral palette, .wrap/.btn/.section-eyebrow conventions) rather than the reference's own standalone dark-only stylesheet, so the two pages read as one product and both support the site's light/dark toggle. The reference's blue/purple accents are layered on as additional theme-reactive tokens. Nav/footer rules intentionally excluded — the site's own header/footer are used instead. ============================================ */ :root{ --grad:linear-gradient(100deg,#F97316,#EF4444); /* Light theme (default) */ --cream:#FCF4F1; --bg:#FAF8F5; --bg-alt:#F3EEE6; --card:#fff; --border:#E7E2D9; --border-strong:#D6CFC2; --text:#1E1B16; --text2:#6B6459; --text3:#9C948A; --coral-bg:#FBEAE3; --coral-text:#7A3218; --coral-border:#EFA07E; --green-bg:#E4F3EA; --green-text:#215339; --amber-bg:#FBF0DA; --amber-text:#6B4A0E; --blue-bg:#E5EFFC; --blue-text:#1D4E89; --purple-bg:#EFE7FB; --purple-text:#5B3AA0; --red-bg:#FBE7E4; --red-text:#8A2A1E; --red:#EF4444; --orange:#F97316; /* Fixed-dark ink used for the sections that are always dark regardless of the page theme (.escrow-trust/.trust-security/.final-cta) — kept separate from --text so those sections don't invert when the theme toggle flips. Same pattern as the Event Marketplace page. */ --ink:#0A0A0C; --ink-card:#151518; --ink-border:#26262B; --ink-text2:#A8A5A0; --ink-text3:#6E6B67; --ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1); --ease-out-back:cubic-bezier(0.34, 1.56, 0.64, 1); } /* Dark theme — activated via [data-theme="dark"] on , same attribute the rest of the site's toggle uses. */ :root[data-theme="dark"]{ --cream:#111114; --bg:#0A0A0C; --bg-alt:#111114; --card:#151518; --border:#26262B; --border-strong:#33333A; --text:#F1F1F3; --text2:#A8A5A0; --text3:#6E6B67; --coral-bg:rgba(249,115,22,0.12); --coral-text:#F5A876; --coral-border:#8A5330; --green-bg:rgba(34,197,94,0.12); --green-text:#5FDB93; --amber-bg:rgba(245,158,11,0.12); --amber-text:#FBBF77; --blue-bg:rgba(96,165,250,0.14); --blue-text:#7DB4FA; --purple-bg:rgba(167,139,250,0.16); --purple-text:#C4B0F9; --red-bg:rgba(239,68,68,0.14); --red-text:#F5877D; } .brands-body *{box-sizing:border-box} .brands-body{ font-family:'Rubik',sans-serif; font-size:15px; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } .brands-body h1,.brands-body h2,.brands-body h3,.brands-body h4,.brands-body .disp{font-family:'Public Sans',sans-serif;font-weight:600;letter-spacing:-0.02em;line-height:1.15} .brands-body img,.brands-body svg{display:block;max-width:100%} .brands-body a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent} .brands-body button{cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent} /* SHELL */ .brands-body .wrap{max-width:1200px;margin:0 auto;padding:0 24px} .brands-body section{padding:88px 0} .brands-body .section-tint{background:var(--bg-alt)} /* QUICK-NAV — this is a long page (20 000px+), so once the reader has scrolled past the hero a compact jump-bar sticks under the site header, letting them skip straight to Pricing/FAQ/etc. instead of endless scrolling. Hidden until .show is toggled on scroll. */ .brands-body .quick-nav{ position:fixed;top:94.5px;left:0;right:0;z-index:90; background:var(--card);border-bottom:1px solid var(--border); box-shadow:0 8px 24px -12px rgba(30,27,22,0.12); transform:translateY(-120%);opacity:0; transition:transform .3s var(--ease-out-quart), opacity .3s var(--ease-out-quart); } .brands-body .quick-nav.show{transform:translateY(0);opacity:1} .brands-body .quick-nav-inner{ display:flex;align-items:center;gap:16px; padding-top:10px;padding-bottom:10px; } .brands-body .quick-nav-links{display:flex;align-items:center;gap:22px;overflow-x:auto;scrollbar-width:none;width:100%} .brands-body .quick-nav-links::-webkit-scrollbar{display:none} .brands-body .quick-nav-links a{ font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap; transition:color .15s;padding:4px 0;position:relative; } .brands-body .quick-nav-links a:hover{color:var(--text)} .brands-body .quick-nav-links a:active{color:var(--coral-text)} .brands-body .quick-nav-links a.active{color:var(--coral-text)} .brands-body .quick-nav-links a.active::after{ content:'';position:absolute;left:0;right:0;bottom:-11px;height:2px;background:var(--grad); } /* Anchor targets get breathing room above them so a quick-nav click lands with the section heading clear of the fixed header + quick-nav bar, instead of tucked underneath it. */ #brand-hub,#how-it-works,#for-creators,#creator-steps,#negotiate,#pricing,#faq,#creator-testimonials{scroll-margin-top:150px} @media (max-width:900px){ #brand-hub,#how-it-works,#for-creators,#creator-steps,#negotiate,#pricing,#faq,#creator-testimonials{scroll-margin-top:140px} } @media (max-width:720px){ #brand-hub,#how-it-works,#for-creators,#creator-steps,#negotiate,#pricing,#faq,#creator-testimonials{scroll-margin-top:110px} } @media (max-width:900px){ .brands-body .quick-nav{top:89px} } @media (max-width:720px){ .brands-body .quick-nav{top:81px} .brands-body .quick-nav-links{gap:18px} } /* AUDIENCE SWITCH — fixed, bottom-center, same reveal pattern as back-to-top (hidden over the hero, shown once scrolled past it, stays reachable the rest of the page). Corner radius matches .btn-lg (12px) rather than a full pill, so it reads as part of the same button system as the rest of the page's CTAs. Everything below the hero is tagged .aud-brand/.aud-creator and gated purely by the data-audience attribute this sets on .brands-body — no reload, and it degrades gracefully (defaults to Brands) with JS off since that default lives in the HTML. */ .brands-body .aud-switch{ position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;z-index:92; transform:translate(-50%, 12px); display:inline-flex;gap:2px;padding:5px; background:var(--card);border:1px solid var(--border);border-radius:12px; box-shadow:0 14px 32px -14px rgba(30,27,22,.28); opacity:0;pointer-events:none; transition:opacity .25s var(--ease-out-quart), transform .25s var(--ease-out-quart); } .brands-body .aud-switch.show{opacity:1;transform:translate(-50%, 0);pointer-events:auto} .brands-body .aud-switch-btn{ position:relative;z-index:1;border:none;background:transparent;cursor:pointer; padding:12px 28px;border-radius:9px;font-size:14.5px;font-weight:700;color:var(--text2); display:flex;align-items:center;gap:9px;transition:color .3s;font-family:inherit; white-space:nowrap;-webkit-tap-highlight-color:transparent; } .brands-body .aud-switch-btn i{font-size:13px} .brands-body .aud-switch-btn.active{color:#fff} .brands-body .aud-switch-thumb{ position:absolute;top:5px;left:5px;height:calc(100% - 10px); width:calc(50% - 5px);border-radius:9px;background:var(--grad); box-shadow:0 6px 16px -4px rgba(239,68,68,.4); transition:transform .35s var(--ease-out-quart), background .3s, box-shadow .3s;z-index:0; } .brands-body .aud-switch[data-active="creators"] .aud-switch-thumb{ transform:translateX(100%); background:linear-gradient(100deg,#22C55E,#16A34A); box-shadow:0 6px 16px -4px rgba(34,197,94,.45); } @media (max-width:480px){ .brands-body .aud-switch{bottom:calc(18px + env(safe-area-inset-bottom))} .brands-body .aud-switch-btn{padding:11px 18px;font-size:13.5px} } /* ROLE PICKER — the primary, in-flow choice right after the hero. Big and explicit on purpose: this is what actually resolves the "which mode am I in" confusion a tiny floating switch caused on its own. */ .brands-body .role-picker{padding:56px 0 64px;background:var(--bg-alt)} .brands-body .role-picker-head{text-align:center;margin-bottom:32px} .brands-body .role-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:0 auto} .brands-body .role-card{ position:relative;text-align:left;cursor:pointer;font-family:inherit; background:var(--card);border:2px solid var(--border);border-radius:18px; padding:26px 24px;transition:border-color .2s, background .2s, transform .15s; display:flex;flex-direction:column;align-items:flex-start; } .brands-body .role-card:hover{transform:translateY(-2px)} .brands-body .role-card-check{position:absolute;top:18px;right:18px;font-size:18px;color:var(--border-strong);opacity:.5;transition:color .2s,opacity .2s} .brands-body .role-card-icon{ width:46px;height:46px;border-radius:12px;flex-shrink:0;font-size:19px; display:flex;align-items:center;justify-content:center;margin-bottom:14px; background:var(--bg-alt);color:var(--text3);transition:background .2s,color .2s; } .brands-body .role-card-title{font-family:'Public Sans',sans-serif;font-weight:700;font-size:17px;color:var(--text);margin-bottom:6px} .brands-body .role-card-desc{font-size:13px;color:var(--text2);line-height:1.6} .brands-body .role-card[data-audience-set="brands"].active{border-color:var(--coral-border);background:linear-gradient(145deg, var(--coral-bg) 0%, var(--card) 65%)} .brands-body .role-card[data-audience-set="brands"].active .role-card-icon{background:var(--grad);color:#fff} .brands-body .role-card[data-audience-set="brands"].active .role-card-check{color:var(--orange);opacity:1} .brands-body .role-card[data-audience-set="creators"].active{border-color:rgba(34,197,94,.4);background:linear-gradient(145deg, var(--green-bg) 0%, var(--card) 65%)} .brands-body .role-card[data-audience-set="creators"].active .role-card-icon{background:linear-gradient(100deg,#22C55E,#16A34A);color:#fff} .brands-body .role-card[data-audience-set="creators"].active .role-card-check{color:var(--green-text);opacity:1} @media (max-width:640px){ .brands-body .role-cards{grid-template-columns:1fr;gap:14px} } /* Gated content — hidden entirely (not just visually) so animations/ counters on the inactive side don't run, and shown the instant the matching audience is active. Default is "brands" in the markup itself, so this still works correctly with JS disabled. */ .brands-body[data-audience="brands"] .aud-creator{display:none !important} .brands-body[data-audience="creators"] .aud-brand{display:none !important} .brands-body .quick-nav-links a[data-aud]{display:none} .brands-body[data-audience="brands"] .quick-nav-links a[data-aud="brand"]{display:inline-flex} .brands-body[data-audience="creators"] .quick-nav-links a[data-aud="creator"]{display:inline-flex} /* Mode color identity — brand stays the page's default coral accent; creator mode tints the same active-state affordances green, so the colour itself is a constant, ambient reminder of which mode is live while scrolling, without needing extra UI. */ .brands-body[data-audience="creators"] .quick-nav-links a.active{color:var(--green-text)} .brands-body[data-audience="creators"] .quick-nav-links a.active::after{background:linear-gradient(100deg,#22C55E,#16A34A)} /* These grids pair one brand card with one creator card; with one side always hidden by the rule above, collapse to a single centered column instead of leaving a half-empty grid. */ .brands-body .two-col-cards, .brands-body .pricing-grid{ grid-template-columns:1fr !important;max-width:640px !important; margin-left:auto !important;margin-right:auto !important; } /* BACK TO TOP */ .brands-body .back-to-top{ /* env() keeps it clear of the home-indicator bar on notched phones, falling back to the plain value on devices without one. */ position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));right:calc(26px + env(safe-area-inset-right));z-index:90; width:44px;height:44px;border-radius:50%; background:var(--card);border:1px solid var(--border);color:var(--text2); display:flex;align-items:center;justify-content:center; box-shadow:0 10px 26px -10px rgba(30,27,22,0.3); opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity .25s var(--ease-out-quart), transform .25s var(--ease-out-quart), border-color .15s, color .15s; } .brands-body .back-to-top.show{opacity:1;transform:translateY(0);pointer-events:auto} .brands-body .back-to-top:hover{border-color:var(--coral-border);color:var(--coral-text)} .brands-body .back-to-top:active{transform:scale(0.92)} @media (max-width:720px){ .brands-body .back-to-top{width:40px;height:40px;bottom:calc(18px + env(safe-area-inset-bottom));right:calc(18px + env(safe-area-inset-right))} } /* BUTTONS (identical to Event Marketplace) */ .brands-body .btn{ padding:11px 20px;border-radius:10px;font-weight:600;font-size:14px; display:inline-flex;align-items:center;justify-content:center;gap:8px; border:none;transition:transform .12s, box-shadow .15s; -webkit-tap-highlight-color:transparent; } .brands-body .btn:hover{transform:translateY(-1px)} /* Tactile press feedback — hover doesn't fire on touch, so without this a tap on mobile gives no feedback at all until the page navigates. */ .brands-body .btn:active{transform:scale(0.97) translateY(0)} .brands-body .btn-p{background:var(--grad);color:#fff;box-shadow:0 6px 16px -4px rgba(239,68,68,0.4)} .brands-body .btn-p:hover{box-shadow:0 10px 20px -4px rgba(239,68,68,0.5)} .brands-body .btn-g{background:var(--card);border:1px solid var(--border-strong);color:var(--text)} .brands-body .btn-g:hover{border-color:var(--text3)} .brands-body .btn-lg{padding:15px 30px;font-size:15px;border-radius:12px} .brands-body .btn-sm{padding:8px 16px;font-size:13px;border-radius:9px} .brands-body .btn-full{width:100%;justify-content:center} .brands-body .btn-link{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;color:var(--coral-text)} @media (max-width:560px){ /* Native apps present a primary/secondary action pair as two full-width stacked buttons rather than auto-width buttons wrapping unevenly. */ .brands-body .hero-ctas, .brands-body .bh-ctas, .brands-body .cta-btns{flex-direction:column;align-items:stretch} .brands-body .hero-ctas .btn, .brands-body .bh-ctas .btn, .brands-body .cta-btns .btn{width:100%;justify-content:center} } /* SECTION HEADER PATTERN (identical to Event Marketplace) */ .brands-body .section-head{max-width:640px} .brands-body .section-head.center{max-width:640px;margin:0 auto} .brands-body .section-eyebrow{ font-size:11.5px;font-weight:600;letter-spacing:0.16em; text-transform:uppercase;color:var(--coral-text); margin-bottom:14px;display:inline-flex;align-items:center;gap:10px; } .brands-body .section-eyebrow.green{color:var(--green-text)} .brands-body .section-eyebrow.amber{color:var(--amber-text)} .brands-body .section-eyebrow::before{content:'';width:24px;height:1.5px;background:var(--grad);flex-shrink:0} .brands-body h2.section-title{font-size:clamp(28px,3.6vw,40px);margin-bottom:14px;letter-spacing:-0.025em} .brands-body .section-sub{font-size:16px;color:var(--text2);line-height:1.6} .brands-body .center{text-align:center} .brands-body .mx-auto{margin-left:auto;margin-right:auto} /* BADGES */ .brands-body .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid transparent} .brands-body .badge-orange{background:var(--coral-bg);color:var(--coral-text);border-color:var(--coral-border)} .brands-body .badge-green{background:var(--green-bg);color:var(--green-text)} .brands-body .badge-purple{background:var(--purple-bg);color:var(--purple-text)} .brands-body .badge-blue{background:var(--blue-bg);color:var(--blue-text)} .brands-body .badge-amber{background:var(--amber-bg);color:var(--amber-text)} .brands-body .badge-red{background:var(--red-bg);color:var(--red-text)} /* Scroll-reveal system — identical to the Event Marketplace page's, so both pages animate content into view the same way. */ .brands-body .reveal{ opacity:0;transform:translateY(24px); transition:opacity 0.9s var(--ease-out-quart), transform 0.9s var(--ease-out-quart); transition-delay:var(--reveal-delay, 0ms); } .brands-body .reveal.in{opacity:1;transform:translateY(0)} .brands-body .reveal-scale{ opacity:0;transform:scale(0.94); transition:opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-back); } .brands-body .reveal-scale.in{opacity:1;transform:scale(1)} /* GENERIC CARD */ .brands-body .card{ background:var(--card);border:1px solid var(--border);border-radius:16px; padding:26px;transition:transform .2s, box-shadow .2s, border-color .2s; } .brands-body .card.hover-lift:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(30,27,22,0.10);border-color:var(--coral-border)} .brands-body .card.tinted{background:linear-gradient(145deg, var(--coral-bg) 0%, var(--card) 65%);border-color:var(--coral-border)} /* ICON BADGES */ .brands-body .icon-badge{ width:44px;height:44px;border-radius:11px;flex-shrink:0; background:var(--grad);color:#fff;font-size:19px; display:flex;align-items:center;justify-content:center; margin-bottom:16px;box-shadow:0 6px 14px -4px rgba(239,68,68,0.35); } .brands-body .icon-chip{ width:38px;height:38px;border-radius:10px;flex-shrink:0;font-size:17px; display:flex;align-items:center;justify-content:center; } .brands-body .icon-chip.orange{background:var(--coral-bg);color:var(--coral-text)} .brands-body .icon-chip.green{background:var(--green-bg);color:var(--green-text)} .brands-body .icon-chip.blue{background:var(--blue-bg);color:var(--blue-text)} .brands-body .icon-chip.purple{background:var(--purple-bg);color:var(--purple-text)} .brands-body .icon-chip.amber{background:var(--amber-bg);color:var(--amber-text)} .brands-body .check-badge{ width:20px;height:20px;border-radius:6px;flex-shrink:0;margin-top:2px; background:var(--green-bg);color:var(--green-text); font-size:10px;font-weight:800; display:flex;align-items:center;justify-content:center; } .brands-body .cross-badge{ width:20px;height:20px;border-radius:6px;flex-shrink:0;margin-top:2px; background:var(--red-bg);color:var(--red-text); font-size:10px;font-weight:800; display:flex;align-items:center;justify-content:center; } /* Avatars (initials) */ .brands-body .avatar{ border-radius:10px;flex-shrink:0;color:#fff;font-weight:800; display:flex;align-items:center;justify-content:center; } /* ============================================ SITE HEADER OVERRIDE — this stylesheet only loads on the Brands page, so these bare (unscoped) selectors only ever affect this page. Scoped to [data-theme="dark"] only: the hero itself is theme-reactive now (see HERO below), so in light theme the header's normal light-first, transparent-then-white behaviour is already correct and needs no help. In dark theme the page is dark from the top, so the header gets its own permanent dark chrome instead of waiting for the scroll-triggered opaque background, keeping nav text/icons legible immediately. ============================================ */ :root[data-theme="dark"] header{ background:rgba(10,10,18,.82) !important; backdrop-filter:blur(20px) saturate(140%) !important; -webkit-backdrop-filter:blur(20px) saturate(140%) !important; border-bottom:1px solid rgba(255,255,255,.08) !important; } :root[data-theme="dark"] header.scrolled{background:rgba(10,10,18,.94) !important} /* Scoped to the header specifically — not a :root override of --dark-text, which would (and once did) leak into every h1-h6 on the page, since new-landing.css's global heading rule reads that same variable. This forces only the header's own nav-link color, leaving --text/--dark-text free to stay theme-reactive everywhere else on the page. */ :root[data-theme="dark"] header nav a{color:#F1F1F3 !important} :root[data-theme="dark"] header nav a:hover, :root[data-theme="dark"] header nav a.active-nav{color:#FB923C !important} :root[data-theme="dark"] .lang-switcher-btn i{color:rgba(241,241,243,.72) !important} :root[data-theme="dark"] .lang-switcher-btn:hover i{color:rgba(241,241,243,.95) !important} :root[data-theme="dark"] .lang-switcher-menu{background:#14141f;border:1px solid rgba(255,255,255,.1)} :root[data-theme="dark"] .lang-switcher-item{color:rgba(241,241,243,.85)} :root[data-theme="dark"] .lang-switcher-item:hover,:root[data-theme="dark"] .lang-switcher-item.is-active{background:rgba(255,255,255,.06)} :root[data-theme="dark"] .theme-toggle-btn,:root[data-theme="dark"] .theme-toggle-fab{border-color:rgba(255,255,255,.16) !important;color:#F1F1F3 !important;background:rgba(255,255,255,.06) !important} :root[data-theme="dark"] .burger-menu span{background:#F1F1F3 !important} :root[data-theme="dark"] .mobile-nav{background:rgba(10,10,18,.98) !important} :root[data-theme="dark"] .mobile-nav a{color:#F1F1F3 !important;border-bottom-color:rgba(255,255,255,.08) !important} /* ============================================ HERO ============================================ */ /* Theme-reactive hero — uses the page's normal tokens (--bg/--card/--text etc, already light in light theme and dark in dark theme) so it matches whatever the visitor's theme actually is, instead of staying permanently dark and reading as "stuck in dark mode" the moment the page loads. Only the floating cards over the photo (further down) keep a fixed dark-glass look, since they sit on an image rather than the page background. */ .brands-body .hero{ background:linear-gradient(160deg,var(--bg) 0%,var(--bg-alt) 100%); min-height:100vh;display:flex;align-items:center;box-sizing:border-box; padding:130px 0 40px;position:relative;overflow:hidden;color:var(--text); } .brands-body .hero .wrap{width:100%} .brands-body .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;position:relative;z-index:1} /* min-width:0 lets this grid item shrink below its children's intrinsic content width — without it, .hero-liner's own nowrap+max-width can't actually cap anything, since a grid item won't shrink narrower than an unbreakable child by default and pushes the whole hero wider instead. */ .brands-body .hero-content{text-align:left;min-width:0} .brands-body .hero-liner{ display:inline-flex;align-items:center;gap:10px; background:var(--card);border:1px solid var(--border); border-radius:50px;padding:9px 18px;margin-bottom:24px; font-size:13px;color:var(--text2);font-weight:600; /* One line always. On screens too narrow to fit the full sentence, the pill scrolls horizontally rather than wrapping and breaking its shape — scrollbar hidden so it still reads as a clean badge. */ white-space:nowrap;max-width:100%;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; } .brands-body .hero-liner::-webkit-scrollbar{display:none} .brands-body .hero-liner .liner-dot{width:8px;height:8px;border-radius:50%;background:#38BDF8;flex-shrink:0;box-shadow:0 0 8px rgba(56,189,248,.8)} .brands-body .hero-liner strong{color:var(--orange);font-weight:700} .brands-body .hero h1{ font-size:clamp(34px,4.6vw,52px);font-weight:800;letter-spacing:-0.03em; line-height:1.08;margin-bottom:20px;color:var(--text); } .brands-body .hero h1 .hi{ background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .brands-body .hero-desc{font-size:16.5px;color:var(--text2);line-height:1.65;max-width:480px;margin:0 0 28px} .brands-body .hero-feat-row{display:flex;gap:22px;margin-bottom:30px;flex-wrap:wrap} .brands-body .hero-feat{display:flex;align-items:center;gap:10px;max-width:120px} .brands-body .hero-feat-icon{ width:38px;height:38px;border-radius:11px;flex-shrink:0; background:var(--card);border:1px solid var(--border);color:var(--text2); display:flex;align-items:center;justify-content:center; } .brands-body .hero-feat-icon svg{width:17px;height:17px} .brands-body .hero-feat-label{font-size:12px;color:var(--text2);line-height:1.35} .brands-body .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;justify-content:flex-start} .brands-body .hero-ctas .btn-g{background:var(--card);border-color:var(--border-strong);color:var(--text)} .brands-body .hero-ctas .btn-g:hover{border-color:var(--text3)} .brands-body .hero-pills{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:8px} .brands-body .hero-pill{ display:inline-flex;align-items:center;gap:8px; border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700; border:1px solid transparent; } .brands-body .hero-pill.live{background:rgba(52,211,153,.12);color:#34D399;border-color:rgba(52,211,153,.3)} .brands-body .hero-pill.orange{background:rgba(249,115,22,.12);color:#FB923C;border-color:rgba(249,115,22,.3)} .brands-body .live-dot{width:7px;height:7px;border-radius:50%;background:#34D399;animation:brPulse 2s infinite} @keyframes brPulse{0%,100%{opacity:1}50%{opacity:.4}} /* Visual column — photo with floating stat cards, à la a product screenshot */ .brands-body .hero-visual{position:relative;max-width:380px;margin:0 auto} .brands-body .hero-visual-frame{ position:relative;border-radius:22px;overflow:hidden; aspect-ratio:1/0.98; } .brands-body .hero-visual-img{width:100%;height:100%;object-fit:cover;border-radius:22px} /* These float cards sit on top of the photo, not the page background, so they keep their own fixed dark-glass look (light text/borders) in both themes — same reasoning as .mockup-frame below: an overlay on an image doesn't invert with the rest of the page. */ .brands-body .hero-float{ position:absolute;background:rgba(20,20,31,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 16px; box-shadow:0 16px 34px -12px rgba(0,0,0,.5);z-index:2; } .brands-body .hero-float-label{font-size:11px;color:#A7A7B8;font-weight:600;margin-bottom:6px} .brands-body .hero-float-perf{top:20px;right:-18px} .brands-body .hero-float-row{display:flex;align-items:center;gap:8px} .brands-body .hero-float-bars{display:flex;align-items:flex-end;gap:2px;height:20px} .brands-body .hero-float-bars span{width:4px;border-radius:2px;background:linear-gradient(180deg,#E879F9,#A78BFA)} .brands-body .hero-float-value{font-size:17px;font-weight:800;color:#4ADE80} .brands-body .hero-float-sub{font-size:10.5px;color:#75758A;margin-top:2px} .brands-body .hero-float-approved{top:130px;right:-30px} .brands-body .hero-float-avatars{display:flex;align-items:center} .brands-body .hero-float-avatars span{ width:26px;height:26px;border-radius:50%;margin-left:-8px;border:2px solid #14141F; display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff; } .brands-body .hero-float-avatars span:first-child{margin-left:0} .brands-body .hero-float-avatars .more{background:#7C3AED;color:#fff;font-size:9.5px} .brands-body .hero-float-trusted{bottom:20px;left:-16px;display:flex;align-items:center;gap:10px} .brands-body .hero-float-value-sm{font-size:12.5px;font-weight:800;color:#F5F5F7} .brands-body .hero-float-reach{bottom:-22px;right:24px;display:flex;align-items:center;gap:14px} .brands-body .hero-float-value-lg{font-size:20px;font-weight:800;color:var(--orange)} .brands-body .hero-float-icon-circle{ width:38px;height:38px;border-radius:50%;flex-shrink:0; background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center; } .brands-body .hero-float-icon-circle svg{width:17px;height:17px} .brands-body .hero-stats{ display:flex;justify-content:center;gap:48px;flex-wrap:wrap; margin-top:56px;padding:32px 24px;border-radius:20px; background:var(--card);border:1px solid var(--border);position:relative;z-index:1; } .brands-body .hero-stat-num{ font-family:'Public Sans',sans-serif;font-weight:800;font-size:30px;letter-spacing:-0.02em; background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .brands-body .hero-stat-lbl{font-size:12.5px;color:var(--text2);margin-top:4px} /* ============================================ HERO MOCKUP — live bid strip. This is a "product screenshot" style panel, so unlike the rest of the page it stays permanently dark with neon accents regardless of the site theme — the same way a phone/app screenshot on a landing page keeps its own UI rather than inverting. Tokens below are local to .mockup-frame, not the page's --bg/--text. ============================================ */ .brands-body .hero-mockup-section{padding:64px 0 96px} .brands-body .hero-mockup-strip{margin-top:0} .brands-body .mockup-frame{ --mf-bg:#0B0B12; --mf-card:#131320; --mf-card-2:#181828; --mf-border:rgba(255,255,255,.08); --mf-border-2:rgba(255,255,255,.12); --mf-text:#F5F5F7; --mf-text2:#A0A0B0; --mf-text3:#6E6E82; --mf-pink:#EC4899; --mf-green:#34D399; background:linear-gradient(160deg,var(--mf-bg) 0%,#0F0F1A 100%); border:1px solid var(--mf-border);border-radius:24px;padding:28px; box-shadow:0 40px 90px -24px rgba(0,0,0,.55); max-width:1080px;margin:0 auto;position:relative;z-index:1; color:var(--mf-text);font-family:'Rubik',sans-serif; } .brands-body .mf-header{ display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap; padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--mf-border); } .brands-body .mf-header-left{display:flex;align-items:flex-start;gap:16px;min-width:0} .brands-body .mf-icon-badge{ width:56px;height:56px;border-radius:16px;flex-shrink:0; background:var(--mf-card);border:1px solid rgba(236,72,153,.4); box-shadow:0 0 0 1px rgba(236,72,153,.15), 0 0 24px -4px rgba(236,72,153,.5); display:flex;align-items:center;justify-content:center;color:var(--mf-pink); } .brands-body .mf-icon-badge svg{width:24px;height:24px} .brands-body .mf-label{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mf-pink);margin-bottom:4px} .brands-body .mf-heading{font-family:'Public Sans',sans-serif;font-size:24px;font-weight:800;letter-spacing:-0.02em;color:var(--mf-text);margin-bottom:5px} .brands-body .mf-subtitle{font-size:13px;color:var(--mf-text2)} .brands-body .mf-pills{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .brands-body .mf-pill{ display:flex;align-items:center;gap:9px;border-radius:14px;padding:8px 14px; font-size:12px;line-height:1.35;white-space:nowrap; } .brands-body .mf-pill-icon{flex-shrink:0;display:flex} .brands-body .mf-pill-icon svg{width:17px;height:17px} .brands-body .mf-pill .t{font-weight:700;color:var(--mf-text)} .brands-body .mf-pill .s{color:var(--mf-text3);font-size:11px} .brands-body .mf-pill-green{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25)} .brands-body .mf-pill-green .mf-dot{width:7px;height:7px;border-radius:50%;background:var(--mf-green);animation:brPulse 2s infinite;flex-shrink:0} .brands-body .mf-pill-dark{background:var(--mf-card);border:1px solid var(--mf-border-2);color:var(--mf-text3)} .brands-body .mf-pill-cta{ background:var(--grad);color:#fff;font-weight:700;cursor:default; box-shadow:0 8px 20px -6px rgba(239,68,68,.55); } .brands-body .mf-pill-cta svg{width:15px;height:15px} .brands-body .mf-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .brands-body .bid-card{ background:var(--mf-card);border:1px solid var(--accent-border,var(--mf-border)); border-radius:16px;padding:18px;position:relative; } .brands-body .bcd-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px} .brands-body .bcd-av{width:38px;height:38px;border-radius:11px;font-size:12px;flex-shrink:0} .brands-body .bcd-name{font-size:13.5px;font-weight:700;color:var(--mf-text);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .brands-body .bcd-plat{font-size:10.5px;color:var(--mf-text3);margin-top:2px;display:flex;align-items:center;gap:5px} .brands-body .bcd-oauth{font-size:9px;font-weight:700;background:rgba(52,211,153,.15);color:var(--mf-green);padding:2px 7px;border-radius:20px;white-space:nowrap} .brands-body .bcd-bookmark{margin-left:auto;flex-shrink:0;color:var(--mf-text3);opacity:.7} .brands-body .bcd-bookmark svg{width:15px;height:15px} .brands-body .bcd-divider{height:1px;background:var(--mf-border);margin:12px 0} .brands-body .bcd-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px} .brands-body .bcd-metric .l{font-size:8.5px;color:var(--mf-text3);font-weight:700;text-transform:uppercase;letter-spacing:.4px} .brands-body .bcd-metric .v{font-size:13px;font-weight:800;color:var(--mf-text);margin-top:3px} .brands-body .bcd-metric .v.green{color:var(--mf-green)} .brands-body .bcd-score-row{display:flex;align-items:center;gap:10px;margin-bottom:14px} .brands-body .bcd-bar{flex:1;height:5px;background:var(--mf-border-2);border-radius:3px;overflow:hidden} .brands-body .bcd-fill{height:100%;border-radius:3px;background:var(--accent,var(--grad))} .brands-body .bcd-score-num{font-size:11px;font-weight:700;color:var(--mf-text3);white-space:nowrap} .brands-body .bcd-actions{display:flex;gap:8px;margin-bottom:12px} .brands-body .bcd-accept{ flex:1;background:var(--accent,var(--grad));color:#fff;font-size:12px;font-weight:700; padding:9px;border-radius:10px;border:none;text-align:center; transition:transform .12s, box-shadow .15s;-webkit-tap-highlight-color:transparent; } .brands-body .bcd-accept:hover{transform:translateY(-1px)} .brands-body .bcd-accept:active{transform:scale(0.97)} .brands-body .bcd-counter{ padding:9px 14px;background:var(--mf-card-2);color:var(--mf-text2);font-size:12px;font-weight:700; border-radius:10px;border:1px solid var(--mf-border-2);-webkit-tap-highlight-color:transparent; } .brands-body .bcd-response{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--mf-text3)} .brands-body .bcd-response svg{width:13px;height:13px;color:var(--mf-green);flex-shrink:0} .brands-body .mf-lowest{ margin-top:16px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25); border-radius:16px;padding:16px 20px; display:flex;align-items:center;justify-content:space-between;gap:16px;overflow:hidden;position:relative; } .brands-body .mf-lowest-text{display:flex;align-items:center;gap:14px;min-width:0} .brands-body .mf-lowest-icon{ width:40px;height:40px;border-radius:12px;flex-shrink:0; background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.3); display:flex;align-items:center;justify-content:center;color:var(--mf-green); } .brands-body .mf-lowest-icon svg{width:19px;height:19px} .brands-body .mf-lowest .t{font-size:13.5px;font-weight:700;color:var(--mf-text)} .brands-body .mf-lowest .t b{color:var(--mf-green)} .brands-body .mf-lowest .s{font-size:11.5px;color:var(--mf-text3);margin-top:2px} .brands-body .mf-lowest-illustration{display:flex;align-items:center;gap:6px;flex-shrink:0;opacity:.8} .brands-body .mf-lowest-illustration .stack{display:flex} .brands-body .mf-lowest-illustration .stack span{ width:26px;height:26px;border-radius:50%;background:var(--mf-card-2);border:2px solid rgba(52,211,153,.3); display:flex;align-items:center;justify-content:center;color:var(--mf-green);margin-left:-8px; } .brands-body .mf-lowest-illustration .stack span:first-child{margin-left:0} .brands-body .mf-lowest-illustration .stack svg{width:13px;height:13px} .brands-body .mf-lowest-illustration .shield-lg{ width:38px;height:38px;border-radius:50%;background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.35); display:flex;align-items:center;justify-content:center;color:var(--mf-green); } .brands-body .mf-lowest-illustration .shield-lg svg{width:18px;height:18px} .brands-body .mf-escrow{ margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:6px; } .brands-body .mf-escrow-left{display:flex;align-items:center;gap:12px;min-width:0} .brands-body .mf-escrow-icon{ width:34px;height:34px;border-radius:10px;flex-shrink:0; background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.3); display:flex;align-items:center;justify-content:center;color:var(--orange); } .brands-body .mf-escrow-icon svg{width:16px;height:16px} .brands-body .mf-escrow-text .t{font-size:13px;font-weight:700;color:var(--mf-text)} .brands-body .mf-escrow-text .s{font-size:11.5px;color:var(--mf-text3)} .brands-body .mf-view-chat{ display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--mf-border-2); color:var(--mf-text);font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:11px; transition:border-color .15s, background .15s;-webkit-tap-highlight-color:transparent;flex-shrink:0; } .brands-body .mf-view-chat:hover{border-color:var(--orange);background:rgba(249,115,22,.08)} .brands-body .mf-view-chat svg{width:15px;height:15px;color:var(--orange)} @media (max-width:640px){ .brands-body .mockup-frame{padding:20px;border-radius:20px} .brands-body .mf-header{flex-direction:column} .brands-body .mf-pills{width:100%} .brands-body .mf-heading{font-size:20px} .brands-body .mf-lowest{flex-direction:column;align-items:flex-start} .brands-body .mf-lowest-illustration{display:none} } /* ============================================ GLOBAL TICKER (marquee) ============================================ */ .brands-body .ticker-wrap{ background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding:14px 0;overflow:hidden;white-space:nowrap; } .brands-body .ticker-inner{display:inline-flex;gap:52px;animation:brTicker 32s linear infinite} .brands-body .ticker-wrap:hover .ticker-inner{animation-play-state:paused} @keyframes brTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}} .brands-body .ticker-item{font-size:13px;font-weight:700;color:var(--text2);display:inline-flex;align-items:center;gap:9px} .brands-body .ticker-item strong{color:var(--coral-text);font-weight:700} /* ============================================ BRAND HUB (2-col intro) ============================================ */ .brands-body .brand-hub{position:relative;overflow:hidden} .brands-body .brand-hub::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.6} .brands-body .bh-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center} .brands-body .bh-global-liner{ background:var(--coral-bg);border:1px solid var(--coral-border); border-radius:14px;padding:14px 18px;margin-bottom:24px; display:flex;align-items:center;gap:12px; } .brands-body .bh-global-liner .globe{font-size:22px;flex-shrink:0;color:var(--coral-text)} .brands-body .bh-global-liner .text{font-size:14px;font-weight:600;line-height:1.45;color:var(--text)} .brands-body .bh-global-liner em{font-style:normal;color:var(--coral-text)} .brands-body .bh-features{display:flex;flex-direction:column;gap:12px;margin-bottom:26px} .brands-body .bh-feat{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--text2);line-height:1.55} .brands-body .bh-ctas{display:flex;gap:12px;flex-wrap:wrap} /* BH visual card stack */ .brands-body .bh-card-stack{display:flex;flex-direction:column;gap:12px} .brands-body .bh-card-stack-img{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.35)} .brands-body .bh-showcase-img{width:100%;height:auto;border-radius:18px;display:block} .brands-body .bh-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 22px;transition:transform .2s} .brands-body .bh-card:hover{transform:translateY(-2px)} .brands-body .bh-card.overview{background:linear-gradient(135deg, var(--coral-bg) 0%, var(--card) 65%);border-color:var(--coral-border)} .brands-body .bh-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px} .brands-body .bh-card-title{font-size:13px;font-weight:800} .brands-body .stat-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .brands-body .stat-mini{background:var(--bg-alt);border-radius:9px;padding:10px 12px} .brands-body .stat-mini .v{font-size:19px;font-weight:800} .brands-body .stat-mini .v.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .brands-body .stat-mini .v.green{color:var(--green-text)} .brands-body .stat-mini .l{font-size:10px;color:var(--text3);margin-top:2px} /* Negotiation flow (inside bh-card + full negotiate section) */ .brands-body .neg-flow{display:flex;flex-direction:column;gap:8px} .brands-body .neg-step{display:flex;align-items:center;gap:12px;background:var(--bg-alt);border-radius:10px;padding:10px 13px} .brands-body .neg-step.brand{border-left:3px solid var(--orange)} .brands-body .neg-step.creator{border-left:3px solid var(--green-text)} .brands-body .neg-step.accepted{border-left:3px solid var(--blue-text)} .brands-body .neg-avatar{width:28px;height:28px;border-radius:8px;font-size:10px} .brands-body .neg-text{flex:1;font-size:12px;color:var(--text2);line-height:1.4} .brands-body .neg-price{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap} .brands-body .neg-price.counter{color:var(--green-text)} .brands-body .neg-price.final{color:var(--orange)} .brands-body .neg-side{text-align:right} .brands-body .neg-badge{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;margin-top:2px;display:inline-block} .brands-body .neg-badge.pending{background:var(--amber-bg);color:var(--amber-text)} .brands-body .neg-badge.counter{background:var(--green-bg);color:var(--green-text)} .brands-body .neg-badge.final{background:var(--blue-bg);color:var(--blue-text)} .brands-body .round-indicator{font-size:10.5px;color:var(--text3);text-align:center;padding:2px 0} /* Escrow lifecycle mini + full escrow visual (shared) */ .brands-body .flow-list{display:flex;flex-direction:column} .brands-body .flow-step{display:flex;gap:13px;align-items:flex-start;padding-bottom:16px;position:relative} .brands-body .flow-step:last-child{padding-bottom:0} .brands-body .flow-step::before{ content:'';position:absolute;left:11px;top:26px;width:2px;height:calc(100% - 8px); background:var(--border); } .brands-body .flow-step:last-child::before{display:none} .brands-body .flow-dot{ width:24px;height:24px;border-radius:50%;flex-shrink:0;position:relative;z-index:1; display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800; background:var(--border);color:var(--text2); } .brands-body .flow-dot.done{background:var(--grad);color:#fff} .brands-body .flow-dot.active{background:var(--coral-bg);border:1.5px solid var(--orange);color:var(--coral-text)} .brands-body .flow-label{font-size:12.5px;font-weight:700;color:var(--text)} .brands-body .flow-sub{font-size:11px;color:var(--text3);margin-top:2px;line-height:1.4} /* ============================================ HOW IT WORKS ============================================ */ .brands-body .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px} .brands-body .step-card{ background:var(--card);border:1px solid var(--border);border-radius:16px;padding:26px 22px; position:relative;transition:transform .2s, box-shadow .2s; } .brands-body .step-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(30,27,22,0.10)} .brands-body .step-n{ width:36px;height:36px;border-radius:10px;background:var(--grad);color:#fff; font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:16px; } .brands-body .step-card h3{font-size:16px;margin-bottom:8px} .brands-body .step-card p{font-size:13.5px;color:var(--text2);line-height:1.6} /* ============================================ WHO IS THIS FOR / TWO-COLUMN FEATURE PANELS ============================================ */ .brands-body .two-col-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:0 auto} .brands-body .panel{border-radius:18px;padding:28px;border:1.5px solid} .brands-body .panel.orange{background:linear-gradient(145deg, var(--coral-bg) 0%, transparent 100%);border-color:var(--coral-border)} .brands-body .panel.green{background:linear-gradient(145deg, var(--green-bg) 0%, transparent 100%);border-color:rgba(34,197,94,.35)} .brands-body .panel-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px} .brands-body .panel-title{font-size:15.5px;font-weight:800;margin-bottom:8px} .brands-body .panel-desc{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:16px} .brands-body .panel-list{display:flex;flex-direction:column;gap:8px} .brands-body .panel-list li{font-size:12.5px;color:var(--text2);display:flex;align-items:center;gap:8px;list-style:none} /* ============================================ PRICE NEGOTIATION FEATURE (thread mockup) ============================================ */ .brands-body .neg-section-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .brands-body .neg-visual{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:26px} .brands-body .neg-visual-title{font-size:14px;font-weight:800;margin-bottom:3px} .brands-body .neg-visual-sub{font-size:12px;color:var(--text3);margin-bottom:18px} .brands-body .nt-msg{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border)} .brands-body .nt-msg:last-child{border-bottom:none} .brands-body .nt-av{width:30px;height:30px;border-radius:8px;flex-shrink:0;font-size:10px} .brands-body .nt-body{flex:1} .brands-body .nt-who{font-size:10px;font-weight:800;margin-bottom:4px} .brands-body .nt-who.brand{color:var(--orange)} .brands-body .nt-who.creator{color:var(--green-text)} .brands-body .nt-bubble{background:var(--bg-alt);border-radius:10px;padding:10px 13px;font-size:12.5px;line-height:1.55;color:var(--text2)} .brands-body .nt-bubble.brand-bubble{background:var(--coral-bg);border:1px solid var(--coral-border)} .brands-body .nt-bubble.creator-bubble{background:var(--green-bg);border:1px solid rgba(34,197,94,.25)} .brands-body .nt-bubble.system-bubble{background:var(--blue-bg);border:1px solid rgba(96,165,250,.3);text-align:center;font-size:11.5px} .brands-body .nt-price{font-size:16px;font-weight:800;margin-top:6px} .brands-body .nt-price.orange{color:var(--orange)} .brands-body .nt-price.green{color:var(--green-text)} .brands-body .nt-price.blue{color:var(--blue-text)} .brands-body .nt-rule{background:var(--coral-bg);border:1px solid var(--coral-border);border-radius:9px;padding:9px 12px;margin-top:14px;font-size:11.5px;color:var(--text2);text-align:center} .brands-body .neg-points{display:flex;flex-direction:column;gap:22px;margin-top:32px} .brands-body .neg-point{display:flex;gap:16px} .brands-body .np-h{font-size:15px;font-weight:800;margin-bottom:4px} .brands-body .np-p{font-size:13.5px;color:var(--text2);line-height:1.6} /* ============================================ DEAL TYPES ============================================ */ .brands-body .deal-types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px} .brands-body .dt-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;transition:transform .2s, box-shadow .2s} .brands-body .dt-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(30,27,22,0.10)} .brands-body .dt-icon{font-size:30px;margin-bottom:14px;color:var(--orange);display:flex;gap:6px} .brands-body .dt-card h3{font-size:17px;margin-bottom:8px} .brands-body .dt-card p{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:16px} .brands-body .dt-steps{display:flex;flex-direction:column;gap:7px} .brands-body .dt-step{font-size:12px;color:var(--text3);display:flex;align-items:flex-start;gap:7px} .brands-body .dt-step::before{content:'→';color:var(--orange);font-weight:700;flex-shrink:0} /* ============================================ DIRECTORY VS SYSTEM / OLD VS NEW COMPARISON ============================================ */ .brands-body .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;margin:0 auto} .brands-body .compare-col{border-radius:18px;padding:28px} .brands-body .compare-col.old{background:var(--red-bg);border:1px solid rgba(239,68,68,.25)} .brands-body .compare-col.new{background:linear-gradient(145deg, var(--coral-bg) 0%, transparent 100%);border:1.5px solid var(--coral-border)} .brands-body .compare-eyebrow{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px} .brands-body .compare-col.old .compare-eyebrow{color:var(--red-text)} .brands-body .compare-col.new .compare-eyebrow{color:var(--coral-text)} .brands-body .compare-list{display:flex;flex-direction:column;gap:12px} .brands-body .compare-item{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--text2);line-height:1.5} /* ============================================ MARKET SHIFT / CASE STUDY ============================================ */ .brands-body .shift-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .brands-body .shift-card{border-radius:14px;padding:20px 24px} .brands-body .shift-card.old{background:var(--red-bg);border:1px solid rgba(239,68,68,.25)} .brands-body .shift-card.new{background:var(--green-bg);border:1px solid rgba(34,197,94,.25)} .brands-body .shift-eyebrow{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px} .brands-body .shift-card.old .shift-eyebrow{color:var(--red-text)} .brands-body .shift-card.new .shift-eyebrow{color:var(--green-text)} .brands-body .shift-quote{font-size:17px;font-weight:700;font-style:italic;line-height:1.5;padding-left:16px} .brands-body .shift-card.old .shift-quote{color:var(--text2);border-left:3px solid rgba(239,68,68,.4)} .brands-body .shift-card.new .shift-quote{color:var(--text);border-left:3px solid rgba(34,197,94,.5)} .brands-body .shift-divider{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:13px;font-weight:600;margin:16px 0} .brands-body .shift-divider .line{flex:1;height:1px;background:var(--border)} .brands-body .roi-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:26px} .brands-body .roi-title{font-size:13.5px;font-weight:800;margin-bottom:5px} .brands-body .roi-sub{font-size:12px;color:var(--text3);margin-bottom:22px} .brands-body .roi-row{margin-bottom:14px} .brands-body .roi-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .brands-body .roi-row-name{font-size:12px;font-weight:700;color:var(--text2)} .brands-body .roi-row-name .tag{color:var(--orange);font-size:10px;margin-left:4px;font-weight:800} .brands-body .roi-row-eng{font-size:12px;font-weight:800} .brands-body .roi-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden} .brands-body .roi-fill{height:100%;border-radius:4px} .brands-body .roi-row-note{font-size:10.5px;color:var(--text3);margin-top:5px} .brands-body .roi-callout{background:var(--green-bg);border:1px solid rgba(34,197,94,.25);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--green-text);font-weight:600;line-height:1.6} .brands-body .press-callout{margin-top:12px;background:var(--coral-bg);border:1px solid var(--coral-border);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text2);line-height:1.5} /* ============================================ ONE PLATFORM PROPOSITION + COMPARISON TABLE ============================================ */ .brands-body .pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:48px} .brands-body .pillar-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;text-align:center;transition:border-color .2s} .brands-body .pillar-card:hover{border-color:var(--coral-border)} .brands-body .pillar-card.featured{background:linear-gradient(145deg, var(--coral-bg) 0%, var(--card) 70%);border-color:var(--coral-border)} .brands-body .pillar-icon{font-size:30px;margin-bottom:12px;color:var(--orange)} .brands-body .pillar-card h3{font-size:14px;margin-bottom:6px} .brands-body .pillar-card p{font-size:12.5px;color:var(--text2);line-height:1.6} .brands-body .compare-table{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;max-width:900px;margin:0 auto} .brands-body .ct-head{padding:18px 26px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px} .brands-body .ct-head .t{font-size:14px;font-weight:800} .brands-body .ct-head .s{font-size:11.5px;color:var(--text3)} .brands-body .ct-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;border-bottom:1px solid var(--border)} .brands-body .ct-row:last-child{border-bottom:none} .brands-body .ct-cell{padding:13px 16px;font-size:12.5px;color:var(--text2)} .brands-body .ct-cell:first-child{padding-left:26px;font-weight:600} .brands-body .ct-cell.hd{font-size:10.5px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;border-left:1px solid var(--border)} .brands-body .ct-cell.bad{color:var(--red-text);border-left:1px solid var(--border)} .brands-body .ct-cell.mid{border-left:1px solid var(--border)} .brands-body .ct-cell.good{font-weight:700;color:var(--green-text);border-left:1px solid var(--coral-border);background:var(--coral-bg)} .brands-body .ct-cell.good.hd{color:var(--coral-text)} /* ============================================ CREATOR BENEFITS + FEED MOCKUP ============================================ */ .brands-body .benefit-list{display:flex;flex-direction:column;gap:12px;margin-bottom:28px} .brands-body .benefit-item{display:flex;gap:14px;align-items:flex-start;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:14px 16px} .brands-body .benefit-icon{font-size:20px;flex-shrink:0;margin-top:1px;color:var(--green-text)} .brands-body .benefit-h{font-size:13.5px;font-weight:800;margin-bottom:3px} .brands-body .benefit-p{font-size:12.5px;color:var(--text2);line-height:1.55} .brands-body .feed-mock{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:22px} .brands-body .feed-mock-title{font-size:13px;font-weight:800;margin-bottom:4px} .brands-body .feed-mock-sub{font-size:11.5px;color:var(--text3);margin-bottom:16px} .brands-body .feed-card{border-radius:12px;overflow:hidden;margin-bottom:10px;border:1px solid var(--border)} .brands-body .feed-card.invite{border:1.5px solid var(--coral-border)} .brands-body .feed-card-head{padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg-alt);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .brands-body .feed-card-head .n{font-size:12px;font-weight:700} .brands-body .feed-card-body{padding:12px 14px;background:var(--card)} .brands-body .feed-card-title{font-size:13.5px;font-weight:800;margin-bottom:6px} .brands-body .feed-note{border-radius:7px;padding:7px 10px;font-size:11px;font-weight:600;margin-bottom:8px} .brands-body .feed-note.blue{background:var(--blue-bg);color:var(--blue-text)} .brands-body .feed-note.green{background:var(--green-bg);color:var(--green-text)} .brands-body .feed-price-row{display:flex;justify-content:space-between;align-items:flex-end;gap:8px} .brands-body .feed-price{font-size:15px;font-weight:800} .brands-body .feed-price-note{font-size:10px;color:var(--text3)} .brands-body .feed-cta{background:var(--grad);color:#fff;font-size:11px;font-weight:700;padding:6px 14px;border-radius:20px;white-space:nowrap} .brands-body .apply-mock{background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:14px} .brands-body .apply-mock-title{font-size:12px;font-weight:800;margin-bottom:10px;color:var(--text3)} .brands-body .apply-mock-row{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:12.5px;font-weight:700;color:var(--text2);margin-bottom:8px} .brands-body .quick-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .brands-body .quick-stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center} .brands-body .quick-stat .v{font-size:21px;font-weight:800} .brands-body .quick-stat .v.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .brands-body .quick-stat .l{font-size:11px;color:var(--text3);margin-top:3px} /* ============================================ PLATFORMS ============================================ */ .brands-body .plat-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;justify-content:center} .brands-body .plat-chip{ display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:50px; font-size:13px;font-weight:700;color:var(--text);border:1px solid var(--border);background:var(--card); transition:transform .15s, border-color .15s; } .brands-body .plat-chip:hover{transform:translateY(-2px);border-color:var(--coral-border)} .brands-body .plat-chip .vtag{font-size:9px;opacity:.7;font-weight:600;margin-left:2px} .brands-body .plat-chip.native{background:linear-gradient(135deg, var(--coral-bg), var(--red-bg));border-color:var(--coral-border)} .brands-body .plat-note{text-align:center;margin-top:20px;font-size:12.5px;color:var(--text3)} /* ============================================ ESCROW & TRUST — fixed-dark accent section (always dark regardless of page theme, matching the Event Marketplace page's .stats/.why/.trust pattern, since its child text is hardcoded light). ============================================ */ .brands-body .escrow-trust{background:var(--ink);color:#fff} .brands-body .escrow-trust .section-eyebrow{color:#F9B389} .brands-body .escrow-trust h2.section-title{color:#fff} .brands-body .escrow-trust .section-sub{color:var(--ink-text2)} .brands-body .escrow-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .brands-body .escrow-trust-list{display:flex;flex-direction:column;gap:12px;margin-top:30px} .brands-body .et-item{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;transition:border-color .2s} .brands-body .et-item:hover{border-color:rgba(249,115,22,.3)} .brands-body .et-icon{font-size:19px;flex-shrink:0;margin-top:1px} .brands-body .et-title{font-size:13.5px;font-weight:800;color:#fff;margin-bottom:3px} .brands-body .et-desc{font-size:12.5px;color:var(--ink-text2);line-height:1.55} .brands-body .escrow-visual{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:26px} .brands-body .ev-header{font-size:11px;font-weight:800;color:var(--ink-text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px} .brands-body .escrow-trust .flow-dot{background:rgba(255,255,255,.08);color:var(--ink-text2)} .brands-body .escrow-trust .flow-dot.done{background:rgba(74,222,128,.2);border:1.5px solid rgba(74,222,128,.5);color:#4ADE80} .brands-body .escrow-trust .flow-dot.active{background:rgba(249,115,22,.2);border:1.5px solid rgba(249,115,22,.5);color:var(--orange)} .brands-body .escrow-trust .flow-step::before{background:rgba(255,255,255,.08)} .brands-body .escrow-trust .flow-label{color:#fff} .brands-body .escrow-trust .flow-sub{color:var(--ink-text2)} /* ============================================ STATS BAR ============================================ */ .brands-body .stats-bar{padding:56px 0;background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .brands-body .stats-grid{display:grid;grid-template-columns:repeat(5,1fr);text-align:center} .brands-body .stats-grid .stat{padding:14px;border-right:1px solid var(--border)} .brands-body .stats-grid .stat:last-child{border-right:none} .brands-body .stat-n{ font-family:'Public Sans',sans-serif;font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-0.02em;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; } .brands-body .stat-l{font-size:12px;color:var(--text2);font-weight:600;margin-top:6px;line-height:1.4} /* ============================================ TESTIMONIALS ============================================ */ .brands-body .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .brands-body .testi-grid + .testi-grid{margin-top:16px} .brands-body .testi-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:border-color .2s} .brands-body .testi-card:hover{border-color:var(--coral-border)} .brands-body .testi-stars{color:var(--amber-text);font-size:13px;margin-bottom:12px;letter-spacing:2px} .brands-body .testi-text{font-size:13.5px;color:var(--text2);line-height:1.7;font-style:italic;margin-bottom:18px} .brands-body .testi-auth{display:flex;align-items:center;gap:11px} .brands-body .testi-av{width:36px;height:36px;border-radius:10px;font-size:11.5px} .brands-body .testi-name{font-size:13px;font-weight:700} .brands-body .testi-role{font-size:11.5px;color:var(--text3)} .brands-body .press-bar{margin-top:44px;padding-top:36px;border-top:1px solid var(--border);text-align:center} .brands-body .press-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:18px} .brands-body .press-logos{display:flex;justify-content:center;align-items:center;gap:44px;flex-wrap:wrap} .brands-body .press-logo{font-size:14.5px;font-weight:800;color:var(--text3);letter-spacing:-0.4px;opacity:.6} /* ============================================ CAMPAIGN OUTCOMES ============================================ */ .brands-body .outcomes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .brands-body .outcome-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:border-color .2s} .brands-body .outcome-card:hover{border-color:var(--coral-border)} .brands-body .outcome-head{padding:18px 18px 14px} .brands-body .outcome-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px} .brands-body .outcome-title{font-size:14.5px;font-weight:800;line-height:1.3} .brands-body .outcome-body{padding:14px 18px 18px} .brands-body .outcome-goal{font-size:11.5px;color:var(--text2);margin-bottom:12px;line-height:1.5} .brands-body .outcome-goal b{color:var(--text)} .brands-body .outcome-rows{display:flex;flex-direction:column;gap:0} .brands-body .outcome-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:11.5px} .brands-body .outcome-row:last-child{border-bottom:none} .brands-body .outcome-row span{color:var(--text3)} .brands-body .outcome-row b{font-size:13px} .brands-body .outcome-foot{margin-top:12px;border-radius:8px;padding:8px 11px;font-size:11px;font-weight:700} /* ============================================ CREATOR 3-STEP STRIP ============================================ */ .brands-body .three-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .brands-body .three-step-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .brands-body .three-step-card{background:var(--bg-alt);border:1px solid var(--border);border-radius:14px;padding:22px 16px;text-align:center;position:relative} .brands-body .three-step-card.featured{background:linear-gradient(135deg, var(--green-bg), transparent);border-color:rgba(34,197,94,.3)} .brands-body .three-step-num{font-size:26px;font-weight:800;color:var(--border-strong);line-height:1;margin-bottom:12px} .brands-body .three-step-icon{font-size:19px;margin-bottom:10px;color:var(--green-text)} .brands-body .three-step-h{font-size:13px;font-weight:800;margin-bottom:6px} .brands-body .three-step-p{font-size:11.5px;color:var(--text2);line-height:1.55} .brands-body .platform-counts{margin-top:36px;padding-top:28px;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,1fr);text-align:center} .brands-body .platform-count{padding:12px;border-right:1px solid var(--border)} .brands-body .platform-count:last-child{border-right:none} .brands-body .platform-count .v{font-size:17px;font-weight:800} .brands-body .platform-count .v.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .brands-body .platform-count .l{font-size:10.5px;color:var(--text3);margin-top:3px} /* ============================================ PRICING ============================================ */ .brands-body .pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:800px;margin:52px auto 0} .brands-body .price-card{background:var(--card);border:1.5px solid var(--border);border-radius:20px;padding:32px;transition:border-color .2s;text-align:left} .brands-body .price-card.featured{border-color:var(--coral-border);background:linear-gradient(145deg, var(--coral-bg) 0%, var(--card) 60%)} .brands-body .price-card:hover{border-color:var(--coral-border)} .brands-body .price-lbl{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--coral-text);margin-bottom:10px} .brands-body .price-card h3{font-size:20px;margin-bottom:8px} .brands-body .price-num{font-size:36px;font-weight:800;letter-spacing:-0.02em;margin:12px 0 6px} .brands-body .price-num span{font-size:15px;font-weight:500;color:var(--text2)} .brands-body .price-desc{font-size:13.5px;color:var(--text2);margin-bottom:20px;line-height:1.6} .brands-body .price-div{border:none;border-top:1px solid var(--border);margin:16px 0} .brands-body .price-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px;padding:0} .brands-body .price-feats li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text2)} /* ============================================ TRUST & SECURITY BAR — fixed-dark accent strip ============================================ */ .brands-body .trust-security{background:var(--ink);border-top:1px solid var(--ink-border);border-bottom:1px solid var(--ink-border);padding:22px 0} .brands-body .ts-row{display:flex;justify-content:center;align-items:stretch;gap:0;flex-wrap:wrap} .brands-body .ts-item{display:flex;align-items:center;gap:9px;padding:10px 30px;border-right:1px solid var(--ink-border)} .brands-body .ts-item:last-child{border-right:none} .brands-body .ts-icon{font-size:18px;flex-shrink:0;color:#F9B389} .brands-body .ts-title{font-size:12.5px;font-weight:800;color:#fff} .brands-body .ts-sub{font-size:10.5px;color:var(--ink-text2)} /* ============================================ CAMPAIGN LIFECYCLE (7 statuses) ============================================ */ .brands-body .lifecycle-wrap{position:relative} .brands-body .lifecycle-connector{position:absolute;top:28px;left:7%;right:7%;height:3px;background:var(--grad);opacity:.5;z-index:0} .brands-body .lifecycle-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;position:relative;z-index:1} .brands-body .lc-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center;border-top:3px solid var(--border-strong)} .brands-body .lc-dot{width:34px;height:34px;border-radius:50%;background:var(--bg-alt);border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:13px} .brands-body .lc-label{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;color:var(--text3)} .brands-body .lc-desc{font-size:10.5px;color:var(--text2);line-height:1.5} .brands-body .lifecycle-note{margin-top:20px;background:var(--green-bg);border:1px solid rgba(34,197,94,.2);border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:14px;max-width:800px;margin-left:auto;margin-right:auto} .brands-body .lifecycle-note b{color:var(--text)} .brands-body .lifecycle-note .txt{font-size:12.5px;color:var(--text2);line-height:1.55} /* ============================================ RIGHTS & COMPLIANCE ============================================ */ .brands-body .rights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .brands-body .rights-grid + .rights-grid{margin-top:14px} .brands-body .rights-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;transition:border-color .2s} .brands-body .rights-card:hover{border-color:var(--coral-border)} .brands-body .rights-card.warn{border-color:rgba(239,68,68,.25)} .brands-body .rights-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;color:var(--coral-text)} .brands-body .rights-card.compliance .rights-eyebrow{color:var(--green-text)} .brands-body .rights-card.warn .rights-eyebrow{color:var(--red-text)} .brands-body .rights-h{font-size:13.5px;font-weight:800;margin-bottom:6px} .brands-body .rights-p{font-size:12.5px;color:var(--text2);line-height:1.6} .brands-body .rights-p b{color:var(--red-text)} /* ============================================ EAON TOKEN ============================================ */ .brands-body .eaon-token{position:relative;overflow:hidden} .brands-body .eaon-token::before{ content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:700px;height:400px;background:radial-gradient(ellipse, var(--amber-bg) 0%, transparent 65%); pointer-events:none;opacity:.6; } .brands-body .token-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1} .brands-body .token-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px} .brands-body .token-stat{background:var(--amber-bg);border:1px solid rgba(245,158,11,.25);border-radius:12px;padding:14px} .brands-body .token-stat .l{font-size:11px;font-weight:800;color:var(--amber-text);text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px} .brands-body .token-stat .v{font-size:19px;font-weight:800} .brands-body .token-stat .sub{font-size:12px;color:var(--text3);margin-top:2px} .brands-body .token-note{background:var(--amber-bg);border:1px solid rgba(245,158,11,.2);border-radius:12px;padding:14px 18px;font-size:13px;color:var(--text2);line-height:1.6} .brands-body .token-flow-card{background:var(--card);border:1px solid rgba(245,158,11,.25);border-radius:20px;padding:26px} .brands-body .token-flow-title{font-size:13px;font-weight:800;margin-bottom:4px} .brands-body .token-flow-sub{font-size:11.5px;color:var(--text3);margin-bottom:20px} .brands-body .token-flow-row{display:flex;align-items:center;gap:12px;border-radius:11px;padding:12px 14px} .brands-body .token-flow-row.orange{background:var(--coral-bg);border:1px solid var(--coral-border)} .brands-body .token-flow-row.green{background:var(--green-bg);border:1px solid rgba(34,197,94,.2)} .brands-body .token-flow-row.amber{background:var(--amber-bg);border:1px solid rgba(245,158,11,.2)} .brands-body .token-flow-icon{font-size:18px} .brands-body .token-flow-row.orange .token-flow-icon{color:var(--orange)} .brands-body .token-flow-row.green .token-flow-icon{color:var(--green-text)} .brands-body .token-flow-row.amber .token-flow-icon{color:var(--amber-text)} .brands-body .token-flow-h{font-size:12.5px;font-weight:800} .brands-body .token-flow-sub2{font-size:11px;color:var(--text3)} .brands-body .token-flow-amt{font-size:14px;font-weight:800} .brands-body .token-flow-arrow{text-align:center;font-size:12px;color:var(--text3);padding:2px 0} .brands-body .token-flow-total{border-top:1px solid var(--border);padding-top:12px;display:flex;justify-content:space-between;font-size:12px;color:var(--text3)} /* ============================================ TEAM ROLES + FIND CREATORS ============================================ */ .brands-body .roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px} .brands-body .role-card{border-radius:11px;padding:13px} .brands-body .role-card.owner{background:var(--coral-bg);border:1px solid var(--coral-border)} .brands-body .role-card.other{background:var(--bg-alt);border:1px solid var(--border)} .brands-body .role-h{font-size:12px;font-weight:800;margin-bottom:3px} .brands-body .role-card.owner .role-h{color:var(--coral-text)} .brands-body .role-p{font-size:11.5px;color:var(--text2);line-height:1.5} .brands-body .filter-chips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px} .brands-body .filter-chip-tag{background:var(--bg-alt);border:1px solid var(--border);border-radius:9px;padding:10px 11px;font-size:11.5px;color:var(--text2)} /* ============================================ FAQ ============================================ */ /* Two independently-flowing columns rather than a CSS grid — a grid pairs items into rows, so expanding one answer would stretch its row-mate's cell and leave a large dead gap beside the shorter, unopened card. */ .brands-body .faq-grid{display:flex;gap:14px;max-width:1000px;margin:0 auto;align-items:flex-start} .brands-body .faq-col{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0} .brands-body .faq-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;cursor:pointer;transition:border-color .2s, transform .12s;-webkit-tap-highlight-color:transparent} .brands-body .faq-item:active{transform:scale(0.99)} .brands-body .faq-item.open{border-color:var(--coral-border)} .brands-body .faq-q{display:flex;justify-content:space-between;align-items:center;gap:12px} .brands-body .faq-q-text{font-size:14px;font-weight:800;line-height:1.35} .brands-body .faq-toggle{ width:26px;height:26px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--bg-alt);border:1px solid var(--border);color:var(--coral-text); font-size:15px;font-weight:700;transition:transform .2s, background .2s, color .2s; } .brands-body .faq-item.open .faq-toggle{background:var(--grad);color:#fff;border-color:transparent;transform:rotate(45deg)} .brands-body .faq-a{ max-height:0;overflow:hidden;transition:max-height .25s ease, padding-top .25s ease; font-size:13px;color:var(--text2);line-height:1.7; } .brands-body .faq-item.open .faq-a{max-height:500px;padding-top:12px} .brands-body .faq-more{text-align:center;margin-top:32px} /* ============================================ FINAL CTA — fixed-dark accent section ============================================ */ .brands-body .final-cta{ padding:96px 0;background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden; } .brands-body .final-cta::before{ content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:800px;height:400px;background:radial-gradient(ellipse, rgba(249,115,22,.16) 0%, transparent 65%); pointer-events:none; } .brands-body .final-cta .wrap{position:relative;z-index:1} .brands-body .final-cta .section-eyebrow{background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.3);color:#FDBA74;padding:6px 16px;border-radius:20px;margin:0 auto 22px;width:fit-content} .brands-body .final-cta .section-eyebrow::before{display:none} .brands-body .final-cta h2{font-size:clamp(32px,4.5vw,50px);font-weight:800;letter-spacing:-0.02em;margin-bottom:16px;color:#fff} .brands-body .final-cta p{font-size:16px;color:var(--ink-text2);margin-bottom:36px;line-height:1.6} .brands-body .urgency-bar{ display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-bottom:36px;padding:16px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px; max-width:660px;margin-left:auto;margin-right:auto; } .brands-body .urgency-stat{text-align:center} .brands-body .urgency-stat .v{font-size:19px;font-weight:800} .brands-body .urgency-stat .v.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .brands-body .urgency-stat .l{font-size:10.5px;color:var(--ink-text2);margin-top:3px;line-height:1.4} .brands-body .urgency-div{width:1px;background:rgba(255,255,255,.12)} .brands-body .cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .brands-body .final-cta .btn-g{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff} .brands-body .final-cta .btn-g:hover{border-color:rgba(255,255,255,.4)} .brands-body .cta-note{margin-top:18px;font-size:13px;color:var(--ink-text3)} /* ============================================ RESPONSIVE ============================================ */ @media (max-width:1024px){ .brands-body .bh-grid, .brands-body .neg-section-grid, .brands-body .escrow-grid, .brands-body .shift-grid, .brands-body .three-step-grid, .brands-body .token-grid{grid-template-columns:1fr;gap:40px} .brands-body .steps-grid{grid-template-columns:1fr 1fr} .brands-body .pillars-grid{grid-template-columns:1fr 1fr} .brands-body .outcomes-grid{grid-template-columns:1fr 1fr} .brands-body .lifecycle-grid{grid-template-columns:repeat(4,1fr);row-gap:14px} .brands-body .lifecycle-connector{display:none} .brands-body .mf-cols{grid-template-columns:1fr} } @media (max-width:1024px){ .brands-body .hero-grid{grid-template-columns:1fr;gap:40px} .brands-body .hero-content{text-align:center} .brands-body .hero-liner{margin-left:auto;margin-right:auto} .brands-body .hero-feat-row, .brands-body .hero-ctas, .brands-body .hero-pills{justify-content:center} .brands-body .hero-desc{margin-left:auto;margin-right:auto} .brands-body .hero-visual{max-width:460px;margin:0 auto} } @media (max-width:900px){ .brands-body .hero{padding-top:128px} .brands-body .hero h1{font-size:38px} .brands-body h2.section-title{font-size:30px} .brands-body .deal-types-grid, .brands-body .compare-grid, .brands-body .two-col-cards, .brands-body .testi-grid, .brands-body .rights-grid, .brands-body .roles-grid, .brands-body .filter-chips-grid{grid-template-columns:1fr} .brands-body .faq-grid{flex-direction:column} .brands-body .pricing-grid{grid-template-columns:1fr;max-width:420px} .brands-body .stats-grid{grid-template-columns:1fr 1fr} .brands-body .stats-grid .stat:nth-child(2n){border-right:none} .brands-body .platform-counts{grid-template-columns:1fr 1fr} .brands-body .platform-count:nth-child(2n){border-right:none} .brands-body .ct-row{grid-template-columns:1fr;text-align:left} .brands-body .ct-cell.hd, .brands-body .ct-cell.bad, .brands-body .ct-cell.mid, .brands-body .ct-cell.good{border-left:none;border-top:1px solid var(--border)} .brands-body .ct-cell:first-child{border-top:none;padding-left:16px} .brands-body .ct-head{padding:16px 20px} /* Stacked to one column, each value cell would otherwise read as a bare number with no indication of which of the 3 columns it's answering — re-label it from its (fixed, known) position in the row. */ .brands-body .ct-row:not(:first-child) .ct-cell:nth-child(2)::before{content:"Traditional agency: "} .brands-body .ct-row:not(:first-child) .ct-cell:nth-child(3)::before{content:"Other platforms: "} .brands-body .ct-row:not(:first-child) .ct-cell:nth-child(4)::before{content:"EarnOn Brands: "} .brands-body .ct-row .ct-cell:nth-child(n+2)::before{font-weight:700;color:var(--text3)} .brands-body .ct-row .ct-cell.good::before{color:var(--coral-text)} } @media (max-width:720px){ .brands-body section{padding:64px 0} .brands-body .hero{padding:108px 0 44px} .brands-body .hero-liner{font-size:11.5px;padding:8px 16px} .brands-body .hero-stats{gap:22px;padding:24px 16px} .brands-body .hero-feat-row{gap:16px} .brands-body .hero-feat{max-width:none} /* Floating cards keep their negative offsets on desktop for a "spilling off the photo" effect; on narrow screens that would push them past the viewport edge, so they tuck fully inside the image instead. */ .brands-body .hero-float-perf{top:14px;right:14px} .brands-body .hero-float-approved{top:auto;bottom:14px;right:14px} .brands-body .hero-float-trusted{bottom:14px;left:14px} .brands-body .hero-float-reach{bottom:14px;right:14px} .brands-body .hero-float{padding:10px 12px} } @media (max-width:480px){ .brands-body .hero-float-approved{display:none} .brands-body .steps-grid, .brands-body .pillars-grid, .brands-body .outcomes-grid, .brands-body .three-step-cols{grid-template-columns:1fr} .brands-body .lifecycle-grid{grid-template-columns:1fr 1fr} .brands-body .ts-row{flex-direction:column;align-items:stretch} .brands-body .ts-item{border-right:none;border-bottom:1px solid var(--ink-border);justify-content:flex-start} .brands-body .ts-item:last-child{border-bottom:none} .brands-body .urgency-bar{gap:18px} .brands-body .urgency-div{display:none} } /* Reduced motion — kill all decorative animation, keep functional transitions (identical approach to the Event Marketplace page). */ @media (prefers-reduced-motion: reduce){ .brands-body *,.brands-body *::before,.brands-body *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } .brands-body .reveal,.brands-body .reveal-scale{opacity:1 !important;transform:none !important} }