/* =====================================================================
   The Logo Wall - app.css
   "Brand graffiti" wall · clean modern chrome.
   Dense, layered, alive in <main>; meticulous everywhere else.
   ===================================================================== */
.category-rail {
    display: none !important;
}

:root {
    /* Surfaces ------------------------------------------------------ */
    /* --bg: #F2EFE6; */
    /* warm cream - paper, road-case bumper */
    /* --bg-chrome: #FAF8F1; */

    --bg: #f3f3f3;
    --bg-chrome: #fafafa;
    /* slightly lighter for header / footer */
    --bg-card: #FFFFFF;

    /* --line: #D5D1C3; */
    --line: #d6d6d6;
    /* --line-soft: #E8E4D5; */
    --line-soft: #e3e3e3;

    /* Ink ----------------------------------------------------------- */
    --ink: #0A0908;
    /* off-black, not pure */
    --ink-soft: #2A2722;
    --ink-mute: #76726A;

    /* Bold singular accent ----------------------------------------- */
    --accent: #FF2E1F;
    /* fluorescent sticker red-orange */
    --accent-deep: #C71F12;
    --accent-ink: #FFFFFF;

    /* Highlighter - used SPARINGLY for tape, marker, marquee ------- */
    --tape: #F0F23A;
    --tape-deep: #D9DC2F;

    /* Shadows tinted to the base hue (anti-AI-glow) ----------------- */
    --shadow-1: 0 1px 2px rgba(10, 9, 8, 0.06);
    --shadow-2: 0 8px 24px rgba(10, 9, 8, 0.10);
    --shadow-3: 0 18px 50px rgba(10, 9, 8, 0.18);
    --shadow-sticker: 0 1px 1px rgba(10, 9, 8, 0.10),
        0 6px 14px rgba(10, 9, 8, 0.08),
        0 18px 36px rgba(10, 9, 8, 0.10);

    /* Geometry ------------------------------------------------------ */
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 24px;
    --container: min(1280px, 98vw);

    /* Type ---------------------------------------------------------- */
    --font-sans: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Lato', system-ui, sans-serif;
    /* Kept the --font-mono name so existing rules don't need touching, but it now
       resolves to Lato - we dropped the monospace label look (it read as a tell). */
    --font-mono: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==== Reset =========================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Paper grain - subtle. Lives on body so the chrome inherits it
       too, but the wall section overlays a heavier scribble texture. */
    background-image:
        radial-gradient(rgba(10, 9, 8, 0.020) 1px, transparent 1px),
        radial-gradient(rgba(10, 9, 8, 0.013) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
}

img,
svg {
    max-width: 100%;
    display: block;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

::selection {
    background: var(--tape);
    color: var(--ink);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.02;
    margin: 0 0 0.5em;
}

h1 {
    font-size: clamp(2.6rem, 6.4vw, 5.2rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

p {
    margin: 0 0 1em;
}

.container {
    width: var(--container);
    margin-inline: auto;
}

/* ==== Buttons ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.78rem 1.2rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: transform 140ms cubic-bezier(.16, 1, .3, 1),
        background-color 140ms ease,
        color 140ms ease,
        box-shadow 200ms ease;
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0) scale(0.985);
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-1);
}

.btn--primary:hover {
    background: var(--accent-deep);
    color: var(--accent-ink);
    box-shadow: var(--shadow-2);
}

.btn--ghost {
    color: var(--ink);
    border-color: var(--line);
    background: var(--bg-card);
}

.btn--ghost:hover {
    border-color: var(--ink);
}

.btn--lg {
    padding: 0.95rem 1.45rem;
    font-size: 1rem;
}

/* ==== Header (clean chrome) =========================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg-chrome) 88%, transparent);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-bottom: 1px solid var(--line);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
}

.brand-mark__icon {
    display: block;
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1.15);
}

.brand-mark:hover {
    text-decoration: none;
}

.brand-mark:hover .brand-mark__icon {
    transform: rotate(8deg) scale(1.08);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-nav a:not(.btn) {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.95rem;
}

.site-nav a:not(.btn):hover {
    text-decoration: none;
    color: var(--accent);
}

/* Hamburger toggle - hidden on desktop, shown on mobile via the 640px query. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle__close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: block;
}

/* ==== Press strip - scrolling logo row (press + launch platforms) ==== */
.press-strip {
    border-block: 1px solid var(--line-soft);
    padding: 1.4rem 0;
    overflow: hidden;
}

.press-strip__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}

.press-strip__track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    width: max-content;
    animation: press-scroll 40s linear infinite;
}

.press-logo {
    height: 26px;
    width: auto;
    flex: none;
    opacity: 0.55;
    filter: grayscale(1);
    transition: opacity 0.2s;
}

.press-logo:hover {
    opacity: 0.85;
}

@keyframes press-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* ==== Hero (asymmetric, clean) ====================================== */
.wall-hero {
    padding: clamp(3.2rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3.2rem);
}

.wall-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem 0.3rem 0.55rem;
    background: var(--ink);
    color: var(--bg);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.01em;
    margin-bottom: 1.4rem;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
    }

    70% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);
    }

    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    }
}

.wall-hero__title {
    margin: 0 0 1rem;
    max-width: 14ch;
}

.wall-hero__title .accent {
    color: var(--accent);
    position: relative;
    display: inline-block;
}

.wall-hero__title .accent::after {
    /* hand-drawn underline */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.05em;
    height: 0.18em;
    background: var(--tape);
    border-radius: 3px;
    transform: skewX(-12deg) translateY(0.06em);
    z-index: -1;
}

.wall-hero__sub {
    max-width: 38ch;
    margin: 0 0 1.6rem;
    color: var(--ink-soft);
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
}

.wall-stats {
    color: var(--ink-mute);
    font-size: 0.85rem;
    margin: 0 0 1.6rem;
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0.02em;
}

.wall-stats .counter {
    color: var(--ink);
    font-weight: 600;
    font-feature-settings: "tnum" 1;
}

.wall-hero__cta {
    display: inline-flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.hero-proof {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

/* Two-layer star rating: a muted track with a gold fill clipped to --rating/5,
   so 4.9 renders as 4.9 stars (not a rounded-up 5). */
.hero-proof__stars {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

.hero-proof__stars-track,
.hero-proof__stars-fill {
    display: flex;
    gap: 0.05rem;
}

.hero-proof__stars-track {
    color: var(--line);
}

.hero-proof__stars-fill {
    position: absolute;
    inset: 0;
    width: calc(var(--rating, 5) / 5 * 100%);
    overflow: hidden;
    color: #F5C518;
}

.hero-proof__stars svg {
    width: 1.3rem;
    height: 1.3rem;
    flex: none;
}

.hero-proof__text {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink-mute);
    white-space: nowrap;
}

.hero-proof__text strong {
    color: var(--ink);
    font-weight: 600;
}

/* Featured-brand cards in the hero stack. Same uniform white-card treatment
   as the wall stickers, but slightly larger since these are the marquee tier. */
.hero-stack {
    position: relative;
    aspect-ratio: 1 / 0.92;
    min-height: 320px;
}

.hero-card {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 14px;
    box-shadow: var(--shadow-sticker);
    /* `scale` is a separate property so it composes on top of the per-card
       `transform: rotate(...) scale(...)` rule - hover keeps the tilt. */
    scale: 1;
    transition: scale 240ms cubic-bezier(.2, .8, .2, 1.15),
        box-shadow 240ms ease;
    text-decoration: none;
    max-width: 220px;
}

.hero-card img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.hero-card:hover {
    scale: 1.05;
    box-shadow:
        0 4px 8px rgba(10, 9, 8, 0.12),
        0 18px 40px rgba(10, 9, 8, 0.18);
    z-index: 5;
    text-decoration: none;
}

.hero-card:nth-child(1) {
    top: 4%;
    left: 2%;
    transform: rotate(-9deg) scale(1.04);
}

.hero-card:nth-child(2) {
    top: 10%;
    left: 38%;
    transform: rotate(6deg) scale(0.98);
}

.hero-card:nth-child(3) {
    top: 36%;
    left: 8%;
    transform: rotate(3deg) scale(1.10);
}

.hero-card:nth-child(4) {
    top: 42%;
    left: 48%;
    transform: rotate(-6deg) scale(0.98);
}

.hero-card:nth-child(5) {
    top: 66%;
    left: 18%;
    transform: rotate(11deg) scale(1.06);
}

.hero-card:nth-child(6) {
    top: 68%;
    left: 52%;
    transform: rotate(-3deg) scale(1.12);
}

/* Tape strip on the second card */
.hero-card:nth-child(2)::before {
    content: "";
    position: absolute;
    left: -10px;
    top: -14px;
    width: 56px;
    height: 18px;
    background: var(--tape);
    transform: rotate(-12deg);
    box-shadow: 0 1px 0 rgba(10, 9, 8, 0.12);
    border-radius: 1px;
    opacity: 0.92;
    pointer-events: none;
}

/* ==== Home promo band (drives traffic to the leaderboards) ========= */
/* Ink-inverted so it reads as a deliberate CTA banner instead of a
   third identical chrome strip stacked above the wall toolbar. */
.home-promo {
    background: var(--ink);
    color: var(--bg);
}

.home-promo__heading { color: var(--bg); }

.home-promo .btn--ghost {
    background: transparent;
    color: var(--bg);
    border-color: color-mix(in srgb, var(--bg) 35%, transparent);
}

.home-promo .btn--ghost:hover {
    border-color: var(--bg);
}

.home-promo__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    padding-block: 1.1rem;
    flex-wrap: wrap;
}

.home-promo__copy { min-width: 0; }

.home-promo__heading {
    margin: 0;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.15;
}

.home-promo__blurb {
    margin: 0.25rem 0 0;
    color: color-mix(in srgb, var(--bg) 72%, transparent);
    font-size: 0.95rem;
    max-width: 60ch;
}

.home-promo__actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

@media (max-width: 560px) {
    .home-promo__actions { width: 100%; }
    .home-promo__btn { flex: 1 1 auto; text-align: center; }
}

/* ==== Wall search (pill field inside .wall-toolbar) ================ */
.wall-search__icon {
    flex-shrink: 0;
    color: var(--ink-mute);
}

.wall-search__input {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.2rem;
    border: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
}

.wall-search__input::placeholder {
    color: var(--ink-mute);
}

.wall-search__input:focus {
    outline: none;
}

.wall-search__input::-webkit-search-decoration,
.wall-search__input::-webkit-search-cancel-button {
    display: none;
}

.wall-search__clear {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--ink);
    color: var(--bg);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.wall-search__clear:hover {
    background: var(--accent);
}

.wall-search__count {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-mute);
    text-transform: none;
    letter-spacing: 0.02em;
}

