/* ==========================================================================
   poiema.pro home, v3.
   Components mirror the Creative Studio (frontend/src/components/ui/button-types.ts,
   arcreel/studio/creative-studio.module.css, creation-composer.module.css) and
   the tokens in frontend/src/app/globals.css, so the site and the app match.
   Loads after landing.css, which still styles the nav, footer, gallery,
   workflow tabs, FAQ, final band and dialog (and every content page).
   No inline styles: the site CSP blocks them.
   ========================================================================== */

:root {
  /* globals.css tokens */
  --color-bg-primary: #000000;
  --color-bg-secondary: #0a0a0a;
  --color-bg-tertiary: #141414;
  --color-bg-elevated: #1a1a1a;
  --color-composer: #111315;
  --color-volt: #d4ff3a;
  --color-volt-hover: #e4ff6b;
  --color-volt-active: #bff01f;
  --color-volt-ink: #0c1008;
  --color-volt-subtle: rgba(212, 255, 58, 0.07);
  --color-volt-border: rgba(212, 255, 58, 0.28);
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.72);
  --color-text-tertiary: rgba(255, 255, 255, 0.48);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-base: rgba(255, 255, 255, 0.16);
  --color-border-strong: rgba(255, 255, 255, 0.24);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-base: 160ms;

  /* headings use the site's Space Grotesk, as in landing.css */
  --display: var(--font);

  --bg: var(--color-bg-primary);
  --line: var(--color-border-subtle);
}

body { background: var(--color-bg-primary); }

/* width/height attributes must never stretch media; classed rules below set explicit heights. */
img, video { height: auto; }
.topnav { background: rgba(0, 0, 0, .86); border-bottom-color: var(--color-border-subtle); }
.nav-links a, .login { white-space: nowrap; }

/* ---------- Type ---------- */

.display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.04;
}

.display .volt { color: var(--color-volt); }
.display-xl { font-size: clamp(74px, 8.3vw, 136px); line-height: .91; letter-spacing: -.075em; }
.display-lg { font-size: clamp(36px, 4.6vw, 68px); }
.display-md { font-size: clamp(30px, 3.8vw, 57px); }

.try-title { font-size: clamp(36px, 4.6vw, 68px); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; }
.try-title .volt { color: var(--color-volt); }

.section-title { font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.25; }
.eyebrow { font: 500 13px/1.5 var(--font); letter-spacing: 0; text-transform: none; color: var(--color-text-tertiary); margin-bottom: 12px; }

/* ---------- Buttons (ui/button-types.ts) ---------- */

.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: 600 13px/1 var(--font);
  white-space: nowrap;
  transform: none;
  transition: background-color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}

.btn svg, .button svg { width: 16px; height: 16px; flex-shrink: 0; }
.button span { font-size: inherit; }
.button:hover { transform: none; }

.btn--primary,
.button {
  background: var(--color-volt);
  color: var(--color-volt-ink);
}

.btn--primary:hover, .button:hover { background: var(--color-volt-hover); }
.btn--primary:active, .button:active { background: var(--color-volt-active); }

.btn--secondary,
.button--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-base);
}

.btn--secondary:hover, .button--ghost:hover { background: var(--color-bg-tertiary); }

.btn--quiet { background: transparent; color: var(--color-text-secondary); padding-inline: 12px; }
.btn--quiet:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); }

.button--small { min-height: 44px; padding: 8px 16px; font-size: 13px; }
.btn--lg { min-height: 48px; padding-inline: 22px; font-size: 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .64);
  border: 1px solid var(--color-border-base);
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(8px);
}

.chip--volt { background: var(--color-volt-subtle); border-color: var(--color-volt-border); color: var(--color-volt); }

/* ---------- Announcement ---------- */

.announce {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 6px var(--gutter);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: 13px;
  text-align: center;
}

.announce a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-volt); font-weight: 600; }
.announce .ico { width: 14px; height: 14px; }

