@charset "UTF-8";
/* ════════════════  ZIMBRA HOSTING — page styles  ════════════════ */
/* Uses shared tokens from styles.css (--bg, --ink, --accent, --serif…) */

.zhKick { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.zhKick--light { color: var(--accent-2); }

.zhSec__head { max-width: 760px; margin-bottom: 40px; }
.zhSec__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.zhSec__head h2, .zhWhy__intro h2, .zhSys__copy h2, .zhTesti__head h2 {
  font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04;
  font-size: clamp(28px, 4vw, 46px); color: var(--ink); margin: 12px 0 0;
}
.zhSec__head em, .zhWhy__intro em, .zhSys__copy em, .zhTesti__head em, .zhCta__box em { font-style: italic; color: var(--accent); }
.zhSec__lead { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); margin: 16px auto 0; max-width: 620px; }

/* ───────────── HERO ───────────── */
.zhHero { position: relative; padding: 52px 0 72px; overflow: hidden; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.zhHero__glow { position: absolute; top: -180px; right: -120px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(236,101,42,0.16), transparent 65%); pointer-events: none; }
.zhHero__grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; }
.zhHero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); background: rgba(255,255,255,0.7); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; }
.zhHero__dot { width: 8px; height: 8px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 3px rgba(31,157,85,0.2); }
.zhHero__copy h1 { font-family: var(--serif); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; font-size: clamp(36px, 5vw, 60px); color: var(--ink); margin: 20px 0 0; }
.zhHero__mk { position: relative; color: var(--accent); font-style: italic; white-space: nowrap; }
.zhHero__mk::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 4px; height: 30%; background: rgba(241,182,45,0.4); z-index: -1; border-radius: 3px; }
.zhHero__copy p { font-size: 17px; line-height: 1.62; color: var(--ink-2); margin: 20px 0 0; max-width: 500px; }
.zhHero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.zhHero__trust { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.zhHero__trust > div:not(.zhHero__trust__sep) { display: flex; flex-direction: column; }
.zhHero__trust b { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--ink); line-height: 1; }
.zhHero__trust span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.zhHero__trust__sep { width: 1.5px; height: 30px; background: rgba(40,40,40,0.15); }

/* webmail client mockup */
.zhHero__client { position: relative; }
/* real screenshot frame */
.zhShot { background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 10px 12px 0 rgba(40,40,40,0.9); overflow: hidden; }
.zhShot__bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--ink); }
.zhShot__url { font-family: var(--mono); font-size: 11.5px; color: rgba(245,239,224,0.55); background: rgba(255,255,255,0.08); border-radius: 7px; padding: 4px 14px; margin: 0 auto; }
.zhShot__view { background: #fff; line-height: 0; max-height: 460px; overflow: hidden; }
.zhShot__view img { width: 100%; height: auto; display: block; }
.zhClient { background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 10px 12px 0 rgba(40,40,40,0.9); overflow: hidden; }
.zhClient__bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--ink); }
.zhClient__dots { display: flex; gap: 6px; }
.zhClient__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.zhClient__dots i:first-child { background: #ff6058; }
.zhClient__dots i:nth-child(2) { background: #ffbd2e; }
.zhClient__dots i:nth-child(3) { background: #28ca42; }
.zhClient__apps { display: flex; gap: 5px; margin-left: 6px; }
.zhClient__app { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: none; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); cursor: pointer; transition: all .15s; }
.zhClient__app:hover { background: rgba(255,255,255,0.16); color: #fff; }
.zhClient__app.is-on { background: var(--ac); color: #fff; }
.zhClient__me { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 800; }
.zhClient__body { display: grid; grid-template-columns: 132px 200px 1fr; height: 360px; }
.zhClient__folders { border-right: 1.5px solid rgba(40,40,40,0.1); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; background: #fdfbf6; }
.zhClient__compose { background: var(--accent); color: #fff; font-family: var(--sans); font-weight: 800; font-size: 12.5px; text-align: center; padding: 9px; border-radius: 8px; margin-bottom: 8px; }
.zhClient__folder { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; border-radius: 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.zhClient__folder.is-on { background: rgba(236,101,42,0.12); color: var(--accent); font-weight: 800; }
.zhClient__folder em { font-family: var(--mono); font-style: normal; font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 999px; }
.zhClient__folder.is-on em { background: var(--accent); }
.zhClient__quota { margin-top: auto; padding-top: 12px; }
.zhClient__quotaBar { height: 6px; border-radius: 3px; background: rgba(40,40,40,0.1); overflow: hidden; }
.zhClient__quotaBar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; }
.zhClient__quota small { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 5px; display: block; }
.zhClient__list { border-right: 1.5px solid rgba(40,40,40,0.1); overflow: hidden; }
.zhClient__mail { display: flex; gap: 10px; padding: 12px 13px; border-bottom: 1px solid rgba(40,40,40,0.07); cursor: default; }
.zhClient__mail.is-sel { background: rgba(236,101,42,0.06); box-shadow: inset 3px 0 0 var(--accent); }
.zhClient__avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 800; }
.zhClient__avatar--lg { width: 38px; height: 38px; font-size: 15px; }
.zhClient__mailTxt { min-width: 0; flex: 1; }
.zhClient__mailTop { display: flex; justify-content: space-between; gap: 6px; }
.zhClient__mailTop b { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zhClient__mailTop em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.zhClient__mail span { font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.zhClient__mail.is-unread .zhClient__mailTop b { font-weight: 800; }
.zhClient__mail.is-unread span { color: var(--ink-2); }
.zhClient__read { padding: 16px 16px; }
.zhClient__readHd { display: flex; gap: 11px; align-items: center; padding-bottom: 14px; border-bottom: 1.5px solid rgba(40,40,40,0.1); }
.zhClient__readHd b { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); display: block; }
.zhClient__readHd span { font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); }
.zhClient__readBody { display: flex; flex-direction: column; gap: 9px; padding-top: 16px; }
.zhClient__readBody > span { height: 9px; border-radius: 4px; background: rgba(40,40,40,0.09); }
.zhClient__chip { display: inline-flex; align-self: flex-start; font-family: var(--mono); font-size: 11px; color: var(--ink-2); background: rgba(236,101,42,0.08); border: 1px solid rgba(236,101,42,0.25); border-radius: 7px; padding: 6px 11px; margin: 4px 0; }
.zhHero__badge { position: absolute; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 8px 13px; box-shadow: 3px 3px 0 var(--ink); }
.zhHero__badge--a { top: 26px; left: -22px; animation: zhFloat 4s ease-in-out infinite; }
.zhHero__badge--b { bottom: 34px; right: -16px; animation: zhFloat 4s ease-in-out infinite 1.6s; }
@keyframes zhFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ───────────── APP SWITCHER ───────────── */
.zhApps { padding: 76px 0; background: var(--bg); }
.zhApps .zhSec__head { text-align: center; margin-left: auto; margin-right: auto; }
.zhApps__dock { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 36px; }
.zhDock { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 104px; padding: 16px 8px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; cursor: pointer; transition: transform .16s, box-shadow .16s; }
.zhDock:hover { transform: translateY(-4px); }
.zhDock.is-on { box-shadow: 5px 5px 0 var(--ac); transform: translateY(-4px); }
.zhDock__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--ac); }
.zhDock__lbl { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); }
.zhDock.is-on .zhDock__lbl { color: var(--ac); }

.zhApps__stage { display: grid; grid-template-columns: 0.85fr 1fr; gap: 36px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); padding: 40px; }
.zhApps__info { animation: zhSlideIn .4s ease; }
@keyframes zhSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.zhApps__tag { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, transparent); padding: 5px 11px; border-radius: 999px; }
.zhApps__info h3 { font-family: var(--serif); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; color: var(--ink); margin: 14px 0 0; letter-spacing: -0.01em; }
.zhApps__info p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 14px 0 0; }
.zhApps__feats { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.zhApps__feats li { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.zhApps__tick { width: 20px; height: 20px; border-radius: 50%; background: var(--ac); color: #fff; display: grid; place-items: center; flex-shrink: 0; }

/* app viz panels */
.zhApps__viz { animation: zhSlideIn .45s ease; }
.zhViz { background: #fbf9f4; border: 1.5px solid rgba(40,40,40,0.14); border-radius: 16px; padding: 16px; box-shadow: inset 0 1px 0 #fff; min-height: 300px; }
.zhViz__hd { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1.5px solid rgba(40,40,40,0.1); }
.zhViz__hd b { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.zhViz__hd span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.zhViz__pic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 800; flex-shrink: 0; }

/* mail viz */
.zhViz__mailRow { display: flex; gap: 11px; align-items: center; padding: 11px 8px; border-radius: 10px; }
.zhViz__mailRow.unread { background: #fff; box-shadow: 0 1px 4px rgba(40,40,40,0.06); }
.zhViz__mailBody { min-width: 0; }
.zhViz__mailBody b { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink); display: block; }
.zhViz__mailBody span { font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); display: block; margin: 1px 0; }
.zhViz__mailBody em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--ac); }

/* calendar viz */
.zhViz__week { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 5px; }
.zhViz__week span { text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-3); }
.zhViz__cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.zhViz__day { aspect-ratio: 1; border-radius: 6px; background: #fff; border: 1px solid rgba(40,40,40,0.07); padding: 3px; position: relative; overflow: hidden; }
.zhViz__day em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--ink-3); }
.zhViz__day.has { border-color: var(--ac); }
.zhViz__ev { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #fff; background: var(--ac); border-radius: 3px; padding: 0 2px; margin-top: 1px; line-height: 1.5; }

/* list/contacts viz */
.zhViz__person { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-bottom: 1px solid rgba(40,40,40,0.07); }
.zhViz__person div { flex: 1; min-width: 0; }
.zhViz__person b { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink); display: block; }
.zhViz__person span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.zhViz__star { color: rgba(40,40,40,0.2); font-size: 14px; font-style: normal; }