/* ==== Category rail (clean) ======================================== */
.category-rail {
    border-block: 1px solid var(--line);
    background: var(--bg-chrome);
}

.category-rail__inner {
    display: flex;
    gap: 0.4rem;
    padding: 0.7rem 0;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.category-rail__inner::-webkit-scrollbar {
    height: 4px;
}

.category-rail__inner::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 4px;
}

.chip {
    flex: 0 0 auto;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--line);
    background: var(--bg-card);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.chip.is-active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

/* ==== Wall toolbar (sticky search + category filter) =============== */
/* One chrome band that holds the search pill and the category chips,
   pinned just under the sticky .site-header (68px + 1px border). */
.wall-toolbar {
    position: sticky;
    top: 69px;
    z-index: 40; /* under .site-header (50) */
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px -18px rgba(10, 9, 8, 0.35);
}

.wall-toolbar__inner {
    display: flex;
    align-items: center;
    justify-content: center; /* rail is hidden site-wide; solo pill sits centered */
    gap: 1rem;
    padding: 0.65rem 0;
}

/* The search is a real pill field now - card surface, border, focus ring -
   instead of a bare input floating in a chrome band. */
.wall-search__box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 560px;
    min-width: 0;
    padding: 0.35rem 0.45rem 0.35rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.wall-search__box:focus-within {
    border-color: var(--ink);
    box-shadow: var(--shadow-1);
}

.wall-search__count:empty { display: none; }

/* Inside the toolbar the rail sheds its old standalone band chrome. */
.wall-toolbar .category-rail {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
}

.wall-toolbar .category-rail__inner {
    padding: 0.1rem 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

@media (max-width: 760px) {
    .wall-toolbar__inner { flex-wrap: wrap; gap: 0.55rem; padding-block: 0.55rem; }
    .wall-search__box { flex: 1 1 100%; }
    .wall-toolbar .category-rail { flex: 1 1 100%; }
}

/* ==== THE WALL - graffiti, dense, alive ============================ */
.wall {
    position: relative;
    padding: 2.2rem 0 4.5rem;
    overflow: hidden;
    /* contain rotated stickers + scribbles */
    isolation: isolate;
    /* prevents blend-mode bleed */
}

/* Subtle marker scribbles - hand-drawn vibe in the background. The SVG
   is built into the gradient via data URI so it's a single asset. */
.wall::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'>\
<g fill='none' stroke='%230A0908' stroke-width='1.4' stroke-linecap='round' opacity='0.07'>\
<path d='M40 120 q40 -30 80 0 t80 0' />\
<path d='M620 60 l50 20 -10 -28 z' />\
<circle cx='720' cy='240' r='34' />\
<path d='M120 460 l60 -10 -20 28' />\
<path d='M380 280 q24 -30 0 -60 q-24 -30 0 -60' />\
<path d='M60 700 l40 -20 40 20 40 -20 40 20' />\
<path d='M530 540 l28 28 m0 -28 l-28 28' />\
<path d='M680 700 q-30 -30 -60 0 q-30 30 -60 0' />\
<path d='M260 80 l8 -22 8 22 22 8 -22 8 -8 22 -8 -22 -22 -8 z' />\
</g></svg>");
    background-repeat: repeat;
    background-size: 800px 800px;
    pointer-events: none;
    z-index: -1;
}

.wall__grid {
    width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    align-items: flex-end;
    justify-content: center;
}

/* ---- A single sticker ---- */
/* Each sticker is a uniform white "card" - every logo (transparent PNG, white-bg JPG,
   wide horizontal mark, square glyph) sits in the same shape so the wall reads as one
   visual system. The card carries the shadow + radius; the inner img has none.

   Tilt + scale come from TWO sources combined:
     --rot / --scale         : per-brand stored values (set inline by the template)
     --rot-extra / --scale-x : position-based variance from :nth-child below
   This guarantees chaos even if a brand's stored rotation is 0. */
.sticker {
    --rot: 0;
    --rot-extra: 0;
    --scale: 1;
    --scale-x: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(96px * var(--scale) * var(--scale-x));
    /* horizontal padding wider than vertical → looks more like a real sticker */
    padding: 10px 14px;
    background: var(--sticker-bg, var(--bg-card));
    border-radius: 12px;
    box-shadow:
        0 1px 1px rgba(10, 9, 8, 0.12),
        0 6px 12px rgba(10, 9, 8, 0.06);
    max-width: 320px;
    transform: rotate(calc((var(--rot) + var(--rot-extra)) * 2.5deg)) scale(calc(var(--scale) * var(--scale-x)));
    transform-origin: center;
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1.15),
        box-shadow 180ms ease,
        opacity 180ms ease;

    /* PERF: skip rendering stickers that aren't in viewport. Browser uses the
       last-rendered size as a placeholder so layout stays stable. */
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;

    /* PERF: contain restricts how far style/layout/paint changes propagate when
       this sticker is hovered or transformed. */
    contain: layout paint;
}

/* ---- Position-based tilt fallback ---- */
/* Every sticker gets some tilt regardless of its stored --rot. Combined with
   the stored value, the wall has rotation everywhere with no two adjacent
   stickers at the same angle. */
.sticker:nth-child(7n+1) {
    --rot-extra: -3;
}

.sticker:nth-child(7n+2) {
    --rot-extra: 2;
}

.sticker:nth-child(7n+3) {
    --rot-extra: 3;
}

.sticker:nth-child(7n+4) {
    --rot-extra: -2;
}

.sticker:nth-child(7n+5) {
    --rot-extra: 3;
}

.sticker:nth-child(7n+6) {
    --rot-extra: -3;
}

.sticker:nth-child(7n) {
    --rot-extra: 2;
}

/* ---- Feature anchors + small accents ---- */
/* A few stickers are clearly larger - anchor points that break the grid.
   Kept modest so they read as "slightly bigger" rather than "billboard". */
.sticker:nth-child(13n+5) {
    --scale-x: 1.12;
    z-index: 1;
}

.sticker:nth-child(19n+8) {
    --scale-x: 1.18;
    z-index: 1;
}

/* A handful are deliberately smaller, like minor accents on the wall. */
.sticker:nth-child(11n+4) {
    --scale-x: 0.85;
}

/* ---- Overlap (negative margins) ---- */
/* Pull a few stickers into their neighbours so the layout breathes like a real wall. */
.sticker:nth-child(8n+3) {
    margin-left: -22px;
}

.sticker:nth-child(13n+7) {
    margin-top: -16px;
}

.sticker:nth-child(9n+5) {
    margin-right: -28px;
}

.sticker:nth-child(17n+11) {
    margin-top: 14px;
    margin-left: -14px;
}

/* ---- Landscape & wordmark logos ---- */
/* Wide logos render shorter than icons inside the same bounding box, so we
   give them a slightly wider max-width and a tiny height bump on the very
   wide ones. Stays subtle - dramatic scaling makes them dominate the wall. */
.sticker--landscape {
    --scale-x: 0.95;
    max-width: 280px;
}

.sticker--wordmark {
    --scale-x: 1.0;
    max-width: 240px;
}

/* Don't promote landscape/wordmark to "feature" size on top of the shape bump. */
.sticker--landscape.sticker:nth-child(13n+5),
.sticker--landscape.sticker:nth-child(19n+8) {
    --scale-x: 0.95;
}

.sticker--wordmark.sticker:nth-child(13n+5),
.sticker--wordmark.sticker:nth-child(19n+8) {
    --scale-x: 1.0;
}

.sticker__img {
    height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    /* No bg / shadow / radius here - the card carries it. */
}

.sticker:hover {
    transform: rotate(0deg) scale(calc(var(--scale) * var(--scale-x) * 1.08)) translateY(-2px);
    box-shadow:
        0 2px 3px rgba(10, 9, 8, 0.18),
        0 14px 28px rgba(10, 9, 8, 0.22);
    z-index: 3;
    /* will-change is set transiently on hover only - never on the base state. */
    will-change: transform;
}

/* When you hover any sticker, dim the rest. Opacity-only so it can be
   GPU-composited without repainting (was: filter change which forced repaint
   on every other sticker on every mouse move). */
.wall__grid:hover .sticker:not(:hover) {
    opacity: 0.62;
}

/* TAPE - a few stickers carry a torn highlighter strip */
.sticker:nth-child(11n+3)::before,
.sticker:nth-child(13n+7)::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 18%;
    width: 44%;
    height: 16px;
    background: var(--tape);
    transform: rotate(-9deg);
    box-shadow: 0 1px 0 rgba(10, 9, 8, 0.10);
    border-radius: 1px;
    opacity: 0.92;
    z-index: 1;
    pointer-events: none;
}

.sticker:nth-child(13n+7)::before {
    left: auto;
    right: 14%;
    top: auto;
    bottom: -8px;
    transform: rotate(7deg);
}

