/* Retail Media Marketplace — card grid adapted from rmmdemos/public-index.html, RMM green accent. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: #f4f6f8; color: #102a43; line-height: 1.5; min-height: 100vh; }

.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.25rem; color: #0a5c2b; letter-spacing: -.01em; }
.brand--sm { font-size: 1rem; margin-bottom: 1.5rem; }
.brand__mark { display: inline-flex; width: 2rem; height: 2rem; border-radius: .5rem; background: #0a5c2b; color: #fff; align-items: center; justify-content: center; font-size: .85rem; }

/* ---- landing ---- */
.landing { display: flex; align-items: center; justify-content: center; }
.hero { max-width: 34rem; padding: 3rem 1.5rem; text-align: center; }
.hero .brand { margin-bottom: 2rem; }
.hero h1 { font-size: 2rem; margin-bottom: .75rem; }
.lead { color: #52606d; margin-bottom: 2rem; }
.emailform { text-align: left; max-width: 26rem; margin: 0 auto; }
.emailform label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.emailform__row { display: flex; gap: .5rem; }
.emailform input { flex: 1; padding: .7rem .8rem; border: 1px solid #cbd2d9; border-radius: .5rem; font-size: 1rem; }
.emailform button { background: #0a5c2b; color: #fff; border: 0; border-radius: .5rem; padding: .7rem 1.1rem; font-size: 1rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fineprint { color: #829ab1; font-size: .8rem; margin-top: 1.25rem; }

/* ---- directory ---- */
.container { max-width: 64rem; margin: 0 auto; padding: 3rem 1.5rem; }
h1 { font-size: 2rem; margin-bottom: .5rem; }
.subtitle { color: #52606d; margin-bottom: 2rem; max-width: 42rem; }
.subtitle--sm { font-size: .9rem; margin-bottom: 1rem; }
h2 { font-size: 1.3rem; margin-bottom: 1rem; }
section { margin-bottom: 2.5rem; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.card { display: block; text-decoration: none; color: inherit; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.card[href]:hover { box-shadow: 0 4px 12px rgba(16,42,67,.12); transform: translateY(-2px); }
.thumb { position: relative; width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent, #52606d), #102a43); }
.thumb span { font-size: 3rem; font-weight: 800; color: rgba(255,255,255,.92); }
.thumb .lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: rgba(16,42,67,.45); }
.label { padding: .65rem .85rem; font-size: .95rem; font-weight: 600; border-top: 1px solid #eee; word-break: break-word; }

.card--locked { cursor: default; opacity: .85; }
.others .thumb { filter: grayscale(.4); }

.empty-msg { color: #888; font-style: italic; padding: 1.25rem; background: #fff; border: 1px dashed #ddd; border-radius: .5rem; }

.signed-in { position: fixed; top: 1rem; right: 1.5rem; background: #fff; border: 1px solid #ddd; border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; color: #555; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.signed-in strong { color: #102a43; font-weight: 600; }
.signed-in a { color: #0a5c2b; }

@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } .container { padding: 2rem 1rem; } .signed-in { position: static; display: inline-block; margin: 1rem; } }