/* /commercials: the commercials and explainers landing page. Builds on site.css; mobile-first. */

/* Hero: the presenter sits on the right of the loop, so keep the copy clear of his face. */
.cm-hero .cine-media img, .cm-hero .cine-media video { object-position: 75% 30%; }
.cm-hero .copy { max-width: 600px; }
@media (min-width: 861px) {
  .cm-hero::before { background:
    linear-gradient(90deg, rgba(6, 7, 13, .97) 0%, rgba(6, 7, 13, .9) 36%, rgba(6, 7, 13, .35) 62%, rgba(6, 7, 13, .1) 100%),
    linear-gradient(0deg, var(--page) 0%, rgba(6, 7, 13, 0) 28%),
    linear-gradient(180deg, rgba(6, 7, 13, .7) 0%, rgba(6, 7, 13, 0) 22%); }
}
.cm-hero-note b { color: var(--ink); }
.cm-off-note { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--amber-soft); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .4); color: #ffe2b3; font-size: 15px; max-width: 40em; }
.cm-off-note a { color: #fff; }

/* How it works: five numbered cards, one column on phones. */
.cm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .cm-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cm-steps { grid-template-columns: repeat(5, 1fr); gap: 18px; } .cm-steps .card { padding: 24px; } }
.cm-steps .card p { font-size: 15.5px; }

/* The same presenter in all three shapes. */
.cm-ratios { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-top: 40px; }
.cm-ratios div { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 30px 80px -40px rgba(124, 92, 255, .7); }
.cm-ratios img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 30%; }
.cm-ratios span { position: absolute; left: 8px; bottom: 8px; font: 600 12px/1 var(--body); color: #fff; background: rgba(6, 7, 13, .72); padding: 5px 8px; border-radius: 6px; }
.cm-ratios .r169 { width: min(48%, 420px); aspect-ratio: 16 / 9; }
.cm-ratios .r916 { width: min(17%, 150px); aspect-ratio: 9 / 16; }
.cm-ratios .r11 { width: min(27%, 236px); aspect-ratio: 1; }

/* Use cases: three cards, side by side on wide screens. */
@media (min-width: 1100px) { .cm-rail { grid-template-columns: repeat(3, 1fr); } .cm-rail .uc { aspect-ratio: 4 / 4.4; } }
.cm-rail .uc img { object-position: 60% 50%; }

/* Pricing */
.cm-price { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; }
@media (min-width: 860px) { .cm-price { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.cm-price-main, .cm-price-table { border-radius: 22px; padding: 28px; }
@media (min-width: 560px) { .cm-price-main, .cm-price-table { padding: 32px; } }
.cm-price-main { background: linear-gradient(160deg, rgba(124, 92, 255, .26), rgba(13, 15, 28, .92) 62%); border: 1px solid rgba(139, 108, 255, .5); box-shadow: 0 40px 120px -50px rgba(124, 92, 255, .8); }
.cm-price-table { background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.cm-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.cm-rate b { font: 700 clamp(44px, 7vw, 64px)/1 var(--display); letter-spacing: -0.03em; }
.cm-rate span { color: var(--muted); font-size: 17px; }
.cm-price-lead { font: 600 clamp(22px, 3vw, 28px)/1.3 var(--display); letter-spacing: -0.02em; }
.cm-price-sub { margin-top: 12px; color: #c9cce6; }
.cm-price-sub a { color: #c9bbff; }
.cm-price .checks { margin-top: 24px; }
.cm-price .checks li { font-size: 15.5px; }
.cm-price-cta { margin-top: 28px; width: 100%; }
@media (min-width: 560px) { .cm-price-cta { width: auto; } }
.cm-price-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cm-price-table caption { text-align: left; font: 600 18px/1.3 var(--display); margin-bottom: 14px; }
.cm-price-table th, .cm-price-table td { padding: 11px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.cm-price-table th { font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cm-price-table td:last-child, .cm-price-table th:last-child { text-align: right; }
.cm-price-table td:last-child { font-weight: 600; color: var(--ink); }
.cm-mini { margin-top: 14px; font-size: 13.5px; color: var(--muted); }