/* On touch devices, soften the rotation so tap targets stay accurate. */
@media (hover: none) {
    .sticker {
        transform: rotate(calc((var(--rot) + var(--rot-extra)) * 1deg)) scale(calc(var(--scale) * var(--scale-x)));
    }

    .sticker:hover {
        transform: rotate(0) scale(calc(var(--scale) * var(--scale-x) * 1.02));
    }
}

.wall__sentinel {
    width: 100%;
    height: 1px;
}

.wall__loading {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    color: var(--ink-mute);
    font-size: 0.95rem;
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0.02em;
}

.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.wall__empty {
    text-align: center;
    padding: 4rem 0;
}

.wall__empty h2 {
    font-size: 1.4rem;
}

/* End-of-wall CTA - shown after all logos have loaded */
.wall__end-cta {
    padding: clamp(3rem, 6vw, 5rem) 1rem clamp(4rem, 8vw, 7rem);
    text-align: center;
}

.wall__end-cta__inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.wall__end-cta__inner::before {
    content: "";
    position: absolute;
    inset: -2rem -2.5rem;
    background: var(--tape);
    border-radius: 4px;
    transform: skewX(-2deg) rotate(-0.6deg);
    z-index: 0;
    opacity: 0.18;
}

.wall__end-cta__label {
    margin: 0;
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink-mute);
}

.wall__end-cta__headline {
    margin: 0;
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
}

.wall__end-cta .btn {
    position: relative;
}

/* ==== Brand profile (clean chrome) ================================= */
.brand-page {
    padding: 3.2rem 0 5rem;
    max-width: 760px;
    margin-inline: auto;
}

.brand-page__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.6rem 2.4rem;
    align-items: start;
    margin-bottom: 2.4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}

.brand-page__logo-wrap {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 160px;
    flex-shrink: 0;
}

.brand-page__logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.brand-page__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-page__intro h1 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    margin-bottom: 0.35rem;
    line-height: 1.05;
}

.brand-page__tagline {
    color: var(--ink-soft);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.brand-page__logo-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    width: 200px;
    flex-shrink: 0;
}

.btn--block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* Social-icon row under the brand profile CTA */
.brand-page__socials {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.brand-page__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    transition: transform 140ms cubic-bezier(.16, 1, .3, 1),
        color 140ms ease,
        border-color 140ms ease,
        background-color 140ms ease;
}

.brand-page__social:hover {
    transform: translateY(-1px);
    color: var(--accent-ink);
    background: var(--ink);
    border-color: var(--ink);
    text-decoration: none;
}

/* Per-platform brand colours on hover. */
.brand-page__social--twitter:hover {
    background: #000000;
    border-color: #000000;
}

.brand-page__social--linkedin:hover {
    background: #0A66C2;
    border-color: #0A66C2;
}

.brand-page__social--github:hover {
    background: #181717;
    border-color: #181717;
}

.brand-page__social--youtube:hover {
    background: #FF0000;
    border-color: #FF0000;
}

.brand-page__social--instagram:hover {
    background: #E4405F;
    border-color: #E4405F;
}

.brand-page__social--facebook:hover {
    background: #1877F2;
    border-color: #1877F2;
}

.brand-page__social--tiktok:hover {
    background: #000000;
    border-color: #000000;
}

/* Dynamic social-link builder used in account + admin brand-edit forms. */
.social-builder__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.social-builder__hint {
    margin: 0.4rem 0 0.7rem;
    color: var(--ink-mute);
    font-size: 0.88rem;
}

.social-builder__icons {
    display: none;
}

.social-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.55rem;
    background: var(--bg-chrome);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.social-row__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
}

.social-row__select {
    flex-shrink: 0;
    min-width: 130px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--ink);
}

.social-row__url {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--ink);
}

.social-row__url:focus,
.social-row__select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.social-row__remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--ink-mute);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.social-row__remove:hover {
    border-color: #9a261c;
    color: #9a261c;
    background: color-mix(in srgb, #9a261c 6%, var(--bg-card));
}

@media (max-width: 540px) {
    .social-row {
        flex-wrap: wrap;
    }

    .social-row__url {
        flex-basis: 100%;
        order: 3;
    }

    .social-row__remove {
        margin-left: auto;
    }
}

.brand-page__body {
    margin-bottom: 2.4rem;
}

.brand-page__body p {
    font-size: 1.05rem;
    color: var(--ink-soft);
    /* max-width: 65ch; */
    line-height: 1.65;
}

.brand-page__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.2rem 2rem;
    border-top: 1px solid var(--line);
    padding-top: 1.6rem;
}

.brand-page__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.brand-page__meta-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink-mute);
}

.brand-page__meta-value {
    font-size: 0.95rem;
    color: var(--ink-soft);
    font-weight: 500;
}

.brand-page__meta-value a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.brand-page__meta-value a:hover {
    text-decoration-color: var(--accent-deep);
}

@media (max-width: 640px) {
    .brand-page__head {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem 0.9rem;
        align-items: start;
        margin-bottom: 1.2rem;
        padding-bottom: 1.2rem;
    }

    .brand-page__logo-col {
        width: 100%;
    }

    .brand-page__logo-wrap {
        width: 100%;
        height: 120px;
        padding: 0.75rem;
    }

    /* Visit website button visible again on mobile */
    .brand-page__visit-desktop {
        display: flex;
        font-size: 0.88rem;
        padding: 0.55rem 0.8rem;
    }

    .brand-page__intro {
        min-width: 0;
    }

    .brand-page__intro h1 {
        font-size: 1.25rem;
        line-height: 1.15;
        margin-bottom: 0.25rem;
    }

    .brand-page__tagline {
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .brand-page__socials {
        display: none;
    }

    /* Smaller co-sign on mobile */
    .cosign {
        padding: 0.4rem 0.7rem 0.4rem 0.5rem;
        font-size: 0.85rem;
        gap: 0.4rem;
    }

    .cosign__icon {
        width: 20px;
        height: 20px;
    }

    .cosign__count {
        font-size: 0.78rem;
        padding: 0.1rem 0.45rem;
    }

}

/* ==== Signup (clean chrome) ======================================== */
.signup {
    padding: 3rem 0 5rem;
    max-width: 720px;
    margin-inline: auto;
}

.signup__head {
    margin-bottom: 2.4rem;
}

.signup__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-mute);
    font-size: 0.82rem;
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 1.6rem;
    text-decoration: none;
    transition: color 140ms ease;
}

.signup__back::before {
    content: "←";
}

.signup__back:hover {
    color: var(--ink);
    text-decoration: none;
}

.signup h1 {
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    margin-bottom: 0.5rem;
}

.signup__lede {
    font-size: 1.1rem;
    color: var(--ink-soft);
    max-width: 56ch;
    margin-bottom: 0.8rem;
}

.signup__lede strong {
    color: var(--ink);
    font-weight: 600;
}

.signup__note {
    font-size: 0.92rem;
    color: var(--ink-mute);
    max-width: 56ch;
}

.signup__errors {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 2rem;
    color: var(--ink);
    font-size: 0.95rem;
}

.signup__errors ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

.signup__errors li {
    margin-bottom: 0.2rem;
}

.signup-form {
    display: grid;
    gap: 2rem;
}

.signup-form__section {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.6rem 1.4rem;
    background: var(--bg-card);
    margin: 0;
}

.signup-form__section legend {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink-mute);
    padding: 0 0.5rem;
    margin-left: -0.5rem;
}

.legend__hint {
    color: var(--ink-mute);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.82rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
}

.field:last-child {
    margin-bottom: 0;
}

.field label {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
}

.field__hint {
    font-weight: 400;
    color: var(--ink-mute);
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

/* Hint + live character counter sharing a row under SEO meta fields. */
.field__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.3rem;
}

.field__meta .field__hint {
    margin-top: 0;
}

.char-counter {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}

.char-counter.is-over {
    color: var(--accent);
    font-weight: 700;
}

/* AI "Generate with AI" control above the brand-profile textareas. */
.profile-gen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.profile-gen__status {
    font-size: 0.82rem;
    color: var(--ink-mute);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-chrome);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--ink);
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.field textarea {
    font-family: var(--font-sans);
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.field input[type="file"] {
    padding: 0.55rem 0.6rem;
    cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Locked / read-only field (e.g. verified website URL on the account edit form).
   Reads clearly as "not editable" without looking broken. */
.field input.field--locked,
.field input:disabled,
.field input[readonly] {
    background: color-mix(in srgb, var(--ink) 4%, var(--bg));
    color: var(--ink-soft);
    cursor: not-allowed;
    border-style: dashed;
}

.field-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
}

.field-row .field {
    margin-bottom: 0;
}

.field--check label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.field--check input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.field--check a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

/* Boxed checkbox field - matches the bordered look of the text inputs
   (e.g. the marketing opt-in on the profile page), with breathing room
   above so it separates from the field above it. */
.field--boxed {
    margin-top: 1.4rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-chrome);
}

.field--boxed label {
    margin: 0;
}

/* ---- Field validation states ------------------------------------- */
.field--invalid input,
.field--invalid textarea,
.field--invalid select {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-chrome));
}

.field--invalid input:focus,
.field--invalid textarea:focus,
.field--invalid select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.field__error {
    font-size: 0.82rem;
    color: var(--accent);
    font-weight: 500;
    margin-top: -0.1rem;
}

.field--valid input,
.field--valid textarea,
.field--valid select {
    border-color: #16a34a;
}

.field--valid input:focus,
.field--valid textarea:focus,
.field--valid select:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 18%, transparent);
}

/* ==== Tier toggle (Standard vs Featured) ========================== */
.signup-form__section--tier {
    background: var(--bg-card);
}

.tier-toggle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
}

.tier-card {
    position: relative;
    cursor: pointer;
    display: block;
}

.tier-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tier-card__inner {
    display: block;
    padding: 1.2rem 1.2rem 1.1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-chrome);
    transition: border-color 160ms ease, background-color 160ms ease,
        box-shadow 160ms ease, transform 140ms ease;
    height: 100%;
}