/* ---------- Hero with Studio composer ---------- */

.hero-studio {
  border-top: 1px solid var(--color-border-subtle);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
}

.hero-studio-bg {
  position: absolute;
  inset: -4% -2% auto;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  opacity: .34;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 45%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 45%, transparent 80%);
}

.hero-studio-bg img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.hero-studio-bg img:nth-child(even) { transform: translateY(12%); }

@media (max-width: 720px) {
  .hero-studio-bg { grid-template-columns: repeat(3, 1fr); }
  .hero-studio-bg img:nth-child(n+4) { display: none; }
}

.hero-studio .hero-kicker { justify-content: center; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; color: var(--color-text-secondary); font-size: 14px; }
.hero-studio h1 { margin-inline: auto; }
.hero-studio-lede { margin: 18px auto 0; max-width: 560px; font-size: clamp(16px, 1.3vw, 19px); color: var(--color-text-secondary); }

.composer { width: min(100%, 880px); margin: clamp(28px, 4vw, 44px) auto 0; text-align: left; }

.tool-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 10px;
  justify-content: center;
}

.tool-tabs::-webkit-scrollbar { display: none; }

@media (max-width: 720px) { .tool-tabs { justify-content: flex-start; } }

.tool-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}

.tool-tab:hover { background: var(--color-bg-secondary); }
.tool-tab[aria-pressed="true"] { color: var(--color-text-primary); background: var(--color-bg-tertiary); border-color: var(--color-border-base); }

.composer-panel {
  border-radius: var(--radius-lg);
  background: var(--color-composer);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .55);
  overflow: hidden;
}

.composer-input { display: flex; gap: 14px; padding: 16px; min-height: 124px; }
.composer-refs { display: flex; gap: 8px; flex: none; }
.composer-refs:empty { display: none; }

.composer-ref { position: relative; width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border-subtle); }
.composer-ref img { width: 100%; height: 100%; object-fit: cover; }
.composer-ref span { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px; background: rgba(0, 0, 0, .72); font-size: 10px; color: var(--color-text-secondary); }

.composer-prompt { flex: 1; font-size: 16px; line-height: 1.6; color: var(--color-text-primary); }

.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: var(--color-volt); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #0d0f10;
  border-top: 1px solid rgba(255, 255, 255, .03);
}

.composer-settings { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }

.setting-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.btn--generate { min-height: 48px; padding-inline: 22px; font-size: 14px; }

.hero-studio-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin-top: 16px; }
.trial-note { font-size: 13px; color: var(--color-text-tertiary); }
.trial-note strong { color: var(--color-text-primary); font-weight: 600; }

@media (max-width: 620px) {
  .composer-input { flex-direction: column; }
  .composer-bar { flex-wrap: wrap; }
  .btn--generate { width: 100%; }
}

/* ---------- Ticker ---------- */

.ticker { overflow: hidden; border-block: 1px solid var(--color-border-subtle); padding: 14px 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 44s linear infinite; }

.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.ticker-track span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-volt); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Section frame ---------- */

.block { padding: clamp(64px, 8vw, 116px) 0; }
.block--tight { padding: clamp(40px, 5vw, 72px) 0; }
.block--panel { background: var(--color-bg-secondary); border-block: 1px solid var(--color-border-subtle); }

.block-head, .section-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 18px 40px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.section-row { align-items: center; margin-bottom: 24px; }
.block-head p.lead { max-width: 460px; color: var(--color-text-secondary); font-size: 15px; }
.block-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }

/* ---------- App cards (creative-studio .app / .thumbnail) ---------- */

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 28px 24px;
}

.app-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.app-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  transition: border-color var(--motion-base) var(--ease-out);
}

.app-card:hover .app-thumb, .app-card:focus-visible .app-thumb { border-color: var(--color-border-strong); }
.app-thumb img, .app-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-thumb .chip { position: absolute; top: 10px; left: 10px; }

