/* ============================================================
   site.css — $DUCKY one pager
   ============================================================ */

/* ---------- Bliss desktop background ---------- */

.bliss { position: fixed; inset: 0; z-index: -1; overflow: hidden; }

.bliss__sky {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      #1e5fb4 0%,
      #2f7fd0 18%,
      #58a6e4 42%,
      #8fc9f2 64%,
      #cfe8f8 78%,
      #eaf5fc 88%);
}

.bliss__hill {
  position: absolute;
  left: -12%;
  width: 124%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.bliss__hill--back {
  bottom: 0;
  height: 30vh;
  background: linear-gradient(to bottom, #a9cf63 0%, #7aae3e 38%, #5d9330 100%);
  filter: blur(.3px);
}
.bliss__hill--front {
  bottom: -6vh;
  left: -22%;
  width: 150%;
  height: 34vh;
  background: linear-gradient(to bottom, #93c44f 0%, #6ca62f 34%, #3f7a1c 100%);
  box-shadow: 0 -1px 22px rgba(20, 60, 10, .22);
}

.cloud {
  position: absolute;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 72%);
  filter: blur(2px);
  animation: drift 120s linear infinite;
  will-change: transform;
}
.cloud--1 { top: 8%;  left: 4%;  width: 380px; height: 110px; opacity: .85; }
.cloud--2 { top: 18%; left: 52%; width: 520px; height: 140px; opacity: .7; animation-duration: 180s; }
.cloud--3 { top: 4%;  left: 72%; width: 300px; height: 90px;  opacity: .6; animation-duration: 150s; }

@keyframes drift {
  from { transform: translateX(-8vw); }
  to   { transform: translateX(108vw); }
}

/* ---------- Desktop icons ---------- */

.desktop-icons {
  position: absolute;
  top: 16px; left: 14px;
  display: grid;
  gap: 14px;
  width: 82px;
  z-index: 5;
}

.dicon {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  padding: 4px 2px;
  border-radius: 2px;
  transition: background-color 140ms var(--ease-out);
}
.dicon__img { width: 32px; height: 32px; display: grid; place-items: center; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.4)); }
.dicon__label {
  font-size: 11px;
  line-height: 1.25;
  text-shadow: 1px 1px 2px rgba(0, 20, 60, .95);
}
@media (hover: hover) and (pointer: fine) {
  .dicon:hover { background: rgba(49, 106, 197, .45); }
}
.dicon:active .dicon__img { transform: scale(0.94); }
.dicon:focus-visible { background: rgba(49, 106, 197, .55); outline-color: #fff; }

/* ---------- Layout ---------- */

main { position: relative; z-index: 2; }

.section {
  display: flex;
  justify-content: center;
  padding: 44px 16px;
}
.section--two {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 26px;
}

/* ---------- Hero ---------- */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: 72px 16px 64px 110px;
  position: relative;
}

