Captured components, saved for later.
3 components ยท rebuilt 2026-07-04
<!--
FAQ accordion (click-to-expand) for Undercorrect.
Pattern cloned from figma.com/pricing "Pricing FAQs", restyled to Undercorrect tokens.
Paste-ready. Assumptions:
- Undercorrect's :root tokens (--tr-*) are already defined on the page (they are, in every
undercorrect-com page). If dropping into a page that lacks them, pull the block from index.html.
- Plus Jakarta Sans + Lora are already loaded via the page's Google Fonts link (they are).
- Swap the placeholder questions/answers for the real ones and renumber the id / aria-controls /
aria-labelledby pairs so each is unique on the page.
- Add a matching FAQPage JSON-LD block in <head> if this is a content page (see reviews/granola.html
for the house pattern). Keep the schema Q/A text identical to the visible text.
-->
<style>
.faq-section {
background:
linear-gradient(0deg, rgba(212,255,63,0.14), rgba(212,255,63,0.14)),
var(--tr-paper);
padding: clamp(3.5rem, 8vw, 7rem) 0;
}
.faq-wrap {
max-width: var(--tr-container, 1280px);
margin: 0 auto;
padding: 0 var(--tr-gutter);
display: grid;
grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1fr);
gap: clamp(2rem, 6vw, 5rem);
align-items: start;
}
.faq-head { position: sticky; top: 2rem; }
.faq-eyebrow {
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.22em; color: var(--tr-fg-3); margin-bottom: 1rem;
}
.faq-title {
font-family: var(--tr-font-display); font-weight: 800;
font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02;
letter-spacing: -0.02em; color: var(--tr-ink);
}
.faq-title em {
font-family: var(--tr-font-serif); font-style: italic;
font-weight: 500; color: var(--tr-cobalt);
}
.faq-more {
display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;
font-weight: 600; color: var(--tr-ink); text-decoration: none;
border-bottom: 2px solid var(--tr-lime); padding-bottom: 2px;
transition: gap var(--tr-dur) var(--tr-ease);
}
.faq-more:hover { gap: 0.85rem; }
.faq-more svg { width: 1em; height: 1em; }
.faq-list { border-top: 1.5px solid var(--tr-rule-strong); }
.faq-item { border-bottom: 1.5px solid var(--tr-rule-strong); }
.faq-q {
display: flex; width: 100%; justify-content: space-between; align-items: center;
gap: 1rem; padding: clamp(1.25rem, 2.4vw, 1.85rem) 0;
background: none; border: 0; text-align: left; cursor: pointer;
font-family: var(--tr-font-display); font-weight: 700;
font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.25;
letter-spacing: -0.01em; color: var(--tr-ink);
transition: color var(--tr-dur) var(--tr-ease);
}
.faq-q:hover { color: var(--tr-cobalt); }
.faq-q:focus-visible { outline: 2px solid var(--tr-cobalt); outline-offset: 4px; border-radius: 2px; }
.faq-q[aria-expanded="true"] { color: var(--tr-cobalt); }
.faq-icon {
flex: 0 0 auto;
width: clamp(1.35rem, 2vw, 1.65rem); height: clamp(1.35rem, 2vw, 1.65rem);
color: var(--tr-ink);
transition: transform 0.25s var(--tr-ease), color var(--tr-dur) var(--tr-ease);
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); color: var(--tr-cobalt); }
.faq-icon svg { width: 100%; height: 100%; display: block; }
.faq-a {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--tr-dur-slow) var(--tr-ease);
}
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
font-size: var(--tr-fs-body-l); line-height: 1.6; color: var(--tr-fg-2);
padding-bottom: clamp(1.25rem, 2.4vw, 1.85rem); max-width: 60ch;
}
.faq-a-inner p + p { padding-top: 0.9rem; }
.faq-a-inner strong { color: var(--tr-ink); font-weight: 700; }
@media (max-width: 860px) {
.faq-wrap { grid-template-columns: 1fr; }
.faq-head { position: static; margin-bottom: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.faq-icon, .faq-a, .faq-q, .faq-more { transition: none; }
}
</style>
<section class="faq-section" aria-label="Frequently asked questions">
<div class="faq-wrap">
<div class="faq-head">
<p class="faq-eyebrow">Before You Ask</p>
<h2 class="faq-title">Questions I <em>Actually</em> Get</h2>
<a class="faq-more" href="/about">
More about how I review
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
<div class="faq-list">
<div class="faq-item">
<button class="faq-q" id="faq-q-1" aria-expanded="true" aria-controls="faq-a-1">
<span>Do brands pay you to write these reviews?</span>
<span class="faq-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</button>
<div class="faq-a" id="faq-a-1" role="region" aria-labelledby="faq-q-1">
<div class="faq-a-inner">
<p>No. Nobody pays for a verdict here. Some posts use affiliate links, and those are labeled where they appear, but the rating never moves because a link exists. If a tool is mediocre I say so, affiliate or not.</p>
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q" id="faq-q-2" aria-expanded="false" aria-controls="faq-a-2">
<span>How long do you actually use something before reviewing it?</span>
<span class="faq-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</button>
<div class="faq-a" id="faq-a-2" role="region" aria-labelledby="faq-q-2">
<div class="faq-a-inner">
<p>Long enough to hit the annoying parts. For software that usually means a few weeks of real work, not a demo afternoon. For hardware it is however long it takes to break my routine and form an honest opinion. If I only tried it briefly, the post says that up front.</p>
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q" id="faq-q-3" aria-expanded="false" aria-controls="faq-a-3">
<span>Why cover AI tools, spirits, and cars on the same site?</span>
<span class="faq-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</button>
<div class="faq-a" id="faq-a-3" role="region" aria-labelledby="faq-q-3">
<div class="faq-a-inner">
<p>Because the through-line is the <strong>voice</strong>, not the category. This is me reviewing things I actually use and care about. Narrowing it to one niche would make it a content farm, and there are enough of those already.</p>
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q" id="faq-q-4" aria-expanded="false" aria-controls="faq-a-4">
<span>Can I send you something to review?</span>
<span class="faq-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</button>
<div class="faq-a" id="faq-a-4" role="region" aria-labelledby="faq-q-4">
<div class="faq-a-inner">
<p>You can offer. I read everything and reply to almost nothing, which is not personal. I only write about things I would have paid for myself, so a free unit buys a look, never a rating.</p>
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q" id="faq-q-5" aria-expanded="false" aria-controls="faq-a-5">
<span>Do you update reviews when a product changes?</span>
<span class="faq-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</button>
<div class="faq-a" id="faq-a-5" role="region" aria-labelledby="faq-q-5">
<div class="faq-a-inner">
<p>When it matters, yes. A pricing change or a feature that fixes my main complaint gets a dated note at the top of the post. I do not silently rewrite history, so you can see what changed and when.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
(function () {
var buttons = document.querySelectorAll('.faq-q');
buttons.forEach(function (btn) {
btn.addEventListener('click', function () {
var open = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', open ? 'false' : 'true');
});
});
})();
</script>
<!--
Pricing Table (Tiered) - snippet
Structural pattern cloned from vercel.com/pricing (Hobby/Pro/Enterprise cards),
restyled with Market Correct's own cobalt/lime/paper tokens.
Paste the <style> block into the destination page's existing <style> tag
(or keep as-is if the page has none), and the markup wherever the pricing
section belongs. No external dependencies. No JS is required for the
static version below; the optional toggle script at the bottom is only
needed if you add a monthly/annual switch.
-->
<style>
/* ---- Pricing table tokens (reads from the page's existing :root) ---- */
.pricing-table {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
background: var(--white);
}
.pricing-card {
display: flex;
flex-direction: column;
padding: 2rem;
border-right: 1px solid var(--border);
position: relative;
}
.pricing-card:last-child { border-right: none; }
/* Middle "featured" tier gets the cobalt-tinted surface, mirroring the
source pattern where the popular plan gets a distinct background
rather than just a border or badge alone. */
.pricing-card.is-featured {
background: var(--cobalt-light);
}
.pricing-card__badge {
position: absolute;
top: 2rem;
right: 2rem;
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 0.5rem;
border-radius: 4px;
background: var(--lime);
color: var(--ink);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pricing-card__name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 1rem;
}
.pricing-card__price-row {
display: flex;
align-items: baseline;
gap: 0.4rem;
line-height: 1;
}
.pricing-card__price {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 2.75rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--ink);
}
.pricing-card__price-suffix {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: var(--muted);
}
.pricing-card__desc {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.95rem;
line-height: 1.5;
color: var(--muted);
margin: 0.9rem 0 0;
max-width: 22rem;
}
.pricing-card__hr {
border: none;
border-top: 1px solid var(--border);
margin: 1.5rem 0;
}
.pricing-card__features-label {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: var(--muted);
margin: 0 0 1rem;
}
.pricing-card__features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
}
.pricing-card__features li {
display: flex;
align-items: center;
gap: 0.65rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.92rem;
color: var(--ink);
}
.pricing-card__features svg {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--cobalt);
}
.pricing-card.is-featured .pricing-card__features svg { color: var(--cobalt-dark); }
.pricing-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
padding: 0.9rem 1.5rem;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
border-radius: 6px;
letter-spacing: 0.01em;
transition: all 0.25s var(--ease-standard);
}
/* Hobby / Enterprise: outline style (mirrors .btn-secondary on the site) */
.pricing-card__cta--outline {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--border);
}
.pricing-card__cta--outline:hover {
border-color: var(--ink);
background: var(--ink);
color: var(--white);
}
/* Pro / featured tier: filled cobalt (mirrors .btn-primary on the site) */
.pricing-card__cta--filled {
background: var(--cobalt);
color: var(--white);
border: 1.5px solid transparent;
}
.pricing-card__cta--filled:hover {
background: var(--cobalt-dark);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}
/* Breakpoint: source pattern collapses 3-col grid to 1-col stack below
tablet width, with the divider becoming horizontal instead of vertical. */
@media (max-width: 900px) {
.pricing-table {
grid-template-columns: 1fr;
}
.pricing-card {
border-right: none;
border-bottom: 1px solid var(--border);
}
.pricing-card:last-child { border-bottom: none; }
}
@media (prefers-reduced-motion: reduce) {
.pricing-card__cta {
transition: none;
}
.pricing-card__cta--filled:hover {
transform: none;
}
}
</style>
<div class="pricing-table">
<!-- Tier 1: entry / free -->
<div class="pricing-card">
<p class="pricing-card__name">Starter</p>
<div class="pricing-card__price-row">
<span class="pricing-card__price">$0</span>
<span class="pricing-card__price-suffix">/mo</span>
</div>
<p class="pricing-card__desc">The perfect starting place to test a single campaign before committing to a flat-fee engagement.</p>
<hr class="pricing-card__hr">
<p class="pricing-card__features-label">What's included</p>
<ul class="pricing-card__features">
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> One active channel</li>
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> Monthly performance report</li>
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> Email support</li>
</ul>
<a href="/contact" class="pricing-card__cta pricing-card__cta--outline">Get started</a>
</div>
<!-- Tier 2: featured / most popular -->
<div class="pricing-card is-featured">
<span class="pricing-card__badge">Most popular</span>
<p class="pricing-card__name">Growth</p>
<div class="pricing-card__price-row">
<span class="pricing-card__price">$2,500</span>
<span class="pricing-card__price-suffix">/mo</span>
</div>
<p class="pricing-card__desc">Everything you need to run performance marketing across multiple channels with a dedicated strategist.</p>
<hr class="pricing-card__hr">
<p class="pricing-card__features-label">Everything in Starter, plus</p>
<ul class="pricing-card__features">
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> Up to 4 channels</li>
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> Dedicated strategist</li>
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> Weekly optimization calls</li>
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> Creative testing built in</li>
</ul>
<a href="/contact" class="pricing-card__cta pricing-card__cta--filled">Talk to us</a>
</div>
<!-- Tier 3: custom / enterprise -->
<div class="pricing-card">
<p class="pricing-card__name">Enterprise</p>
<div class="pricing-card__price-row">
<span class="pricing-card__price">Custom</span>
</div>
<p class="pricing-card__desc">Built for larger budgets that need custom reporting, multi-brand structure, and a flat-fee model that scales with complexity, not spend.</p>
<hr class="pricing-card__hr">
<p class="pricing-card__features-label">Everything in Growth, plus</p>
<ul class="pricing-card__features">
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> Unlimited channels</li>
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> Multi-brand reporting</li>
<li><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"/></svg> Custom contract terms</li>
</ul>
<a href="/contact" class="pricing-card__cta pricing-card__cta--outline">Book a call</a>
</div>
</div>
<!--
ramp-logo-wall snippet, for mrktcorrect.com pages.
Paste the <style>, the <section>, and the <script> into a page.
Assumes the page's :root already defines --cobalt, --lime, --paper,
--ink, --muted, --muted-light, --white, --border, --ease and loads
Plus Jakarta Sans + Inter (all standard on mrktcorrect.com pages).
Only --hairline is added below since it is component-specific.
Inspired by ramp.com's top customer-logo section. Ramp's actual
logos and copy are NOT used. Replace the placeholder wordmarks /
data-rotate lists with real client assets before shipping. If you
drop in <img> logos, remember width/height/loading/decoding.
Note: mrktcorrect.com already has an auto-scroll .brands-section
marquee. This is a DIFFERENT pattern (a static grid whose cells
crossfade + hover arrows). Decide whether it replaces or sits
apart from that marquee before wiring it into a live page.
-->
<style>
.logo-wall-section {
--hairline: rgba(37, 99, 235, 0.14);
background: var(--white);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
padding: 3.5rem 1.5rem 4rem;
}
.logo-wall-inner { max-width: 1200px; margin: 0 auto; }
.logo-wall-eyebrow {
display: flex; align-items: center; gap: 0.9rem;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.18em; color: var(--ink); margin-bottom: 2.25rem;
}
.logo-wall-eyebrow::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--cobalt); flex-shrink: 0;
}
.logo-wall-eyebrow::after { content: ''; height: 1px; flex: 1; background: var(--hairline); }
.logo-wall-head { margin-bottom: 2.5rem; max-width: 620px; }
.logo-wall-head h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800;
line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 1rem; color: var(--ink);
}
.logo-wall-head h2 .dim { color: var(--muted-light); }
.logo-wall-head a {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600;
color: var(--cobalt); text-decoration: none;
}
.logo-wall-head a svg { transition: transform 0.3s var(--ease, ease); }
.logo-wall-head a:hover svg { transform: translateX(4px); }
.logo-wall-grid {
display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr;
gap: 1px; background: var(--hairline);
border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden;
}
.logo-tile {
position: relative; background: var(--white); aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center; overflow: hidden;
transition: background-color 0.3s var(--ease, ease);
}
.logo-tile.is-link { cursor: pointer; }
.logo-tile.is-link:hover { background: var(--paper); }
.logo-face {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
padding: 1rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
font-size: clamp(0.8rem, 1.4vw, 1.05rem); letter-spacing: -0.01em;
color: var(--ink); opacity: 0.55; transition: opacity 0.6s var(--ease, ease);
text-align: center; line-height: 1.1; -webkit-user-select: none; user-select: none;
}
.logo-face.out { opacity: 0; }
.logo-arrow {
position: absolute; top: 8px; right: 8px; z-index: 2; width: 24px; height: 24px;
border-radius: 50%; display: none; align-items: center; justify-content: center;
background: rgba(11, 11, 26, 0.05);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
color: var(--cobalt); opacity: 0; transform: scale(0.85);
transition: opacity 0.3s var(--ease, ease), transform 0.3s var(--ease, ease), background-color 0.3s var(--ease, ease);
pointer-events: none;
}
.logo-arrow svg { width: 12px; height: 12px; display: block; }
.logo-arrow .arrow-diag { display: none; }
.logo-tile.is-link:hover .logo-arrow { opacity: 1; transform: scale(1); background: rgba(11, 11, 26, 0.1); }
.logo-tile.is-link:hover .logo-arrow .arrow-flat { display: none; }
.logo-tile.is-link:hover .logo-arrow .arrow-diag { display: block; }
.logo-featured {
grid-column: span 2; grid-row: span 2; background: var(--ink); color: var(--white);
padding: 1.5rem; text-align: left; display: flex; flex-direction: column; justify-content: flex-end;
position: relative; overflow: hidden; text-decoration: none;
}
.logo-featured::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(120% 90% at 80% 10%, rgba(37,99,235,0.35), transparent 60%);
pointer-events: none;
}
.logo-featured .feat-brand {
position: relative; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.16em; color: var(--lime); margin-bottom: auto;
}
.logo-featured .feat-stat {
position: relative; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800;
line-height: 0.95; letter-spacing: -0.03em; margin-top: 1.5rem;
}
.logo-featured .feat-label {
position: relative; font-family: 'Inter', sans-serif; font-size: 0.85rem;
color: rgba(255,255,255,0.7); margin-top: 0.4rem;
}
.logo-featured .logo-arrow {
display: flex; background: rgba(255,255,255,0.12); color: var(--white);
opacity: 1; transform: none; pointer-events: none;
}
.logo-featured:hover .logo-arrow { background: rgba(255,255,255,0.22); }
.logo-featured:hover .logo-arrow .arrow-flat { display: none; }
.logo-featured:hover .logo-arrow .arrow-diag { display: block; }
@media (min-width: 1024px) { .logo-arrow { display: flex; } }
@media (max-width: 1023px) {
.logo-wall-grid { grid-template-columns: repeat(4, 1fr); }
.logo-featured { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 560px) {
.logo-wall-grid { grid-template-columns: repeat(2, 1fr); }
.logo-featured { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
.logo-face { transition: none; }
.logo-arrow { transition: none; }
}
</style>
<section class="logo-wall-section" aria-label="Brands that trusted us with their budget">
<div class="logo-wall-inner">
<div class="logo-wall-eyebrow">Trusted with real budgets</div>
<div class="logo-wall-head">
<h2>Brands that hired us to run the numbers,
<span class="dim">and stayed because the numbers moved.</span></h2>
<a href="/about.html">
See the client work
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M3 8h9M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
<div class="logo-wall-grid" id="logoWall">
<div class="logo-tile is-link" data-rotate='["Alt Press","Kerrang","Revolver","AP News"]'>
<span class="logo-face">Alt Press</span>
<span class="logo-arrow" aria-hidden="true">
<svg class="arrow-flat" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="arrow-diag" viewBox="0 0 16 16" fill="none"><path d="M5 11L11 5M5.5 5H11v5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</div>
<div class="logo-tile" data-rotate='["Ring","SmartThings","Blink","Eero"]'>
<span class="logo-face">Ring</span>
</div>
<div class="logo-tile is-link" data-rotate='["Live Nation","Ticketmaster","House of Blues"]'>
<span class="logo-face">Live Nation</span>
<span class="logo-arrow" aria-hidden="true">
<svg class="arrow-flat" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="arrow-diag" viewBox="0 0 16 16" fill="none"><path d="M5 11L11 5M5.5 5H11v5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</div>
<div class="logo-tile" data-rotate='["Revolver","Guitar World","Loudwire"]'>
<span class="logo-face">Revolver</span>
</div>
<div class="logo-tile" data-rotate='["Kerrang","NME","Rock Sound"]'>
<span class="logo-face">Kerrang</span>
</div>
<div class="logo-tile is-link" data-rotate='["Substack","Ghost","Beehiiv"]'>
<span class="logo-face">Substack</span>
<span class="logo-arrow" aria-hidden="true">
<svg class="arrow-flat" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="arrow-diag" viewBox="0 0 16 16" fill="none"><path d="M5 11L11 5M5.5 5H11v5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</div>
<a class="logo-featured" href="/about.html">
<span class="feat-brand">Alt Press</span>
<span class="feat-stat">3.1x</span>
<span class="feat-label">Return on ad spend, first two quarters</span>
<span class="logo-arrow" aria-hidden="true">
<svg class="arrow-flat" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="arrow-diag" viewBox="0 0 16 16" fill="none"><path d="M5 11L11 5M5.5 5H11v5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</a>
<div class="logo-tile" data-rotate='["Patron","Grey Goose","Casamigos"]'>
<span class="logo-face">Patron</span>
</div>
<div class="logo-tile is-link" data-rotate='["Audi","Porsche","Polestar"]'>
<span class="logo-face">Audi</span>
<span class="logo-arrow" aria-hidden="true">
<svg class="arrow-flat" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="arrow-diag" viewBox="0 0 16 16" fill="none"><path d="M5 11L11 5M5.5 5H11v5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</div>
<div class="logo-tile" data-rotate='["Loudwire","Consequence","Stereogum"]'>
<span class="logo-face">Loudwire</span>
</div>
<div class="logo-tile is-link" data-rotate='["Vans","Dickies","Carhartt"]'>
<span class="logo-face">Vans</span>
<span class="logo-arrow" aria-hidden="true">
<svg class="arrow-flat" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="arrow-diag" viewBox="0 0 16 16" fill="none"><path d="M5 11L11 5M5.5 5H11v5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</div>
<div class="logo-tile" data-rotate='["Fender","Gibson","Marshall"]'>
<span class="logo-face">Fender</span>
</div>
<div class="logo-tile is-link" data-rotate='["Consequence","Pitchfork","Brooklyn Vegan"]'>
<span class="logo-face">Consequence</span>
<span class="logo-arrow" aria-hidden="true">
<svg class="arrow-flat" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="arrow-diag" viewBox="0 0 16 16" fill="none"><path d="M5 11L11 5M5.5 5H11v5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</div>
</div>
</div>
</section>
<script>
(function () {
var wall = document.getElementById('logoWall');
if (!wall) return;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) return;
var tiles = Array.prototype.slice.call(wall.querySelectorAll('.logo-tile[data-rotate]'));
tiles.forEach(function (tile, idx) {
var list;
try { list = JSON.parse(tile.getAttribute('data-rotate')); } catch (e) { return; }
if (!Array.isArray(list) || list.length < 2) return;
var face = tile.querySelector('.logo-face');
var i = 0;
var period = 3600 + (idx % 5) * 700;
var startDelay = (idx * 430) % period;
function cycle() {
face.classList.add('out');
window.setTimeout(function () {
i = (i + 1) % list.length;
face.textContent = list[i];
face.classList.remove('out');
}, 600);
}
window.setTimeout(function () { window.setInterval(cycle, period); }, startDelay);
});
})();
</script>