.app-card strong { font-size: 15px; font-weight: 600; line-height: 1.5; }
.app-desc { color: var(--color-text-secondary); font-size: 13px; line-height: 1.6; margin-top: -8px; }

/* ---------- Rails (models, looks) ---------- */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail--looks { grid-auto-columns: minmax(200px, 220px); }

@media (min-width: 1200px) { .rail { grid-auto-columns: calc((100% - 48px) / 4); } .rail--looks { grid-auto-columns: calc((100% - 80px) / 6); } }

.rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-base);
  background: transparent;
  color: var(--color-text-primary);
}

.rail-btn:hover { background: var(--color-bg-tertiary); }
.rail-btn svg { width: 18px; height: 18px; }

.model-card { display: flex; flex-direction: column; gap: 8px; }

.model-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
}

.model-media video, .model-media img { width: 100%; height: 100%; object-fit: cover; }
.model-media .badge, .model-media .chip { position: absolute; top: 10px; left: 10px; }
.model-name { font-size: 15px; font-weight: 600; margin-top: 2px; }
.model-card p { font-size: 13px; color: var(--color-text-secondary); }

.model-wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: radial-gradient(circle at 50% 50%, rgba(212, 255, 58, .1), transparent 60%);
}

.model-wave i { width: 5px; border-radius: 3px; background: var(--color-volt); opacity: .75; height: 20%; animation: wave 1.6s ease-in-out infinite; }
.model-wave i:nth-child(3n) { animation-delay: -.4s; }
.model-wave i:nth-child(3n+1) { animation-delay: -.9s; }
.model-wave i:nth-child(4n) { animation-delay: -1.2s; }
@keyframes wave { 0%, 100% { height: 14%; } 50% { height: 46%; } }

.models-note { margin-top: 16px; font-size: 13px; color: var(--color-text-tertiary); }

.look-card { display: flex; flex-direction: column; gap: 8px; }
.look-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-border-subtle); transition: border-color var(--motion-base) var(--ease-out); }
.look-card:hover img { border-color: var(--color-volt-border); }
.look-name { font-size: 15px; font-weight: 600; }
.look-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-tertiary); margin-top: -6px; }
.look-card:hover .look-cta { color: var(--color-volt); }
.look-cta .ico { width: 14px; height: 14px; }

/* Legacy badge class still used in a few blocks: render it as a Studio chip. */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .64);
  border: 1px solid var(--color-border-base);
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.badge--dark { backdrop-filter: blur(8px); }
.badge--line { background: transparent; color: var(--color-text-secondary); }
.star-ref .badge, .plan .badge:not(.badge--line) { background: var(--color-volt-subtle); border-color: var(--color-volt-border); color: var(--color-volt); }

/* ---------- Same star ---------- */

.star-grid { display: grid; gap: 12px; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .star-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .star-ref { grid-column: 1 / -1; }
}

.star-card { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle); }
.star-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2 / 3; }
.star-ref img { aspect-ratio: auto; }
@media (max-width: 1100px) { .star-ref img { aspect-ratio: 3 / 2; } }

.star-card figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--color-text-primary); }
.star-note { margin-top: 16px; font-size: 13px; color: var(--color-text-tertiary); }

/* ---------- Script → storyboard → film ---------- */

.flow { display: grid; gap: 12px; grid-template-columns: .8fr 1.35fr 1fr; align-items: start; }
@media (max-width: 1000px) { .flow { grid-template-columns: 1fr; } }

.flow-step {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}

.flow-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 0; }
.flow-label strong { font-size: 15px; font-weight: 600; }
.flow-label span { font-size: 13px; color: var(--color-text-tertiary); }

