/* Example ad wall (6 Nov 2026): 8 finished 15-second ads, one per industry, made by our own creators for fictional brands. */
.wall-sec .head p { max-width: 62ch; }
.wall { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 23%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; overscroll-behavior-x: contain; }
.wall::-webkit-scrollbar { height: 6px; } .wall::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.wall-ad { scroll-snap-align: start; display: grid; gap: 10px; min-width: 0; margin: 0; align-content: start; }
.wall-ad .ph { position: relative; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.wall-ad video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-ad .tag { position: absolute; top: 10px; left: 10px; font: 500 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.55); color: #fff; padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.wall-ad .snd { position: absolute; bottom: 10px; right: 10px; font: 600 .74rem var(--sans); background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.wall-ad .snd[aria-pressed="true"] { background: var(--coral); color: var(--on-coral); border-color: var(--coral); }
.wall-ad figcaption { display: grid; gap: 2px; }
.wall-ad .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; align-items: baseline; font-size: .86rem; }
.wall-ad .meta b { font-weight: 600; }
.wall-ad .meta a { color: var(--coral); white-space: nowrap; }
.wall-ad .who { color: var(--muted); font-size: .8rem; }
@media (max-width: 760px) { .wall { grid-auto-columns: 62%; } }
/* light landing pages (studio/for/*) don't define the dark tokens: fall back */
.wall-one .wall { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 300px); overflow: visible; }
.wall-one .wall-ad .ph { background: var(--card, #EEE9E1); border-color: var(--line, rgba(0,0,0,.12)); }
.wall-one .wall-ad .who { color: var(--muted, #6b6b6b); }
.wall-one .wall-ad .meta a { color: var(--coral, #C8452E); }
.wall-one .wall-ad .snd[aria-pressed="true"] { background: var(--coral, #C8452E); color: #fff; }
.wall-one .wall-ad .meta a { display: none; }
.wall-one .wall-ad .tag { font: 600 10px/1.2 ui-monospace, Menlo, monospace; }
