/* Feature 03 has its own namespace so the approved 01/02 and role cards retain
   their geometry. No third-party runtime, gradients or bitmap recreation. */
.showcase-mailbox {
  --mailbox-blue:#146eeb;
  --mailbox-ink:#123764;
  --mailbox-muted:#65768c;
  --mailbox-line:#e1eaf6;
  width:min(1560px,calc(100% - 80px));
  position:relative;
  margin:0 auto;
  padding:80px 0 120px;
  color:var(--mailbox-ink);
  background:#fff;
  scroll-margin-top:110px;
}
.showcase-mailbox *, .showcase-mailbox *::before, .showcase-mailbox *::after { box-sizing:border-box; }
.showcase-mailbox h2,.showcase-mailbox h3,.showcase-mailbox h4,.showcase-mailbox p,.showcase-mailbox figure { margin:0; }
.showcase-mailbox button,.showcase-mailbox input,.showcase-mailbox textarea { font:inherit; }
.showcase-mailbox button { cursor:pointer; }
.showcase-mailbox svg:not(.mailbox-showcase-title-icon):not(.mailbox-icon-library) { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.showcase-mailbox button:focus-visible,.showcase-mailbox input:focus-visible,.showcase-mailbox textarea:focus-visible { outline:3px solid #83b6ff; outline-offset:3px; }
.showcase-mailbox .mailbox-icon-library { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.showcase-mailbox .mailbox-showcase-heading { text-align:center; margin-bottom:64px; opacity:var(--showcase-opacity,1); transform:translateY(var(--showcase-y,0px)); }
.showcase-mailbox .mailbox-showcase-meta { display:flex; align-items:center; justify-content:center; gap:22px; margin-bottom:22px; }
.showcase-mailbox .mailbox-showcase-number { display:grid; place-items:center; width:100px; height:100px; border-radius:50%; background:var(--mailbox-blue); color:#fff; font-size:44px; font-weight:800; line-height:1; letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.showcase-mailbox .mailbox-showcase-title-icon { display:block; width:102px; height:102px; object-fit:contain; }
.showcase-mailbox .mailbox-showcase-heading h2 { font-family:var(--hero-font,sans-serif); font-size:clamp(40px,4.1vw,64px); font-synthesis:weight; font-weight:700; line-height:1.2; letter-spacing:-.055em; word-break:keep-all; }
.showcase-mailbox .mailbox-showcase-heading strong { color:var(--mailbox-blue); font-weight:inherit; }
.showcase-mailbox .mailbox-showcase-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:clamp(30px,4vw,70px); align-items:center; }
.showcase-mailbox .mailbox-desktop-window { min-width:0; background:#fff; border:1px solid #cbdcf3; border-radius:14px; overflow:hidden; }
.showcase-mailbox .mailbox-window-chrome { height:35px; display:flex; align-items:center; gap:5px; padding:0 12px; border-bottom:1px solid var(--mailbox-line); background:#f7faff; color:#526b89; font-size:10px; }
.showcase-mailbox .mailbox-window-chrome > span { width:6px; height:6px; border-radius:50%; background:#a9c2e0; }
.showcase-mailbox .mailbox-window-chrome > span:nth-child(3) { background:#76a8e9; }
.showcase-mailbox .mailbox-window-chrome b { font-weight:600; margin-left:8px; }
.showcase-mailbox .mailbox-window-chrome small { margin-left:auto; font-size:9px; }
.showcase-mailbox .mailbox-demo { position:relative; font-family:Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; color:#273d5b; background:#fff; font-size:13px; }
.showcase-mailbox .mailbox-demo button { border:0; background:none; color:inherit; }
.showcase-mailbox .mailbox-app-header { position:relative; z-index:3; display:flex; align-items:center; min-width:0; height:62px; padding:0 17px; gap:15px; border-bottom:1px solid var(--mailbox-line); background:#fff; }
.showcase-mailbox .mailbox-app-brand { display:flex; align-items:center; gap:8px; min-width:0; color:var(--mailbox-ink); font-size:16px; font-weight:700; white-space:nowrap; }
.showcase-mailbox .mailbox-app-brand img { display:block; width:30px; height:30px; flex:0 0 auto; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-app-brand span { display:none; }
.showcase-mailbox .mailbox-app-tabs { display:flex; align-items:center; gap:13px; font-weight:600; font-size:14px; color:#758398; white-space:nowrap; }
.showcase-mailbox .mailbox-app-tabs b { color:#1460d3; }
.showcase-mailbox .mailbox-app-tabs > span:nth-of-type(odd) { color:#bdcbdc; font-weight:400; }
.showcase-mailbox .mailbox-demo-tag { margin-left:auto; padding:5px 8px; border-radius:5px; background:#eff6ff; color:#1460d3; font-size:10px; font-weight:700; white-space:nowrap; }
.showcase-mailbox .mailbox-app-body { display:grid; grid-template-columns:172px minmax(0,1fr); min-height:360px; }
.showcase-mailbox .mailbox-demo-sidebar { min-width:0; padding:16px 0 18px; border-right:1px solid var(--mailbox-line); background:#fff; }
.showcase-mailbox .mailbox-compose-button { display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 22px); min-height:40px; margin:0 11px 15px; padding:8px; border:1px solid #cbdcf3!important; border-radius:8px; color:var(--mailbox-blue)!important; font-size:13px; font-weight:700!important; }
.showcase-mailbox .mailbox-compose-button:hover { background:#edf4ff; }
.showcase-mailbox .mailbox-folders { display:grid; gap:3px; padding-right:11px; }
.showcase-mailbox .mailbox-folders button { display:flex; align-items:center; gap:9px; min-height:37px; padding:7px 12px 7px 15px; border-radius:0 20px 20px 0; font-size:12px; text-align:left; }
.showcase-mailbox .mailbox-folders button > svg { width:17px; height:17px; color:#71839b; }
.showcase-mailbox .mailbox-folders button > span { white-space:nowrap; }
.showcase-mailbox .mailbox-folders button > b { margin-left:auto; font-size:11px; }
.showcase-mailbox .mailbox-folders button[aria-pressed="true"] { background:#dce8ff; color:#163c75; font-weight:700; }
.showcase-mailbox .mailbox-folders button[aria-pressed="true"] svg { color:#1d57d7; }
.showcase-mailbox .mailbox-folders button:hover { background:#edf4ff; }
.showcase-mailbox .mailbox-personal-folder { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:17px; padding:14px 17px 10px; border-top:1px solid var(--mailbox-line); color:#8391a3; font-size:10px; }
.showcase-mailbox .mailbox-personal-folder > span:last-child { color:#516a87; font-size:20px; line-height:1; }
.showcase-mailbox .mailbox-team-folder { display:flex; gap:9px; align-items:center; padding:7px 15px; font-size:12px; color:#657d99; }
.showcase-mailbox .mailbox-team-folder > svg { width:17px; height:17px; }
.showcase-mailbox .mailbox-demo-content { position:relative; min-width:0; padding:26px 20px 19px; }
.showcase-mailbox .mailbox-content-heading { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.showcase-mailbox .mailbox-content-heading h3 { font-size:20px; letter-spacing:-.04em; line-height:1.3; font-weight:700; color:#163763; }
.showcase-mailbox .mailbox-content-heading > span { margin-left:auto; color:#8391a3; font-size:10px; white-space:nowrap; }
.showcase-mailbox .mailbox-content-heading b { color:var(--mailbox-blue); }
.showcase-mailbox .mailbox-content-guide { margin-bottom:20px; color:#8290a2; font-size:11px; line-height:1.5; }
.showcase-mailbox .mailbox-message-list { border-top:1px solid var(--mailbox-line); }
.showcase-mailbox .mailbox-message-row { display:grid; grid-template-columns:17px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:73px; padding:13px 3px; border-bottom:1px solid var(--mailbox-line)!important; text-align:left; }
.showcase-mailbox .mailbox-message-row:hover { background:#f6f9ff; }
.showcase-mailbox .mailbox-row-star { align-self:start; margin-top:1px; font-size:20px; line-height:1; color:#a9b7c9; }
.showcase-mailbox .mailbox-row-star.is-important { color:#4786f0; }
.showcase-mailbox .mailbox-row-copy { min-width:0; display:grid; gap:6px; }
.showcase-mailbox .mailbox-row-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; }
.showcase-mailbox .is-unread .mailbox-row-copy b { font-weight:700; color:#1d3f6d; }
.showcase-mailbox .mailbox-row-copy > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:#8a97a9; }
.showcase-mailbox .mailbox-row-time { align-self:start; padding-top:4px; font-size:9px; color:#8a97a9; white-space:nowrap; }
.showcase-mailbox .mailbox-content-footer { display:flex; align-items:center; gap:6px; margin-top:29px; color:#7188a5; font-size:10px; }
.showcase-mailbox .mailbox-live-dot { width:5px; height:5px; border-radius:50%; background:#377af1; }
.showcase-mailbox .mailbox-phone-speaker { position:absolute; top:8px; left:50%; width:43px; height:4px; border-radius:4px; background:#26384a; transform:translateX(-50%); }
.showcase-mailbox .mailbox-phone-home { position:absolute; bottom:6px; left:50%; width:60px; height:3px; border-radius:4px; background:#273849; transform:translateX(-50%); }
.showcase-mailbox .mailbox-demo-phone { height:100%; overflow:hidden; font-size:11px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-header { height:48px; padding:0 10px; gap:9px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-brand { gap:8px; font-size:13px; color:#205bc9; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-brand img { width:24px; height:24px; }
.showcase-mailbox .mailbox-drawer-toggle { display:grid; place-items:center; width:29px; height:29px; margin-left:auto; padding:5px; border-radius:8px; background:#f2f5f9!important; color:#59718f!important; }
.showcase-mailbox .mailbox-drawer-toggle svg { width:16px!important; height:16px!important; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-body { display:block; position:relative; min-height:0; height:calc(100% - 48px); }
.showcase-mailbox .mailbox-demo-phone .mailbox-demo-sidebar { position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; padding:13px 0; border:0; overflow:auto; transition:transform 260ms ease; }
.showcase-mailbox .mailbox-demo-phone:not(.is-drawer-open) .mailbox-demo-sidebar { visibility:hidden; transform:translateX(-102%); }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-button { border:0!important; justify-content:flex-start; margin:0 12px 10px; min-height:30px; padding-left:2px; font-size:12px; color:#405571!important; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-button > svg { width:16px; height:16px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders { gap:2px; padding-right:8px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders button { min-height:29px; gap:9px; padding:6px 11px; font-size:11px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders button > svg { width:15px; height:15px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-personal-folder { padding:10px 12px 6px; margin-top:10px; font-size:9px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-team-folder { padding:5px 11px; font-size:10px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-team-folder > svg { width:14px; height:14px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-demo-content { height:100%; padding:17px 10px; overflow:auto; }
.showcase-mailbox .mailbox-demo-phone .mailbox-content-heading { display:block; margin-bottom:8px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-content-heading h3 { font-size:17px; margin-bottom:5px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-content-heading > span,.showcase-mailbox .mailbox-demo-phone .mailbox-content-guide { font-size:9px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-message-row { min-height:67px; grid-template-columns:13px minmax(0,1fr); gap:7px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-row-star { font-size:17px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-row-copy b { font-size:11px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-row-copy > span { font-size:9px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-row-time { display:none; }
.showcase-mailbox .mailbox-demo-phone .mailbox-content-footer { font-size:9px; line-height:1.5; margin-top:20px; }
.showcase-mailbox .mailbox-example-note { margin-top:16px; text-align:center; color:#8b98a9; font-size:11px; line-height:1.5; word-break:keep-all; }
.showcase-mailbox .mailbox-showcase-copy > h3 { font-family:var(--hero-font,sans-serif); font-size:clamp(36px,3.2vw,52px); font-synthesis:weight; font-weight:700; line-height:1.18; letter-spacing:-.055em; }
.showcase-mailbox .mailbox-showcase-copy > h3 strong { color:var(--mailbox-blue); font-weight:inherit; }
.showcase-mailbox .mailbox-copy-description { font-size:18px; line-height:1.8; color:var(--mailbox-muted); margin-top:23px; word-break:keep-all; }
.showcase-mailbox .mailbox-showcase-benefits { display:grid; gap:20px; margin-top:29px; padding-top:25px; border-top:1px solid var(--mailbox-line); }
.showcase-mailbox .mailbox-showcase-benefits > div { position:relative; padding-left:21px; }
.showcase-mailbox .mailbox-benefit-dot { position:absolute; top:10px; left:1px; width:6px; height:6px; border-radius:50%; background:var(--mailbox-blue); }
.showcase-mailbox .mailbox-showcase-benefits h3 { font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-.035em; word-break:keep-all; }
.showcase-mailbox .mailbox-showcase-benefits p { margin-top:5px; color:var(--mailbox-muted); font-size:14px; line-height:1.65; word-break:keep-all; }
/* Reading/compose screens are local demo states. They never send a request. */
.showcase-mailbox .mailbox-read-toolbar { display:flex; align-items:center; gap:7px; min-height:26px; margin-bottom:17px; }
.showcase-mailbox .mailbox-back-button { display:inline-flex; align-items:center; gap:5px; padding:3px 0; color:var(--mailbox-blue)!important; font-size:11px; font-weight:700; }
.showcase-mailbox .mailbox-back-button > svg { width:14px; height:14px; }
.showcase-mailbox .mailbox-star-toggle { margin-left:auto; padding:3px 6px; color:#7a92b0!important; }
.showcase-mailbox .mailbox-star-toggle[aria-pressed="true"] { color:var(--mailbox-blue)!important; }
.showcase-mailbox .mailbox-star-toggle[aria-pressed="true"] > svg { fill:#e3edff; }
.showcase-mailbox .mailbox-read-title { color:#153864; font-size:19px; line-height:1.4; font-weight:700; letter-spacing:-.035em; overflow-wrap:anywhere; }
.showcase-mailbox .mailbox-read-meta { display:flex; align-items:center; gap:9px; padding:15px 0; margin-top:9px; border-bottom:1px solid var(--mailbox-line); font-size:11px; color:#74859a; }
.showcase-mailbox .mailbox-read-meta > b { color:#416082; }
.showcase-mailbox .mailbox-read-body { padding:22px 0; white-space:pre-line; color:#526882; line-height:1.8; font-size:13px; overflow-wrap:anywhere; }
.showcase-mailbox .mailbox-read-note { border-top:1px solid var(--mailbox-line); padding-top:13px; color:#98a5b5; font-size:10px; line-height:1.5; }
.showcase-mailbox .mailbox-empty { padding:44px 10px; display:grid; justify-items:center; gap:12px; color:#90a3bb; }
.showcase-mailbox .mailbox-empty > svg { width:36px; height:36px; stroke-width:1.3; }
.showcase-mailbox .mailbox-empty > p { font-size:12px; line-height:1.7; text-align:center; }
.showcase-mailbox .mailbox-compose-form { display:grid; gap:10px; margin-top:15px; }
.showcase-mailbox .mailbox-compose-form > label { display:grid; gap:5px; color:#71859e; font-size:10px; }
.showcase-mailbox .mailbox-compose-form input,.showcase-mailbox .mailbox-compose-form textarea { width:100%; min-width:0; border:1px solid #d8e5f5; border-radius:5px; padding:8px; color:#344f71; background:#fff; font-size:12px; }
.showcase-mailbox .mailbox-compose-form textarea { min-height:89px; resize:vertical; }
.showcase-mailbox .mailbox-compose-form > p { color:#98a5b5; font-size:9px; line-height:1.5; }
.showcase-mailbox .mailbox-demo-phone .mailbox-read-title { font-size:15px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-read-meta { display:grid; gap:5px; font-size:10px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-read-body { font-size:11px; }
.showcase-mailbox .mailbox-demo-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
/* Once an element enters, its full reveal runs on time and stays complete.
   Normal upward scrolling must not reset a device/copy entrance. The subtle
   status-dot loop is paused outside the section and in reduced motion. */
.showcase-mailbox.is-motion-ready [data-mailbox-reveal] { opacity:0; transform:translateY(30px); transition:opacity 500ms ease,transform 650ms cubic-bezier(.2,.65,.3,1); }
.showcase-mailbox.is-motion-ready [data-mailbox-reveal].is-revealed { opacity:1; transform:none; }
.showcase-mailbox.is-motion-ready .mailbox-showcase-copy { transition-delay:100ms; }
.showcase-mailbox .mailbox-live-dot { animation:mailbox-breathe 3s ease-in-out infinite; animation-play-state:paused; }
.showcase-mailbox.is-on-screen .mailbox-live-dot { animation-play-state:running; }
@keyframes mailbox-breathe { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@media(min-width:901px) and (max-width:1199px) {
  .showcase-mailbox { width:calc(100% - 48px); padding-top:60px; }
  .showcase-mailbox .mailbox-showcase-layout { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:30px; }
  .showcase-mailbox .mailbox-app-body { grid-template-columns:145px minmax(0,1fr); min-height:345px; }
  .showcase-mailbox .mailbox-app-tabs { gap:8px; font-size:12px; }
  .showcase-mailbox .mailbox-demo-tag { font-size:9px; padding:4px; }
  .showcase-mailbox .mailbox-demo-content { padding:23px 12px; }
  .showcase-mailbox .mailbox-folders button { font-size:11px; gap:7px; padding-left:11px; }
  .showcase-mailbox .mailbox-content-heading { display:block; }
  .showcase-mailbox .mailbox-content-heading h3 { font-size:18px; margin-bottom:4px; }
  .showcase-mailbox .mailbox-message-row { gap:6px; }
  .showcase-mailbox .mailbox-row-copy b { font-size:12px; }
  .showcase-mailbox .mailbox-row-time { display:none; }
  .showcase-mailbox .mailbox-copy-description { font-size:16px; }
  .showcase-mailbox .mailbox-showcase-benefits h3 { font-size:17px; }
  .showcase-mailbox .mailbox-showcase-benefits p { font-size:13px; }
}
@media(max-width:900px) {
  .showcase-mailbox { width:min(720px,calc(100% - 40px)); padding:70px 0 95px; }
  .showcase-mailbox .mailbox-showcase-heading { margin-bottom:38px; }
  .showcase-mailbox .mailbox-showcase-meta { gap:17px; margin-bottom:20px; }
  .showcase-mailbox .mailbox-showcase-number { width:88px; height:88px; font-size:39px; }
  .showcase-mailbox .mailbox-showcase-title-icon { width:88px; height:88px; }
  .showcase-mailbox .mailbox-showcase-heading h2 { font-size:clamp(34px,6vw,48px); line-height:1.27; }
  .showcase-mailbox .mailbox-showcase-layout { grid-template-columns:minmax(0,1fr); gap:35px; }
  .showcase-mailbox .mailbox-showcase-copy { width:min(520px,100%); margin:auto; }
  .showcase-mailbox .mailbox-showcase-copy > h3 { font-size:40px; }
  .showcase-mailbox .mailbox-copy-description { font-size:17px; }
  .showcase-mailbox .mailbox-showcase-benefits p br { display:none; }
  .showcase-mailbox .mailbox-showcase-benefits p { max-width:380px; }
}
@media(max-width:600px) {
  .showcase-mailbox { padding-top:65px; width:calc(100% - 40px); }
  .showcase-mailbox .mailbox-showcase-meta { gap:14px; }
  .showcase-mailbox .mailbox-showcase-number { width:76px; height:76px; font-size:34px; }
  .showcase-mailbox .mailbox-showcase-title-icon { width:78px; height:78px; }
  .showcase-mailbox .mailbox-showcase-heading h2 { font-size:clamp(30px,7.7vw,43px); }
  .showcase-mailbox .mailbox-showcase-heading strong { display:block; }
  .showcase-mailbox .mailbox-showcase-layout { gap:37px; }
  .showcase-mailbox .mailbox-phone-speaker { top:10px; width:55px; }
  .showcase-mailbox .mailbox-phone-home { bottom:7px; width:84px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-app-header { height:65px; padding:0 14px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-app-brand { font-size:19px; gap:12px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-app-brand img { width:36px; height:36px; }
  .showcase-mailbox .mailbox-drawer-toggle { width:35px; height:35px; }
  .showcase-mailbox .mailbox-drawer-toggle > svg { width:20px!important; height:20px!important; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-app-body { height:calc(100% - 65px); }
  .showcase-mailbox .mailbox-demo-phone .mailbox-demo-sidebar { padding:17px 0; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-compose-button { margin:0 17px 14px; min-height:35px; font-size:15px; gap:13px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-compose-button > svg { width:20px; height:20px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-folders { gap:4px; padding-right:14px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-folders button { min-height:39px; gap:13px; padding:8px 17px; font-size:15px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-folders button > svg { width:20px; height:20px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-folders button > b { font-size:13px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-personal-folder { padding:16px 17px 8px; font-size:11px; margin-top:17px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-team-folder { padding:8px 17px; font-size:13px; gap:13px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-team-folder > svg { width:18px; height:18px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-demo-content { padding:22px 16px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-content-heading h3 { font-size:23px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-content-heading > span,.showcase-mailbox .mailbox-demo-phone .mailbox-content-guide { font-size:11px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-message-row { min-height:86px; gap:10px; grid-template-columns:17px minmax(0,1fr); }
  .showcase-mailbox .mailbox-demo-phone .mailbox-row-star { font-size:22px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-row-copy b { font-size:15px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-row-copy > span { font-size:11px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-content-footer { font-size:10px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-read-title { font-size:21px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-read-meta { font-size:12px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-read-body { font-size:14px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-compose-form input,.showcase-mailbox .mailbox-demo-phone .mailbox-compose-form textarea { font-size:16px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-compose-form > label { font-size:12px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-compose-form > button { font-size:13px; min-height:40px; }
  .showcase-mailbox .mailbox-example-note { font-size:10px; }
  .showcase-mailbox .mailbox-showcase-copy > h3 { font-size:clamp(34px,8.5vw,42px); }
  .showcase-mailbox .mailbox-copy-description { font-size:16px; margin-top:20px; }
  .showcase-mailbox .mailbox-showcase-benefits h3 { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .showcase-mailbox.is-motion-ready [data-mailbox-reveal] { opacity:1!important; transform:none!important; transition:none!important; }
  .showcase-mailbox .mailbox-live-dot { animation:none; opacity:1; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-demo-sidebar { transition:none; }
}

/* Rollout qualification follows the service copy and wraps without widening the layout. */
.showcase-mailbox .mailbox-service-note { margin-top:20px; font-size:11px; line-height:1.7; color:#8493a7; word-break:keep-all; }

/* MERGE 20261007 device revision: mobile is the large primary view; PC and
   mobile occupy the same stage so the page does not jump during switching.
   CSS animates the visible panel and white tab indicator. JS handles inert,
   aria-selected/aria-hidden and keyboard focus; do not replace with display:none. */
.showcase-mailbox .mailbox-showcase-media { min-width:0; padding:0; }
.showcase-mailbox .mailbox-device-stage { display:grid; place-items:center; height:760px; min-width:0; overflow:hidden; isolation:isolate; }
.showcase-mailbox [data-mailbox-view-panel] { grid-area:1/1; min-width:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 380ms ease,transform 500ms cubic-bezier(.22,.8,.25,1),visibility 0s 500ms; }
.showcase-mailbox .mailbox-desktop-window { width:100%; transform:translateX(-36px) scale(.97); }
.showcase-mailbox .mailbox-phone { position:relative; width:380px; max-width:100%; height:730px; padding:30px 8px 22px; border:4px solid #273849; border-radius:43px; background:#fff; overflow:hidden; transform:translateX(36px) scale(.97); }
.showcase-mailbox[data-mailbox-view="pc"] [data-mailbox-view-panel="pc"],
.showcase-mailbox[data-mailbox-view="mobile"] [data-mailbox-view-panel="mobile"] { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
.showcase-mailbox .mailbox-phone-speaker { top:12px; width:70px; height:5px; }
.showcase-mailbox .mailbox-phone-home { bottom:9px; width:110px; height:4px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-header { height:78px; padding:0 20px; gap:12px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-brand { gap:12px; font-size:22px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-brand img { width:38px; height:38px; }
.showcase-mailbox .mailbox-drawer-toggle { width:42px; height:42px; padding:9px; }
.showcase-mailbox .mailbox-drawer-toggle > svg { width:22px!important; height:22px!important; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-body { height:calc(100% - 78px); }
.showcase-mailbox .mailbox-demo-phone .mailbox-demo-sidebar { padding:19px 0; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-button { width:calc(100% - 32px); min-height:46px; margin:0 16px 15px; font-size:18px; gap:13px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-button > svg { width:22px; height:22px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders { gap:4px; padding-right:14px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders button { min-height:47px; padding:10px 18px; gap:14px; font-size:17px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders button > svg { width:22px; height:22px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders button > b { font-size:16px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-personal-folder { margin-top:21px; padding:18px 20px 12px; font-size:13px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-team-folder { padding:9px 20px; gap:13px; font-size:16px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-demo-content { padding:23px 18px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-content-heading h3,.showcase-mailbox .mailbox-demo-phone .mailbox-read-title { font-size:23px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-content-guide { font-size:12px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-message-row { min-height:83px; grid-template-columns:18px minmax(0,1fr); gap:10px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-row-copy b { font-size:16px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-row-copy > span { font-size:12px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-row-star { font-size:23px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-read-meta { font-size:13px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-read-body { font-size:15px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-form > label { font-size:13px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-form input,.showcase-mailbox .mailbox-demo-phone .mailbox-compose-form textarea { font-size:16px; padding:10px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-form textarea { min-height:155px; }
.showcase-mailbox .mailbox-view-switch { position:relative; display:grid; grid-template-columns:1fr 1fr; width:250px; max-width:100%; margin:22px auto 0; padding:6px; border-radius:17px; background:#e5eefb; }
.showcase-mailbox .mailbox-view-indicator { position:absolute; top:6px; bottom:6px; left:6px; width:calc((100% - 12px)/2); border-radius:12px; background:#fff; pointer-events:none; transform:translateX(0); transition:transform 430ms cubic-bezier(.22,.8,.25,1); }
.showcase-mailbox[data-mailbox-view="mobile"] .mailbox-view-indicator { transform:translateX(100%); }
.showcase-mailbox .mailbox-view-switch button { position:relative; z-index:1; min-height:45px; border:0; border-radius:12px; background:transparent; color:#7d90ae; font-size:17px; font-weight:700; }
.showcase-mailbox .mailbox-view-switch button[aria-selected="true"] { color:var(--mailbox-blue); }
@media(min-width:1500px) {
  .showcase-mailbox .mailbox-device-stage { height:800px; }
  .showcase-mailbox .mailbox-phone { width:410px; height:780px; }
}
@media(max-width:900px) {
  .showcase-mailbox .mailbox-device-stage { height:760px; }
}
@media(max-width:600px) {
  .showcase-mailbox .mailbox-device-stage { height:clamp(600px,180vw,730px); }
  .showcase-mailbox .mailbox-phone { width:min(350px,100%); height:100%; border-radius:36px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-app-header { padding:0 13px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-app-brand { font-size:20px; gap:9px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-folders button { font-size:16px; min-height:43px; padding:9px 14px; gap:11px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-personal-folder { margin-top:14px; padding-top:14px; }
  .showcase-mailbox .mailbox-view-switch { margin-top:21px; }
  /* PC remains selectable on small screens; its compact two-column mailbox
     stays inside the same stage instead of widening the whole document. */
  .showcase-mailbox .mailbox-desktop-window { display:block; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-app-body { grid-template-columns:102px minmax(0,1fr); }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-app-header { height:48px; padding:0 9px; gap:8px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-app-tabs { gap:5px; font-size:9px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-app-brand img { width:23px; height:23px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-demo-tag { font-size:8px; padding:3px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-demo-sidebar { padding-top:12px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-folders { padding-right:5px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-folders button { font-size:8px; gap:4px; padding:7px 5px 7px 6px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-folders button > svg { width:12px; height:12px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-compose-button { width:calc(100% - 12px); margin:0 6px 12px; font-size:9px; gap:4px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-compose-button > svg { width:13px; height:13px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-demo-content { padding:19px 9px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-content-heading h3 { font-size:17px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-message-row { grid-template-columns:12px minmax(0,1fr); gap:5px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-row-copy b { font-size:11px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-row-copy > span { font-size:9px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-window-chrome small { display:none; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-personal-folder { font-size:8px; padding:13px 7px 8px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-team-folder { font-size:9px; padding:7px; gap:4px; }
}
@media(prefers-reduced-motion:reduce) {
  .showcase-mailbox [data-mailbox-view-panel],.showcase-mailbox .mailbox-view-indicator { transition:none; }
}

/* MERGE 20261007 latest layout: use the exact01/02 copy, number, icon and
   typography rules. This override only scopes feature03; existing01/02 remain
   unchanged. The shared copy entrance class now lives on the whole right copy. */
.showcase-mailbox .mailbox-showcase-layout { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:56px; align-items:start; }
.showcase-mailbox .mailbox-showcase-copy { min-width:0; }
.showcase-mailbox .mailbox-showcase-heading { text-align:left; margin-bottom:0; opacity:1; transform:none; }
.showcase-mailbox .mailbox-showcase-meta { justify-content:flex-start; align-items:center; gap:20px; margin-bottom:20px; }
.showcase-mailbox .mailbox-showcase-number { width:100px; height:100px; font-size:44px; }
.showcase-mailbox .mailbox-showcase-title-icon { flex:0 0 auto; width:112px; height:112px; }
.showcase-mailbox .mailbox-showcase-heading h2 { font-size:clamp(35px,3vw,46px); font-weight:400; font-synthesis:none; line-height:1.18; letter-spacing:-.045em; }
.showcase-mailbox .mailbox-showcase-heading strong { display:block; margin-top:7px; font-weight:inherit; }
.showcase-mailbox .mailbox-copy-description { margin-top:20px; font-size:17px; line-height:1.7; }
.showcase-mailbox .mailbox-showcase-benefits { margin-top:24px; padding-top:22px; gap:18px; }
.showcase-mailbox .mailbox-showcase-benefits h3 { font-family:var(--hero-font,sans-serif); font-size:19px; font-weight:400; font-synthesis:none; line-height:1.4; letter-spacing:-.03em; }
.showcase-mailbox .mailbox-showcase-benefits p { margin-top:6px; font-size:14px; line-height:1.65; }
@media(min-width:901px) and (max-width:1199px) {
  .showcase-mailbox .mailbox-showcase-layout { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:32px; }
  .showcase-mailbox .mailbox-showcase-heading h2 { font-size:35px; }
  .showcase-mailbox .mailbox-showcase-number { width:88px; height:88px; font-size:39px; }
  .showcase-mailbox .mailbox-copy-description { font-size:16px; }
  .showcase-mailbox .mailbox-showcase-benefits h3 { font-size:18px; }
  .showcase-mailbox .mailbox-showcase-benefits p { font-size:13px; }
}
@media(max-width:900px) {
  .showcase-mailbox { width:min(680px,calc(100% - 40px)); }
  .showcase-mailbox .mailbox-showcase-layout { grid-template-columns:minmax(0,1fr); gap:34px; }
  .showcase-mailbox .mailbox-showcase-copy { grid-row:1; width:100%; margin:0; }
  .showcase-mailbox .mailbox-showcase-media { grid-row:2; }
  .showcase-mailbox .mailbox-showcase-heading h2 { font-size:clamp(32px,6vw,44px); }
  .showcase-mailbox .mailbox-showcase-number { width:88px; height:88px; font-size:39px; }
  .showcase-mailbox .mailbox-showcase-title-icon { width:88px; height:88px; }
  .showcase-mailbox .mailbox-copy-description { font-size:16px; line-height:1.7; }
  .showcase-mailbox .mailbox-showcase-benefits { margin-top:22px; gap:20px; }
  .showcase-mailbox .mailbox-showcase-benefits h3 { font-size:18px; }
}
@media(max-width:380px) {
  .showcase-mailbox .mailbox-showcase-heading h2 { font-size:30px; }
  .showcase-mailbox .mailbox-showcase-benefits h3 { font-size:17px; }
  .showcase-mailbox .mailbox-copy-description { font-size:15px; }
}

/* MERGE 20261007 desktop viewport fit: keep this AFTER the large-device rules.
   Timeline03 aligns the number 20px below the fixed header (currently114px).
   Reserve283px for that offset, the57px switch,16px gap and bottom breathing room.
   Both previews share this stage; only the desktop phone dimensions change.
   Preserve <=900px layouts and the existing switch/entrance transitions. */
@media(min-width:901px) {
  .showcase-mailbox { --mailbox-desktop-stage:min(680px,calc(100svh - 283px)); }
  .showcase-mailbox .mailbox-device-stage { height:var(--mailbox-desktop-stage); }
  .showcase-mailbox .mailbox-phone {
    height:calc(var(--mailbox-desktop-stage) - 20px);
    width:calc((var(--mailbox-desktop-stage) - 20px) * .526);
  }
  /* Keep the PC window inside the same shorter stage; folders/body scroll
     internally when a short laptop viewport cannot hold their full content. */
  .showcase-mailbox .mailbox-desktop-window { height:min(563px,calc(var(--mailbox-desktop-stage) - 20px)); }
  .showcase-mailbox .mailbox-demo-desktop { height:calc(100% - 35px); }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-app-body { height:calc(100% - 62px); min-height:0; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-demo-sidebar,
  .showcase-mailbox .mailbox-demo-desktop .mailbox-demo-content { overflow:auto; }
  .showcase-mailbox .mailbox-view-switch { margin-top:16px; }
}

/* MERGE20261007: one persistent hint between the shared device stage and tabs.
   Desktop stage budget includes this42px hint and its12px top margin;
   retain it with both PC/mobile panels and keep the tabs visible on laptops. */
.showcase-mailbox .mailbox-click-hint {
  width:fit-content; max-width:100%; margin:12px auto 0; padding:10px 18px;
  border:1px solid #cddff8; border-radius:12px; background:#eff6ff;
  color:#1460d3; font-size:16px; font-weight:700; line-height:20px;
  text-align:center; word-break:keep-all;
}
.showcase-mailbox .mailbox-view-switch { margin-top:12px; }

/* UI SYNC 20261012 — app chrome only. Do not change the approved device stage,
   heading, benefit dots, 01/02 layout or PC/mobile switch above. Sources:
   worker-layout.ts, worker-mailbox-nav.ts and company-mail-screen.ts.
   The purple accent belongs to the current application; marketing remains blue. */
.showcase-mailbox .mailbox-demo {
  --mailbox-app-accent:#5145ef; --mailbox-app-header-size:54px; --mailbox-bottom-size:58px;
  color:#1e293b; font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
}
.showcase-mailbox .mailbox-demo .mailbox-app-header { height:var(--mailbox-app-header-size); padding:0 10px; gap:8px; border-color:#e4e8ef; }
.showcase-mailbox .mailbox-header-title { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1e293b; font-size:15px; font-weight:800; }
.showcase-mailbox .mailbox-demo .mailbox-drawer-toggle { flex:none; margin:0; width:29px; height:29px; padding:6px; background:#f1f3f8!important; color:#526076!important; }
.showcase-mailbox .mailbox-header-actions { display:flex; flex:none; align-items:center; gap:4px; }
.showcase-mailbox .mailbox-header-actions button { position:relative; display:grid; place-items:center; width:27px; height:29px; padding:5px; border-radius:8px; background:#f1f3f8; color:#526076; }
.showcase-mailbox .mailbox-header-actions button svg { width:17px; height:17px; }
.showcase-mailbox .mailbox-notification-dot { position:absolute; right:4px; top:4px; width:5px; height:5px; border-radius:50%; background:#ef5264; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-app-body { height:calc(100% - var(--mailbox-app-header-size)); background:#f7f8fd; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-sidebar-company { display:none; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-demo-sidebar { display:flex; flex-direction:column; height:100%; padding:9px 0 0; border-color:#e4e8ef; }
.showcase-mailbox .mailbox-sidebar-modes { display:flex; flex:none; gap:2px; margin:0 8px 10px; padding:3px; border-radius:9px; background:#f2f3f8; }
.showcase-mailbox .mailbox-sidebar-modes button { display:flex; align-items:center; justify-content:center; gap:3px; flex:1; min-width:0; min-height:32px; padding:4px 2px; border-radius:7px; white-space:nowrap; color:#718096; font-size:9.5px; font-weight:750; line-height:1.2; }
.showcase-mailbox .mailbox-sidebar-modes button svg { display:none; }
.showcase-mailbox .mailbox-sidebar-modes button[aria-pressed="true"] { background:#fff; color:var(--mailbox-app-accent); }
.showcase-mailbox .mailbox-sidebar-mail { flex:1; min-height:0; }
.showcase-mailbox .mailbox-compose-actions { display:flex; gap:5px; margin:0 9px 9px; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-compose-button,
.showcase-mailbox .mailbox-demo-desktop .mailbox-self-write { display:flex; align-items:center; justify-content:center; gap:4px; flex:1; min-width:0; width:auto; min-height:33px; margin:0; padding:6px 3px; border:0!important; border-radius:9px; background:var(--mailbox-app-accent); color:#fff!important; font-size:10px; font-weight:750; white-space:nowrap; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-compose-button svg { width:12px; height:12px; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-folders { gap:2px; padding:0 8px; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-folders button { min-height:31px; padding:6px 8px; border-radius:7px; font-size:11px; gap:7px; color:#526076; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-folders button svg { width:14px; height:14px; color:#8a96a8; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-folders button[aria-pressed="true"] { background:#e9e6fe; color:#4338ca; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-folders button[aria-pressed="true"] svg { color:#5145ef; }
.showcase-mailbox .mailbox-personal-folder { margin-top:11px; padding:10px 13px 6px; border-color:#e7ebf1; }
.showcase-mailbox .mailbox-personal-folder button { display:grid; place-items:center; width:22px; height:22px; padding:0; color:#77869a; font-size:18px; }
.showcase-mailbox .mailbox-team-folder { width:100%; text-align:left; }
.showcase-mailbox .mailbox-sidebar-footer { display:flex; flex:none; justify-content:space-between; padding:11px 14px; margin-top:9px; border-top:1px solid #e7ebf1; color:#8a96a8; font-size:10px; }
.showcase-mailbox .mailbox-demo-content { background:#fff; border-color:#e4e8ef; }
.showcase-mailbox .mailbox-demo-desktop .mailbox-demo-content { padding:20px 16px; }
.showcase-mailbox .mailbox-demo .mailbox-content-heading h3,
.showcase-mailbox .mailbox-demo .mailbox-read-title { color:#1e293b; }
.showcase-mailbox .mailbox-demo .mailbox-content-heading b { color:var(--mailbox-app-accent); }
.showcase-mailbox .mailbox-heading-search { display:flex; align-items:center; gap:6px; margin-left:auto; width:160px; max-width:52%; padding:6px 8px; border:1px solid #dfe5ef; border-radius:8px; background:#f8f9fc; }
.showcase-mailbox .mailbox-heading-search svg { width:13px; height:13px; color:#8592a6; }
.showcase-mailbox .mailbox-heading-search input { min-width:0; width:100%; padding:0; border:0; outline:0; background:transparent; color:#475569; font-size:11px; }
.showcase-mailbox .mailbox-mail-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-height:35px; padding:8px 0; margin-bottom:6px; border-top:1px solid #e7ebf2; border-bottom:1px solid #e7ebf2; color:#96a1b3; font-size:10px; }
.showcase-mailbox .mailbox-mail-toolbar > span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.showcase-mailbox .mailbox-mail-toolbar svg { width:12px; height:12px; }
.showcase-mailbox .mailbox-static-checkbox { display:inline-block; flex:none; width:12px; height:12px; border:1px solid #c6cfdd; border-radius:3px; }
.showcase-mailbox .mailbox-demo .mailbox-message-row { display:grid; grid-template-columns:12px 18px minmax(0,1fr); gap:7px; padding:10px 0; min-height:70px; border-color:#edf0f5!important; }
.showcase-mailbox .mailbox-message-open { display:flex; align-items:flex-start; gap:7px; width:100%; min-width:0; padding:0; text-align:left; }
.showcase-mailbox .mailbox-message-open .mailbox-row-copy { flex:1; min-width:0; }
.showcase-mailbox .mailbox-message-open .mailbox-row-time { flex:none; }
.showcase-mailbox .mailbox-row-important-button { display:grid; place-items:center; padding:0; align-self:start; color:#a2adbe!important; }
.showcase-mailbox .mailbox-row-important-button svg { width:16px; height:16px; }
.showcase-mailbox .mailbox-row-important-button[aria-pressed="true"] { color:#5145ef!important; }
.showcase-mailbox .mailbox-row-important-button[aria-pressed="true"] svg { fill:#eeeaff; }
.showcase-mailbox .mailbox-demo .is-unread .mailbox-row-copy b { color:#25334b; }
.showcase-mailbox .mailbox-demo .mailbox-back-button,
.showcase-mailbox .mailbox-demo .mailbox-star-toggle[aria-pressed="true"] { color:var(--mailbox-app-accent)!important; }
.showcase-mailbox .mailbox-demo .mailbox-live-dot { background:var(--mailbox-app-accent); }
.showcase-mailbox .mailbox-work-preview { flex:1; padding:0 12px; }
.showcase-mailbox .mailbox-work-preview > span { display:flex; gap:9px; align-items:center; min-height:33px; color:#64748b; font-size:12px; }
.showcase-mailbox .mailbox-local-summary { display:grid; gap:11px; margin-top:18px; }
.showcase-mailbox .mailbox-local-summary > p { color:#7c8b9f; font-size:12px; line-height:1.7; }
.showcase-mailbox .mailbox-local-summary > button { width:fit-content; padding:8px 12px; border:1px solid #d8def6; border-radius:8px; color:var(--mailbox-app-accent); font-size:12px; }
.showcase-mailbox .mailbox-demo-phone { container-type:inline-size; --mailbox-app-header-size:52px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-header { padding:0 8px; gap:7px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-header-title { font-size:13px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-header-actions { gap:3px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-header-actions button { width:24px; height:28px; padding:5px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-header-actions button svg { width:15px; height:15px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-app-body { height:calc(100% - var(--mailbox-app-header-size) - var(--mailbox-bottom-size)); }
.showcase-mailbox .mailbox-demo-phone .mailbox-demo-sidebar { z-index:8; top:calc(-1 * var(--mailbox-app-header-size)); bottom:calc(-1 * var(--mailbox-bottom-size)); width:82%; height:auto; padding:0; display:flex; flex-direction:column; border-right:1px solid #e5e9f0; }
.showcase-mailbox .mailbox-drawer-company { display:flex; align-items:center; flex:none; gap:9px; padding:16px 11px 13px; }
.showcase-mailbox .mailbox-drawer-company > img { display:block; flex:none; width:32px; height:32px; border-radius:8px; }
.showcase-mailbox .mailbox-drawer-company > div { display:grid; flex:1; gap:4px; min-width:0; font-size:12px; }
.showcase-mailbox .mailbox-drawer-company > div span { color:#8a96a8; font-size:11px; }
.showcase-mailbox .mailbox-drawer-close { display:grid; place-items:center; flex:none; width:25px; height:25px; padding:5px; color:#748195!important; }
.showcase-mailbox .mailbox-drawer-close svg { width:16px; height:16px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-sidebar-modes { margin:0 10px 7px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-sidebar-modes button { display:block; font-size:12px; min-height:37px; padding:5px 3px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-sidebar-modes small { font-size:9px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-actions { margin:0 11px 6px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-self-write { display:none; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-button { width:100%; min-height:37px; margin:0; padding:6px 3px; font-size:14px; gap:10px; color:#334155!important; background:transparent!important; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-button > svg { width:18px; height:18px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders { gap:1px; padding-right:9px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders button { min-height:40px; padding:8px 13px; gap:10px; font-size:13px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders button > svg { width:18px; height:18px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-folders button > b { font-size:11px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-personal-folder { margin-top:7px; padding:10px 13px 4px; font-size:11px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-team-folder { min-height:35px; padding:7px 13px; font-size:12px; gap:10px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-team-folder svg { width:16px; height:16px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-sidebar-footer { padding:12px 13px; font-size:11px; }
.showcase-mailbox .mailbox-drawer-backdrop { position:absolute; z-index:7; top:calc(-1 * var(--mailbox-app-header-size)); bottom:calc(-1 * var(--mailbox-bottom-size)); left:0; width:100%; padding:0; background:rgba(15,23,42,.34)!important; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 180ms ease; }
.showcase-mailbox .is-drawer-open .mailbox-drawer-backdrop { opacity:1; visibility:visible; pointer-events:auto; }
.showcase-mailbox .mailbox-demo-phone .mailbox-demo-content { padding:16px 12px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-content-heading { display:flex; align-items:center; gap:8px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-content-heading h3 { margin:0; font-size:18px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-heading-search { max-width:45%; width:125px; padding:5px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-heading-search input { font-size:10px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-content-guide { font-size:10px; margin:10px 0 13px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-mail-toolbar { gap:9px; font-size:9px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-message-row { grid-template-columns:11px 15px minmax(0,1fr); gap:5px; min-height:81px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-row-copy b { font-size:13px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-row-copy > span { font-size:10px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-read-title { font-size:19px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-read-meta { font-size:11px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-read-body { font-size:12px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-form > label { font-size:11px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-form input,
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-form textarea { font-size:14px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-compose-form textarea { min-height:100px; }
.showcase-mailbox .mailbox-bottom-nav { position:relative; z-index:4; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:var(--mailbox-bottom-size); align-items:center; border-top:1px solid #e5e9f0; background:#fff; }
.showcase-mailbox .mailbox-bottom-nav button { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:7px 0 5px; color:#8491a5; font-size:9px; font-weight:700; white-space:nowrap; }
.showcase-mailbox .mailbox-bottom-nav button svg { width:18px; height:18px; }
.showcase-mailbox .mailbox-bottom-nav button[aria-pressed="true"] { color:var(--mailbox-app-accent); }
.showcase-mailbox .mailbox-bottom-nav .mailbox-bottom-messenger { padding-top:0; }
.showcase-mailbox .mailbox-bottom-messenger svg { width:39px!important; height:39px!important; margin-top:-14px; padding:10px; border-radius:50%; background:#2475fb; stroke:#fff!important; }
.showcase-mailbox .mailbox-messenger-preview { position:absolute; z-index:12; inset:76px 18px 16px 190px; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #d5dbee; border-radius:15px; background:#f7f8fd; box-shadow:0 8px 28px rgba(29,40,71,.13); }
.showcase-mailbox [hidden] { display:none!important; }
.showcase-mailbox .mailbox-messenger-preview > header { display:flex; align-items:center; flex:none; gap:9px; min-height:59px; padding:10px 12px; border-bottom:1px solid #e2e6ef; background:#fff; }
.showcase-mailbox .mailbox-messenger-preview > header > div { display:grid; gap:4px; min-width:0; flex:1; }
.showcase-mailbox .mailbox-messenger-preview header b { color:#26344b; font-size:13px; }
.showcase-mailbox .mailbox-messenger-preview header div span { color:#8b97ab; font-size:10px; }
.showcase-mailbox .mailbox-messenger-mark { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px; background:#5145ef; color:#fff; }
.showcase-mailbox .mailbox-messenger-mark svg { width:17px; height:17px; }
.showcase-mailbox .mailbox-messenger-preview header button { padding:5px; color:#748195; }
.showcase-mailbox .mailbox-messenger-preview header button svg { width:17px; height:17px; }
.showcase-mailbox .mailbox-messenger-conversation { min-height:0; flex:1; overflow:auto; padding:16px 13px; }
.showcase-mailbox .mailbox-chat-day { margin-bottom:20px!important; color:#9ca8ba; font-size:9px; text-align:center; }
.showcase-mailbox .mailbox-chat-message { display:flex; align-items:flex-start; gap:7px; margin-bottom:15px; }
.showcase-mailbox .mailbox-chat-avatar { display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:9px; background:#e6e5fd; color:#6258dc; font-size:10px; font-weight:700; }
.showcase-mailbox .mailbox-chat-message > div { max-width:82%; min-width:0; }
.showcase-mailbox .mailbox-chat-message b { display:block; margin-bottom:5px; color:#68778d; font-size:10px; }
.showcase-mailbox .mailbox-chat-message p { padding:9px 11px; border:1px solid #e5e8f1; border-radius:0 11px 11px 11px; background:#fff; color:#475569; font-size:11px; line-height:1.55; }
.showcase-mailbox .mailbox-chat-message small { display:block; margin-top:4px; color:#97a3b5; font-size:8px; }
.showcase-mailbox .mailbox-chat-message.is-mine { justify-content:flex-end; }
.showcase-mailbox .mailbox-chat-message.is-mine p { border-color:#dcd8fb; border-radius:11px 0 11px 11px; background:#e8e5fd; color:#4d40b8; }
.showcase-mailbox .mailbox-chat-message.is-mine small { text-align:right; }
.showcase-mailbox .mailbox-messenger-readonly { flex:none; min-height:39px; padding:12px; border-top:1px solid #e3e7f0; background:#fff; color:#9aa6b8; text-align:center; font-size:10px; }
.showcase-mailbox .mailbox-demo-phone .mailbox-messenger-preview { inset:7px 6px; }
.showcase-mailbox.is-fast-return [data-mailbox-reveal] { opacity:1!important; transform:none!important; transition:none!important; }
@media(max-width:600px) {
  .showcase-mailbox .mailbox-demo-desktop .mailbox-header-title { font-size:11px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-header-actions { gap:1px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-header-actions button { width:21px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-sidebar-modes { margin:0 3px 7px; gap:0; padding:2px; flex-wrap:wrap; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-sidebar-modes button { flex-basis:45%; min-height:24px; font-size:9px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-compose-actions { margin:0 4px 7px; gap:3px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-compose-button { font-size:9px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-self-write { font-size:8px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-compose-button svg { display:none; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-folders { padding:0 3px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-folders button { min-height:29px; padding:5px 3px; gap:4px; font-size:9px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-folders button svg { width:11px; height:11px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-demo-content { padding:14px 8px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-content-heading { display:block; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-content-heading h3 { font-size:14px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-heading-search { width:100%; max-width:100%; margin:7px 0 0; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-mail-toolbar { gap:7px; font-size:8px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-row-copy b { font-size:10px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-row-copy > span { font-size:8px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-content-guide { font-size:9px; }
  .showcase-mailbox .mailbox-demo-desktop .mailbox-messenger-preview { inset:61px 6px 9px 108px; }
}
@container (max-width:280px) {
  .showcase-mailbox .mailbox-demo-phone .mailbox-app-header { padding:0 6px; gap:4px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-header-title { font-size:11px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-header-actions { gap:2px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-header-actions button { width:21px; padding:4px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-drawer-toggle { width:25px; height:27px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-folders button { font-size:11px; min-height:35px; gap:8px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-folders button > svg { width:16px; height:16px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-sidebar-modes button { font-size:10px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-sidebar-modes small { font-size:8px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-drawer-company { padding:13px 9px 10px; gap:6px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-drawer-company > img { width:27px; height:27px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-drawer-company > div { font-size:10px; }
  .showcase-mailbox .mailbox-demo-phone .mailbox-compose-button { font-size:12px; min-height:33px; }
}
@media(prefers-reduced-motion:reduce) {
  .showcase-mailbox .mailbox-drawer-backdrop { transition:none; }
}
/* The desktop hamburger only folds its sidebar inside this demonstration. */
.showcase-mailbox .mailbox-demo-desktop.is-sidebar-collapsed .mailbox-app-body { grid-template-columns:0 minmax(0,1fr); }
.showcase-mailbox .mailbox-demo-desktop.is-sidebar-collapsed .mailbox-demo-sidebar { visibility:hidden; overflow:hidden; padding:0; }

/* MERGE 20261012: the original mail section is the third shared desktop pane.
   Keep its namespace/view attributes around the actual controls. The copied
   story article owns the original heading node; no second mailbox is created.
   Reserve room for the click hint, view tabs and presentation-only note inside
   the sticky stage, and avoid a second entrance fighting the pane crossfade. */
@media(min-width:901px) {
  .feature-showcase.is-scroll-flow .showcase-window .showcase-mailbox {
    --mailbox-desktop-stage:min(680px,calc(100svh - var(--site-header-height,80px) - 264px));
  }
  .feature-showcase.is-scroll-flow .showcase-window .mailbox-showcase-layout {
    display:block; width:100%; min-width:0;
  }
  .feature-showcase.is-scroll-flow .showcase-window [data-mailbox-reveal] {
    opacity:1!important; transform:none!important; transition:none!important;
  }
}