.hero__grid {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.win--signin { --win-w: 340px; }

.signin { text-align: left; }

.signin__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.signin__wordmark {
  font: 700 20px/1 var(--font-ui);
  color: #1f4fa8;
  letter-spacing: -.5px;
}
.signin__wordmark sup { font-size: 9px; }
.signin__wordmark b { font-size: 12px; font-weight: 700; color: #3a4a63; letter-spacing: 0; }

.signin__status { margin: 10px 0 8px; font-size: 11px; }
.signin__actions { margin-top: 14px; text-align: center; }
.signin__forgot { margin: 12px 0 0; font-size: 11px; }

/* ---------- Hero pitch ---------- */

.hero__pitch { text-align: center; }

.hero__scribble {
  margin: 0 0 4px;
  font: italic 700 clamp(20px, 2.4vw, 32px)/1.15 "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  color: #123a72;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  display: grid;
  gap: 1px;
}
.hero__scribble span:nth-child(2) { transform: translateX(10px) rotate(-1deg); }
.hero__scribble span:nth-child(3) { transform: translateX(-4px) rotate(.6deg); }
.hero__scribble u { text-decoration-thickness: 2px; text-underline-offset: 4px; }

.wordmark {
  margin: 6px 0 2px;
  font: 900 clamp(58px, 12vw, 132px)/0.92 "Arial Black", Impact, Tahoma, sans-serif;
  letter-spacing: -.02em;
  display: flex;
  justify-content: center;
}

.wordmark__char {
  display: inline-block;
  background: linear-gradient(to bottom, #cfe9ff 0%, #6fc0f5 28%, #2f8de0 55%, #1b5fb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #0d3f86;
  paint-order: stroke fill;
  filter: drop-shadow(2px 3px 0 rgba(8, 40, 90, .35));
  animation: charIn 460ms var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 55ms);
}
.wordmark__char:nth-child(1) { background-image: linear-gradient(to bottom, #dff0ff, #2f8de0 60%, #17539f); }
.wordmark__char:nth-child(3) { background-image: linear-gradient(to bottom, #d9f7d0, #56b93f 58%, #2c7a1f); -webkit-text-stroke-color: #21631a; }
.wordmark__char:nth-child(4) { background-image: linear-gradient(to bottom, #fff3c4, #f6c93c 58%, #c68a10); -webkit-text-stroke-color: #8d5f06; }
.wordmark__char:nth-child(5) { background-image: linear-gradient(to bottom, #ffe0bd, #f79a3c 58%, #c85f12); -webkit-text-stroke-color: #8e3e07; }
.wordmark__char:nth-child(6) { background-image: linear-gradient(to bottom, #ffd7d0, #ef5a3c 58%, #bb2f14); -webkit-text-stroke-color: #8a2209; }

@keyframes charIn {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
}

.hero__paired {
  margin: 4px 0 22px;
  font: 700 clamp(13px, 1.5vw, 19px)/1 "Lucida Console", "Courier New", monospace;
  letter-spacing: .22em;
  color: #fff;
  text-shadow: 1px 2px 2px rgba(0, 30, 80, .7);
}

.hero__cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* contract address */
.ca {
  margin: 20px auto 0;
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 10px;
  background: rgba(255,255,255,.88);
  border: 1px solid #7ba0c4;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 30, 80, .18);
}
.ca--hero {
  margin-top: 26px;
  padding: 8px 8px 8px 14px;
  gap: 12px;
  border-color: #5f8ab4;
  box-shadow: 0 4px 16px rgba(0, 30, 80, .25);
}
.ca--hero .ca__label { font-weight: 700; }
.ca--hero .ca__value { font-size: 12.5px; }
.ca--hero .ca__copy { min-width: 86px; padding: 7px 14px; font-weight: 700; }

.ca__label { font-size: 11px; color: var(--xp-muted); flex: none; }
.ca__value {
  flex: 1;
  min-width: 0;
  font: 400 11px/1.4 "Lucida Console", "Courier New", monospace;
  color: #12233c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.ca__copy { min-width: 62px; }

/* duck */
.hero__duck {
  position: relative;
  width: min(330px, 29vw);
  justify-self: end;
  margin-right: clamp(0px, 2vw, 26px);
}
.hero__duck picture { display: block; }
.hero__duck img {
  width: 100%;
  animation: bob 5.5s var(--ease-in-out) infinite;
  filter: drop-shadow(6px 14px 16px rgba(20, 50, 20, .3));
  will-change: transform;
}
.duck__shadow {
  position: absolute;
  left: 8%; right: 18%;
  bottom: -6px;
  height: 22px;
  background: radial-gradient(closest-side, rgba(20,50,15,.34), transparent 74%);
  animation: shadowPulse 5.5s var(--ease-in-out) infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-14px) rotate(.8deg); }
}
@keyframes shadowPulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(.9); opacity: .6; }
}

.hero__ms {
  position: absolute;
  top: 22px; right: 26px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 20, 60, .8);
}
.mslogo__word { font: 400 22px/1 "Segoe UI", Tahoma, sans-serif; }
.hero__ms sup { font-size: 9px; }

/* ---------- Chat window ---------- */

.win--chat .win__body { padding: 0; }

.chat__to {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--xp-face);
  border-bottom: 1px solid #d4cfba;
}

.chat {
  height: 296px;
  overflow-y: auto;
  padding: 10px 12px;
  background: #fff;
  scrollbar-width: thin;
}

.msg {
  margin: 0 0 9px;
  font-size: 12px;
  animation: msgIn 300ms var(--ease-out) backwards;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
}

.msg__who { display: block; font-weight: 700; }
.msg__who--them { color: #1d6bc4; }
.msg__who--you  { color: #b5342a; }
.msg__text { display: block; padding-left: 12px; font-family: var(--font-chat); color: #1c2433; }

.msg--system {
  color: #6b7789;
  font-style: italic;
  text-align: center;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 5px 0;
}

.msg__typing { display: inline-flex; gap: 3px; padding-left: 12px; }
.msg__typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #8ca4bf;
  animation: blip 1.1s infinite var(--ease-in-out);
}
.msg__typing i:nth-child(2) { animation-delay: .15s; }
.msg__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blip { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat__compose { background: var(--xp-face); padding: 6px; border-top: 1px solid #c9c3ac; }
.chat__toolbar { display: flex; gap: 10px; font-size: 12px; padding: 0 2px 5px; color: #3b4a5e; }
.chat__nudge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #1d6bc4;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 2px;
}
.chat__nudge:hover { background: #d7e6f8; }

.chat__inputrow { display: flex; gap: 6px; align-items: stretch; }
.chat__input {
  flex: 1;
  min-height: 46px;
  padding: 5px 7px;
  background: #fff;
  border: 1px solid var(--xp-field-border);
  font: 400 12px/1.5 var(--font-chat);
  overflow-y: auto;
}
.chat__input:focus { outline: none; border-color: #3d7bcf; }
.chat__input:empty::before {
  content: "Type your message here…";
  color: #9aa6b5;
}

/* nudge shake */
.is-nudging { animation: nudge 420ms var(--ease-in-out); }
@keyframes nudge {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-9px, 5px); }
  25% { transform: translate(8px, -6px); }
  38% { transform: translate(-7px, -4px); }
  52% { transform: translate(6px, 6px); }
  66% { transform: translate(-4px, 3px); }
  82% { transform: translate(3px, -2px); }
}

/* ---------- Prose ---------- */

.prose p { margin: 0 0 10px; font-size: 12.5px; color: #24303f; }
.prose__lead { font-size: 15px !important; font-weight: 700; color: #14203a !important; }

.notice {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 9px 11px;
  background: #f3f6fb;
  border: 1px solid #c3d2e6;
  font-size: 11px;
  color: #45536a;
}
.notice__icon {
  flex: none;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #2b5fb8;
  color: #fff;
  font: italic 700 11px var(--font-ui);
}

/* ---------- Table / meters ---------- */

.xptable { width: 100%; border-collapse: collapse; font-size: 12px; }
.xptable th, .xptable td {
  padding: 6px 9px;
  text-align: left;
  border-bottom: 1px solid #e3e3dc;
}
.xptable th { font-weight: 400; color: var(--xp-muted); width: 46%; }
.xptable td { font-weight: 700; }
.xptable tr:nth-child(even) { background: #f7f7f2; }
.ok { color: #2c7a1f; }

.meter, .progress {
  margin-top: 14px;
  height: 18px;
  padding: 2px;
  background: #fff;
  border: 1px solid #9a9a8c;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
  display: flex;
  gap: 2px;
  overflow: hidden;
}
.meter__fill, .progress__fill {
  width: var(--pct);
  background:
    repeating-linear-gradient(to right,
      #3fa72e 0 9px, transparent 9px 11px);
  animation: fillIn 900ms var(--ease-out) backwards;
}
@keyframes fillIn { from { width: 0; } }

.meter__legend { margin: 6px 0 0; font-size: 11px; color: var(--xp-muted); }

/* ---------- IE window ---------- */

.ie__address {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: linear-gradient(to bottom, #fbfaf5, #ece9d8);
  border-bottom: 1px solid #d9d4c0;
}
.ie__label { font-size: 11px; color: var(--xp-muted); }
.ie__bar {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 24px 3px 5px;
  background: #fff;
  border: 1px solid var(--xp-field-border);
  font-size: 11px;
  overflow: hidden;
}
.ie__url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Steps ---------- */

.steps__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 16px 14px 14px;
  background: linear-gradient(to bottom, #f9fbfe, #eaf1fa);
  border: 1px solid #c6d7ea;
  border-radius: 4px;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .step:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -6px rgba(0, 40, 100, .35); }
}
.step__n {
  position: absolute;
  top: -11px; left: 12px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  font: 700 13px var(--font-ui);
  color: #fff;
  background: linear-gradient(to bottom, #4a9dff, #1c6fdd 55%, #0e5bc4);
  border: 1px solid #0d4fa8;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.step__h { margin: 4px 0 5px; font-size: 13px; }
.step p { margin: 0; font-size: 12px; color: #3a4759; }

.steps__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; justify-content: center; }

/* ---------- Roadmap ---------- */

.roadmap__intro { margin: 0 0 14px; font-size: 12px; color: var(--xp-muted); }

.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.task {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid #dfe4ec;
  border-radius: 3px;
  background: #fbfcfe;
}
.task b { font-size: 12.5px; }
.task span:last-child { grid-column: 2; font-size: 12px; color: #4a586b; }
.task__box {
  width: 15px; height: 15px;
  margin-top: 2px;
  border: 1px solid var(--xp-field-border);
  background: #fff;
  display: grid; place-items: center;
}
.task--done { background: #f3faf1; border-color: #c3e3ba; }
.task--done .task__box::after {
  content: "";
  width: 9px; height: 5px;
  border: 2px solid #2c7a1f;
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}
.task--now { background: #fff9e9; border-color: #ecd79a; }
.task--now .task__box::after {
  content: "";
  width: 7px; height: 7px;
  background: #e3a008;
  animation: pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.progress__fill {
  background: repeating-linear-gradient(to right, #3b7fe0 0 9px, transparent 9px 11px);
}
.roadmap__eta { margin: 8px 0 0; font-size: 11px; color: var(--xp-muted); }

/* ---------- Contacts ---------- */

.contacts__group {
  margin: 10px 0 5px;
  font-size: 11px;
  font-weight: 700;
  color: #4a5a70;
  border-bottom: 1px solid #dfe4ec;
  padding-bottom: 3px;
}
.contacts__group:first-child { margin-top: 0; }
.contacts__list { list-style: none; margin: 0; padding: 0; }
.contacts__list a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  font-size: 12px;
  color: #16213a;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 140ms var(--ease-out);
}
.contacts__list a:hover { background: #dfeafa; }
.contacts__list em { color: var(--xp-muted); font-size: 11px; font-style: normal; }
.contacts__list--off a { color: #8a94a3; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: #b4bcc8; flex: none; }
.dot--on { background: #3fa72e; box-shadow: 0 0 0 1px #2d7a20 inset; }

/* ---------- Dialog ---------- */

.dialog { display: flex; gap: 14px; align-items: center; padding: 20px 18px; }
.dialog__icon {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ef6f56, #c62d16);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.dialog__msg { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.dialog__sub { margin: 0; font-size: 12px; color: #4a586b; }
.dialog__actions {
  display: flex; gap: 8px; justify-content: center;
  padding: 10px 0 4px;
}

/* ---------- Footer ---------- */

.footer {
  padding: 26px 20px 70px;
  text-align: center;
}
.footer p {
  margin: 0 auto;
  max-width: 620px;
  font-size: 11px;
  line-height: 1.7;
  color: #eaf4ff;
  text-shadow: 0 1px 2px rgba(0, 25, 70, .65);
}


/* ---------- Outro: XP welcome screen ---------- */

.outro {
  position: relative;
  margin-top: 46px;
  padding: 0;
  background:
    radial-gradient(120% 120% at 22% 50%, #3a86e0 0%, #1f5bbd 38%, #123f92 72%, #0b2c6b 100%);
  box-shadow: inset 0 0 120px rgba(3, 20, 60, .55);
  overflow: hidden;
}

.outro__rule {
  height: 2px;
  background: linear-gradient(to right, transparent, #9fd0ff 12%, #ffffff 50%, #9fd0ff 88%, transparent);
  box-shadow: 0 0 12px rgba(150, 210, 255, .7);
  opacity: .9;
}
.outro__rule--top { box-shadow: 0 0 16px 2px rgba(160, 215, 255, .75); }
.outro__rule--bottom { display: none; }

.outro__inner {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 54px 24px 60px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
}

.outro__duck {
  display: block;
  width: 168px;
  filter: drop-shadow(0 16px 26px rgba(0, 14, 46, .55));
  animation: bob 6s var(--ease-in-out) infinite;
}

.outro__copy { color: #fff; }

.outro__kicker {
  margin: 0 0 2px;
  font-size: clamp(14px, 1.7vw, 19px);
  color: #bcd9fb;
  text-shadow: 0 1px 3px rgba(0, 15, 50, .6);
}

.outro__head {
  margin: 0 0 14px;
  font: 700 clamp(38px, 6.4vw, 76px)/1 "Segoe UI", Tahoma, sans-serif;
  letter-spacing: -.02em;
  text-shadow: 0 3px 18px rgba(0, 20, 70, .6);
}

.outro__pair {
  margin: 0 0 6px;
  font: 700 clamp(16px, 2.1vw, 24px)/1.3 "Lucida Console", "Courier New", monospace;
  letter-spacing: .1em;
  color: #ffd94a;
  text-shadow: 0 2px 8px rgba(60, 40, 0, .45);
}
.outro__pair span { font-family: var(--font-ui); letter-spacing: 0; }

.outro__sub {
  margin: 0 0 24px;
  font-size: clamp(13px, 1.6vw, 17px);
  color: #dbeaff;
}

.outro__cta { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 780px) {
  .outro__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 38px 18px 44px;
    gap: 18px;
  }
  .outro__duck { width: 130px; }
  .outro__cta { justify-content: center; }
}

/* kicker inside the About window */
.prose__kicker {
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px solid #e3e7ee;
  font-size: 14px !important;
  line-height: 1.5;
  color: #1b2942 !important;
}
.prose__kicker b { font-size: 17px; }

/* the footer continues the logon-screen band to the bottom of the page */
.footer {
  padding-top: 26px;
  background: linear-gradient(to bottom, #0b2c6b, #06193f);
}
.footer p { color: #9db9de; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .hero { padding: 64px 16px 56px; }
  .hero__grid { grid-template-columns: 1fr; justify-items: center; }
  .hero__duck { width: min(230px, 52vw); justify-self: center; order: -1; }
  .win--signin { order: 1; }
  .desktop-icons { display: none; }
  .hero__ms { top: 14px; right: 14px; }
  .mslogo__word { font-size: 17px; }
}

@media (max-width: 700px) {
  .section { padding: 30px 12px; }
  .steps__list { grid-template-columns: 1fr; }
  .win { --win-w: 100% !important; }
  .hero__scribble { font-size: clamp(18px, 6vw, 26px); }
  .chat { height: 250px; }
  .toast { right: 8px; left: 8px; width: auto; }
  .taskbar__tasks { display: none; }
  .ca { flex-wrap: wrap; }
  .ca__value { flex-basis: 100%; order: 2; }
  .startmenu { width: calc(100% - 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .hero__duck img, .duck__shadow,
  .task--now .task__box::after { animation: none; }
  .wordmark__char, .msg, .meter__fill, .progress__fill { animation-duration: 1ms; }
  .is-nudging { animation: none; }
}