.flow-media { border-radius: var(--radius-md); overflow: hidden; background: #000; }
.flow-media--board { aspect-ratio: 1600 / 905; }
.flow-media--film { aspect-ratio: 4 / 3; }
.flow-media img, .flow-media video { width: 100%; height: 100%; object-fit: cover; }

.script-page { font-size: 12.5px; padding: 22px 20px; border-radius: var(--radius-md); background: #f3f1e8; color: #1b1c1a; font: 13px/1.6 'Courier New', var(--mono); }
.script-page .slug { font-weight: 700; text-transform: uppercase; margin-bottom: 12px; }
.script-page .char { text-align: center; text-transform: uppercase; margin-top: 12px; }
.script-page .line { text-align: center; margin-inline: 12%; }
.script-page .action { margin-top: 12px; }
.script-page mark { background: rgba(212, 255, 58, .55); color: inherit; padding: 0 2px; }

/* ---------- Copilot ---------- */

.copilot { display: grid; gap: 12px; grid-template-columns: .9fr 1.1fr; }
@media (max-width: 1000px) { .copilot { grid-template-columns: 1fr; } }

.copilot-copy {
  display: grid;
  align-content: space-between;
  gap: 28px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}

.copilot-copy p { font-size: 15px; color: var(--color-text-secondary); max-width: 46ch; margin-top: 14px; }
.copilot-copy ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.copilot-copy li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.copilot-copy li::before { content: ''; flex: 0 0 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--color-volt); }
.copilot-pip { display: flex; align-items: center; gap: 14px; }
.copilot-pip img { width: 64px; height: 64px; }

.copilot-shot { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border-subtle); background: var(--color-bg-secondary); }
.copilot-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ---------- Pricing ---------- */

.plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.plan {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}

.plan--featured { border-color: var(--color-volt-border); background: linear-gradient(180deg, var(--color-volt-subtle), transparent 70%), var(--color-bg-secondary); }
.plan-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-price { font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.plan-price small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--color-text-tertiary); }
.plan-credits { font-size: 14px; }
.plan-desc { font-size: 13px; color: var(--color-text-secondary); min-height: 3.2em; }
.plan .button { width: 100%; margin-top: 6px; }
.plans-fallback { padding: 24px; border: 1px dashed var(--color-border-base); border-radius: var(--radius-lg); color: var(--color-text-secondary); }
.plans-note { margin-top: 16px; font-size: 13px; color: var(--color-text-tertiary); }

/* ---------- Existing landing blocks, aligned to Studio surfaces ---------- */

.project-card, .workflow-preview, .preview-dialog { border-radius: var(--radius-lg); }
.faq-list details { border-color: var(--color-border-subtle); }
.final h2.display { font-size: clamp(64px, 9vw, 150px); line-height: .92; letter-spacing: -.07em; }
.final h2.display span { display: block; }
.final .button { background: var(--color-volt-ink); color: var(--color-volt); }
.final .button:hover { background: #1b2410; }

/* ---------- Reveal ---------- */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .model-wave i, .caret { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Explore wall (Higgsfield-style masonry) ---------- */

.wall-filters { display: flex; flex-wrap: wrap; gap: 4px; margin: -8px 0 18px; }

.wall { columns: 4 260px; column-gap: 10px; }
.wall[data-columns] { columns: auto; display: flex; gap: 10px; align-items: flex-start; }
.wall-col { flex: 1 1 0; min-width: 0; }

.wall-tile {
  position: relative;
  display: block;
  margin-bottom: 10px;
  break-inside: avoid;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
}

.wall-tile[hidden] { display: none; }
.wall-tile img, .wall-tile video { width: 100%; height: auto; display: block; transition: transform .5s var(--ease-out); }
.wall-tile:hover img, .wall-tile:hover video { transform: scale(1.03); }

.wall-meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 36px 10px 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
}

.wall-tile:hover .wall-meta, .wall-tile:focus-visible .wall-meta { opacity: 1; }
.wall-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-volt); }
.wall-cta .ico { width: 14px; height: 14px; }

@media (hover: none) { .wall-meta { opacity: 1; } .wall-cta { display: none; } }