/* ----- HERO: live inbox ----- */
.tehero{position:relative;padding:calc(var(--h-head) + 44px) 0 72px;background:#fff;overflow:hidden;width:100%}
.tehero .hero-mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tehero .hero-mesh .h1b{top:-220px;right:-40px}.tehero .hero-mesh .h2b{bottom:-180px;left:-70px}
.teh-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center}
.teh-copy .eyebrow{margin-bottom:14px}
.teh-copy h1{font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.07;letter-spacing:-.02em;margin-bottom:16px}
.teh-copy .sub{color:var(--slate);font-size:1.06rem;max-width:510px;margin-bottom:24px}
.teh-cta{display:flex;gap:13px;flex-wrap:wrap}
.teh-mini{display:flex;gap:30px;margin-top:28px;flex-wrap:wrap;overflow:hidden}
.teh-mini .m b{display:block;font-family:var(--font-head);font-weight:800;font-size:1.6rem;color:var(--blue);line-height:1}
.teh-mini .m span{font-size:.8rem;color:var(--slate)}
.teh-stage{position:relative;display:flex;justify-content:center;overflow:visible}
.teh-stage::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,var(--blue-12),transparent 66%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}
.te-inbox{position:relative;z-index:2;width:100%;max-width:470px;background:#fff;border:1px solid var(--blue-12);border-radius:18px;box-shadow:0 30px 70px rgba(24,104,251,.2);overflow:hidden;animation:floaty 6.5s ease-in-out infinite}
.te-inbox .ih{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg-tint)}
.te-inbox .ih .mi{width:30px;height:30px;border-radius:999px;background:var(--blue);color:#fff;display:grid;place-items:center}
.te-inbox .ih .mi svg{width:16px;height:16px}
.te-inbox .ih b{font-family:var(--font-head);font-size:.95rem}
.te-inbox .ih .new{margin-left:auto;font-size:.68rem;font-weight:700;color:var(--blue);background:var(--blue-08);border-radius:999px;padding:4px 11px}
.te-rows{padding:6px 0;min-height:308px}
.te-mail{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--line);opacity:0;transform:translateY(-10px);transition:.45s}
.te-mail:last-child{border-bottom:none}
.te-mail.show{opacity:1;transform:none}
.te-mail .mic{width:36px;height:36px;flex:0 0 auto;border-radius:10px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center}
.te-mail .mic svg{width:18px;height:18px}
.te-mail .mm{flex:1;min-width:0}
.te-mail .mm b{display:block;font-size:.84rem;line-height:1.25}
.te-mail .mm span{font-size:.74rem;color:var(--slate);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.te-mail .mt{flex:0 0 auto;font-size:.66rem;color:var(--slate-light);font-weight:600}
.te-mail .mm .otp{font-family:var(--font-mono);font-weight:700;color:var(--blue);letter-spacing:.14em}
.te-badge{position:absolute;z-index:4;background:#fff;border:1px solid var(--blue-12);border-radius:13px;padding:9px 13px;box-shadow:var(--shadow-blue);display:flex;align-items:center;gap:9px;animation:floaty 5s ease-in-out infinite}
.te-badge .bi{width:30px;height:30px;border-radius:999px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center;flex:0 0 auto}
.te-badge .bi svg{width:17px;height:17px}
.te-badge b{font-family:var(--font-head);font-size:.95rem;display:block;line-height:1}
.te-badge span{font-size:.68rem;color:var(--slate)}
.te-badge.tb1{top:8%;left:-4%}.te-badge.tb2{bottom:8%;right:-3%;animation-delay:1.2s;max-width:calc(100% - 16px)}

/* ----- benefits ----- */
.te-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:44px}
.te-stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px 18px;text-align:center;box-shadow:var(--shadow-soft)}
.te-stat .si{width:42px;height:42px;border-radius:11px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center;margin:0 auto 12px}
.te-stat .si svg{width:22px;height:22px}
.te-stat .num{font-family:var(--font-head);font-weight:800;font-size:2rem;color:var(--ink);line-height:1}
.te-stat .lbl{font-size:.83rem;color:var(--slate);margin-top:6px}
.te-ben{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.te-bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px;transition:.28s}
.te-bcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-blue);border-color:var(--blue-18)}
.te-bcard .ic{width:50px;height:50px;border-radius:13px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center;margin-bottom:15px}
.te-bcard .ic svg{width:25px;height:25px}
.te-bcard h4{font-size:1.08rem;margin-bottom:8px}
.te-bcard p{font-size:.9rem;color:var(--slate)}

