/* DTF promo page — layered on landing.css */
.dtf-page { background: var(--dark-bg); color: var(--gray-200); }
.dtf-nav .nav-logo-icon img { width: 36px; height: 36px; border-radius: 9px; display: block; }
.dtf-nav .nav-logo { color: #fff; }
.dtf-nav { background: rgba(10,10,26,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.05); }

.dtf-hero { padding: 120px 0 60px; }
.hero.dtf-hero .container { display: grid; gap: 40px; align-items: center; } /* (0,3,0) beats landing.css .hero .container */
.dtf-eyebrow { color: var(--gray-400); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; margin-bottom: 16px; }
.dtf-hero .hero-subtitle { max-width: 54ch; }
.hero.dtf-hero .container > * { min-width: 0; }
.dtf-cta { margin-top: 28px; position: relative; max-width: 100%; white-space: normal; flex-wrap: wrap; }
.dtf-cta .cta-soon { display: none; }
.dtf-cta.is-soon { background: rgba(255,255,255,.1); box-shadow: none; animation: none; cursor: default; }
.dtf-cta.is-soon:hover { transform: none; box-shadow: none; }
.dtf-cta.is-soon .cta-soon { display: inline-block; margin-left: 10px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--violet); }
.dtf-hero-alt { margin-top: 14px; color: var(--gray-400); font-size: 14px; }
.dtf-hero-alt a { color: var(--gray-200); text-decoration: underline; text-underline-offset: 3px; }
.dtf-hero-alt.is-all { font-size: 16px; }
body[data-platform="other"] .dtf-cta { display: none; }

