/* Integration: Microsoft 365 - page-specific design.
   Microsoft blue (#0078D4) is the base, and the four-square Windows/Microsoft mark appears once,
   small, in the hero tag - not repeated as a colour system the way Zoho's four colours are on
   product pages, because this page is not about Zoho's brand identity. The inbox switch uses
   Zoho green only for "included" state and a neutral grey for "excluded" - that pairing is what
   carries the actual argument (business mail in, personal mail out).

   All classes scoped to .ms3-page, prefixed ms3-. */

.ms3-page {
  --ms3: #0078D4;
  --ms3-d: #0a5da3;
  --ms3-l: #eaf3fb;
  --ms3-ink: #0c2338;
}

/* ---------------------------------------------------------------------- hero -- */
.ms3-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
  background: linear-gradient(190deg, var(--ms3-l) 0%, var(--white) 60%);
  border-block-end: 1px solid color-mix(in srgb, var(--ms3) 18%, var(--line));
}
.ms3-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.ms3-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 8px; background: var(--white);
  border: 1px solid color-mix(in srgb, var(--ms3) 30%, var(--line));
  border-radius: 999px; font-weight: 700; color: var(--ms3-d); font-size: .9rem;
  margin-block-end: 18px;
}
.ms3-sq { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; height: 16px; }
.ms3-sq i { display: block; border-radius: 1px; }
.ms3-sq i:nth-child(1) { background: #F25022; }
.ms3-sq i:nth-child(2) { background: #7FBA00; }
.ms3-sq i:nth-child(3) { background: #00A4EF; }
.ms3-sq i:nth-child(4) { background: #FFB900; }
.ms3-hero h1 { font-size: clamp(1.75rem, 3.9vw, 2.85rem); line-height: 1.17; margin: 0 0 14px; color: var(--ms3-ink); }
.ms3-hero .lede { max-width: 64ch; margin-block-end: 26px; }
.ms3-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* an inbox window with rows alternating business / personal */
.ms3-hero-vis { display: grid; place-items: center; }
.ms3-win {
  width: 100%; max-width: 270px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; display: grid; gap: 8px;
  box-shadow: 0 20px 46px -30px rgba(10, 40, 70, .4);
}
.ms3-w-head { display: block; height: 8px; width: 44%; border-radius: 5px; background: color-mix(in srgb, var(--ms3) 30%, #e2e8ee); margin-block-end: 5px; }
.ms3-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px; background: #f4f6f8;
}
.ms3-row i { width: 22px; height: 22px; border-radius: 50%; background: #d7dee5; flex: 0 0 auto; }
.ms3-row b { font-size: .78rem; font-weight: 700; color: var(--muted); }
.ms3-row-biz { background: var(--ms3-l); }
.ms3-row-biz i { background: var(--ms3); }
.ms3-row-biz b { color: var(--ms3-d); }

/* --------------------------------------------------------------------- boundary -- */
.ms3-boundary { padding: clamp(48px, 7vw, 84px) 0; }
.ms3-boundary h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.ms3-boundary .lede { max-width: 82ch; }

.ms3-inbox {
  margin-block-start: 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(16px, 3vw, 26px);
  box-shadow: 0 20px 50px -40px rgba(10, 40, 70, .35);
}
.ms3-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 18px; }
.ms3-switch button {
  font: inherit; font-weight: 700; font-size: .93rem; cursor: pointer;
  padding: 11px 18px; border-radius: 10px;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s;
}
.ms3-switch button[aria-pressed="true"] { background: var(--ms3-d); color: var(--white); border-color: var(--ms3-d); }

.ms3-mails { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ms3-mails li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px;
  padding: 12px 15px; border-radius: 11px;
  background: #f7f8f9; border: 1px solid var(--line);
  opacity: .45; transition: opacity .3s, background .3s, border-color .3s;
}
.ms3-mails li.is-in {
  opacity: 1;
  background: color-mix(in srgb, var(--zoho-green) 7%, var(--white));
  border-color: color-mix(in srgb, var(--zoho-green) 30%, var(--line));
}
.ms3-inbox.is-leaking .ms3-mails li.is-in[data-tag="personal"] {
  background: color-mix(in srgb, var(--zoho-red) 7%, var(--white));
  border-color: color-mix(in srgb, var(--zoho-red) 30%, var(--line));
}
.ms3-from { font-weight: 700; font-size: .89rem; color: var(--ink); }
.ms3-subj { font-size: .89rem; color: var(--muted); }
.ms3-verdict {
  margin: 18px 0 0; padding-block-start: 15px;
  border-block-start: 1px solid var(--line);
  color: var(--ink); font-weight: 600; min-height: 1.3em;
}
.ms3-note { margin-block-start: 18px; color: var(--muted); font-size: .93rem; max-width: 84ch; }

/* ------------------------------------------------------------------------ need -- */
.ms3-need {
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--ms3-l);
  border-block: 1px solid color-mix(in srgb, var(--ms3) 16%, var(--line));
}
.ms3-need h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 0 0 12px; }
.ms3-need .lede { max-width: 82ch; margin: 0; }

/* -------------------------------------------------------------------- scenarios -- */
.ms3-scen { padding: clamp(48px, 7vw, 84px) 0; }
.ms3-scen h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 22px; }
.ms3-scen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ms3-sc {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.ms3-sc b { width: 10px; height: 10px; margin-top: 4px; border-radius: 3px; background: var(--ms3z, var(--ms3-d)); }
.ms3-sc:nth-child(4n+1) b { --ms3z: var(--zoho-red); }
.ms3-sc:nth-child(4n+2) b { --ms3z: var(--zoho-green); }
.ms3-sc:nth-child(4n+3) b { --ms3z: var(--zoho-blue); }
.ms3-sc:nth-child(4n+4) b { --ms3z: var(--zoho-yellow); }
.ms3-sc p { margin: 0; color: var(--ink); font-size: .93rem; }

/* ------------------------------------------------------------------------ move -- */
.ms3-move {
  padding: clamp(48px, 7vw, 84px) 0;
  background: var(--ms3-l);
  border-block: 1px solid color-mix(in srgb, var(--ms3) 16%, var(--line));
}
.ms3-move h2 { font-size: 1.35rem; margin: 0 0 10px; }
.ms3-move h3 { font-size: 1.08rem; }

/* -------------------------------------------------------------------------- do -- */
.ms3-do { padding: clamp(48px, 7vw, 84px) 0; }
.ms3-do h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 24px; }
.ms3-do-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; }
.ms3-do-steps > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.ms3-do-steps b { display: block; margin-block-end: 6px; font-size: 1.02rem; color: var(--ms3-d); }
.ms3-do-steps p { margin: 0; color: var(--muted); font-size: .95rem; }

/* -------------------------------------------------------------------- decide -- */
.ms3-decide {
  padding: clamp(40px, 6vw, 64px) 0 0;
  background: var(--white);
}
.ms3-decide h3 { font-size: 1.3rem; margin: 0 0 16px; }

/* ------------------------------------------------------------------------- faq -- */
.ms3-faq { padding: clamp(40px, 6vw, 64px) 0 clamp(24px, 4vw, 40px); }
.ms3-faq h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 20px; }

/* ----------------------------------------------------------------------- close -- */
.ms3-close { padding: 0 0 clamp(48px, 7vw, 84px); }
.ms3-close-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; border-radius: 20px;
  padding: clamp(26px, 4vw, 42px);
  background: linear-gradient(130deg, var(--ms3-d), #082f52);
}
.ms3-close-box h2 { color: var(--white); margin: 0 0 8px; font-size: clamp(1.25rem, 2.7vw, 1.85rem); }
.ms3-close-box .lede { color: color-mix(in srgb, var(--white) 86%, transparent); margin: 0; max-width: 62ch; }

/* ---------------------------------------------------------------------- narrow -- */
@media (max-width: 900px) {
  .ms3-hero-in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ms3-mails li { grid-template-columns: 1fr; gap: 4px; }
  .ms3-switch button { flex: 1 1 100%; }
}