/* ----- email types (code-drawn previews) ----- */
.tetypes{background:var(--bg-tint)}
.tt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.tt-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:.28s;display:flex;flex-direction:column}
.tt-card img{width:100%;height:260px;object-fit:cover;display:block;flex:1}
.tt-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-blue);border-color:var(--blue-18)}
.tt-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-tint)}
.tt-head span{font-size:.68rem;font-weight:700;color:var(--slate);margin-left:4px}
.tt-body{padding:16px;flex:1}
.tt-body .frm{font-size:.68rem;color:var(--slate-light);margin-bottom:4px}
.tt-body .sbj{font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:9px}
.tt-body .ln{height:7px;border-radius:4px;background:var(--blue-08);margin-bottom:6px}
.tt-body .ln.s{width:64%}
.tt-otp{font-family:var(--font-mono);font-weight:800;font-size:1.25rem;letter-spacing:.28em;color:var(--blue);background:var(--blue-08);border-radius:9px;padding:9px 12px;text-align:center;margin:9px 0}
.tt-btn{display:inline-block;background:var(--blue);color:#fff;font-size:.72rem;font-weight:700;border-radius:8px;padding:7px 14px;margin-top:8px}
.tt-row{display:flex;justify-content:space-between;font-size:.74rem;color:var(--slate);padding:5px 0;border-bottom:1px dashed var(--line)}
.tt-row b{color:var(--ink)}
.tt-foot{padding:10px 16px;border-top:1px solid var(--line);font-size:.7rem;font-weight:700;color:var(--blue)}

/* ----- integration: steps + terminal ----- */
.te-int{display:grid;grid-template-columns:.92fr 1.08fr;gap:46px;align-items:center}
.te-steps{display:flex;flex-direction:column;gap:8px}
.te-step{display:flex;gap:16px;padding:16px;border-radius:14px;transition:.25s}
.te-step:hover{background:var(--bg-tint)}
.te-step .n{width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;box-shadow:var(--shadow-blue)}
.te-step h4{font-size:1.05rem;margin-bottom:3px}
.te-step p{font-size:.88rem;color:var(--slate)}
.te-term{background:#0a1330;border-radius:18px;box-shadow:var(--glow);overflow:hidden;font-family:var(--font-mono)}
.te-term .th{display:flex;align-items:center;gap:7px;padding:13px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.te-term .th i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.16)}
.te-term .th span{margin-left:8px;font-size:.7rem;color:#8fb2ff;letter-spacing:.06em}
.te-term pre{margin:0;padding:18px;font-size:0.76rem;line-height:1.75;color:#dbe7ff;white-space:pre-wrap;min-height:280px}
.te-term .c-k{color:#8fb2ff}.te-term .c-s{color:#7cf5a0}.te-term .c-n{color:#ffd479}.te-term .c-c{color:#5d719c}
.te-term .ok{color:#7cf5a0;font-weight:700}
.te-cursor{display:inline-block;width:8px;height:14px;background:#8fb2ff;vertical-align:-2px;animation:emC .8s step-end infinite}

/* ----- deliverability / reports (image frames) ----- */
.te-two{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.te-two .img-frame{aspect-ratio:16/11;animation:floaty 7s ease-in-out infinite;box-shadow:0 24px 58px rgba(24,104,251,.16)}
.te-two h2{font-size:clamp(1.6rem,3.1vw,2.3rem);margin-bottom:14px}
.te-two>div>p{color:var(--slate);font-size:1.02rem;margin-bottom:20px}
.te-check{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.te-check li{display:flex;gap:10px;align-items:center;font-size:.92rem;font-weight:600;color:var(--ink)}
.te-check li svg{width:18px;height:18px;color:var(--blue);flex:0 0 auto}
.te-two.rev .img-frame-wrap{order:2}

/* ----- live log console ----- */
.te-logs{background:#fff;border:1px solid var(--blue-12);border-radius:18px;box-shadow:var(--glow);overflow:hidden}
.te-logs .lh{display:flex;align-items:center;gap:10px;padding:15px 18px;background:linear-gradient(135deg,#0a1330,#0d3aa0);color:#fff}
.te-logs .lh .dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:tepulse 1.6s infinite}
@keyframes tepulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.te-logs .lh b{font-family:var(--font-head);font-size:.95rem}
.te-logs .lh .live{margin-left:auto;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.te-lrows{padding:8px 18px}
.te-lrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.te-lrow:last-child{border-bottom:none}
.te-lrow .ev{font-family:var(--font-mono);font-size:.76rem;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.te-pill{font-size:.7rem;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap}
.te-pill.a{background:#eef2f8;color:var(--slate)}
.te-pill.d{background:var(--blue-08);color:var(--blue)}
.te-pill.o{background:#e7f8ee;color:#179a52}
.te-pill.c{background:#fff5e6;color:#c47d1a}

/* ----- pricing ----- */
.teprice .price-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--blue-12);border-radius:20px;box-shadow:var(--shadow-blue);padding:42px;text-align:center}
.teprice .price-card h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px}
.teprice .price-card>p{color:var(--slate);font-size:1rem;max-width:600px;margin:0 auto 24px}
.teprice .note{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--blue);background:var(--blue-08);border-radius:999px;padding:7px 15px;margin-bottom:20px}
.teprice .note svg{width:15px;height:15px}
.teprice .price-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ----- responsive ----- */
@media(max-width:1024px){
  .teh-grid{grid-template-columns:1fr;gap:34px;text-align:center}
  .teh-copy .sub{margin-left:auto;margin-right:auto;max-width:100%}
  .teh-cta,.teh-mini{justify-content:center}
  .te-badge.tb1{left:8px;top:6%}.te-badge.tb2{right:8px;bottom:6%}
  .te-stats{grid-template-columns:repeat(2,1fr)}
  .te-ben,.tt-grid{grid-template-columns:repeat(2,1fr)}
  .te-int{grid-template-columns:1fr;gap:30px}
  .te-two{grid-template-columns:1fr;gap:28px}
  .te-two.rev .img-frame-wrap{order:0}
  .teh-stage{overflow:visible;padding:0 16px}
}
@media(max-width:640px){
  .te-ben,.tt-grid,.te-stats{grid-template-columns:1fr}
  .teprice .price-card{padding:28px 20px}
  .te-term pre{font-size:.68rem;min-height:0}
  .teh-mini{gap:20px;width:100%}
  .teh-mini .m{flex:1;min-width:80px;text-align:center}
  .te-badge{display:none}
  .te-inbox{max-width:100%}
  .teh-copy .sub{font-size:.97rem}
  .te-lrow{gap:8px}
  .te-pill{font-size:.62rem;padding:3px 8px}
  .teh-stage{padding:0 12px;overflow-x:hidden}
}