.dtf-hero-visual { position: relative; display: flex; justify-content: center; }
.dtf-hero-mac { display: none; }
.dtf-phone { width: 260px; padding: 12px; border-radius: 40px; background: #111; box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.08); }
.dtf-phone img { width: 100%; height: auto; border-radius: 30px; display: block; }

.dtf-price { padding: 60px 0; background: var(--dark-mid); text-align: center; }
.dtf-price-line { font-size: 22px; margin: 16px auto 24px; max-width: 30ch; line-height: 1.4; }
#price-number { font-size: 56px; font-weight: 900; display: block; margin-top: 8px; }
#price-number[hidden] { display: none; }
.dtf-contrast { list-style: none; display: grid; gap: 12px; max-width: 640px; margin: 0 auto 20px; text-align: left; }
.dtf-contrast li { padding: 14px 18px; border-radius: var(--radius-md); background: var(--dark-card); border: 1px solid var(--dark-card-border); }
.dtf-contrast li span { display: block; font-weight: 700; color: #fff; margin-bottom: 2px; }
.dtf-footnote { color: var(--gray-400); font-size: 13px; }

.dtf-steps { padding: 70px 0; }
.dtf-steps-grid { list-style: none; display: grid; gap: 28px; }
.dtf-steps-grid li { text-align: center; }
.dtf-steps-grid img { width: 220px; height: auto; border-radius: 22px; box-shadow: 0 20px 40px rgba(0,0,0,.45); margin-bottom: 14px; }
.dtf-steps-grid h3 { color: #fff; font-size: 18px; margin-bottom: 6px; }
.dtf-steps-grid p { color: var(--gray-400); font-size: 15px; max-width: 32ch; margin: 0 auto; }

.dtf-get { padding: 60px 0; background: var(--dark-mid); }
.dtf-two { display: grid; gap: 40px; }
.dtf-checks { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.dtf-checks li { padding-left: 28px; position: relative; }
.dtf-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.dtf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dtf-chips li { padding: 8px 14px; border-radius: 999px; background: var(--dark-card); border: 1px solid var(--dark-card-border); font-size: 14px; }

.dtf-download { padding: 70px 0; }
.dtf-platforms { display: grid; gap: 18px; }
.dtf-card { padding: 24px; border-radius: var(--radius-lg); background: var(--dark-card); border: 1px solid var(--dark-card-border); text-align: center; }
.dtf-card h3 { color: #fff; margin-bottom: 14px; }
.dtf-meta { color: var(--gray-400); font-size: 13px; margin-top: 10px; }
body[data-platform="mac"] .dtf-card[data-platform="mac"], body[data-platform="windows"] .dtf-card[data-platform="windows"],
body[data-platform="ios"] .dtf-card[data-platform="ios"], body[data-platform="android"] .dtf-card[data-platform="android"] { border-color: var(--violet); box-shadow: var(--shadow-glow); }
.dtf-badge { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 10px 18px 10px 44px; border-radius: 10px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.25); position: relative; line-height: 1.1; min-width: 180px; }
.dtf-badge::before { content: ""; position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); background: #fff; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.dtf-badge--apple { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.4 12.6c0-2.5 2-3.7 2.1-3.8-1.2-1.7-3-1.9-3.6-2-1.5-.2-3 .9-3.8.9s-2-.9-3.3-.9C6.1 6.9 4.5 7.9 3.6 9.5c-1.8 3.2-.5 7.9 1.3 10.5.9 1.3 1.9 2.7 3.3 2.6 1.3-.1 1.8-.9 3.4-.9s2 .9 3.4.8c1.4 0 2.3-1.3 3.2-2.6 1-1.5 1.4-2.9 1.4-3-.1 0-2.7-1-2.7-4.1zM14 5.2c.7-.9 1.2-2.1 1.1-3.3-1 0-2.3.7-3 1.6-.7.8-1.3 2-1.1 3.2 1.1.1 2.3-.6 3-1.5z'/></svg>"); }
.dtf-badge--google { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 2.5v19l10-9.5L3 2.5zm12 8l-2.5 2.4 2.5 2.4L20 13c.8-.5.8-1.5 0-2l-5-2.5zM4.5 1.3l10 9.5 2.6-2.5L4.5 1.3zm0 21.4l12.6-7.2-2.6-2.5-10 9.7z'/></svg>"); }
.dtf-badge-small { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }
.dtf-badge-big { font-size: 18px; font-weight: 700; }
.dtf-soon { display: none; }
.dtf-badge.is-soon { cursor: default; }
.dtf-badge.is-soon > .dtf-badge-small, .dtf-badge.is-soon > .dtf-badge-big, .dtf-badge.is-soon::before { opacity: .55; }
.dtf-badge.is-soon .dtf-soon { display: block; position: absolute; top: -10px; right: -10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--violet); color: #fff; opacity: 1; }
.dtf-smartscreen { position: relative; margin-top: 28px; padding: 24px 48px 24px 24px; border-radius: var(--radius-lg); background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.4); }
.dtf-smartscreen h3 { color: #fff; margin-bottom: 8px; }
.dtf-smartscreen img { margin-top: 16px; max-width: 100%; border-radius: var(--radius-md); border: 1px solid var(--dark-card-border); }
.dtf-close { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--gray-400); font-size: 24px; cursor: pointer; }

.dtf-faq { padding: 60px 0 80px; background: var(--dark-mid); }
.dtf-faq-list { max-width: 720px; margin: 24px auto 0; }
.faq-q { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--dark-card-border); color: #fff; font: inherit; font-weight: 600; padding: 16px 32px 16px 0; cursor: pointer; position: relative; }
.faq-q::after { content: "+"; position: absolute; right: 4px; top: 14px; color: var(--gray-400); font-size: 22px; }
.faq-q[aria-expanded="true"]::after { content: "–"; }
.faq-a { padding: 0 0 16px; color: var(--gray-400); }

.dtf-footer { padding: 40px 0; text-align: center; color: var(--gray-400); font-size: 14px; }
.dtf-footer a { color: var(--gray-300); }
.dtf-footer-copy { margin-top: 8px; }

@media (min-width: 768px) {
  .dtf-steps-grid { grid-template-columns: repeat(3, 1fr); }
  .dtf-platforms { grid-template-columns: repeat(2, 1fr); }
  .dtf-two { grid-template-columns: 1fr 1fr; }
  .dtf-contrast { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .dtf-hero { padding: 150px 0 90px; }
  .hero.dtf-hero .container { grid-template-columns: 1.1fr 1fr; }
  .dtf-hero-mac { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.5); border: 1px solid var(--dark-card-border); }
  .dtf-phone { position: absolute; right: -10px; bottom: -30px; width: 210px; }
  .dtf-platforms { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .dtf-nav .nav-logo { font-size: 17px; }
}