.tier-card:hover .tier-card__inner {
    border-color: var(--ink);
    transform: translateY(-1px);
}

.tier-card input[type="radio"]:checked+.tier-card__inner {
    border-color: var(--ink);
    background: var(--bg-card);
    box-shadow: var(--shadow-2);
}

.tier-card--featured input[type="radio"]:checked+.tier-card__inner {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
        var(--shadow-2);
}

.tier-card input[type="radio"]:focus-visible+.tier-card__inner {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tier-card__price {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.tier-card--featured .tier-card__price {
    color: var(--accent);
}

.tier-card__title {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.tier-card__desc {
    display: block;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.tier-card__badge {
    position: absolute;
    top: -10px;
    right: 14px;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    z-index: 1;
}

/* Strikethrough "was" price shown when a promo is active. */
.tier-card__price-was {
    color: var(--ink-mute);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Inline "X% off" pill on each tier card when a promo is applied. */
.tier-card__discount-badge {
    display: inline-block;
    background: var(--tape);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin: -0.1rem 0 0.5rem;
    box-shadow: 0 1px 0 rgba(10, 9, 8, 0.08);
}

/* Banner above the tier toggle when a promo is in effect. */
.tier-promo-banner {
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.4;
}

.tier-promo-banner code {
    font-family: var(--font-mono);
    background: var(--ink);
    color: var(--bg);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

@media (max-width: 640px) {
    .tier-toggle {
        grid-template-columns: 1fr;
    }
}

/* Honeypot - display:none (not off-screen) so browser autofill never fills it.
   Off-screen fields still get autofilled and falsely flag real users. */
.hp {
    display: none;
}

/* ==== Logo dropzone ============================================== */
.dropzone {
    position: relative;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: var(--bg-chrome);
    padding: 1.6rem 1.4rem;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 140ms ease;
}

.dropzone:hover {
    border-color: var(--ink);
    background: var(--bg-card);
}

.dropzone.is-drag {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
    transform: scale(1.005);
}

.dropzone--error {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
    animation: dropzone-shake 0.35s ease;
}

@keyframes dropzone-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

.dropzone.is-loaded {
    border-style: solid;
    border-color: var(--ink);
    background: var(--bg-card);
}

.dropzone__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.dropzone__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0.6rem 0;
    pointer-events: none;
}

.dropzone__icon {
    color: var(--ink-mute);
    margin-bottom: 0.2rem;
}

.dropzone.is-drag .dropzone__icon {
    color: var(--accent);
}

.dropzone__msg {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 500;
}

.dropzone__pick {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    pointer-events: auto;
}

.dropzone__pick:hover {
    color: var(--accent-deep);
}

.dropzone__hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-mute);
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0.1em;
}

.dropzone__preview {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dropzone__thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 6px;
    flex-shrink: 0;
}

.dropzone__file-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.dropzone__file-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropzone__file-size {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-mute);
    text-transform: none;
    letter-spacing: 0.1em;
}

.dropzone__clear {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.dropzone__clear:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--bg-card);
}

/* Submit loading state */
.btn[data-submit-btn].is-loading {
    opacity: 0.7;
    cursor: wait;
}

.btn[data-submit-btn]:disabled {
    cursor: not-allowed;
}

/* ==== Payment step =============================================== */
.signup-pay {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 2rem 1.8rem;
    max-width: 520px;
    margin-inline: auto;
}

.signup-pay__head {
    margin-bottom: 1.6rem;
    text-align: center;
}

.signup-pay__title {
    font-size: clamp(1.4rem, 2.6vw, 1.7rem);
    margin: 0.6rem 0 0.6rem;
    line-height: 1.15;
}

.signup-pay__title [data-pay-amount] {
    color: var(--accent);
}

.signup-pay__sub {
    color: var(--ink-mute);
    font-size: 0.92rem;
    margin: 0;
    max-width: 36ch;
    margin-inline: auto;
}

.signup-pay__buttons {
    margin: 1.4rem 0 0.4rem;
    min-height: 56px;
}

.signup-pay__error {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 0.92rem;
}

.signup-pay__small {
    text-align: center;
    margin: 1.2rem 0 0;
    font-size: 0.85rem;
}

.signup-pay__back-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--ink-mute);
    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 140ms ease;
}

.signup-pay__back-link:hover {
    color: var(--ink);
}

.signup-form__submit {
    text-align: center;
    padding-top: 0.5rem;
}

.signup-form__small {
    margin-top: 0.8rem;
    font-size: 0.82rem;
    color: var(--ink-mute);
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0.1em;
}

/* ==== Promo code apply row ========================================= */
.promo-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.promo-row input {
    flex: 1;
    min-width: 0;
}

.promo-row .btn {
    flex-shrink: 0;
}

.promo-status {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
}

.promo-status.is-ok {
    color: var(--ink-soft);
    font-weight: 600;
}

.promo-status.is-error {
    color: var(--accent-deep);
}

/* ==== Signup thanks ============================================== */
.signup-thanks {
    padding: 5rem 0;
}

.signup-thanks__inner {
    max-width: 580px;
    margin-inline: auto;
    text-align: center;
}

.signup-thanks__sticker {
    display: inline-flex;
    transform: rotate(-6deg);
    filter: drop-shadow(0 8px 18px rgba(10, 9, 8, 0.12));
    margin-bottom: 1.6rem;
}

.signup-thanks h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 0.8rem;
}

.signup-thanks__lede {
    font-size: 1.1rem;
    color: var(--ink-soft);
    margin-bottom: 1.6rem;
}

.signup-thanks__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    gap: 0.6rem;
    text-align: left;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 1.2rem 0;
}

.signup-thanks__list li {
    color: var(--ink-soft);
    font-size: 0.95rem;
    padding-left: 1.4rem;
    position: relative;
}

.signup-thanks__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 700;
}

.signup-thanks__cta {
    display: inline-flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 640px) {
    .field-row {
        grid-template-columns: 1fr;
    }

    .signup-form__section {
        padding: 1.2rem;
    }
}

/* ==== Auth (OTP login) ============================================= */
.auth {
    padding: 4rem 0 5rem;
}

.auth__card {
    max-width: 460px;
    margin-inline: auto;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.4rem 2rem;
    box-shadow: var(--shadow-2);
}

.auth__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-mute);
    font-size: 0.82rem;
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 1.6rem;
    text-decoration: none;
}

.auth__back::before {
    content: "←";
}

.auth__back:hover {
    color: var(--ink);
    text-decoration: none;
}

.auth h1 {
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
}

.auth__lede {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.auth__hint {
    color: var(--ink-soft);
    font-size: 0.92rem;
    margin: 0 0 1.2rem;
}

.auth__error {
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 0.92rem;
}

.auth__notice {
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    background: #E6F5E6;
    border: 1px solid #BBE2C2;
    border-radius: var(--radius-sm);
    color: #15743a;
    font-size: 0.92rem;
}

.auth__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.auth__field span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink-mute);
}

.auth__field input {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-chrome);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--ink);
}

.auth__field input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.auth__small {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--ink-mute);
    text-align: center;
}

.auth__small a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}

.auth__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
}

.auth__link {
    background: none;
    border: none;
    padding: 0;
    color: var(--ink-mute);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.auth__link:hover {
    color: var(--ink);
}

/* ==== Account area ================================================= */
.account {
    padding: 2.4rem 0 4rem;
}

.account__shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.4rem;
    align-items: start;
}

.account-sidebar {
    position: sticky;
    top: 88px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1.2rem;
}

.account-sidebar__hello {
    font-size: 0.78rem;
    color: var(--ink-mute);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.account-sidebar__hello strong {
    color: var(--ink);
    font-size: 0.92rem;
    word-break: break-all;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 1rem;
}

.account-nav__item {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}

.account-nav__item:hover {
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    color: var(--ink);
    text-decoration: none;
}

.account-nav__item.is-active {
    background: var(--ink);
    color: var(--bg);
}

.account-sidebar__signout {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.account-sidebar__signout button {
    width: 100%;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.85rem;
    transition: border-color 140ms ease, color 140ms ease;
    text-align: left;
}

.account-sidebar__signout button:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.account-page__head {
    margin-bottom: 1.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--line);
}

.account-page__head h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0 0 0.3rem;
}

.account-page__head p {
    margin: 0;
    color: var(--ink-mute);
    font-size: 0.92rem;
}

@media (max-width: 880px) {
    .account__shell {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .account-sidebar {
        position: static;
    }

    .account-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ==== Exit-intent popup ============================================ */
.exit-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.exit-popup.is-open {
    opacity: 1;
    pointer-events: auto;
}

.exit-popup__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 65%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.exit-popup__card {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 2.4rem 1.8rem 1.8rem;
    box-shadow:
        0 6px 14px rgba(10, 9, 8, 0.18),
        0 30px 60px rgba(10, 9, 8, 0.30);
    transform: rotate(-1.5deg) translateY(20px) scale(0.96);
    transition: transform 280ms cubic-bezier(.2, .8, .2, 1.15);
    text-align: center;
}

.exit-popup.is-open .exit-popup__card {
    transform: rotate(-1.5deg) translateY(0) scale(1);
}

.exit-popup__close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--ink-mute);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: color 140ms ease, background-color 140ms ease;
}

.exit-popup__close:hover {
    color: var(--ink);
    background: var(--bg-chrome);
}

/* Yellow tape strip in the corner - the graffiti-wall flourish */
.exit-popup__tape {
    position: absolute;
    top: -16px;
    left: 28px;
    width: 110px;
    height: 26px;
    background: var(--tape);
    transform: rotate(-6deg);
    box-shadow: 0 2px 4px rgba(10, 9, 8, 0.12);
    border-radius: 2px;
    pointer-events: none;
}

.exit-popup__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--accent);
    margin: 0 0 0.6rem;
}

.exit-popup__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.04;
    margin: 0 0 0.8rem;
    color: var(--ink);
}

