/* /services/ctv-advertising. Loads after pages.css and tools.css via `css: tools,ctv-advertising`. */
.ctv-tv { margin: 0; display: flex; flex-direction: column; align-items: center; }
.ctv-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 10px solid #0b0f0c; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 20% 10%, #34473a 0%, #1c2b21 55%, #0e1611 100%); box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06); }
.ctv-tag { position: absolute; top: 12px; left: 14px; padding: 4px 8px; border-radius: 4px; background: rgba(0,0,0,.45); font-family: var(--font--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ctv-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 6%; padding: 6% 8%; }
.ctv-end strong { display: block; font-family: var(--font--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 52px); line-height: 1; letter-spacing: var(--letter-spacing--3); }
.ctv-end span { display: block; margin-top: 10px; font-family: var(--font--mono); font-size: clamp(12px, 1.2vw, 16px); }
.ctv-end em { display: block; margin-top: 6px; font-style: normal; font-size: clamp(12px, 1.1vw, 15px); opacity: .75; }
.ctv-qr { flex: none; width: 24%; height: auto; border-radius: 6px; }
.ctv-bar { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 3px; border-radius: 2px; background: rgba(249,245,235,.2); }
.ctv-bar i { display: block; width: 87%; height: 100%; border-radius: 2px; background: var(--light); }
.ctv-stand { width: 26%; height: 12px; border-radius: 0 0 10px 10px; background: #0b0f0c; }
.ctv-tv figcaption { margin-top: 14px; font-size: var(--text--text-small); opacity: .7; }

.ctv-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ctv-board li { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; aspect-ratio: 16 / 9; padding: 16px; border-radius: var(--radius--small); background-color: var(--dark); color: var(--light); }
.ctv-board li:last-child { background-color: var(--light); color: var(--dark); border: 1px solid var(--border-dark); }
.ctv-board span { font-family: var(--font--mono); font-size: var(--text--label); letter-spacing: var(--letter-spacing--2-0); text-transform: uppercase; opacity: .7; }
.ctv-board b { font-family: var(--font--serif); font-weight: 400; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; }

.pg-stat-when a { color: inherit; }
.ctv-tool { margin-top: 48px; }
.ctv-tool .tl-formula { grid-column: 1 / -1; }
.ctv-copy { align-self: flex-start; min-height: 44px; padding: 10px 18px; border-radius: var(--radius--round); border: 1px solid var(--border-dark); background: transparent; color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.ctv-copy:hover { border-color: var(--dark); }
.ctv-copy:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

.ctv-apps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; max-width: 1040px; margin: 0; padding: 0; list-style: none; }
.ctv-apps .tv-tile { width: auto; height: auto; aspect-ratio: 1; }

@media screen and (max-width: 991px) { .ctv-apps { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media screen and (max-width: 767px) {
  .ctv-end { align-items: flex-end; padding: 0 7% 9%; }
  .ctv-apps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .ctv-apps .tv-tile { border-radius: 10px; }
}