/* A hero uses the site's palette. Only the demonstration adopts Windows chrome. */
.zi-hero.heroi{
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
  padding:0 0 clamp(30px,4vw,58px);
}

.zi-hero [hidden]{display:none!important}

.zi-hero .miolo.zi-layout{
  max-width:1240px;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
  gap:clamp(26px,4.4vw,62px);
  padding-top:clamp(12px,2vw,28px);
}

.zi-hero .topo .miolo{max-width:1240px}
.zi-copy{min-width:0;max-width:490px}
.zi-copy h1{font-size:clamp(2.35rem,4.1vw,4rem);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.zi-copy .sub,.zi-copy .zi-sub{color:var(--fraca);max-width:46ch;font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.55;margin-bottom:22px;text-wrap:pretty}
.zi-copy .cta,.zi-copy .zi-actions{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 16px}
.zi-copy .micro{margin-top:12px}
.zi-copy .trailer-link{margin-top:0}

.zi-demo{
  --zi-panel-width:345px;
  --zi-scene-height:504px;
  --zi-guide-color:#2676ca;
  min-width:0;
  padding:0;
  scroll-margin-top:16px;
}

.zi-guidance{
  display:flex;
  align-items:center;
  gap:9px 14px;
  min-height:44px;
  margin-bottom:9px;
  color:var(--papel);
  font-size:.9rem;
  line-height:1.35;
}

.zi-guidance .zi-step,.zi-guidance #zi-step{
  flex:none;
  padding:4px 9px;
  border:1px solid #485b75;
  border-radius:5px;
  background:#202c3d;
  color:#e1edff;
  font-size:.76rem;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.zi-guidance .zi-instruction{min-width:0}
.zi-demo[data-intro] .zi-instruction{visibility:hidden}

.zi-desktop{
  overflow:hidden;
  border:1px solid #53677f;
  border-radius:11px;
  background:#0e2142;
  box-shadow:0 18px 42px #0006;
}

/* Procedural wallpaper for the small simulated desktop. No image request. */
.zi-scene{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  align-items:end;
  justify-items:end;
  height:var(--zi-scene-height);
  padding:8px 11px 8px;
  background:
    radial-gradient(ellipse at 3% 88%,#29466c 0%,transparent 44%),
    radial-gradient(ellipse at 69% 18%,#213d67 0%,transparent 49%),
    linear-gradient(142deg,#0d1c39 14%,#193557 59%,#10223f 100%);
}

.zi-scene::before,.zi-scene::after{
  content:'';
  position:absolute;
  z-index:-1;
  pointer-events:none;
}

.zi-scene::before{
  width:128%;
  height:69%;
  left:-27%;
  top:39%;
  transform:rotate(-27deg);
  border-radius:49% 55% 41% 59% / 73% 42% 59% 27%;
  background:linear-gradient(155deg,#5480b7 5%,#345e98 34%,#1e437d 55%,#264878 75%,#102346 99%);
  box-shadow:inset 0 2px 6px #94baff55,0 -18px 65px #142b53;
}

.zi-scene::after{
  width:89%;
  height:58%;
  left:-8%;
  top:44%;
  transform:rotate(-28deg);
  border-radius:52% 44% 52% 48% / 50% 76% 24% 50%;
  background:linear-gradient(174deg,#284977 7%,#376da5 44%,#5a8bbc 51%,#335d94 67%,#1b3864 87%);
  opacity:.78;
  box-shadow:inset 0 -16px 22px #17335999,0 -9px 31px #132e585e;
}

.zi-scene .zi-flyout{
  position:relative;
  z-index:1;
  width:min(100%,var(--zi-panel-width));
  height:100%;
  border:0;
  border-radius:8px;
  min-width:0;
  max-height:100%;
  margin:0;
  transform-origin:90% 100%;
  animation:zi-flyout-in 170ms cubic-bezier(.18,.65,.35,1) both;
}

.zi-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 6px;color:#c4d0df;font-size:.75rem}
.zi-legend span::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:var(--zi-source)}
.zi-google{--zi-source:#4f83dd}.zi-icloud{--zi-source:#9168da}.zi-outlook{--zi-source:#cf752f}
.zi-finish{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:14px;padding:12px 0;color:var(--papel);border-top:1px solid #40516a}
.zi-finish p{font-size:.93rem;max-width:40ch}
.zi-movie{margin:-24px 0 24px}

@media (min-width:900px) and (min-height:950px){.zi-demo{--zi-panel-width:340px;--zi-scene-height:656px}}

.zi-taskbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:46px;
  padding:3px 10px 3px 12px;
  border-top:1px solid #b9cee2;
  background:linear-gradient(180deg,#e5eef7,#d8e6f3);
  color:#182c44;
  font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  color-scheme:light;
}

.zi-start,.zi-system,.zi-tray{display:flex;align-items:center;gap:8px}
.zi-start{font-size:.73rem;font-weight:600;white-space:nowrap}
.zi-start svg{display:block;flex:none}
.zi-system{gap:5px;color:#344963}
.zi-system svg{width:13px;height:13px;flex:none}
.zi-tray{margin-left:auto;justify-content:flex-end}
.zi-tray-anchor{position:relative;display:flex}

.zi-tray-tip{
  --zi-tip-tail:6px;
  --zi-tip-offset:27px;
  position:absolute;
  z-index:1;
  inset-inline-end:calc(50% - var(--zi-tip-offset));
  bottom:calc(100% + 17px);
  width:max-content;
  max-width:min(228px, 65vw);
  padding:9px 13px;
  border:1px solid #7198c6;
  border-radius:9px;
  background:#192b45;
  box-shadow:0 6px 22px #0a182880;
  color:#f4f8ff;
  font:600 .84rem/1.3 'Segoe UI',system-ui,sans-serif;
  text-align:center;
  pointer-events:none;
  animation:zi-tip-in 260ms ease-out both;
}

.zi-tray-tip::after{
  content:'';
  position:absolute;
  inset-inline-end:calc(var(--zi-tip-offset) - var(--zi-tip-tail) - 1px);
  bottom:calc(-1 * var(--zi-tip-tail) - 1px);
  width:calc(2 * var(--zi-tip-tail));
  height:calc(2 * var(--zi-tip-tail));
  background:inherit;
  border-right:1px solid #7198c6;
  border-bottom:1px solid #7198c6;
  transform:rotate(45deg);
}

@keyframes zi-tip-in{
  from{opacity:0;transform:translateY(-3px)}
  to{opacity:1;transform:translateY(0)}
}

#zi-tray-button{
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:40px;
  min-height:38px;
  padding:2px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:inherit;
  cursor:pointer;
}

#zi-tray-button:hover,#zi-tray-button[aria-expanded=true]{border-color:#aec3db;background:#f7fbff}
#zi-tray-button img,#zi-tray-button>svg{display:block;width:24px;height:24px}

.zi-clock{
  display:grid;
  align-content:center;
  justify-items:end;
  gap:2px;
  min-width:55px;
  font-size:.73rem;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  white-space:nowrap;
}

.zi-clock small,.zi-clock .zi-clock-date{font-size:.65rem;color:#304760}

.zi-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 12px;
  min-height:40px;
  color:var(--fraca);
  font-size:.8rem;
  line-height:1.4;
}

.zi-footer button,.zi-footer a:not(.botao){
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 2px;
  border:0;
  background:none;
  color:var(--papel);
  font:inherit;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* The next control has a persistent outline. Only the tray draws a short pulse. */
.zi-demo [data-guide]:not([data-guide=false]){
  outline:2px solid var(--zi-guide-color);
  outline-offset:2px;
}
.zi-demo .zi-flyout [data-guide]:not([data-guide=false]){outline-offset:-1px}
.zi-demo #zi-tray-button[data-guide]:not([data-guide=false]){
  outline-offset:0;
  border-color:#9fc4e5;
  background:#f6fbff;
  animation:zi-tray-signal 1.5s ease-out 3;
}

.zi-demo :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #0d5bae;
  outline-offset:3px;
}
.zi-demo .zi-footer :focus-visible,.zi-demo:focus-visible{outline-color:#8dc5ff}

@keyframes zi-flyout-in{
  from{opacity:.5;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes zi-tray-signal{
  0%,100%{box-shadow:0 0 0 0 #3279bf00}
  35%{box-shadow:0 0 0 5px #3279bf40}
}

@media (min-width:900px) and (max-height:820px){
  .zi-hero.heroi{padding-bottom:22px}
  .zi-hero .topo{padding-block:16px}
  .zi-hero .miolo.zi-layout{padding-top:10px}
  .zi-copy h1{font-size:clamp(2.25rem,3.65vw,3.45rem);margin-bottom:16px}
}

@media (max-width:899px){
  .zi-hero .miolo.zi-layout{grid-template-columns:minmax(0,1fr);max-width:690px;gap:20px}
  .zi-copy{max-width:none}
  .zi-copy h1{font-size:clamp(2.15rem,6.6vw,3.35rem)}
  .zi-demo{--zi-scene-height:500px}
  #zi-tray-button{width:44px;min-height:44px}
}

@media (max-width:430px){
  .zi-hero .miolo.zi-layout{padding-inline:12px}
  .zi-copy{padding-inline:6px}
  .zi-copy h1{text-wrap:initial}
  .zi-guidance{gap:7px 10px;font-size:.82rem}
  .zi-scene{padding:6px;justify-items:center}
}

@media (prefers-reduced-motion:reduce){
  .zi-scene .zi-flyout,.zi-demo #zi-tray-button[data-guide],.zi-tray-tip{animation:none}
}