.exit-popup__sub {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1.4rem;
    max-width: 36ch;
    margin-inline: auto;
}

.exit-popup__sub strong {
    color: var(--accent);
}

.exit-popup__code-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0 0 1.2rem;
}

.exit-popup__code {
    flex: 1;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--tape) 35%, var(--bg-card));
    border: 2px dashed var(--ink);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-align: center;
    user-select: all;
}

.exit-popup__copy {
    flex-shrink: 0;
    padding: 0 1rem;
    background: var(--ink);
    color: var(--bg);
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.exit-popup__copy:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.exit-popup__copy:active {
    transform: scale(0.97);
}

.exit-popup__copy.is-copied {
    background: #15743a;
    border-color: #15743a;
}

.exit-popup__cta {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.exit-popup__dismiss {
    background: none;
    border: none;
    padding: 0.4rem 0.6rem;
    color: var(--ink-mute);
    font: inherit;
    font-size: 0.82rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.exit-popup__dismiss:hover {
    color: var(--ink);
}

@media (max-width: 480px) {
    .exit-popup__card {
        padding: 2rem 1.4rem 1.4rem;
        transform: rotate(-1deg) translateY(20px) scale(0.96);
    }

    .exit-popup.is-open .exit-popup__card {
        transform: rotate(-1deg) translateY(0) scale(1);
    }

    .exit-popup__title {
        font-size: 1.7rem;
    }

    .exit-popup__code {
        font-size: 1.05rem;
        padding: 0.75rem 0.6rem;
    }

    .exit-popup__tape {
        left: 18px;
        width: 90px;
    }
}

/* ==== Static pages (clean chrome) ================================== */
.static-page {
    padding: 3.2rem 0 4rem;
    max-width: 720px;
    margin-inline: auto;
}

.static-page__lede {
    font-size: 1.18rem;
    color: var(--ink-soft);
    margin-bottom: 2rem;
    max-width: 60ch;
}

.static-page__updated {
    color: var(--ink-mute);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.static-page h2 {
    margin-top: 2.4rem;
}

.static-page ul,
.static-page ol {
    padding-left: 1.4rem;
    margin: 0 0 1em;
}

.static-page li {
    margin-bottom: 0.4rem;
}

/* ==== About page =================================================== */
.about-page {
    padding: 2rem 0 5rem;
    max-width: 860px;
    margin-inline: auto;
}

/* Hero */
.about-hero {
    padding: 3rem 0 3.5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 3rem;
}

.about-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--accent);
    margin-bottom: 1rem;
}

.about-hero__title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.2rem;
}

.about-hero__title em {
    font-style: normal;
    color: var(--accent);
}

.about-hero__lede {
    font-size: 1.1rem;
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 60ch;
    margin-bottom: 2rem;
}

.about-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.btn--lg {
    padding: 0.85rem 2rem;
    font-size: 1rem;
}

/* Stats strip */
.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 3.5rem;
}

.about-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.4rem 1rem;
    background: var(--bg-card);
    text-align: center;
}

.about-stats__value {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
}

.about-stats__label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

/* Sections */
.about-section {
    margin-bottom: 3.5rem;
}