/* task viz */
.zhViz__task { display: flex; align-items: center; gap: 11px; padding: 11px 6px; border-bottom: 1px solid rgba(40,40,40,0.07); }
.zhViz__box { width: 20px; height: 20px; border-radius: 5px; border: 2px solid rgba(40,40,40,0.25); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.zhViz__task.done .zhViz__box { background: var(--ac); border-color: var(--ac); }
.zhViz__taskTxt { flex: 1; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.zhViz__task.done .zhViz__taskTxt { text-decoration: line-through; color: var(--ink-3); }
.zhViz__pri { font-family: var(--mono); font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.pri-Tinggi { background: rgba(219,42,42,0.12); color: #c52727; }
.pri-Sedang { background: rgba(217,164,6,0.16); color: #a07a00; }
.pri-Rendah { background: rgba(40,40,40,0.08); color: var(--ink-3); }

/* drive viz */
.zhViz__files { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.zhViz__file { background: #fff; border: 1px solid rgba(40,40,40,0.1); border-radius: 11px; padding: 14px; text-align: center; }
.zhViz__fic { font-size: 30px; display: block; margin-bottom: 8px; }
.zhViz__file b { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zhViz__file em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--ink-3); }

/* chat viz */
.zhViz__chat { display: flex; flex-direction: column; gap: 12px; min-height: 180px; }
.zhViz__msg { display: flex; gap: 9px; align-items: flex-end; }
.zhViz__msg--me { justify-content: flex-end; }
.zhViz__bub { background: #fff; border: 1px solid rgba(40,40,40,0.1); border-radius: 14px 14px 14px 4px; padding: 9px 13px; font-family: var(--sans); font-size: 12.5px; color: var(--ink); max-width: 78%; }
.zhViz__bub--me { background: var(--ac); color: #fff; border: none; border-radius: 14px 14px 4px 14px; }
.zhViz__compose { display: flex; align-items: center; gap: 8px; margin-top: 14px; background: #fff; border: 1.5px solid rgba(40,40,40,0.12); border-radius: 999px; padding: 8px 8px 8px 16px; }
.zhViz__compose span { flex: 1; font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); }
.zhViz__compose i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 13px; }

/* ───────────── WHY / BENTO ───────────── */
.zhWhy { padding: 76px 0; background: var(--bg-2); }
.zhWhy .zhSec__head { margin-bottom: 44px; }
.zhBento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(168px, auto); gap: 18px; }
.zhBox { position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 26px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.zhBox:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--ink); }
.zhBox__tag { font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.zhBox h3 { font-family: var(--serif); font-weight: 800; letter-spacing: -0.015em; line-height: 1.12; color: var(--ink); margin: 10px 0 0; }
.zhBox p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 10px 0 0; }
.zhBox p b { color: var(--ink); font-weight: 800; }

/* hero cell — 2x2 */
.zhBox--hero { grid-column: span 2; grid-row: span 2; background: var(--ink); border-color: var(--ink); padding: 0; }
.zhBox--hero:hover { box-shadow: 8px 8px 0 var(--accent); }
.zhBox__flag { position: relative; height: 168px; display: grid; place-items: center; overflow: hidden; }
.zhBox__flagRed, .zhBox__flagWhite { position: absolute; left: 0; right: 0; height: 50%; }
.zhBox__flagRed { top: 0; background: linear-gradient(180deg, #e63b2e, #c8281d); }
.zhBox__flagWhite { bottom: 0; background: linear-gradient(180deg, #fbf9f4, #efe9dc); }
.zhBox__pin { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; box-shadow: 0 8px 26px rgba(0,0,0,0.3); border: 3px solid var(--ink); animation: zhFloat 4s ease-in-out infinite; }
.zhBox__body { padding: 28px 30px 30px; flex: 1; }
.zhBox--hero .zhBox__tag { color: var(--accent-2); }
.zhBox--hero h3 { color: #fff; font-size: clamp(22px, 2.5vw, 30px); }
.zhBox--hero h3 em { color: var(--accent-2); font-style: italic; }
.zhBox--hero p { color: rgba(245,239,224,0.72); font-size: 14.5px; }
.zhBox__loc { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--mono); font-size: 11px; color: rgba(245,239,224,0.6); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 6px 13px; }
.zhBox__locDot { width: 7px; height: 7px; border-radius: 50%; background: #34d77f; box-shadow: 0 0 0 0 rgba(52,215,127,0.6); animation: zhPing 1.8s ease-out infinite; }

/* comparison — 2x2 */
.zhBox--cmp { grid-column: span 2; grid-row: span 2; }
.zhCmp { margin-top: 16px; display: flex; flex-direction: column; }
.zhCmp__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1.5px solid rgba(40,40,40,0.09); }
.zhCmp__row:last-child { border-bottom: none; }
.zhCmp__row span { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.zhCmp__row b { font-family: var(--mono); font-size: 12.5px; font-weight: 700; text-align: center; }
.zhCmp__row--head { border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.zhCmp__row--head b { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.zhCmp__them { color: var(--ink-3) !important; }
.zhCmp__yes { color: #1c8a4e; background: rgba(31,157,85,0.1); border-radius: 7px; padding: 6px 4px; }
.zhCmp__no { color: var(--ink-3); }

/* suite — 1x2 */
.zhBox--suite { grid-column: span 1; grid-row: span 2; }
.zhBox__big { font-family: var(--serif); font-weight: 800; font-size: 64px; line-height: 0.9; letter-spacing: -0.03em; color: var(--accent); margin: 14px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.zhBox__big small { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.zhBox__big--inf { font-size: 76px; color: var(--accent); }
.zhBox__appdots { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 16px; }
.zhBox__appdots span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }

/* alias — 1x2 */
.zhBox--alias { grid-column: span 1; grid-row: span 2; }
.zhBox__aliases { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.zhBox__aliases code { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent); background: rgba(236,101,42,0.08); border: 1px solid rgba(236,101,42,0.2); border-radius: 6px; padding: 3px 8px; }

/* migration — 2x1 */
.zhBox--mig { grid-column: span 2; grid-row: span 1; flex-direction: row; align-items: center; gap: 20px; background: color-mix(in oklab, var(--accent) 7%, #fff); border-color: var(--accent); }
.zhBox__migIc { width: 56px; height: 56px; border-radius: 14px; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.zhBox__migTxt h3 { font-size: 19px; margin-top: 6px; }
.zhBox__migTxt p { margin-top: 6px; }

/* open standard — 2x1 */
.zhBox--std { grid-column: span 2; grid-row: span 1; }
.zhBox--std p { margin-top: 0; }
.zhBox__std { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
.zhBox__std span { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink); background: var(--bg-2); border: 1.5px solid var(--ink); border-radius: 8px; padding: 6px 11px; }
.zhBox__clients { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-top: 12px; }

/* ───────────── MIGRATION ───────────── */
.zhMig { padding: 76px 0; background: var(--bg); }

.zhMig__pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-bottom: 30px; }
.zhMig__chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; transition: all .16s; }
.zhMig__chip:hover { transform: translateY(-2px); }
.zhMig__chip.is-on { background: var(--ink); box-shadow: 4px 4px 0 var(--sc); }
.zhMig__chipDot { width: 11px; height: 11px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc) 22%, transparent); }
.zhMig__chipLbl { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.zhMig__chip.is-on .zhMig__chipLbl { color: #fff; }

/* pipeline */
.zhPipe { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 0; align-items: stretch; background: var(--ink); border-radius: 22px; padding: 30px 28px; margin-bottom: 26px; overflow: hidden; }
.zhPipe__node { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; padding: 18px 14px; }
.zhPipe__node b { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.2; color: #fff; }
.zhPipe__node em { font-family: var(--mono); font-style: normal; font-size: 11px; line-height: 1.3; color: rgba(245,239,224,0.6); }
.zhPipe__nodeDot { width: 52px; height: 52px; border-radius: 14px; background: var(--sc); margin-bottom: 8px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--sc) 20%, transparent); transition: background .2s; }
.zhPipe__zimbra { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; display: grid; place-items: center; margin-bottom: 8px; box-shadow: 0 0 0 6px rgba(236,101,42,0.2); }
.zhPipe__track { position: relative; display: flex; align-items: center; justify-content: center; }
.zhPipe__rail { position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 8px, transparent 8px 16px); }
.zhPipe__packet { position: absolute; top: 50%; font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); animation: zhFlow 3s linear infinite; }
.zhPipe__packet--1 { animation-delay: 0s; }
.zhPipe__packet--2 { animation-delay: 1s; }
.zhPipe__packet--3 { animation-delay: 2s; }
@keyframes zhFlow {
  0% { left: 2%; opacity: 0; transform: translateY(-50%) scale(0.6); }
  12% { opacity: 1; transform: translateY(-50%) scale(1); }
  88% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { left: 92%; opacity: 0; transform: translateY(-50%) scale(0.6); }
}
.zhPipe__trackLbl { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; color: rgba(245,239,224,0.45); white-space: nowrap; }

/* stage track */
.zhStages { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: zhstage; }
.zhStage { position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 22px 20px; }
.zhStage::after { content: ""; position: absolute; top: 50%; right: -16px; width: 16px; height: 2px; background: rgba(40,40,40,0.2); z-index: 1; }
.zhStage:last-child::after { display: none; }
.zhStage__num { font-family: var(--mono); font-size: 13px; font-weight: 800; color: #fff; background: var(--sc); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; transition: background .2s; }
.zhStage b { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); display: block; margin: 14px 0 0; line-height: 1.15; }
.zhStage p { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 7px 0 0; }

/* guarantee bar */
.zhMig__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: color-mix(in oklab, var(--accent) 8%, #fff); border: 2px solid var(--accent); border-radius: 16px; overflow: hidden; }
.zhMig__bar > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 14px; text-align: center; border-right: 1.5px dashed rgba(236,101,42,0.3); }
.zhMig__bar > div:last-child { border-right: none; }
.zhMig__bar b { font-family: var(--serif); font-weight: 800; font-size: 28px; color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.zhMig__bar span { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-top: 6px; }

/* ───────────── PRICING ───────────── */
.zhPrice { padding: 76px 0; background: var(--bg-2); }
.zhPrice__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 26px; align-items: stretch; }
.zhPlan { position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 28px 24px; cursor: pointer; transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; }
.zhPlan:hover { transform: translateY(-4px); box-shadow: 7px 7px 0 var(--pc); }
.zhPlan.is-sel { box-shadow: 7px 7px 0 var(--pc); }
.zhPlan.is-pop { border-color: var(--pc); }
.zhPlan__rib { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--pc); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; padding: 5px 14px; border-radius: 999px; border: 2px solid var(--ink); white-space: nowrap; }
.zhPlan__radio { position: absolute; top: 22px; right: 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(40,40,40,0.25); display: grid; place-items: center; }
.zhPlan__radio span { width: 11px; height: 11px; border-radius: 50%; background: transparent; transition: background .15s; }
.zhPlan.is-sel .zhPlan__radio { border-color: var(--pc); }
.zhPlan.is-sel .zhPlan__radio span { background: var(--pc); }
.zhPlan__name { font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc); }
.zhPlan__price { margin: 12px 0 4px; font-family: var(--serif); }
.zhPlan__price b { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.zhPlan__price em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 4px; }
.zhPlan__store { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); background: color-mix(in oklab, var(--pc) 9%, transparent); padding: 6px 11px; border-radius: 8px; margin-bottom: 18px; align-self: flex-start; }
.zhPlan__store svg { color: var(--pc); }
.zhPlan__feats { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1.5px dashed rgba(40,40,40,0.14); display: flex; flex-direction: column; gap: 10px; }
.zhPlan__feats li { display: flex; align-items: flex-start; gap: 9px; font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.zhPlan__tick { width: 18px; height: 18px; border-radius: 50%; background: var(--pc); color: #fff; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }

.zhPrice__calc { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; background: var(--ink); border-radius: 20px; padding: 30px 34px; }
.zhPrice__calcLbl { font-family: var(--sans); font-size: 16px; font-weight: 700; color: #fff; display: block; margin-bottom: 16px; }
.zhPrice__calcL input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--pc), color-mix(in oklab, var(--pc) 50%, #fff)); outline: none; }
.zhPrice__calcL input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--pc); cursor: pointer; }
.zhPrice__calcL input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--pc); cursor: pointer; }
.zhPrice__seats { display: flex; gap: 8px; margin-top: 14px; }
.zhPrice__seats button { flex: 1; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: rgba(245,239,224,0.7); background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.15); border-radius: 9px; padding: 8px; cursor: pointer; transition: all .14s; }
.zhPrice__seats button.is-on { background: var(--pc); color: #fff; border-color: var(--pc); }
.zhPrice__calcR { text-align: right; }
.zhPrice__total__lbl { font-family: var(--mono); font-size: 11.5px; color: rgba(245,239,224,0.65); }
.zhPrice__total__lbl b { color: #fff; }
.zhPrice__total { font-family: var(--serif); font-weight: 800; font-size: 40px; color: #fff; letter-spacing: -0.02em; line-height: 1; margin: 8px 0 16px; }
.zhPrice__total em { font-family: var(--mono); font-style: normal; font-size: 14px; color: rgba(245,239,224,0.6); margin-left: 6px; }
.zhPrice__calcR .btn { width: 100%; justify-content: center; min-height: 48px; }
.zhPrice__calcR .btn--dark { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 10px 24px -10px rgba(236,101,42,.7); }
.zhPrice__calcR .btn--dark:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ───────────── SYSTEM READOUT ───────────── */
.zhSys { padding: 80px 0; background: #16110d; position: relative; overflow: hidden; }
.zhSys::before { content: ""; position: absolute; top: -160px; left: -120px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(236,101,42,0.18), transparent 65%); }
.zhSys__grid { position: relative; display: grid; grid-template-columns: 0.9fr 1.05fr; gap: 48px; align-items: center; }
.zhSys__copy h2 { color: #fff; }
.zhSys__copy em { color: var(--accent-2); }
.zhSys__copy p { font-size: 16px; line-height: 1.62; color: rgba(245,239,224,0.7); margin: 16px 0 0; }
.zhSys__pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.zhSys__pills span { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent-2); border: 1.5px solid rgba(241,182,45,0.3); border-radius: 999px; padding: 7px 13px; }
.zhSys__readout { background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.12); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.zhSys__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.1); }
.zhSys__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.zhSys__bar i:first-child { background: #ff6058; }
.zhSys__bar i:nth-child(2) { background: #ffbd2e; }
.zhSys__bar i:nth-child(3) { background: #28ca42; }
.zhSys__bar span { font-family: var(--mono); font-size: 11px; color: rgba(245,239,224,0.5); margin-left: 8px; }
.zhSys__rows { padding: 10px 18px; }
.zhSys__row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.06); animation: zhRowIn .5s ease both; }
.zhSys__row:last-child { border-bottom: none; }
@keyframes zhRowIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
.zhSys__ic { color: var(--accent); flex-shrink: 0; }
.zhSys__k { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: rgba(245,239,224,0.85); white-space: nowrap; }
.zhSys__dots { flex: 1; border-bottom: 1.5px dotted rgba(255,255,255,0.18); margin: 0 4px; min-width: 16px; }
.zhSys__v { font-family: var(--mono); font-size: 12px; font-weight: 600; color: #fff; text-align: right; }
.zhSys__live { display: flex; align-items: center; gap: 9px; padding: 14px 18px; background: rgba(31,157,85,0.1); border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--mono); font-size: 11.5px; color: #5fd99a; }
.zhSys__liveDot { width: 8px; height: 8px; border-radius: 50%; background: #34d77f; box-shadow: 0 0 0 0 rgba(52,215,127,0.6); animation: zhPing 1.8s ease-out infinite; }
@keyframes zhPing { 0% { box-shadow: 0 0 0 0 rgba(52,215,127,0.6); } 100% { box-shadow: 0 0 0 9px rgba(52,215,127,0); } }

/* ───────────── TESTIMONIALS ───────────── */
.zhTesti { padding: 76px 0; background: var(--bg); }
.zhTesti__wrap { display: grid; grid-template-columns: 0.75fr 1fr; gap: 44px; align-items: center; }
.zhTesti__head p { margin: 0; }
.zhTesti__dots { display: flex; gap: 9px; margin-top: 24px; }
.zhTesti__dots button { width: 32px; height: 6px; border-radius: 999px; border: none; background: rgba(40,40,40,0.18); cursor: pointer; transition: all .2s; padding: 0; }
.zhTesti__dots button.is-on { background: var(--accent); width: 48px; }
.zhTesti__card { position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 22px; padding: 40px 38px 32px; box-shadow: 8px 8px 0 var(--tc); margin: 0; animation: zhSlideIn .5s ease; }
.zhTesti__mark { position: absolute; top: 10px; left: 28px; font-family: var(--serif); font-size: 90px; color: color-mix(in oklab, var(--tc) 22%, transparent); line-height: 1; }
.zhTesti__card blockquote { position: relative; font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.42; color: var(--ink); margin: 18px 0 0; letter-spacing: -0.01em; }
.zhTesti__card figcaption { display: flex; align-items: center; gap: 13px; margin-top: 26px; padding-top: 22px; border-top: 1.5px solid rgba(40,40,40,0.1); }
.zhTesti__av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--serif); font-weight: 800; font-size: 20px; }
.zhTesti__card figcaption b { font-family: var(--sans); font-weight: 800; font-size: 15px; color: var(--ink); display: block; }
.zhTesti__card figcaption em { font-family: var(--sans); font-style: normal; font-size: 12.5px; color: var(--ink-3); }

/* ───────────── FAQ ───────────── */
.zhFaq { padding: 76px 0; background: var(--bg-2); }
.zhFaq__split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.zhFaq__tabs { display: flex; flex-direction: column; gap: 9px; }
.zhFaq__tab { display: flex; align-items: center; gap: 14px; text-align: left; background: #fff; border: 2px solid var(--ink); border-radius: 13px; padding: 16px 18px; cursor: pointer; transition: all .15s; }
.zhFaq__tab.is-on { background: var(--ink); box-shadow: 5px 5px 0 var(--accent); }
.zhFaq__tabNum { font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--accent); flex-shrink: 0; }
.zhFaq__tab.is-on .zhFaq__tabNum { color: var(--accent-2); }
.zhFaq__tabQ { flex: 1; font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.zhFaq__tab.is-on .zhFaq__tabQ { color: #fff; }
.zhFaq__tabArr { color: var(--ink-3); flex-shrink: 0; transition: transform .15s; }
.zhFaq__tab.is-on .zhFaq__tabArr { color: var(--accent-2); transform: translateX(3px); }
.zhFaq__panel { position: sticky; top: 90px; background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 34px 32px; box-shadow: var(--shadow); animation: zhSlideIn .35s ease; }
.zhFaq__panelNum { font-family: var(--serif); font-weight: 800; font-size: 40px; color: color-mix(in oklab, var(--accent) 30%, transparent); line-height: 1; }
.zhFaq__panel h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.2; color: var(--ink); margin: 8px 0 0; letter-spacing: -0.01em; }
.zhFaq__panelSep { height: 2px; width: 56px; background: var(--accent); margin: 18px 0; border-radius: 2px; }
.zhFaq__panel p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.zhFaq__panelNav { display: flex; gap: 10px; margin-top: 26px; }
.zhFaq__panelNav button { flex: 1; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); background: var(--bg-2); border: 2px solid var(--ink); border-radius: 9px; padding: 11px; cursor: pointer; transition: all .14s; }
.zhFaq__panelNav button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ───────────── CTA ───────────── */
.zhCta { padding: 30px 0 84px; background: var(--bg-2); }
.zhCta__box { position: relative; background: var(--ink); border-radius: 28px; padding: 64px 48px; text-align: center; overflow: hidden; }
.zhCta__glow { position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 560px; height: 360px; background: radial-gradient(ellipse, rgba(236,101,42,0.3), transparent 65%); pointer-events: none; }
.zhCta__box .zhKick { position: relative; }
.zhCta__box h2 { position: relative; font-family: var(--serif); font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; color: #fff; margin: 14px auto 0; max-width: 720px; letter-spacing: -0.02em; }
.zhCta__box em { color: var(--accent-2); font-style: italic; }
.zhCta__box p { position: relative; font-size: 16.5px; line-height: 1.6; color: rgba(245,239,224,0.72); margin: 18px auto 0; max-width: 540px; }
.zhCta__btns { position: relative; display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 30px; }
.btn--ghostLight { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.3); }
.btn--ghostLight:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* ───────────── RESPONSIVE ───────────── */
@media (max-width: 1000px) {
  .zhHero__grid { grid-template-columns: 1fr; gap: 40px; }
  .zhHero__client { max-width: 560px; }
  .zhApps__stage { grid-template-columns: 1fr; gap: 28px; }
  .zhWhy__grid { grid-template-columns: 1fr; gap: 32px; }
  .zhWhy__intro { position: static; }
  .zhBento { grid-template-columns: repeat(2, 1fr); }
  .zhBox--hero, .zhBox--cmp { grid-column: span 2; grid-row: span 1; }
  .zhBox--mig, .zhBox--std { grid-column: span 2; }
  .zhBox--suite, .zhBox--alias { grid-row: span 1; }
  .zhMig__cockpit { grid-template-columns: 1fr; }
  .zhStages { grid-template-columns: 1fr 1fr; }
  .zhStage:nth-child(2)::after { display: none; }
  .zhSys__grid { grid-template-columns: 1fr; gap: 36px; }
  .zhTesti__wrap { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .zhHero { padding: 36px 0 52px; }
  .zhClient__body { grid-template-columns: 1fr; height: auto; }
  .zhClient__folders { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1.5px solid rgba(40,40,40,0.1); }
  .zhClient__compose { width: 100%; }
  .zhClient__quota { width: 100%; margin-top: 4px; }
  .zhClient__list { border-right: none; border-bottom: 1.5px solid rgba(40,40,40,0.1); }
  .zhClient__read { display: none; }
  .zhHero__badge--a { left: 6px; }
  .zhHero__badge--b { right: 6px; }
  .zhHero__trust { flex-wrap: wrap; gap: 14px; }
  .zhPrice__cards { grid-template-columns: 1fr; }
  .zhBento { grid-template-columns: 1fr; }
  .zhBox--hero, .zhBox--cmp, .zhBox--suite, .zhBox--alias, .zhBox--mig, .zhBox--std { grid-column: span 1; }
  .zhBox--mig { flex-direction: column; align-items: flex-start; gap: 14px; }
  .zhPrice__calc { grid-template-columns: 1fr; gap: 20px; }
  .zhPrice__calcR { text-align: left; }
  .zhPrice__total { font-size: 34px; }
  .zhFaq__split { grid-template-columns: 1fr; }
  .zhFaq__panel { position: static; order: -1; }
  .zhMig__sources { grid-template-columns: 1fr; }
  .zhPipe { grid-template-columns: 1fr; gap: 16px; }
  .zhPipe__track { height: 80px; }
  .zhPipe__rail { left: 50%; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform: translateX(-50%); background: repeating-linear-gradient(180deg, rgba(255,255,255,0.25) 0 8px, transparent 8px 16px); }
  @keyframes zhFlow { 0% { top: 4%; left: 50%; opacity: 0; transform: translate(-50%,0) scale(0.6); } 12% { opacity: 1; transform: translate(-50%,0) scale(1); } 88% { opacity: 1; } 100% { top: 88%; left: 50%; opacity: 0; transform: translate(-50%,0) scale(0.6); } }
  .zhPipe__packet { left: 50%; }
  .zhPipe__trackLbl { display: none; }
  .zhStages { grid-template-columns: 1fr; }
  .zhStage::after { display: none; }
  .zhMig__bar { grid-template-columns: 1fr 1fr; }
  .zhMig__bar > div:nth-child(2) { border-right: none; }
  .zhMig__bar > div:nth-child(1), .zhMig__bar > div:nth-child(2) { border-bottom: 1.5px dashed rgba(236,101,42,0.3); }
  .zhApps__feats { grid-template-columns: 1fr; }
  .zhWhy__count b { font-size: 44px; }
  .zhCta__box { padding: 44px 24px; }
  .zhDock { width: 88px; }
}
@media (max-width: 440px) {
  .zhDock { width: calc(33.33% - 8px); }
  .zhViz__files { grid-template-columns: 1fr; }
}

.zhPipe__nodeDot{display:grid;place-items:center;background:#fff;box-shadow:0 0 0 6px color-mix(in oklab,var(--sc) 30%,transparent)}
.zhPipe__nodeDot img{width:30px;height:30px;object-fit:contain;display:block}
.zhPipe__zimbra{background:#fff}
.zhPipe__zimbra img{width:32px;height:32px;object-fit:contain;display:block}
.zhMig__chipDot{width:24px;height:24px;border-radius:7px;background:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 0 1.5px color-mix(in oklab,var(--sc) 35%,transparent)}
.zhMig__chipDot img{width:16px;height:16px;object-fit:contain;display:block}

.zhApps__photo{position:relative;margin:0;border-radius:18px;overflow:hidden;border:2px solid var(--ink);aspect-ratio:11/7.6;background:#e9e3d8;animation:zhSlideIn .45s ease}
.zhApps__photo img{width:100%;height:100%;object-fit:cover;display:block}
.zhApps__photo figcaption{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:6px 14px 6px 6px;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.zhApps__photoIc{width:28px;height:28px;border-radius:50%;color:#fff;display:grid;place-items:center}
.zhBox--cmp{background:#1F1D1A;color:#F4EFE6}
.zhBox--cmp .zhBox__tag{background:rgba(236,101,42,.18);color:#FF9A66}
.zhVs__hd{display:flex;flex-direction:column;gap:12px}
.zhVs__who{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 10px;font-family:var(--serif)}
.zhVs__who b{font-size:24px;font-weight:700;color:#fff}
.zhVs__who i{font-family:var(--mono);font-style:normal;font-size:12px;color:#FF9A66;border:1px solid rgba(255,154,102,.5);border-radius:999px;padding:2px 8px}
.zhVs__who span{font-size:17px;color:rgba(244,239,230,.6)}
.zhVs{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.zhVs__row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.zhVs__lbl{font-family:var(--mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:rgba(244,239,230,.66)}
.zhVs__pair{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}
.zhVs__win{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:15.5px;font-weight:700;color:#fff}
.zhVs__win svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:#EC652A;color:#fff}
.zhVs__lose{font-family:var(--sans);font-size:14px;color:rgba(244,239,230,.5);text-decoration-color:rgba(255,120,90,.8)}
.zhBox--alias{background:#FFF1E6}
.zhAl{margin:14px 0 4px;display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:1}
.zhAl__feed{position:relative;height:132px;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.zhAl__track{display:flex;flex-direction:column;gap:7px;animation:zhAlUp 14s linear infinite}
.zhAl__track span{align-self:flex-start;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:5px 11px}
.zhAl__track span:nth-child(even){align-self:flex-end}
.zhAl__track em{font-style:normal;font-weight:500;color:var(--ink-2)}
@keyframes zhAlUp{to{transform:translateY(-50%)}}
.zhAl__arrow{display:grid;place-items:center;color:var(--accent)}
.zhAl__inbox{display:flex;align-items:center;gap:11px;background:var(--accent);color:#fff;border:2px solid var(--ink);border-radius:14px;padding:11px 13px;box-shadow:3px 3px 0 var(--ink)}
.zhAl__inbox b{display:block;font-family:var(--sans);font-size:15px}
.zhAl__inbox span{font-family:var(--mono);font-size:12px;opacity:.92}
@media (max-width:640px){.zhVs__row{grid-template-columns:1fr;gap:6px}.zhVs__who b{font-size:21px}}
@media (prefers-reduced-motion:reduce){.zhAl__track{animation:none}}

.zhSys__pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.zhSys__pill{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(241,182,45,.10),rgba(255,255,255,.03));border:1px solid rgba(241,182,45,.28);transition:transform .2s,border-color .2s}
.zhSys__pill:hover{transform:translateY(-2px);border-color:rgba(241,182,45,.6)}
.zhSys__pillIc{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--accent-2,#F1B62D);color:#1F1D1A}
.zhSys__pill b{display:block;font-family:var(--sans);font-size:15px;font-weight:800;color:#fff;line-height:1.25}
.zhSys__pill span{display:block;font-family:var(--sans);font-size:13px;color:rgba(244,239,230,.72);margin-top:2px}
.zhTesti__av{object-fit:cover;border:3px solid;background:#eee;flex:none}
@media (max-width:520px){.zhSys__pills{grid-template-columns:1fr}}
.zhSys__pills .zhSys__pill span{border:0;padding:0;border-radius:0;font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(244,239,230,.72);letter-spacing:0}
.zhSys__pills .zhSys__pill .zhSys__pillIc{border-radius:11px;padding:0;color:#1F1D1A;margin:0}
.zhSys__pills .zhSys__pill .zhSys__pillIc{display:grid;place-items:center}
.zhVs__hd{align-items:flex-start}

.zhBox--cmp{padding:22px 24px}
.zhBox--cmp .zhVs__hd{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 14px}
.zhBox--cmp .zhVs__who b{font-size:20px}
.zhBox--cmp .zhVs__who span{font-size:15px}
.zhBox--cmp .zhVs{margin-top:14px;gap:0;border-top:1px solid rgba(255,255,255,.1)}
.zhBox--cmp .zhVs__row{grid-template-columns:130px minmax(0,1fr);padding:10px 2px;border-radius:0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.1)}
.zhBox--cmp .zhVs__win{font-size:15px}
.zhBox--cmp .zhVs__win svg{width:20px;height:20px}
.zhBox--cmp .zhVs__lose{font-size:13.5px}
.zhAl{gap:10px;margin-top:14px}
.zhAl__feed{height:150px;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.zhAl__track{gap:8px}
.zhAl__track span,.zhAl__track span:nth-child(even){align-self:stretch;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;background:#fff;border:1.5px solid rgba(31,29,26,.18);border-radius:10px;padding:8px 12px;color:var(--ink)}
.zhAl__track span svg{flex:none;color:var(--accent)}
.zhAl__track span b{font-weight:700}
.zhAl__track span em{margin-left:-6px}
.zhAl__arrow{height:22px}
.zhAl__inbox{border-radius:12px;padding:12px 14px}
.zhAl__inbox span{display:block;margin-top:1px}
.zhBox--alias>p{margin-top:14px}
@media (max-width:640px){.zhBox--cmp .zhVs__row{grid-template-columns:1fr;gap:4px}}
.zhBox--cmp .zhBox__tag{background:rgba(236,101,42,.16);color:#FF9A66;padding:5px 10px;border-radius:999px}
.zhFaq__split>*{min-width:0}
.zhFaq__tab{min-width:0;width:100%}
@media (max-width:640px){.zhFaq{padding:56px 0}.zhFaq__tab{padding:13px 14px;gap:10px}.zhFaq__tabQ{font-size:14px}.zhFaq__panel{padding:24px 20px}.zhBox__tag,.zhApps__tag{font-size:12px}.zhFaq__panelNav button{min-height:44px}}

@media (max-width:1100px){.zhHero__badge--a{left:6px}.zhHero__badge--b{right:6px}}
@media (max-width:420px){.zhSys__row{flex-wrap:wrap;gap:4px 12px}.zhSys__k{white-space:normal}.zhSys__v{text-align:left;min-width:0;overflow-wrap:anywhere}}
.zhHero__dot{display:none!important}
/* dock icons polished */
.zhDock__ic{width:48px!important;height:48px!important;border-radius:14px!important;display:grid!important;place-items:center;color:var(--ac)!important;background:linear-gradient(150deg,color-mix(in oklch,var(--ac) 16%,#fff),color-mix(in oklch,var(--ac) 6%,#fff))!important;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ac) 22%,transparent),0 6px 14px -8px color-mix(in oklch,var(--ac) 60%,transparent)!important;transition:transform .2s,background .2s,color .2s}
.zhDock:hover .zhDock__ic{transform:translateY(-2px)}
.zhDock.is-on .zhDock__ic{color:#fff!important;background:linear-gradient(150deg,color-mix(in oklch,var(--ac) 82%,#fff),var(--ac))!important;box-shadow:0 10px 22px -10px var(--ac)!important}
@media (max-width:640px){.zhDock__ic{width:42px!important;height:42px!important;border-radius:12px!important}.zhDock__ic svg{width:21px;height:21px}}
.zhDock__ic svg{width:24px;height:24px;stroke-width:1.6}
.zhDock{border:1px solid rgba(40,40,40,.12)!important;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.zhDock.is-on{border-color:var(--ac)!important;box-shadow:0 14px 28px -18px var(--ac),0 0 0 1px var(--ac)!important}
/* bento polish */
.zhBox__tag{font:700 12px/1.3 var(--sans)!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--accent)}
.zhBox p{font-size:14.5px!important;line-height:1.6!important;color:#4A433C!important}
.zhBox__big{font-weight:700!important;font-size:58px!important;letter-spacing:-.04em!important;color:var(--ink)!important;margin:12px 0 2px!important;gap:8px!important}
.zhBox__big small{font:600 15px/1 var(--sans)!important;color:#6B6157!important;letter-spacing:0}
.zhBox__appdots{display:grid!important;grid-template-columns:1fr 1fr;gap:8px 10px!important;padding-top:18px!important}
.zhBox__appdots span{width:auto!important;height:auto!important;border-radius:0!important;display:flex!important;align-items:center;gap:8px;color:var(--ink)!important;background:none!important;font:600 13px/1.2 var(--sans)}
.zhBox__appdots i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--ac);background:linear-gradient(150deg,color-mix(in oklch,var(--ac) 16%,#fff),color-mix(in oklch,var(--ac) 6%,#fff));box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ac) 22%,transparent)}
.zhBox--mig h3{font-weight:700!important;font-size:clamp(20px,2vw,24px)!important;line-height:1.2!important;letter-spacing:-.02em!important;margin-top:8px!important}
.zhBox--mig p b{color:var(--accent)!important;font-weight:700!important}
.zhBox__migIc{width:52px!important;height:52px!important;border-radius:15px!important;display:grid!important;place-items:center;background:linear-gradient(150deg,#FDE3D3,#FBD0B6)!important;color:var(--accent)!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(236,101,42,.25)!important}
.zhBox__migIc svg{stroke-width:1.7}
/* open standard polish */
.zhBox--std>p{font-size:15px!important;color:var(--ink)!important;font-weight:500}
.zhBox__std{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;margin:16px 0 0!important;border-top:1px solid rgba(40,40,40,.1)}
.zhBox__std span{display:flex!important;flex-direction:column;gap:3px;background:none!important;border:0!important;border-radius:0!important;padding:14px 16px 2px 0!important;font:inherit!important}
.zhBox__std span+span{padding-left:16px!important;border-left:1px solid rgba(40,40,40,.1)!important}
.zhBox__std b{font:700 15px/1.2 var(--sans);color:var(--ink)}
.zhBox__std em{font:400 13px/1.45 var(--sans);font-style:normal;color:#6B6157}
.zhBox__clients{margin-top:16px!important;font:500 13px/1.5 var(--sans)!important;color:#6B6157!important}
@media (max-width:720px){.zhBox__std{grid-template-columns:1fr 1fr}.zhBox__std span:nth-child(3){padding-left:0!important;border-left:0!important}.zhBox__std span:nth-child(n+3){border-top:1px solid rgba(40,40,40,.1);margin-top:12px}}
/* migration stages polish */
.zhStages{gap:0!important;position:relative}
.zhStage{background:none!important;border:0!important;border-radius:0!important;padding:0 22px 0 0!important}
.zhStage::after{top:22px!important;left:56px!important;right:12px!important;width:auto!important;height:2px!important;background:linear-gradient(90deg,var(--sc),color-mix(in oklch,var(--sc) 15%,transparent))!important;opacity:.55}
.zhStage__num{width:44px!important;height:44px!important;border-radius:14px!important;color:var(--sc)!important;background:linear-gradient(150deg,color-mix(in oklch,var(--sc) 16%,#fff),color-mix(in oklch,var(--sc) 6%,#fff))!important;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--sc) 25%,transparent)}
.zhStage:last-child .zhStage__num{color:#fff!important;background:var(--sc)!important;box-shadow:0 10px 20px -10px var(--sc)}
.zhStage b{font-family:var(--sans)!important;font-weight:700!important;font-size:16.5px!important;letter-spacing:-.01em;margin-top:16px!important;line-height:1.3!important}
.zhStage p{font-size:14px!important;line-height:1.6!important;color:#4A433C!important;margin-top:6px!important}
@media (max-width:900px){.zhStages{gap:28px 0!important}.zhStage:nth-child(2)::after{display:none}}
@media (max-width:560px){.zhStages{gap:0!important}.zhStage{display:grid!important;grid-template-columns:44px 1fr;column-gap:14px;padding:0 0 22px!important}.zhStage__num{grid-row:span 2}.zhStage b{margin-top:2px!important}.zhStage p{grid-column:2}.zhStage::after{display:block!important;top:52px!important;bottom:6px;left:21px!important;right:auto!important;width:2px!important;height:auto!important;background:linear-gradient(180deg,var(--sc),transparent)!important}.zhStage:last-child::after{display:none!important}}
@media (max-width:900px) and (min-width:561px){.zhStages{row-gap:34px!important}}
/* migration bar elegant */
.zhMig__bar{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;margin-top:8px;padding:26px 8px!important;background:#1B1A17!important;border:0!important;border-radius:20px!important;box-shadow:0 24px 50px -32px rgba(20,14,8,.7)!important;position:relative;overflow:hidden}
.zhMig__bar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#EC652A 30%,#F7A26F 70%,transparent)}
.zhMig__bar>div{display:flex!important;flex-direction:column;align-items:center;gap:6px;padding:4px 16px!important;border:0!important;background:none!important;text-align:center}
.zhMig__bar>div+div{border-left:1px solid rgba(255,255,255,.1)!important}
.zhMig__bar b{font:700 clamp(26px,2.6vw,34px)/1 var(--serif)!important;letter-spacing:-.02em;color:#fff!important}
.zhMig__bar>div:nth-child(3) b{color:#F7A26F!important;font-style:italic}
.zhMig__bar span{font:500 13.5px/1.3 var(--sans)!important;color:rgba(255,255,255,.62)!important;letter-spacing:0!important;text-transform:none!important}
@media (max-width:640px){.zhMig__bar{grid-template-columns:1fr 1fr;padding:6px 0!important}.zhMig__bar>div{padding:18px 10px!important}.zhMig__bar>div:nth-child(3){border-left:0!important}.zhMig__bar>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)!important}}
.zhBox--hero p{color:rgba(245,239,224,.82)!important}
.zhBox--hero p b{color:#fff!important}
.zhStages{row-gap:36px!important}
/* alias inbox polish */
.zhAl__inbox{display:flex!important;align-items:center;gap:14px!important;padding:14px 16px!important;border:0!important;border-radius:14px!important;background:linear-gradient(135deg,#EC652A,#D9541C)!important;box-shadow:0 14px 28px -16px rgba(217,84,28,.8)!important;color:#fff}
.zhAl__inbox>svg{flex:none;width:40px!important;height:40px!important;padding:10px;border-radius:11px;background:rgba(255,255,255,.18);box-sizing:border-box}
.zhAl__inbox>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.zhAl__inbox b{font:700 15px/1.2 var(--sans)!important;color:#fff!important}
.zhAl__inbox span,.zhAl__inbox small,.zhAl__inbox code,.zhAl__inbox em{font:500 13px/1.3 var(--sans)!important;font-style:normal!important;color:rgba(255,255,255,.85)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* pricing: mailbox cards */
.zhPlan{border:1px solid rgba(40,40,40,.12)!important;border-radius:20px!important;padding:30px 26px 26px!important;overflow:visible;box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 36px -30px rgba(60,40,20,.45);background:#fff!important}
.zhPlan::before{content:none}
.zhPlan,.zhPlan.is-pop{border-top-width:1px!important;background:linear-gradient(var(--pc),var(--pc)) top/100% 5px no-repeat,#fff!important}
.zhPlan:hover{transform:translateY(-3px)!important;box-shadow:0 24px 44px -28px color-mix(in oklch,var(--pc) 70%,transparent)!important}
.zhPlan.is-sel{border-color:var(--pc)!important;box-shadow:0 0 0 1px var(--pc),0 24px 44px -28px color-mix(in oklch,var(--pc) 70%,transparent)!important}
.zhPlan.is-pop{border-color:rgba(40,40,40,.12)!important}
.zhPlan__rib{top:-12px!important;left:auto!important;right:22px;transform:none!important;border:0!important;font:700 12px/1 var(--sans)!important;letter-spacing:.01em!important;padding:6px 12px!important;box-shadow:0 6px 14px -6px var(--pc)}
.zhPlan__radio{top:30px!important;right:24px!important;border-width:1.5px!important}
.zhPlan__name{font:700 20px/1.2 var(--sans)!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important}
.zhPlan__price{margin:14px 0 18px!important;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.zhPlan__price b{font:700 34px/1 var(--sans)!important;letter-spacing:-.03em!important;color:var(--ink)}
.zhPlan__price em{font:500 14px/1.3 var(--sans)!important;color:#6B6157!important;margin:0!important}
.zhPlan__store{display:block!important;align-self:stretch!important;background:none!important;padding:0!important;margin:0 0 20px!important;font:inherit!important}
.zhPlan__storeHd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.zhPlan__storeHd span{font:500 13.5px/1 var(--sans);color:#6B6157}
.zhPlan__storeHd b{font:700 15px/1 var(--sans);color:var(--pc)}
.zhPlan__quota{display:block;height:6px;border-radius:99px;background:rgba(40,40,40,.08);overflow:hidden}
.zhPlan__quota span{display:block;height:100%;border-radius:99px;background:var(--pc)}
.zhPlan__feats{border-top:1px solid rgba(40,40,40,.1)!important;padding-top:18px!important;gap:11px!important}
.zhPlan__feats li{font-size:15px!important;line-height:1.45!important;color:#3D3833!important;gap:10px!important}
.zhPlan__tick{width:20px!important;height:20px!important;background:color-mix(in oklch,var(--pc) 14%,#fff)!important;color:var(--pc)!important}
/* comparison table v2 */
.zhBox--cmp{display:flex;flex-direction:column;gap:18px;padding:26px 28px!important}
.zhVt__top{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.zhVt__t{margin:0;font:700 22px/1.25 var(--sans);letter-spacing:-.01em;color:#fff}
.zhVt{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.zhVt__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);align-items:center;border-top:1px solid rgba(255,255,255,.08)}
.zhVt__row:first-child{border-top:0}
.zhVt__row>*{padding:13px 16px;min-width:0}
.zhVt__lbl{font:500 14px/1.35 var(--sans);color:rgba(244,239,230,.68)}
.zhVt__us{display:flex;align-items:center;gap:8px;font:600 15px/1.35 var(--sans);color:#fff;background:rgba(236,101,42,.12);align-self:stretch}
.zhVt__us svg{flex-shrink:0;color:#FF9A66}
.zhVt__them{font:400 14px/1.35 var(--sans);color:rgba(244,239,230,.5)}
.zhVt__row--hd>*{padding-top:12px;padding-bottom:12px}
.zhVt__row--hd b{font:700 12.5px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.zhVt__row--hd .zhVt__us{color:#FF9A66;background:rgba(236,101,42,.2)}
.zhVt__row--hd .zhVt__them{color:rgba(244,239,230,.55)}
@media (max-width:640px){
.zhBox--cmp{padding:22px 18px!important}
.zhVt__t{font-size:19px}
.zhVt__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.zhVt__row--hd span{display:none}
.zhVt__lbl{grid-column:1/-1;padding:12px 14px 4px!important;font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:rgba(244,239,230,.55)}
.zhVt__us,.zhVt__them{padding:8px 14px 12px!important;font-size:14px}
.zhVt__row:not(.zhVt__row--hd) .zhVt__us{background:none}
.zhVt__row--hd .zhVt__us,.zhVt__row--hd .zhVt__them{padding:11px 14px!important}
}
.zhBox--cmp .zhVt__t{color:#fff!important}
@media (max-width:520px){
.zhSys__pills{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:20px!important}
.zhSys__pill{flex-direction:column;align-items:flex-start;gap:8px!important;padding:12px!important;border-radius:12px!important}
.zhSys__pillIc{width:32px!important;height:32px!important;border-radius:9px!important}
.zhSys__pillIc svg{width:16px;height:16px}
.zhSys__pill b{font-size:14px!important}
.zhSys__pills .zhSys__pill span{font-size:12px!important;line-height:1.35}
}