/* Two equal offers right under the hero: Shorts for streamers, YouTube production for YouTubers. */
.off { padding-block: clamp(80px, 9vw, 120px) clamp(40px, 5vw, 70px); }
.off-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.off-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 3.4vw, 40px); border-radius: var(--radius); background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(9,9,11,.4); }
.off-card.dark { color: #fff; background: radial-gradient(120% 90% at 0% 0%, #2a2a2e, #0b0b0d 60%);
  box-shadow: 0 2px 4px rgba(9,9,11,.08), 0 28px 48px -16px rgba(9,9,11,.32), inset 0 1px 0 rgba(255,255,255,.12); }
.off-k { font: 600 .74rem/1 var(--sf); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.off-card.dark .off-k { color: #a1a1aa; }
.off-card h3 { margin: 0; font: 700 clamp(1.8rem, 3vw, 2.4rem)/1.05 var(--sf); letter-spacing: -.045em; }
.off-card p { margin: 0; font: 400 1.02rem/1.55 var(--sf); color: var(--text); }
.off-card.dark p { color: #c4c4cc; }
.off-card ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.off-card li { display: flex; gap: 10px; align-items: center; font: 500 .98rem/1.3 var(--sf); }
.off-card li svg { width: 18px; height: 18px; flex: none; }
.off-btn { margin-top: auto; align-self: flex-start; height: 56px; padding: 0 8px 0 24px; gap: 14px; font-size: 1.02rem; }
.off-card:not(.dark) .off-btn { margin-top: 18px; }
.off-card.dark .off-btn { margin-top: 18px; background: #fff; color: #09090b; }
.off-btn .hc-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #09090b; display: grid; place-items: center; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.off-card.dark .off-btn .hc-ic { background: #09090b; color: #fff; }
.off-btn .hc-ic svg { width: 17px; height: 17px; }
.off-btn:hover .hc-ic { transform: translateX(2px) rotate(-45deg); }
@media (max-width: 760px) { .off-grid { grid-template-columns: 1fr; } }

/* YouTube tunnel: a real offer with its own CTA, not a side note. */
.ttun-copy h2 { text-transform: none !important; font-size: clamp(2.3rem, 5.2vw, 5.2rem) !important; line-height: 1 !important; letter-spacing: -.055em !important; max-width: 24ch; text-wrap: balance; hyphens: manual; }
.ttun-copy p { max-width: 40rem !important; }
.ttun-copy .yt-cta { pointer-events: auto; margin-top: 14px; height: 56px; padding: 0 8px 0 24px; gap: 14px; }
.ttun-copy .yt-cta .hc-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #09090b; display: grid; place-items: center; }
.ttun-copy .yt-cta .hc-ic svg { width: 17px; height: 17px; }
.ttun-copy .yt-kpi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.ttun-copy .yt-kpi span { padding: 8px 14px; border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 20px -14px rgba(9,9,11,.4); font: 600 .86rem/1 var(--sf); color: var(--ink); }
/* Dashboard: unmistakably a demo. */
#dashboard .gdash { position: relative; }
#dashboard .gdash::after { content: "DEMO"; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5; padding: 7px 12px; border-radius: var(--radius); background: #fff; color: #09090b;
  font: 700 .74rem/1 var(--sf); letter-spacing: .16em; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -12px rgba(9,9,11,.5); }