.about-section__title {
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* Steps */
.about-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.about-step {
    display: flex;
    gap: 1rem;
    padding: 1.3rem 1.4rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    align-items: flex-start;
}

.about-step__num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.05em;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

.about-step strong {
    display: block;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.about-step p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* Info cards */
.about-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.about-card {
    padding: 1.4rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.about-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.about-card__icon {
    color: var(--accent);
    line-height: 1;
    flex-shrink: 0;
}

.about-card__head h3 {
    margin: 0;
}

.about-card--wide {
    grid-column: 1 / -1;
}

.about-card h3 {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.about-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.about-card a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* Who */
.about-who {
    margin-bottom: 3.5rem;
    padding: 1.5rem 2rem;
    border-left: 3px solid var(--accent);
    background: var(--bg-card);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.about-who__text {
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.6;
    font-family: var(--font-sans);

}

.about-who__contact {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-mute);
}

.about-who__contact a {
    color: var(--accent);
    text-decoration: none;
}

.about-who__contact a:hover {
    text-decoration: underline;
}

/* CTA block */
/* ==== About - Connect / Socials / Reviews ========================= */
.about-connect {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3.5rem;
    padding: 1.5rem 2rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--line-soft);
}

.about-connect h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.about-connect p {
    font-size: 0.85rem;
    color: var(--ink-mute);
    margin: 0 0 0.9rem;
    line-height: 1.5;
}

.about-connect__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.about-connect__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.about-connect__link:hover {
    color: var(--ink);
    border-color: var(--ink-mute);
    text-decoration: none;
}

.about-connect__review-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.about-connect__review-link:hover {
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

.about-cta {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.about-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.about-cta p {
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/* ==== Features page (dashboard mockups) ============================ */
.feat-lede {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 60ch;
    margin: -0.4rem 0 1.4rem;
}

/* The framed "screenshot" panel each mock sits in. */
.feat-board {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem;
    box-shadow: 0 18px 40px -28px rgba(10, 9, 8, 0.4);
}

.feat-board__tag {
    position: absolute;
    top: -0.7rem;
    left: 1.2rem;
    z-index: 3;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
}

/* Big translucent "Example" watermark so nobody mistakes the mock for a
   real, live account. Sits over the board but stays out of the way of text.
   No overflow:hidden on the board so the hanging corner pill is preserved;
   the global `html,body{overflow-x:hidden}` stops any bleed from scrolling. */
.feat-board__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-14deg);
    font-family: var(--font-mono);
    font-size: clamp(3rem, 12vw, 7rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0.08;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
    user-select: none;
}

.feat-stats {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.feat-stats--3 { grid-template-columns: repeat(3, 1fr); }
.feat-stats--4 { grid-template-columns: repeat(4, 1fr); }

.feat-stat {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.feat-stat__label {
    font-size: 0.78rem;
    color: var(--ink-mute);
}

.feat-stat__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.feat-stat__value--sm { font-size: 1.2rem; }

.feat-stat__hint {
    font-size: 0.74rem;
    color: var(--ink-mute);
}

.feat-up { color: #16A34A; }

.feat-stats--mini .feat-stat__value { font-size: 1.5rem; }

/* Top-performers table */
.feat-table-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.feat-table-head h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    margin: 0;
}

.feat-muted { color: var(--ink-mute); font-size: 0.8rem; font-weight: 400; }

.feat-table-wrap { overflow-x: auto; }

.feat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.feat-table th {
    text-align: left;
    font-size: 0.72rem;
    color: var(--ink-mute);
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--line-soft);
}

.feat-table td {
    padding: 0.6rem 0.6rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

.feat-table tr:last-child td { border-bottom: none; }

.feat-brand { display: flex; flex-direction: column; }
.feat-brand__name { font-weight: 600; color: var(--ink); }
.feat-brand__cat { font-size: 0.74rem; color: var(--ink-mute); }

.feat-num { text-align: right; font-family: var(--font-mono); }
.feat-table .feat-num { font-variant-numeric: tabular-nums; }

.feat-pill {
    display: inline-block;
    font-size: 0.72rem;
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink-mute);
}

.feat-pill--ok {
    color: #16A34A;
    background: #DCFCE7;
    border-color: #BBF7D0;
}

/* Sparkline panels */
.feat-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.feat-panel {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.feat-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.feat-panel__label { font-size: 0.78rem; color: var(--ink-mute); }
.feat-panel__total { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }

.feat-spark { display: block; width: 100%; height: 64px; margin: 0.2rem 0 0.4rem; }

/* AI insight card */
.feat-ai {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.4rem;
}

.feat-ai__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.feat-ai__badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background: var(--ink);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.feat-ai__headline { font-weight: 700; margin: 0 0 0.3rem; color: var(--ink); }
.feat-ai__body { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }

/* Referrers */
.feat-refs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.feat-refs h4 {
    font-size: 0.82rem;
    margin: 0 0 0.5rem;
    color: var(--ink-mute);
    font-weight: 600;
}

.feat-refs ul { list-style: none; margin: 0; padding: 0; }

.feat-refs li {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.86rem;
}

.feat-refs li:last-child { border-bottom: none; }
.feat-refs li span:first-child { color: var(--ink-soft); }
.feat-refs li .feat-num { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Weekly email mock */
.feat-email {
    max-width: 520px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgba(10, 9, 8, 0.4);
}

.feat-email__bar {
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-chrome);
}

.feat-email__from { display: block; font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.feat-email__subj { display: block; font-size: 0.82rem; color: var(--ink-mute); }
.feat-email__body { padding: 1.2rem; }
.feat-email__hi { margin: 0 0 1rem; color: var(--ink-soft); }

/* Badge row */
.feat-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.feat-badges img {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--bg);
}

@media (max-width: 640px) {
    .feat-stats--3,
    .feat-stats--4,
    .feat-cols,
    .feat-refs {
        grid-template-columns: 1fr 1fr;
    }
    .feat-stats--4 { grid-template-columns: 1fr 1fr; }
    .feat-board { padding: 1.6rem 1rem 1.2rem; }
}

@media (max-width: 420px) {
    .feat-stats--3,
    .feat-stats--4,
    .feat-cols,
    .feat-refs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-steps,
    .about-cards,
    .about-connect {
        grid-template-columns: 1fr;
    }

    .about-hero__title {
        font-size: 2.2rem;
    }
}

/* ==== Placeholders ================================================= */
.placeholder {
    text-align: center;
    padding: 5rem 0;
}

.placeholder h1 {
    max-width: 18ch;
    margin-inline: auto;
}

.placeholder__price {
    font-size: 1.05rem;
    color: var(--ink-soft);
}

/* ==== Errors ======================================================= */
.error-page {
    text-align: center;
    padding: 5rem 0;
}

.error-page__code {
    font-family: var(--font-mono);
    color: var(--ink-mute);
    font-size: 0.82rem;
    letter-spacing: 0.4em;
    margin-bottom: 1rem;
}

.error-page .btn+.btn {
    margin-left: 0.4rem;
}

/* ==== Footer (clean chrome) ======================================= */
.site-footer {
    border-top: 1px solid var(--line);
    margin-top: 3rem;
    padding: 2rem 0 2rem;
    color: var(--ink-mute);
    font-size: 0.9rem;
    background: var(--bg-chrome);
}

/* On the wall page the press strip is the last band before the footer -
   drop the gap so they sit flush. */
.page-wall .site-footer {
    margin-top: 0;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.site-footer nav {
    display: flex;
    gap: 1rem;
}

.site-footer a {
    color: var(--ink-mute);
}

.site-footer a:hover {
    color: var(--ink);
    text-decoration: none;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line-soft);
    margin-top: 1.1rem;
    padding-top: 1.1rem;
}

.footer-socials,
.footer-reviews {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--ink-mute);
}

.footer-socials__label,
.footer-reviews__label {
    opacity: 0.6;
}

/* Launch badges grouped together on the right of the footer bottom row */
.footer-badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-badges a {
    display: inline-flex;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    color: var(--ink-mute);
    transition: color 0.15s;
    padding: 2px;
}

.footer-social-icon:hover {
    color: var(--accent);
    text-decoration: none;
}

.footer-review-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-mute);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.footer-review-link:hover {
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

/* ==== Responsive collapse ========================================= */
@media (max-width: 880px) {
    .wall-hero__inner {
        grid-template-columns: 1fr;
    }

    /* Featured cards stack below the copy on mobile. Tighter min-height and
       smaller cards so the stack doesn't push the wall too far down. */
    .hero-stack {
        min-height: 260px;
        margin-top: 1.4rem;
    }

    .hero-card {
        height: 88px;
        padding: 10px 12px;
        max-width: 180px;
    }
}

@media (max-width: 640px) {

    /* Hero CTA - tighter on small screens */
    .wall-hero__cta .btn--lg {
        padding: 0.7rem 1.1rem;
        font-size: 0.9rem;
    }

    /* Header - hamburger-driven dropdown on small screens. */
    .nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding: 0.5rem;
        background: var(--bg-chrome);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 14px 28px rgba(10, 9, 8, 0.12);
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a:not(.btn) {
        display: block;
        padding: 0.85rem 0.75rem;
        font-size: 1rem;
        border-radius: 8px;
    }

    .site-nav a:not(.btn):hover {
        background: var(--bg);
    }

    .brand-mark {
        font-size: 1.05rem;
    }

    .brand-mark__icon {
        width: 32px;
        height: 32px;
    }

    .site-nav .btn {
        margin-top: 0.25rem;
        padding: 0.7rem 0.9rem;
        font-size: 0.9rem;
        text-align: center;
    }

    /* Wordmark stickers run wide - rein them in on the mobile wall. */
    .sticker--wordmark {
        max-width: 185px;
    }

    /* Footer - centered, slightly smaller */
    .site-footer {
        font-size: 0.82rem;
    }

    .footer-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.6rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        text-align: center;
    }

    /* Hover-dim on the wall grid is touch-only on mobile - disable it */
    .wall__grid:hover .sticker:not(:hover) {
        opacity: 1;
    }
}

/* ==== Reduced motion =============================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .press-strip__track {
        animation: none;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sticker {
        transform: rotate(calc((var(--rot) + var(--rot-extra)) * 1deg)) scale(calc(var(--scale) * var(--scale-x)));
    }

    .sticker:hover {
        transform: scale(calc(var(--scale) * var(--scale-x) * 1.02));
    }

}

/* ==== Leaderboard + category hub =================================== */
.leaderboard,
.cat-hub {
    padding: 3rem 0 5rem;
    max-width: 920px;
    margin-inline: auto;
}

.leaderboard__head,
.cat-hub__head {
    margin-bottom: 1rem;
}

.leaderboard__title,
.cat-hub__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.05;
    margin: 0.4rem 0 0.6rem;
    letter-spacing: -0.01em;
}

.leaderboard__lede,
.cat-hub__lede {
    font-size: 1.05rem;
    color: var(--ink-soft);
    /* max-width: 60ch; */
    margin: 0;
}

.leaderboard__lede strong {
    color: var(--ink);
    font-weight: 700;
}

/* ---- Sitewide breadcrumbs ----
   Reusable trail rendered by partials/_breadcrumbs.php on every page except
   the homepage. Clean-chrome look: mono uppercase, accent on hover + the
   current crumb / separators. */
.breadcrumbs {
    margin: 0 0 1.4rem;
}

.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: none;
    letter-spacing: 0.02em;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.breadcrumbs__link {
    color: var(--ink-mute);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
    color: var(--accent, #FF2E1F);
    text-decoration: none;
}

.breadcrumbs__sep {
    color: var(--accent, #FF2E1F);
    opacity: 0.7;
    user-select: none;
}

.breadcrumbs__current {
    color: var(--ink);
    font-weight: 500;
    /* Keep long brand names on one tidy line where possible. */
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .breadcrumbs__list {
        font-size: 0.68rem;
        letter-spacing: 0.08em;
    }

    .breadcrumbs__current {
        max-width: 16ch;
    }
}

/* ---- Category index (/category) ---- */
.cat-index {
    padding: 3rem 0 5rem;
    max-width: 1040px;
    margin-inline: auto;
}

.cat-index__head {
    margin-bottom: 2.4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}

.cat-index__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.05;
    margin: 0.4rem 0 0.6rem;
    letter-spacing: -0.01em;
}

.cat-index__count {
    margin: 0 0 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

.cat-index__count-num {
    color: var(--ink);
    font-weight: 600;
}

.cat-index__lede {
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: 60ch;
    margin: 0.5rem 0 1.1rem;
    line-height: 1.6;
}

.cat-index__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.cat-card {
    display: flex;
}

.cat-card__link {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
    padding: 1.3rem 1.4rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.cat-card__link:hover,
.cat-card__link:focus-visible {
    border-color: var(--accent, #FF2E1F);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent, #FF2E1F) 12%, transparent);
    transform: translateY(-2px);
    text-decoration: none;
}

.cat-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.cat-card__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
}

.cat-card__count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    background: color-mix(in srgb, var(--accent, #FF2E1F) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #FF2E1F) 22%, transparent);
    border-radius: 99px;
    padding: 0.2rem 0.6rem;
    color: var(--accent, #FF2E1F);
}

.cat-card__count-num {
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cat-card__count-label {
    font-size: 0.64rem;
    text-transform: none;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.cat-card__desc {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-card__cta {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    transition: color 0.18s ease;
}

.cat-card__link:hover .cat-card__cta,
.cat-card__link:focus-visible .cat-card__cta {
    color: var(--accent, #FF2E1F);
}

.cat-card__arrow {
    display: inline-block;
    transition: transform 0.18s ease;
}

.cat-card__link:hover .cat-card__arrow {
    transform: translateX(3px);
}

.cat-index__empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--ink-soft);
}

.lb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lb-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.9rem 1rem;
    padding: 0.7rem 1rem;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    border-radius: 14px;
    color: var(--ink);
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.lb-row:hover {
    border-color: color-mix(in srgb, var(--ink) 25%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 6%, transparent);
}

/* Stretched-link pattern: the name anchor's ::after covers the whole row so
   clicking anywhere outside the category badge opens the brand profile. */
.lb-row__name-link {
    color: inherit;
    text-decoration: none;
}

.lb-row__name-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.lb-row__name-link:focus-visible {
    outline: none;
}

.lb-row__name-link:focus-visible::after {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lb-row__rank {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--ink-mute);
    min-width: 2.6ch;
    text-align: right;
}

/* Top-3 get the accent treatment so the podium pops. */
.lb-list>li:nth-child(1) .lb-row__rank,
.lb-list>li:nth-child(2) .lb-row__rank,
.lb-list>li:nth-child(3) .lb-row__rank {
    color: var(--accent);
    font-weight: 600;
    font-size: 1.05rem;
}

.lb-row__thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--lb-thumb-bg, var(--bg-chrome));
    overflow: hidden;
    flex-shrink: 0;
}

.lb-row__thumb img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    display: block;
}

.lb-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.lb-row__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-row__tag {
    font-size: 0.85rem;
    color: var(--ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-row__cat {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    padding: 0.25rem 0.55rem;
    background: var(--bg-chrome);
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

a.lb-row__cat:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-chrome));
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    text-decoration: none;
}

.lb-row__clicks {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}

.lb-row__clicks-n {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.lb-row__clicks-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ink-mute);
    margin-top: 0.2rem;
}

.leaderboard__foot {
    margin-top: 2.4rem;
    text-align: center;
    color: var(--ink-mute);
    font-size: 0.9rem;
}

.leaderboard__foot a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}

.leaderboard__empty,
.cat-hub__empty {
    padding: 3rem 1rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: 18px;
}

.leaderboard__empty h2,
.cat-hub__empty h2 {
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* ---- Category hub ------------------------------------------------- */
.cat-hub__lb {
    margin: 0 0 2.6rem;
    padding: 1.4rem;
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 18px;
}

.cat-hub__lb-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cat-hub__lb-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0;
}

.cat-hub__lb-window {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ink-mute);
}

.lb-list--compact .lb-row {
    grid-template-columns: auto 44px minmax(0, 1fr) auto;
    padding: 0.55rem 0.8rem;
    background: var(--bg-card);
}

.lb-list--compact .lb-row__thumb {
    width: 44px;
    height: 44px;
}

.lb-list--compact .lb-row__clicks-n {
    font-size: 1.1rem;
}

.cat-hub__grid-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}

.wall__grid--cat {
    /* Tighter density than the homepage wall - this is a focused list. */
    gap: 1rem;
    /* The base .wall__grid is width-constrained + centred for the homepage hero.
       Inside the already-constrained .cat-hub container that pushes the logos
       toward the middle/right of the column. Here we want the grid flush-left
       under its section heading, spanning the full content width. */
    width: 100%;
    margin: 0;
    justify-content: flex-start;
}

/* When only ONE logo remains in "More in this category", keep it flush-left so
   it sits under the section heading instead of floating centred. (Inherited
   from --cat above; kept explicit for any standalone use of --single.) */
.wall__grid--single {
    justify-content: flex-start;
}

/* Category lede + count formatting -------------------------------------- */
.cat-hub__count {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

.cat-hub__count-num {
    color: var(--ink);
    font-weight: 600;
}

.cat-hub__lede {
    line-height: 1.55;
    margin-bottom: 1.5rem;
}

/* Appended editorial / SEO copy at the foot of category + brand pages. */
.cat-hub__seo,
.brand-page__body--seo {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 68ch;
}

@media (max-width: 640px) {
    .lb-row {
        grid-template-columns: auto 44px minmax(0, 1fr) auto;
    }

    .lb-row__thumb {
        width: 44px;
        height: 44px;
    }

    .lb-row__cat {
        display: none;
    }

    .lb-row__clicks-n {
        font-size: 1.05rem;
    }
}

/* ==== Brand-page rank pills ======================================== */
.rank-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 3rem 0 2rem;
    padding: 0.9rem 1rem;
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 14px;
}

.rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem 0.35rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 140ms ease, transform 140ms ease;
}

.rank-pill:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-1px);
    text-decoration: none;
}

.rank-pill--global {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

.rank-pill--global:hover {
    background: color-mix(in srgb, var(--accent) 18%, var(--ink));
    border-color: var(--ink);
    color: var(--bg);
}

.rank-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
    animation: pulse 2.4s ease-out infinite;
    flex-shrink: 0;
}

.rank-pill__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rank-pill__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.rank-row__window {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ink-mute);
}

