/* Business email page: animated inbox, ownership explainer + MX diagram, comparison, setup steps. */

/* ---------- inbox ---------- */
.em-box{--row:66px;position:relative;margin:0;background:#fff;color:var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08)}
.em-box__top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.em-av{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand-l),var(--brand-d));color:#fff;font:800 16px/38px var(--head);text-align:center}
.em-addr{flex:1;min-width:0}
.em-addr b{display:block;font:700 15px var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-addr small{color:var(--muted);font-size:12.5px}
.em-unread{flex:none;font:600 12.5px var(--body);color:var(--brand-d);background:var(--brand-tint);padding:6px 10px;border-radius:999px}
.em-unread i{font-style:normal;display:inline-block}
.em-box__tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid var(--line)}
.em-box__tabs span{padding:8px 10px 10px;font:600 13px var(--body);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.em-box__tabs .is-on{color:var(--ink);border-color:var(--brand)}
.em-list{position:relative;height:calc(var(--row) * 4);overflow:hidden}
.em-msg{display:flex;align-items:center;gap:12px;height:var(--row);padding:0 18px;border-bottom:1px solid var(--line);background:#fff}
.em-msg__av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--tint);border:1px solid var(--line);font:700 13px/32px var(--head);text-align:center;color:var(--muted)}
.em-msg__b{flex:1;min-width:0}
.em-msg__b b{display:block;font:600 14px/1.3 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.em-msg__b span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-msg time{flex:none;font-size:12px;color:var(--muted)}
.em-msg.is-unread{background:#fdf6f9}
.em-msg.is-unread b{color:var(--ink);font-weight:700}
.em-msg.is-unread .em-msg__b span{color:var(--ink)}
.em-msg.is-unread .em-msg__av{background:var(--brand);border-color:var(--brand);color:#fff}
.em-msg.is-unread time{color:var(--brand-d);font-weight:600}
/* JS mode: rows are stacked absolutely and moved with transforms */
.em-box.is-live .em-msg{position:absolute;left:0;right:0;top:0;transform:translateY(calc(var(--p,0) * var(--row)))}
.hp-mo .em-box.is-live .em-msg{transition:transform .7s var(--ease-o),opacity .5s var(--ease-o),background-color .6s}
.em-box.is-live .em-msg.is-gone{opacity:0}
.hp-mo .em-box.is-live .em-msg.is-arriving{transform:translateY(calc(-1 * var(--row)));opacity:0;transition:none}
.hp-mo .em-unread i.is-bump{animation:em-bump .5s cubic-bezier(.34,1.6,.5,1)}
@keyframes em-bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.em-cap{padding:10px 18px;border-top:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--muted);background:var(--tint)}

/* ---------- ownership ---------- */
.em-vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.em-card{border-radius:var(--r-lg);padding:28px;border:1px solid var(--line);background:#fff}
.em-card__lbl{font:600 13px var(--body);color:var(--muted)}
.em-card__addr{margin-top:8px;font:800 clamp(19px,2vw,24px)/1.25 var(--head);letter-spacing:-.02em;overflow-wrap:anywhere;color:var(--muted)}
.em-card ul{display:grid;gap:10px;margin-top:18px}
.em-card li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--muted)}
.em-card li .hp-ico{flex:none;margin-top:2px;width:19px;height:19px;stroke-width:2.4;color:#9aa4ae}
.em-card--own{background:var(--deep);border-color:var(--deep);box-shadow:var(--shadow)}
.em-card--own .em-card__lbl{color:var(--gold)}
.em-card--own .em-card__addr{color:#fff}
.em-card--own li{color:var(--on-dark)}
.em-card--own li .hp-ico{color:var(--gold)}

.em-mx{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;margin-top:28px;padding:36px;border-radius:var(--r-lg);background:var(--tint);border:1px solid var(--line)}
.em-mx__copy h3{font:800 24px/1.2 var(--head);letter-spacing:-.02em}
.em-mx__copy p{margin-top:10px;color:var(--muted);font-size:16px}
.em-mx__seg{margin-top:20px;background:#fff}
.em-mx__seg button{min-height:44px}
.em-mx__seg button[aria-checked="true"]{background:var(--ink);color:#fff}
.em-mx__dia{display:grid;justify-items:stretch;gap:0}
.em-node{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;flex-wrap:wrap}
.em-node>span{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--brand-tint);color:var(--brand-d)}
.em-node b{font:700 15px var(--head);flex:1;min-width:0;overflow-wrap:anywhere}
.em-node small{flex-basis:100%;padding-left:50px;color:var(--muted);font-size:13px;margin-top:-6px}
.em-node small strong{color:var(--ink)}
.em-node--dns>span{background:var(--deep);color:var(--gold)}
.em-node--dest{border-color:var(--brand);box-shadow:0 0 0 3px rgba(197,56,111,.12)}
.em-node--dest:not([hidden]){animation:hp-fadeIn .4s var(--ease)}
.em-node[hidden]{display:none}
.em-pipe{position:relative;display:block;height:30px;width:2px;margin-left:34px;background:var(--line-2);overflow:hidden}
.em-pipe em{position:absolute;left:-2px;top:0;width:6px;height:10px;border-radius:3px;background:var(--brand);opacity:0}
.hp-mo .em-mx.in .em-pipe em{animation:em-flow 1.6s cubic-bezier(.5,0,.5,1) infinite}
.hp-mo .em-mx.in .em-pipe+.em-node+.em-pipe em{animation-delay:.8s}
.em-mx.is-paused .em-pipe em{animation-play-state:paused}
@keyframes em-flow{0%{transform:translateY(-10px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(30px);opacity:0}}

.em-dom{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:32px;align-items:center;margin-top:28px}
.em-dom h3{font-size:20px}
.em-dom p{margin-top:6px;color:var(--muted);font-size:15px}

/* ---------- comparison ---------- */
.em-cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.em-pick{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.em-pick h3{margin-top:14px;font-size:20px}
.em-pick p{margin-top:8px;color:var(--muted);font-size:15.5px}
.em-pick--gws{border-color:var(--ink)}
.em-pick--gws .hp-hexi{background:var(--ink);color:var(--gold)}
.em-table{position:relative}
.em-table td{color:var(--ink);font-weight:500}
.em-table thead th{font-size:15px}
.em-fine{margin-top:14px;font-size:13.5px;color:var(--muted)}

/* ---------- plans ---------- */
.em-sales{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--tint);border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:32px}
.em-sales .hp-hexi{width:56px;height:62px}
.em-sales h3{font-size:21px}
.em-sales p{margin-top:6px;color:var(--muted);max-width:60ch}
.em-sales .hp-actions{margin-top:0;flex-wrap:nowrap}
.em-inc{margin-top:24px;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) auto;gap:24px;align-items:center;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px}
.em-inc h3{font-size:18px}
.em-inc p{margin-top:4px;color:var(--muted);font-size:14.5px}
.em-inc__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.em-inc__list li{display:grid;gap:2px;padding:12px 14px;border-radius:10px;background:var(--tint)}
.em-inc__list b{font:700 15px var(--head)}
.em-inc__list span{font-size:13.5px;color:var(--muted)}
.em-inc__list em{font-style:normal;font:600 13.5px var(--body);color:var(--brand-d)}

/* ---------- setup ---------- */
.em-setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.em-setup__img{margin:36px 0 0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/2;border:1px solid rgba(255,255,255,.1)}
.em-setup__img img{width:100%;height:100%;object-fit:cover}
.em-steps{display:grid;gap:12px}
.em-steps li{display:flex;gap:18px;align-items:flex-start;padding:20px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.em-steps__ic{position:relative;flex:none;width:48px;height:48px;border-radius:12px;background:rgba(197,56,111,.18);color:#fff;display:flex;align-items:center;justify-content:center}
.em-steps__ic i{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--deep);font:800 12px/22px var(--head);text-align:center;font-style:normal}
.em-steps h3{color:#fff;font-size:17px}
.em-steps p{margin-top:6px;color:var(--on-dark-mute);font-size:15px}
.em-faq .hp-faq{max-width:820px;margin:0 auto}

@media (max-width:1023px){
  .em-box{max-width:620px}
  .em-mx,.em-setup,.em-dom{grid-template-columns:1fr;gap:32px}
  .em-inc{grid-template-columns:1fr;gap:16px}
  .em-sales{grid-template-columns:1fr;text-align:left}
  .em-sales .hp-actions{flex-wrap:wrap}
}
@media (max-width:767px){
  .em-box{--row:62px}
  .em-msg{padding:0 14px;gap:10px}
  .em-vs,.em-cmp{grid-template-columns:1fr}
  .em-card,.em-pick{padding:22px 18px}
  .em-mx{padding:22px 16px}
  .em-sales{padding:24px 18px}
  .em-sales .hp-actions .hp-btn{flex:1 1 auto}
  .em-inc{padding:20px 16px}
  .em-table .hp-table{min-width:0;font-size:13.5px}
  .em-table th,.em-table td{padding:12px 10px}
  .em-table tbody th{white-space:normal}
}