/* Text sales letter: long-form letter blocks + bot demo clips */
.letter { max-width: 680px; margin: 0 auto; padding: 0 20px; text-align: left; }
.letter p, .letter li { font-size: 18px; line-height: 1.75; color: #1f2737; }
.letter p { margin: 0 0 18px; }
.letter h2 { font-size: clamp(24px, 3.6vw, 32px); line-height: 1.2; letter-spacing: -.02em; margin: 42px 0 16px; }
.letter .from { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 26px; }
.letter .big { font-size: 26px; margin-top: 26px; }
.letter blockquote { margin: 26px 0; padding: 18px 22px; border-left: 4px solid var(--blue-2); background: #ecfaf1; border-radius: 0 14px 14px 0; font-size: 21px; font-weight: 600; line-height: 1.5; }
.letter .checks { margin: 0 0 20px; max-width: none; }
.letter .ps { font-size: 16.5px; color: #2b3446; }
.letter .ps a { color: var(--blue-2); font-weight: 600; }

.demo-hero { position: relative; margin: 30px auto 0; max-width: 760px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,18,.45), 0 0 0 1px rgba(0,0,18,.06); background: #000; }
.demo-hero video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.demo-tag { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.demo-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: demoPulse 1.6s infinite; }
@keyframes demoPulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px auto 0; text-align: left; }
.demo { margin: 0; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -22px rgba(0,0,18,.35); }
.demo video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.demo figcaption { padding: 14px 18px 18px; }
.demo figcaption b { display: block; font-size: 16px; }
.demo figcaption span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 720px) {
  .demo-grid { grid-template-columns: 1fr; }
  .letter p, .letter li { font-size: 17px; }
  .letter blockquote { font-size: 19px; padding: 16px 18px; }
  /* Phones load *-mobile.mp4: the chart's right side, cropped and enlarged */
  .demo-hero video, .demo video { aspect-ratio: 1100 / 700; }
  .demo-tag { left: 10px; top: 10px; font-size: 12px; padding: 5px 10px; }
  .btn strong { font-size: 18px; }
}

/* ===== Intro splash (only when <html class="intro-on">) ===== */
.intro { display: none; }
.intro-on .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: radial-gradient(900px 520px at 50% 40%, #0d2a19 0%, #050d08 70%); cursor: pointer; transition: opacity .55s ease, transform .6s cubic-bezier(.7,0,.3,1); }
.intro-on { overflow: hidden; }
.intro.intro-out { opacity: 0; transform: translateY(-4%); pointer-events: none; }
.intro-stage { text-align: center; padding: 0 24px; }
.intro-chart { width: min(320px, 72vw); height: auto; display: block; margin: 0 auto 18px; overflow: visible; }
.ic line { stroke-width: 2; stroke-linecap: round; }
.ic rect, .ic line { transform-box: fill-box; transform-origin: 50% 100%; }
.ic-up rect { fill: #22c55e; } .ic-up line { stroke: #22c55e; }
.ic-dn rect { fill: #ef4444; } .ic-dn line { stroke: #ef4444; }
.ic { opacity: 0; animation: icIn .45s cubic-bezier(.2,.9,.3,1.3) forwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
@keyframes icIn { from { opacity: 0; transform: translateY(10px) scaleY(.2); } to { opacity: 1; transform: none; } }
.intro-line { fill: none; stroke: #bbf7d0; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; filter: drop-shadow(0 0 6px rgba(34,197,94,.8)); animation: lineDraw .8s ease-out .55s forwards; }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
.intro-brand { display: inline-flex; align-items: center; gap: 12px; opacity: 0; animation: brandPop .55s cubic-bezier(.2,.9,.3,1.4) 1.05s forwards; }
.intro-brand img { width: 52px; height: 52px; filter: drop-shadow(0 8px 22px rgba(34,197,94,.55)); }
.intro-brand span { text-align: left; color: #fff; line-height: 1; }
.intro-brand b { display: block; font-size: 34px; font-weight: 800; letter-spacing: .02em; }
.intro-brand small { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .26em; color: #4ade80; }
@keyframes brandPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.intro-tag { margin: 18px 0 0; color: #d1fae5; font-size: 17px; opacity: 0; animation: tagIn .5s ease 1.45s forwards; }
.intro-tag em { font-style: normal; color: #4ade80; font-weight: 600; }
@keyframes tagIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intro-skip { position: absolute; right: 16px; bottom: 16px; background: rgba(255,255,255,.08); color: #bbf7d0; border: 1px solid rgba(187,247,208,.25); border-radius: 999px; padding: 6px 14px; font: 600 12px Geist, system-ui, sans-serif; cursor: pointer; }

/* ===== Hero entrance (after the splash, or right away if it was skipped) ===== */
.intro-on .enter { opacity: 0; }
.hero-go .enter { animation: heroIn .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--e) * 90ms + 60ms); }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-go .sweep { animation: sweep .7s cubic-bezier(.6,0,.2,1) both; animation-delay: .55s; }
@keyframes sweep { from { clip-path: inset(0 100% 0 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-go .enter, .hero-go .sweep { animation: none; }
}

/* Platforms strip */
.platforms-band { padding: 34px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.platforms { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px auto 0; padding: 0; max-width: 820px; }
.platforms li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; background: #fff; border-radius: 12px; font-weight: 600; font-size: 15px; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -12px rgba(0,0,18,.3); }
.platforms img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; display: block; }
@media (max-width: 720px) { .platforms li { font-size: 14px; } }