/* ==== Badge-referrer CTA =========================================== */
.badge-cta {
    margin: 2rem 0 0;
    padding: 1.4rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
}

.badge-cta__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink-mute);
    margin: 0 0 0.5rem;
}

.badge-cta__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    color: var(--ink);
    max-width: 44ch;
}

.badge-cta__title .accent {
    color: var(--accent);
    font-weight: 700;
}

.badge-cta__lede {
    color: var(--ink-soft);
    font-size: 0.93rem;
    line-height: 1.55;
    margin: 0 0 1rem;

}

.badge-cta__lede strong {
    color: var(--ink);
    font-weight: 600;
}

.badge-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.badge-cta__actions .btn {
    font-size: 0.9rem;
    padding: 0.55rem 1rem;
}

.badge-cta__link {
    color: var(--ink-soft);
    font-size: 0.88rem;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    padding-bottom: 1px;
    transition: color 140ms ease, border-color 140ms ease;
}

.badge-cta__link:hover {
    color: var(--ink);
    border-color: var(--accent);
    text-decoration: none;
}

@media (max-width: 640px) {
    .rank-row__window {
        margin-left: 0;
        flex-basis: 100%;
    }

    .badge-cta {
        padding: 1.2rem 1.2rem;
    }
}

/* =====================================================================
   Engagement: co-sign + share + similar brands + leaderboard tabs
   ===================================================================== */

.brand-engage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: 1rem;
}


/* Co-sign (anonymous upvote) ------------------------------------------ */
.cosign {
    --cosign-fg: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.95rem 0.55rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--cosign-fg);
    font: 600 0.95rem/1 'Lato', system-ui, sans-serif;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    box-shadow: var(--shadow-1);
}

.cosign:hover {
    transform: translateY(-1px);
    border-color: var(--ink);
    box-shadow: var(--shadow-2);
}

.cosign:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cosign__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink-mute);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cosign__label {
    letter-spacing: -0.005em;
}

.cosign__count {
    display: inline-flex;
    min-width: 1.6em;
    justify-content: center;
    padding: 0.15rem 0.55rem;
    background: var(--bg);
    border-radius: 999px;
    color: var(--ink-soft);
    font: 700 0.85rem/1 'Lato', monospace;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s ease, color 0.2s ease;
}

.cosign.is-voted {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.cosign.is-voted .cosign__icon {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cosign.is-voted .cosign__count {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cosign.is-voting {
    opacity: 0.7;
    pointer-events: none;
}

.cosign.is-bump .cosign__icon {
    animation: cosign-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cosign.is-error {
    border-color: #c0392b;
    color: #c0392b;
}

@keyframes cosign-bump {
    0% {
        transform: translateY(0) scale(1);
    }

    35% {
        transform: translateY(-6px) scale(1.15);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* Share row ----------------------------------------------------------- */
.share {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.share__label {
    font: 500 0.85rem/1 'Lato', system-ui, sans-serif;
    color: var(--ink-mute);
    margin-right: 0.15rem;
}

.share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 36px;
    height: 36px;
    padding: 0 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease,
        color 0.2s ease, background 0.2s ease, box-shadow 0.15s ease;
}

.share__btn:hover {
    transform: translateY(-1px);
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}

.share__btn--copy {
    width: auto;
    padding: 0 0.85rem;
    font: 600 0.85rem/1 'Lato', system-ui, sans-serif;
}

.share__btn--copy.is-copied {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* Similar brands ------------------------------------------------------ */
.similar {
    margin-top: 3rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--line-soft);
}

.similar__head {
    margin-bottom: 1.5rem;
}

.similar__title {
    font: 700 1.65rem/1.1 'Bricolage Grotesque', system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.35rem;
}

.similar__sub {
    color: var(--ink-mute);
    font: 400 0.95rem/1.4 'Lato', system-ui, sans-serif;
    margin: 0;
}

.similar__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.similar__card {
    --rot: 0;
    --card-bg: var(--bg-card);
    transform: rotate(calc(var(--rot) * 1deg));
    transition: transform 0.2s ease;
    align-self: flex-start;
    /* don't stretch to rail height (iOS Safari fix) */
    height: auto;
}

.similar__card:hover {
    transform: rotate(0deg) translateY(-2px);
}


.similar__link:hover .similar__name {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.similar__link:hover .similar__tag {
    text-decoration: none !important;
    text-decoration-color: none !important;
    text-decoration-thickness: 0px;
    text-underline-offset: 0px;
}

.similar__cat:hover {
    text-decoration: none;
}

.similar__link {
    display: flex;
    flex-direction: column;
    height: auto;
    /* intrinsic - was 100%, which stretched on iOS */
    text-decoration: none;
    color: inherit;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.similar__link:hover {
    border-color: var(--ink);
    box-shadow: var(--shadow-2);
}

.similar__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    /* explicit - aspect-ratio was glitchy on iOS Safari */
    flex: 0 0 140px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--line-soft);
    padding: 1rem;
    box-sizing: border-box;
}

.similar__thumb img {
    max-width: 75%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.similar__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem 1rem;
}

.similar__name {
    font: 700 1rem/1.15 'Bricolage Grotesque', system-ui, sans-serif;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.similar__tag {
    font: 400 0.85rem/1.35 'Lato', system-ui, sans-serif;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category tag now lives outside the card's main link (so it can be its own
   link to /category/{slug}). It sits under the card as a tappable pill. */
.similar__cat {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
    font: 500 0.7rem/1 'Lato', monospace;
    text-transform: none;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
    text-decoration: none;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--bg);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

a.similar__cat:hover,
a.similar__cat:focus-visible {
    color: var(--accent, #FF2E1F);
    border-color: var(--accent, #FF2E1F);
    background: var(--bg-card);
}

/* Leaderboard tabs ---------------------------------------------------- */
.lb-tabs {
    display: inline-flex;
    gap: 0.25rem;
    margin-top: 1.25rem;
    padding: 0.3rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-1);
}

.lb-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    font: 600 0.9rem/1 'Lato', system-ui, sans-serif;
    color: var(--ink-mute);
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}

.lb-tab:hover {
    color: var(--ink);
}

.lb-tab.is-active {
    background: var(--ink);
    color: var(--bg-chrome);
}

@media (max-width: 540px) {
    .brand-engage {
        gap: 0.75rem;
    }

    .share__label {
        display: none;
    }

    .similar__title {
        font-size: 1.4rem;
    }
}

/* Top row: back link + view tag ---------------------------------------- */
.brand-page__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 2.4rem;
}

.view-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem 0.45rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-1);
    font: 600 0.85rem/1 'Lato', system-ui, sans-serif;
    color: var(--ink-soft);
    transform: rotate(-2deg);
    transition: transform 0.2s ease;
}

.view-tag:hover {
    transform: rotate(0deg) translateY(-1px);
}

.view-tag__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(255, 46, 31, 0.5);
    animation: view-tag-pulse 2.2s infinite;
    transform: translateY(1px);
}

.view-tag__num {
    font-family: 'Lato', ui-monospace, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.view-tag__label {
    font-family: 'Lato', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--ink-mute);
}

@keyframes view-tag-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 46, 31, 0.45);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 46, 31, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 46, 31, 0);
    }
}

/* Facebook + WhatsApp button hover tints -------------------------------- */
.share__btn--fb:hover {
    color: #1877F2;
    border-color: #1877F2;
}

.share__btn--wa:hover {
    color: #25D366;
    border-color: #25D366;
}

/* Similar brands - horizontal scroller --------------------------------- */
.similar__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.similar__head-text {
    min-width: 0;
}

.similar__nav {
    display: inline-flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.similar__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: transform 0.15s ease, border-color 0.2s ease,
        background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.similar__arrow:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bg-chrome);
}

.similar__arrow:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.similar__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.similar__scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Vertical padding gives rotated cards breathing room without bleeding
       horizontally past the container (which caused mobile overflow). */
    padding: 8px 0;
    margin: -8px 0;
}

.similar__scroller::-webkit-scrollbar {
    display: none;
}

.similar__scroller:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 8px;
}

.similar__rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    /* don't stretch cards to tallest item's height */
}

.similar__rail .similar__card {
    flex: 0 0 260px;
    scroll-snap-align: start;
}

@media (max-width: 640px) {
    .similar__rail .similar__card {
        flex-basis: 220px;
    }

    .brand-page__top {
        margin-bottom: 0.8rem;
    }

    .brand-page {
        padding-top: 1.6rem;
    }

    .view-tag {
        padding: 0.35rem 0.65rem 0.35rem 0.55rem;
    }

    .view-tag__num {
        font-size: 0.85rem;
    }

    .view-tag__label {
        font-size: 0.62rem;
    }
}

/* iOS Safari auto-zooms when a focused form control has font-size < 16px.
   Force 16px on small viewports across every form control we render. */
@media (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Belt-and-suspenders: prevent horizontal page scroll on any device.
   The brand page's scroller is the usual culprit, but anything else that
   accidentally overflows should be clipped rather than push the whole
   layout sideways. */
html,
body {
    overflow-x: hidden;
}

/* Kill iOS double-tap-to-zoom on every interactive element. Paginating the
   similar scroller tapped the same screen spot twice in <300ms which
   Safari interpreted as a zoom intent. `manipulation` keeps panning and
   pinch behaviour but drops the double-tap-zoom gesture. */
a,
button,
input,
select,
textarea,
[role="button"],
.btn,
.cosign,
.share__btn,
.similar__arrow,
.lb-tab {
    touch-action: manipulation;
}

/* ==== Cookie consent banner ======================================= */
.cookie-overlay {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 200ms ease;
}

.cookie-overlay.is-visible {
    opacity: 1;
}

.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
    margin-inline: auto;
    max-width: 720px;
    background: var(--bg-chrome);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    padding: 1rem 1.15rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-banner__text {
    margin: 0;
    flex: 1 1 16rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.cookie-banner__text a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    white-space: nowrap;
}

.cookie-banner__actions {
    display: flex;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.cookie-banner__btn {
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .cookie-banner {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        padding: 0.65rem 0.8rem;
    }

    .cookie-banner__inner {
        gap: 0.6rem;
    }

    .cookie-banner__text {
        font-size: 0.78rem;
        line-height: 1.4;
        flex-basis: 100%;
    }

    .cookie-banner__actions {
        width: 100%;
        gap: 0.4rem;
    }

    .cookie-banner__btn {
        flex: 1 1 0;
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
    }
}

/* Share row repositioned after brand body - spacing for its new context */
.brand-page__share {
    margin-bottom: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        transition: none;
        transform: none;
    }
}

/* =====================================================================
   Awards – public pages (/awards, /awards/{slug})
   ===================================================================== */

.awards-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.award-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.5rem 1.75rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    transition: box-shadow 0.15s, border-color 0.15s;
}

.award-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-2);
}

.award-card__badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--accent);
    margin-bottom: 0.2rem;
}

.award-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0;
}

.award-card__desc {
    font-size: 0.875rem;
    color: var(--ink-mute);
    line-height: 1.45;
    margin: 0;
}

.award-card__count {
    font-size: 0.78rem;
    color: var(--ink-mute);
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Award show page ----------------------------------------- */

.award-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: none;
    color: #fff;
}

.award-entries {
    margin-top: 2rem;
}

.award-ranked-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.award-entry {
    display: grid;
    grid-template-columns: 2.5rem 90px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.award-entry:first-child {
    border-top: 1px solid var(--line-soft);
}

.award-entry__rank {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-mute);
    text-align: right;
}

.award-entry:nth-child(1) .award-entry__rank {
    color: #B8860B;
}

.award-entry:nth-child(2) .award-entry__rank {
    color: #708090;
}

.award-entry:nth-child(3) .award-entry__rank {
    color: #A0522D;
}

.award-entry__sticker {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.award-entry__meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.award-entry__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    text-decoration: none;
}

.award-entry__name:hover {
    color: var(--accent);
}

.award-entry__tagline {
    font-size: 0.875rem;
    color: var(--ink-mute);
    line-height: 1.35;
}

.award-entry__cat {
    font-size: 0.75rem;
    color: var(--ink-mute);
    text-decoration: none;
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0.03em;
}

.award-entry__cat:hover {
    color: var(--accent);
}

@media (max-width: 480px) {
    .award-entry {
        grid-template-columns: 2rem 68px 1fr;
        gap: 0.75rem;
    }

    .award-entry__sticker {
        width: 60px;
        height: 60px;
    }

    .awards-index {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Brand profile - 3-section AI-generated profile (show page)
   ===================================================================== */

.brand-page__profile {
    margin: 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.brand-profile__section {
    border-bottom: 1px solid var(--line);
}

.brand-profile__section:last-child {
    border-bottom: none;
}

/* <details> accordion */
.brand-profile__details {
    display: block;
}

.brand-profile__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--bg-chrome);
    transition: background 0.12s;
}

.brand-profile__summary::-webkit-details-marker {
    display: none;
}

.brand-profile__summary:hover {
    background: var(--bg-card);
}

.brand-profile__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    color: var(--ink);
    line-height: 1.3;
}

.brand-profile__chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--ink-mute);
    transition: transform 0.2s;
}

.brand-profile__details[open] .brand-profile__chevron {
    transform: rotate(180deg);
}

.brand-profile__body {
    padding: 1.25rem 1.25rem 1.5rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink-soft);
    background-color: #ffffff;
}

.brand-profile__body br {
    display: block;
    margin-bottom: 0.6em;
    content: '';
}

@media (max-width: 600px) {
    .brand-profile__heading {
        font-size: 0.9375rem;
    }

    .brand-profile__body {
        font-size: 1rem;
    }
}

/* =====================================================================
   Blog - hub, cards, article
   ===================================================================== */
.blog-hub {
    padding-block: 2.5rem 4rem;
}
.blog-hub__head {
    max-width: 720px;
    margin-bottom: 1.75rem;
}
.blog-hub__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    margin: 0 0 .6rem;
}
.blog-hub__lede {
    color: var(--ink-soft);
    font-size: 1.075rem;
    line-height: 1.6;
    margin: 0;
}

/* Topic chips */
.blog-topics {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}
.blog-topics__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--ink-soft);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.blog-topics__chip:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.blog-topics__chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg-chrome);
}
.blog-topics__count {
    font-size: .75rem;
    opacity: .6;
}

/* Card grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.blog-card {
    position: relative;
}
.blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card__link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--ink);
}
.blog-card__media {
    display: block;
    aspect-ratio: 1200 / 630;
    background: var(--bg);
    overflow: hidden;
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem 1.2rem 1.35rem;
    flex: 1;
}
.blog-card__cat {
    color: var(--accent);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.blog-card__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 700;
}
.blog-card__excerpt {
    color: var(--ink-mute);
    font-size: .925rem;
    line-height: 1.5;
}
.blog-card__meta {
    margin-top: auto;
    color: var(--ink-mute);
    font-size: .8rem;
}

/* Pager */
.blog-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3rem;
}
.blog-pager__link {
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}
.blog-pager__link:hover { color: var(--accent); }
.blog-pager__status {
    color: var(--ink-mute);
    font-size: .875rem;
}

.blog-hub__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ink-mute);
}
.blog-hub__seo {
    max-width: 720px;
    margin-top: 3rem;
    color: var(--ink-soft);
    line-height: 1.7;
}

/* ---- Article ---- */
.blog-post {
    max-width: 820px;
    padding-block: 2.5rem 4rem;
}
.blog-post__head {
    margin-bottom: 1.75rem;
}
.blog-post__cat {
    display: inline-block;
    color: var(--accent);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: .75rem;
}
.blog-post__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.06;
    margin: 0 0 .9rem;
}
.blog-post__meta {
    color: var(--ink-mute);
    font-size: .9rem;
    margin: 0;
}
.blog-post__hero {
    margin: 0 0 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
}
.blog-post__hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* Prose - the rendered Markdown body */
.prose {
    font-size: 1.08rem;
    line-height: 1.72;
    color: var(--ink-soft);
}
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.2;
    margin-top: 2.4rem;
    color: var(--ink);
}
.prose h3 {
    font-family: var(--font-display);
    font-size: 1.28rem;
    margin-top: 1.9rem;
    color: var(--ink);
}
.prose h4 {
    font-size: 1.08rem;
    font-weight: 700;
    margin-top: 1.5rem;
    color: var(--ink);
}
.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose a:hover { color: var(--accent-deep); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .4rem; }
.prose blockquote {
    border-left: 3px solid var(--accent);
    padding: .25rem 0 .25rem 1.15rem;
    color: var(--ink);
    font-style: italic;
}
.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
    background: var(--bg);
    padding: .12em .38em;
    border-radius: 4px;
}
.prose pre {
    background: var(--ink);
    color: var(--bg-chrome);
    padding: 1rem 1.15rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Featured brands in an article */
.blog-post__brands {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}
.blog-post__brands-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0 0 1.25rem;
}
.blog-post__brands-grid {
    width: 100%;
    justify-content: flex-start;
}

/* CTA band */
.blog-cta {
    margin-top: 3rem;
}
.blog-cta__inner {
    background: var(--ink);
    color: var(--bg-chrome);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    text-align: center;
}
.blog-cta__title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    margin: 0 0 .5rem;
}
.blog-cta__text {
    color: color-mix(in srgb, var(--bg-chrome) 78%, transparent);
    margin: 0 0 1.35rem;
}

/* Read next */
.blog-related {
    margin-top: 3.5rem;
}
.blog-related__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
}
.blog-grid--related {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

@media (max-width: 640px) {
    .blog-post__brands-grid { justify-content: center; }
    .blog-cta__inner { padding: 1.75rem 1.25rem; }
}