/* =========================================================================
   Redwood 95, Windows 95 interface recreation
   Reference metrics: 96 DPI Win95 defaults. Title bars are SOLID navy
   (gradient title bars arrived with the Plus! pack / Win98), there are no
   drop shadows on windows, and every surface is a 2-level hard bevel.
   ========================================================================= */

@font-face {
  font-family: "MS Sans Serif";
  src: url("assets/fonts/ms_sans_serif.woff2") format("woff2"),
       url("assets/fonts/ms_sans_serif.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "MS Sans Serif";
  src: url("assets/fonts/ms_sans_serif_bold.woff2") format("woff2"),
       url("assets/fonts/ms_sans_serif_bold.woff") format("woff");
  font-weight: bold;
  font-display: swap;
}

:root {
  /* Win95 default ("Windows Standard") colour scheme */
  --desktop:      #008080;  /* teal */
  --face:         #c0c0c0;  /* ButtonFace */
  --light:        #dfdfdf;  /* ButtonLight */
  --hilight:      #ffffff;  /* ButtonHilight */
  --shadow:       #808080;  /* ButtonShadow */
  --dkshadow:     #000000;  /* ButtonDkShadow */
  --active-title: #000080;  /* navy, solid */
  --inactive:     #808080;
  --title-text:   #ffffff;
  --window:       #ffffff;
  --window-text:  #000000;
  --gray-text:    #808080;
  --select:       #000080;
  --select-text:  #ffffff;
  --tooltip:      #ffffe1;
  --redwood:      #800000;  /* brand accent, sits inside the VGA palette */

  --taskbar-h: 34px;

  /* Canonical Win95 bevels */
  --out:   inset -1px -1px var(--dkshadow), inset 1px 1px var(--hilight),
           inset -2px -2px var(--shadow),   inset 2px 2px var(--light);
  --in:    inset 1px 1px var(--dkshadow),   inset -1px -1px var(--hilight),
           inset 2px 2px var(--shadow),     inset -2px -2px var(--light);
  --frame: inset -1px -1px var(--dkshadow), inset 1px 1px var(--light),
           inset -2px -2px var(--shadow),   inset 2px 2px var(--hilight);
  --field: inset -1px -1px var(--hilight),  inset 1px 1px var(--shadow),
           inset -2px -2px var(--light),    inset 2px 2px var(--dkshadow);
  --status: inset -1px -1px var(--hilight), inset 1px 1px var(--shadow);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--desktop);
  font-family: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif;
  font-size: 11px;
  line-height: 13px;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  color: var(--window-text);
}

button, input, select, textarea { font-family: inherit; font-size: 11px; }
button { cursor: default; }
img { image-rendering: pixelated; }

/* ============ Boot splash ============ */
#boot {
  position: fixed; inset: 0; z-index: 9999;
  background: #000080;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .35s linear;
}
#boot.fade { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; color: #fff; }
.boot-logo { margin-bottom: 44px; }
.boot-flag { display: inline-grid; grid-template-columns: 18px 18px; gap: 3px; margin-bottom: 16px; }
.fl { width: 18px; height: 18px; }
.fl.r { background: #ff0000; } .fl.g { background: #00ff00; }
.fl.b { background: #0000ff; } .fl.y { background: #ffff00; }
.boot-name { font-size: 34px; font-weight: bold; letter-spacing: 1px; }
.boot-xp { color: #00ffff; margin-left: 6px; }
.boot-sub { margin-top: 8px; font-size: 11px; color: #c0c0c0; }
.boot-bar { width: 240px; height: 20px; margin: 0 auto; padding: 3px; background: var(--face); box-shadow: var(--field); }
.boot-chunks { display: flex; gap: 2px; height: 100%; overflow: hidden; animation: bootfill 1.6s linear infinite; }
.boot-chunks i { flex: none; width: 12px; height: 100%; background: #000080; }
@keyframes bootfill { from { width: 8%; } to { width: 100%; } }
.boot-hint { margin-top: 34px; font-size: 11px; color: #8080c0; }

/* ============ Desktop ============ */
#desktop { position: fixed; inset: 0; overflow: hidden; background: var(--desktop); }
#wallpaper {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; object-position: center 62%;
  image-rendering: auto;
  user-select: none; pointer-events: none;
}

#icons {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: flex; flex-direction: column; flex-wrap: wrap;
  align-items: flex-start; align-content: flex-start;
  gap: 12px 5px;
  max-height: calc(100vh - var(--taskbar-h) - 24px);
}
.dicon {
  width: 106px; padding: 3px;
  background: none; border: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dicon img { width: 58px; height: 58px; display: block; }
.dicon-label {
  color: #fff; font-size: 11px; line-height: 13px; text-align: center;
  padding: 1px 3px; max-width: 100%;
  text-shadow: 1px 1px 0 rgba(0,0,0,.9);
}
.dicon:focus { outline: none; }
.dicon.selected img { filter: sepia(1) hue-rotate(190deg) saturate(3) brightness(.75); }
.dicon.selected .dicon-label {
  background: var(--select); color: var(--select-text);
  outline: 1px dotted #fff; outline-offset: -1px;
  text-shadow: none;
}

/* ============ Windows ============ */
.xp-window {
  position: absolute; z-index: 10;
  display: none; flex-direction: column;
  min-width: 260px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - var(--taskbar-h) - 12px);
  padding: 3px;
  background: var(--face);
  box-shadow: var(--frame);
}
.xp-window.open { display: flex; }
.xp-window.maximized {
  left: 0 !important; top: 0 !important;
  width: 100vw !important; height: calc(100vh - var(--taskbar-h)) !important;
  max-width: none; max-height: none;
}

.titlebar {
  flex: none; height: 22px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 2px 0 2px;
  background: var(--active-title);
  color: var(--title-text);
  font-weight: bold; font-size: 11px;
  cursor: default; user-select: none; touch-action: none;
}
.xp-window:not(.active) .titlebar { background: var(--inactive); }
.tb-icon { width: 16px; height: 16px; flex: none; display: block; }
.tb-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 1px; }
.tb-btns { display: flex; gap: 2px; }
.tbb {
  width: 16px; height: 14px; flex: none;
  border: none; padding: 0;
  background-color: var(--face);
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: var(--out);
  font-size: 0;
}
.tbb:active { box-shadow: var(--in); background-position: calc(50% + 1px) calc(50% + 1px); }
.tbb.close { margin-left: 2px; }
.tbb.min  { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="7"><rect y="5" width="6" height="2"/></svg>'); }
.tbb.max  { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9"><rect width="9" height="9"/><rect x="1" y="2" width="7" height="6" fill="%23c0c0c0"/></svg>'); }
.tbb.close { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="7"><g><rect x="0" y="0" width="2" height="1"/><rect x="6" y="0" width="2" height="1"/><rect x="1" y="1" width="2" height="1"/><rect x="5" y="1" width="2" height="1"/><rect x="2" y="2" width="2" height="1"/><rect x="4" y="2" width="2" height="1"/><rect x="3" y="3" width="2" height="1"/><rect x="2" y="4" width="2" height="1"/><rect x="4" y="4" width="2" height="1"/><rect x="1" y="5" width="2" height="1"/><rect x="5" y="5" width="2" height="1"/><rect x="0" y="6" width="2" height="1"/><rect x="6" y="6" width="2" height="1"/></g></svg>'); }

/* Menu bar */
.menubar {
  flex: none; display: flex; gap: 0;
  padding: 1px 0 2px;
  background: var(--face);
  user-select: none;
}
.menubar span { padding: 3px 8px; }
.menubar span:hover { background: var(--select); color: var(--select-text); }
.menubar u { text-decoration: underline; }

.win-body {
  flex: 1; overflow: auto;
  padding: 15px;
  background: var(--window);
  box-shadow: var(--field);
  margin: 1px 0 0;
}
.win-body.gray { background: var(--face); box-shadow: none; }

.statusbar {
  flex: none; display: flex; gap: 2px;
  margin-top: 3px;
  font-size: 11px;
}
.statusbar span {
  flex: 1; padding: 3px 6px;
  box-shadow: var(--status);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sb-right { flex: 0 0 auto; min-width: 108px; }

/* ============ Controls ============ */
.xp-btn {
  min-width: 90px; height: 28px;
  padding: 0 15px;
  border: none;
  background: var(--face);
  box-shadow: var(--out);
  color: var(--window-text);
}
.xp-btn:active:not([disabled]) { box-shadow: var(--in); padding: 1px 14px 0 16px; }
.xp-btn:focus-visible { outline: 1px dotted var(--window-text); outline-offset: -4px; }
.xp-btn.primary {
  font-weight: bold; color: var(--redwood);
  box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--dkshadow),
              inset 2px 2px var(--hilight), inset -2px -2px var(--dkshadow),
              inset 3px 3px var(--light),   inset -3px -3px var(--shadow);
}
.xp-btn.primary:active:not([disabled]) {
  box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--dkshadow),
              inset 2px 2px var(--shadow),   inset -2px -2px var(--light);
}
.xp-btn[disabled] { color: var(--shadow); text-shadow: 1px 1px 0 var(--hilight); }

.xp-field {
  width: 100%; padding: 4px 5px;
  border: none;
  background: var(--window);
  box-shadow: var(--field);
  color: var(--window-text);
}
.xp-field:focus { outline: none; }
select.xp-field { height: 26px; }

/* Group box (etched frame + inset legend) */
.groupbox {
  position: relative;
  margin: 16px 0 12px;
  padding: 14px 10px 10px;
  box-shadow: inset -1px -1px var(--hilight), inset 1px 1px var(--shadow),
              inset -2px -2px transparent, inset 2px 2px transparent;
}
.groupbox > legend, .groupbox > .legend {
  position: absolute; top: -6px; left: 8px;
  padding: 0 4px; background: var(--window);
}

/* Win95 scrollbars */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background-color: var(--light);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect width="2" height="2" fill="%23ffffff"/><rect width="1" height="1" fill="%23c0c0c0"/><rect x="1" y="1" width="1" height="1" fill="%23c0c0c0"/></svg>');
}
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--out); }
::-webkit-scrollbar-button:single-button {
  background-color: var(--face); box-shadow: var(--out);
  display: block; height: 16px; width: 16px;
  background-repeat: no-repeat; background-position: center;
}
::-webkit-scrollbar-button:vertical:decrement { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="4"><rect x="3" y="0" width="1" height="1"/><rect x="2" y="1" width="3" height="1"/><rect x="1" y="2" width="5" height="1"/><rect x="0" y="3" width="7" height="1"/></svg>'); }
::-webkit-scrollbar-button:vertical:increment { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="4"><rect x="0" y="0" width="7" height="1"/><rect x="1" y="1" width="5" height="1"/><rect x="2" y="2" width="3" height="1"/><rect x="3" y="3" width="1" height="1"/></svg>'); }
::-webkit-scrollbar-corner { background: var(--face); }

/* ============ Hero window ============ */
.hero-body { padding: 14px 16px 16px; }
.hero-brand { font-size: 26px; font-weight: bold; color: var(--redwood); letter-spacing: 1px; }
.hero-tm { font-size: 9px; vertical-align: super; }
.hero-body h1 { font-size: 18px; line-height: 1.45; margin: 10px 0 8px; font-weight: bold; }
.hero-sub { line-height: 1.7; margin-bottom: 4px; }
.hero-sub b { color: var(--redwood); }
.hero-ctas { display: flex; gap: 8px; margin-top: 14px; }

.pixel-head { font-weight: bold; margin: 16px 0 2px; }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; margin: 10px 0 4px; }
.feat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.feat img { width: 58px; height: 58px; }
.feat-label { line-height: 1.4; }

/* ============ Case studies ============ */
.case-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ============ Wizard ============ */
.wizard { display: flex; padding: 0; background: var(--face); box-shadow: none; }
.wiz-side { flex: none; width: 144px; background: #000080; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 8px; }
.wiz-side img { width: 58px; height: 58px; }
.wiz-side-label { text-align: center; line-height: 1.6; font-weight: bold; }
.wiz-main { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; }
.wiz-step h2 { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.wiz-step p { line-height: 1.7; }
.wiz-nav { margin-top: auto; padding-top: 16px; display: flex; gap: 6px; justify-content: flex-end; }

/* ============ Apply form ============ */
.form-row { margin-bottom: 8px; }
.form-row label { display: block; margin-bottom: 3px; }
.form-actions { display: flex; gap: 6px; margin-top: 14px; justify-content: flex-end; }
.form-fine { margin-top: 10px; color: var(--shadow); }

/* ============ Partners ============ */
.partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.partner-tile { padding: 16px 8px; text-align: center; font-weight: bold; line-height: 1.6; box-shadow: var(--status); }
.partner-note { margin-top: 12px; color: var(--shadow); }

/* ============ Our Biggest Win ============ */
.bigwin {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; background: var(--window); box-shadow: var(--status);
}
.bigwin-trophy { flex: none; width: 58px; height: 58px; }
.bigwin-stat { min-width: 0; }
.bigwin-big {
  font-family: "Silkscreen", "MS Sans Serif", monospace;
  font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--redwood);
}
.bigwin-metric { margin-top: 8px; line-height: 1.6; }
.bigwin-note { margin-top: 12px; line-height: 1.7; color: var(--shadow); }
@media (max-width: 768px) {
  .bigwin { flex-direction: column; text-align: center; gap: 10px; }
  .bigwin-big { font-size: 22px; }
}

/* ============ Some Designs: the email wall ============ */
/* The body itself does not scroll here. The filter bar stays put and the wall
   below it scrolls, so the brand list is always reachable at 49 emails deep. */
.vault-body { overflow: hidden; display: flex; flex-direction: column; padding: 6px; gap: 6px; }

.vault-bar {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 4px 5px; background: var(--face); box-shadow: var(--out);
}
.vault-bar-lab { flex: none; color: var(--shadow); padding-left: 2px; }
.vault-filters { display: flex; flex-wrap: wrap; gap: 3px; }
.vault-chip {
  font: inherit; padding: 2px 7px 3px; border: none; cursor: pointer;
  background: var(--face); box-shadow: var(--out); color: inherit;
}
.vault-chip:active { box-shadow: var(--in); padding: 3px 6px 2px 8px; }
/* Win95 marks a latched toolbar button with a 50% dither, not a fill. */
.vault-chip[aria-pressed="true"] {
  box-shadow: var(--in); padding: 3px 6px 2px 8px; font-weight: bold;
  background-color: var(--face);
  background-image:
    linear-gradient(45deg, var(--hilight) 25%, transparent 25%, transparent 75%, var(--hilight) 75%),
    linear-gradient(45deg, var(--hilight) 25%, transparent 25%, transparent 75%, var(--hilight) 75%);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
}

.vault-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 8px; background: var(--window); box-shadow: var(--field);
}
/* Three pillars. Each card is placed into the shortest one by app.js, so the
   columns stay level and the scroll never ends on a lopsided gap. */
/* Capped and centred: maximise the window and the pillars would otherwise
   stretch to 500px each, which only blows the ~190px slices up into mush. */
.vault-wall { display: flex; align-items: flex-start; gap: 8px; max-width: 880px; margin: 0 auto; }
.vault-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.vmail {
  display: block; width: 100%; padding: 3px; border: none; cursor: pointer;
  background: var(--face); box-shadow: var(--out); text-align: left;
  font: inherit; color: inherit;
}
.vmail:hover { background: var(--light); }
.vmail:active { box-shadow: var(--in); }
.vmail-shot { display: block; background: var(--window); box-shadow: var(--field); }
.vmail-shot img { display: block; width: 100%; height: auto; image-rendering: auto; }
/* Each card wears a little title bar, so the brand is readable without
   scrolling the full length of the email. */
.vmail-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 18px; margin-bottom: 3px; padding: 0 4px;
  background: var(--inactive); color: var(--title-text); line-height: 18px;
}
.vmail:hover .vmail-cap { background: var(--active-title); }
.vmail-brand { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; }
.vmail-open { flex: none; visibility: hidden; }
.vmail:hover .vmail-open { visibility: visible; }

.vault-end {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px; line-height: 1.7;
  background: var(--face); box-shadow: var(--status); color: var(--shadow);
}
.vault-end img { flex: none; }

.design-empty {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; background: var(--window); box-shadow: var(--status);
  line-height: 1.7;
}
.design-empty img { flex: none; }
/* The slices come off the Figma board at roughly 200px wide, so the viewer is
   kept narrow on purpose: blowing one up to 500px only buys blur. */
.design-view { padding: 3px; overflow: auto; background: var(--face); }
.design-view img { display: block; width: 100%; height: auto; image-rendering: auto; }
@media (max-width: 768px) {
  .design-empty { flex-direction: column; text-align: center; }
  .vault-end { flex-direction: column; text-align: center; }
}

/* ============ Mail ============ */
.mail-toolbar {
  flex: none; display: flex; gap: 2px; align-items: center;
  padding: 2px; background: var(--face); user-select: none;
}
.mail-toolbar span { padding: 3px 8px; }
.mail-toolbar span:hover { box-shadow: var(--out); }
.mt-sep { width: 2px; height: 16px; padding: 0 !important; box-shadow: inset -1px 0 var(--hilight), inset 1px 0 var(--shadow); }
.mail-body { display: flex; padding: 0; }
.mail-folders { flex: none; width: 158px; background: var(--window); padding: 4px 0; box-shadow: inset -1px 0 var(--shadow); }
.mf { padding: 3px 10px; }
.mf.active { background: var(--select); color: var(--select-text); }
.mail-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mail-list { flex: none; box-shadow: inset 0 -1px var(--shadow); }
.mail-row {
  width: 100%; display: flex; gap: 10px; text-align: left;
  background: var(--window); border: none; padding: 3px 8px;
}
.mail-row.active { background: var(--select); color: var(--select-text); }
.mr-from { flex: none; width: 192px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-subj { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-read { flex: 1; overflow: auto; padding: 14px; background: var(--face); }
.email-mock { max-width: 480px; margin: 0 auto; background: var(--window); padding: 22px; text-align: center; box-shadow: var(--field); }
.em-brand { letter-spacing: 2px; color: var(--shadow); margin-bottom: 12px; }
.em-hero { font-size: 19px; font-weight: bold; margin-bottom: 10px; }
.email-mock p { line-height: 1.7; margin-bottom: 14px; }
.em-cta { display: inline-block; background: var(--redwood); color: #fff; padding: 7px 18px; font-weight: bold; margin-bottom: 14px; }
.em-foot { color: var(--shadow); line-height: 1.6; padding-top: 10px; box-shadow: inset 0 1px var(--light); }

/* ============ Recycle bin ============ */
.file-list { background: var(--window); box-shadow: var(--field); padding: 2px; }
.file-row { display: flex; gap: 6px; padding: 3px 6px; }
.file-row:hover { background: var(--select); color: var(--select-text); }

/* ============ Woody (tooltip balloon) ============ */
#woody {
  position: absolute; right: 24px; bottom: calc(var(--taskbar-h) + 14px);
  z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.woody-bubble {
  background: var(--tooltip); border: 1px solid var(--window-text);
  padding: 10px 12px; max-width: 283px; line-height: 1.6; position: relative;
}
.woody-bubble::after {
  content: ""; position: absolute; bottom: -7px; right: 22px;
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 7px solid var(--window-text);
}
.woody-actions { display: flex; gap: 6px; margin-top: 10px; }
.woody-actions .xp-btn { min-width: 0; height: 21px; padding: 0 8px; }
.woody-tree { width: 32px; height: 32px; margin-right: 14px; animation: bob 2.6s steps(2, end) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ============ Dialogs ============ */
.xp-dialog { width: 408px; z-index: 3000; }
.xp-dialog .win-body { background: var(--face); box-shadow: none; padding: 0; }
.dlg-body { display: flex; gap: 14px; align-items: flex-start; padding: 16px 14px 12px; }
.dlg-icon { width: 32px; height: 32px; flex: none; }
.dlg-text { line-height: 1.7; }
.dlg-actions { display: flex; justify-content: center; gap: 6px; padding: 4px 12px 14px; }

/* ============ Start menu ============ */
#startmenu {
  position: absolute; left: 2px; bottom: var(--taskbar-h); z-index: 2000;
  width: 320px; padding: 3px;
  background: var(--face);
  box-shadow: var(--frame);
  display: flex;
}
.sm-banner {
  flex: none; width: 25px;
  background: #808080;
  position: relative;
}
.sm-banner span {
  position: absolute; left: 0; right: 0; bottom: 6px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; text-align: left;
  color: #c0c0c0; font-size: 19px; font-weight: bold;
  letter-spacing: 0;
}
.sm-banner b { color: #fff; }
.sm-items { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sm-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; text-align: left;
  padding: 6px 22px 6px 8px; color: var(--window-text); text-decoration: none;
}
.sm-item img { width: 32px; height: 32px; flex: none; }
.sm-item > span { flex: 1; min-width: 0; }
.sm-item:hover { background: var(--select); color: var(--select-text); }
.sm-item.strong { font-weight: bold; }
.sm-sep { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--hilight); }

/* ============ Taskbar ============ */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar-h);
  z-index: 2500; display: flex; align-items: center; gap: 3px;
  padding: 2px;
  background: var(--face);
  box-shadow: inset 0 1px var(--hilight), inset 0 2px var(--face);
}
#startbtn {
  flex: none; height: 27px; display: flex; align-items: center; gap: 5px;
  padding: 0 8px 0 4px; border: none;
  background: var(--face);
  box-shadow: var(--out);
  font-weight: bold;
}
#startbtn.pressed, #startbtn:active { box-shadow: var(--in); padding: 1px 5px 0 4px; }
.start-flag { width: 16px; height: 16px; display: block; }
#tasktabs { flex: 1; display: flex; gap: 3px; height: 27px; overflow: hidden; }
.task-tab {
  flex: 0 1 185px; min-width: 0; display: flex; align-items: center; gap: 6px;
  border: none; padding: 0 6px;
  background: var(--face);
  box-shadow: var(--out);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.task-tab img { width: 16px; height: 16px; flex: none; }
.task-tab span { overflow: hidden; text-overflow: ellipsis; }
.task-tab.active {
  font-weight: bold;
  box-shadow: var(--in);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect width="2" height="2" fill="%23dfdfdf"/><rect width="1" height="1" fill="%23ffffff"/><rect x="1" y="1" width="1" height="1" fill="%23ffffff"/></svg>');
  padding: 1px 5px 0 7px;
}
#tray {
  flex: none; height: 27px; display: flex; align-items: center; gap: 9px;
  padding: 0 8px;
  box-shadow: var(--status);
}

/* ============ Mobile ============ */
@media (max-width: 768px) {
  #icons { flex-direction: row; flex-wrap: wrap; gap: 2px; left: 4px; right: 4px; top: 6px; }
  .dicon { width: 78px; }
  .dicon img { width: 42px; height: 42px; }
  .dicon-label { font-size: 11px; }
  /* Windows float above the wallpaper rather than covering it, the desktop
     is the whole point, so let it show. Maximize is available if wanted. */
  .xp-window:not(.xp-dialog) {
    left: 3vw !important;
    top: auto !important;
    bottom: calc(var(--taskbar-h) + 10px);
    width: 94vw !important;
    height: auto !important;
    max-width: none;
    max-height: calc(100vh - var(--taskbar-h) - 168px);
  }
  .xp-window.maximized {
    left: 0 !important; top: 0 !important; bottom: auto;
    width: 100vw !important; height: calc(100vh - var(--taskbar-h)) !important;
    max-height: none;
  }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard { flex-direction: column; }
  .wiz-side { width: auto; flex-direction: row; padding: 8px; }
  .wiz-side-label br { display: none; }
  .mail-folders { display: none; }
  .mr-from { width: 104px; }
  #startmenu { width: min(264px, calc(100vw - 4px)); }
  #woody { right: 8px; }
  .xp-dialog { width: min(340px, calc(100vw - 16px)); }
}

/* =========================================================================
   MEME LAYER
   The OS chrome above stays period-accurate. Everything below is the
   loud 90s-web layer that sits on top of it: chunky outlined display type,
   desktop stickers, blink badges, screensaver and BSOD.
   ========================================================================= */

.display {
  font-family: "Silkscreen", "MS Sans Serif", monospace;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow:
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    7px 7px 0 rgba(0,0,0,.45);
}

/* Desktop wordmark */
#wordmark {
  position: absolute; z-index: 2; top: 4vh; left: 50%;
  transform: translateX(-50%);
  text-align: center; pointer-events: none; user-select: none;
  width: max-content; max-width: 96vw;
}
#wordmark .wm-main { font-size: clamp(38px, 7.2vw, 104px); letter-spacing: 2px; }
#wordmark .wm-sub {
  margin-top: 14px; font-size: clamp(9px, 1.35vw, 18px); letter-spacing: 1px;
  color: #ffff00;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
               -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000;
}

/* Floating desktop stickers */
.sticker {
  position: absolute; z-index: 2;
  width: 64px; height: 64px;
  pointer-events: none; user-select: none;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.45));
  animation: bob 3.4s steps(3, end) infinite;
}
.sticker.s2 { width: 48px; height: 48px; animation-duration: 4.2s; }
.sticker.s3 { width: 80px; height: 80px; animation-duration: 5s; }
.sticker.spin { animation: bob 3.8s steps(3, end) infinite, tilt 6s steps(4, end) infinite; }
@keyframes tilt { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }

/* Blinking 90s badges */
.blink { animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.badge-new {
  font-family: "Silkscreen", monospace; font-size: 11px;
  background: #ff0000; color: #ffff00; padding: 2px 4px; margin-left: 6px;
  vertical-align: middle;
}
.badge-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.badge-plate {
  font-family: "Silkscreen", monospace; font-size: 10px; line-height: 1.5;
  padding: 4px 6px; text-align: center;
  background: #000; color: #00ff00; border: 1px solid #808080;
}
.badge-plate.alt { background: #000080; color: #ffff00; }
.badge-plate.warn { background: #ffff00; color: #000; border-color: #000; }

/* Hit counter, one digit per cell, like every 1996 homepage */
.counter { display: inline-flex; gap: 1px; vertical-align: middle; }
.counter i {
  font-family: "Silkscreen", monospace; font-style: normal; font-size: 14px;
  background: #000; color: #00ff00; padding: 2px 3px; min-width: 12px; text-align: center;
}

/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; box-shadow: var(--field); background: #000080; padding: 3px 0; }
.marquee > span {
  display: inline-block; padding-left: 100%;
  color: #ffff00; font-family: "Silkscreen", monospace; font-size: 12px;
  animation: scroll-left 18s linear infinite;
}
@keyframes scroll-left { to { transform: translateX(-100%); } }


/* Context menu */
#ctxmenu {
  position: absolute; z-index: 4000; min-width: 168px;
  padding: 2px; background: var(--face); box-shadow: var(--out);
}
#ctxmenu button {
  display: flex; justify-content: space-between; gap: 18px; width: 100%;
  padding: 4px 18px 4px 22px; background: none; border: none; text-align: left;
}
#ctxmenu button:hover { background: var(--select); color: var(--select-text); }
#ctxmenu button[disabled] { color: var(--shadow); text-shadow: 1px 1px 0 var(--hilight); }
#ctxmenu button[disabled]:hover { background: none; color: var(--shadow); }
#ctxmenu .sep { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--hilight); }

/* Notepad */
.notepad {
  background: var(--window); box-shadow: var(--field);
  padding: 8px 10px; white-space: pre-wrap;
  font-family: "Courier New", monospace; font-size: 14px; line-height: 1.45;
}

/* Screensaver, Flying Windows homage */
#screensaver { position: fixed; inset: 0; z-index: 8000; background: #000; cursor: none;
  opacity: 0; transition: opacity .5s linear; }
#screensaver.on { opacity: 1; }
#ss-canvas { position: absolute; inset: 0; display: block; image-rendering: pixelated; }
#ss-brand {
  position: absolute; left: 0; right: 0; bottom: 58px; text-align: center;
  opacity: .5; pointer-events: none;
}
#ss-brand img { image-rendering: pixelated; filter: grayscale(1) brightness(2.4); }
#ss-hint {
  position: absolute; bottom: 28px; left: 0; right: 0; text-align: center;
  color: #4a4a4a; font-size: 11px;
}

/* Blue screen of death */
#bsod {
  position: fixed; inset: 0; z-index: 9000;
  background: #0000aa; color: #c0c0c0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: pointer;
}
#bsod .bsod-inner { max-width: 620px; font-family: "Courier New", monospace; font-size: 14px; line-height: 1.6; }
#bsod h2 { background: #c0c0c0; color: #0000aa; display: inline-block; padding: 0 10px; margin-bottom: 22px; font-size: 14px; }
#bsod .cursor { animation: blink 1.1s steps(1, end) infinite; }

/* Shut-down screen */
#shutdown {
  position: fixed; inset: 0; z-index: 9500;
  background: #000; color: #ff9900;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; cursor: pointer;
}
#shutdown .sd-inner { font-size: clamp(16px, 3vw, 30px); line-height: 1.6; font-weight: bold; }
#shutdown small { display: block; margin-top: 26px; font-size: 11px; color: #806030; font-weight: normal; }

@media (max-width: 768px) {
  #wordmark { top: auto; bottom: calc(var(--taskbar-h) + 8px); }
  .sticker { display: none; }
}

/* ============ Apply wizard (stepped, CRO) ============ */
.ap-step h2 { font-size: 16px; font-weight: bold; margin-bottom: 8px; line-height: 1.4; }
.ap-help { line-height: 1.7; color: #000; margin-bottom: 14px; }
.ap-fine { margin-top: 12px; color: var(--shadow); line-height: 1.6; }
.xp-field.big { padding: 8px 7px; font-size: 16px; }
.ap-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 6px; margin-bottom: 3px; cursor: default;
}
.ap-opt:hover { background: var(--light); }
.ap-opt input { margin: 0; }
.ap-error { margin-top: 12px; color: #800000; font-weight: bold; }
.ap-meter {
  width: 100px; height: 17px; margin-top: 16px; padding: 2px;
  background: var(--face); box-shadow: var(--field);
}
.ap-meter i { display: block; height: 100%; background: #000080;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="1"><rect width="5" height="1" fill="%23000080"/><rect x="5" width="1" height="1" fill="%23c0c0c0"/></svg>');
  transition: width .25s steps(4, end); }
.ap-meter-label { margin-top: 6px; font-size: 12px; color: #c0c0c0; font-weight: normal; }
.ap-send { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }

/* ============ About box ============ */
.about-grid { display: flex; gap: 16px; align-items: flex-start; line-height: 1.7; }
.about-grid img { flex: none; }
.dim { color: var(--shadow); }
.spec { border-collapse: collapse; line-height: 1.9; }
.spec td { padding-right: 14px; vertical-align: top; }
.spec td:first-child { color: var(--shadow); white-space: nowrap; }

.hit { margin-left: auto; color: var(--shadow); display: flex; align-items: center; gap: 5px; }
.ss-fly { position: absolute; }
.boot-status { margin-top: 16px; font-size: 11px; color: #00ffff; min-height: 14px; }

/* ============ Win95 tooltips ============ */
#tip {
  position: absolute; z-index: 6000;
  background: var(--tooltip); color: var(--window-text);
  border: 1px solid var(--window-text);
  padding: 2px 4px; pointer-events: none; white-space: nowrap;
}

/* ============ Boot splash ============ */
.boot-grove { display: block; margin: 0 auto 14px; }

/* ============ Property sheet / drive ============ */
.proptabs { display: flex; gap: 2px; margin-bottom: -1px; position: relative; z-index: 1; }
.proptabs span {
  padding: 4px 12px 5px; background: var(--face);
  box-shadow: inset 1px 1px var(--hilight), inset -1px -1px var(--shadow);
}
.proptabs span.active { padding-bottom: 7px; margin-bottom: -2px; font-weight: bold; }
.propsheet { padding: 14px; background: var(--face); box-shadow: var(--out); }
.drive-head { display: flex; gap: 12px; align-items: flex-start; }
.drive-head img { flex: none; }
.drive-head > div { flex: 1; min-width: 0; }
.spec2 { display: flex; gap: 8px; margin-top: 7px; }
.spec2 span { width: 78px; color: var(--shadow); flex: none; }
.etch { height: 2px; margin: 12px 0; box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--hilight); }
.drive-body { display: flex; gap: 14px; align-items: center; }
.drive-legend { flex: 1; min-width: 0; }
.drive-legend > div { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.drive-legend .v { margin-left: auto; }
.drive-legend .p { width: 34px; text-align: right; color: var(--shadow); }
.sw { width: 13px; height: 13px; flex: none; box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilight); }
.sw.used { background: #ff00ff; }
.sw.free { background: #0000ff; }
.pie {
  flex: none; width: 92px; height: 92px; border-radius: 50%;
  background: conic-gradient(#ff00ff 0deg 10.8deg, #0000ff 10.8deg 360deg);
  box-shadow: 0 3px 0 #000060;
}
.drive-cap { line-height: 1.7; }

/* ============ Victory cascade ============ */
#cascade { position: fixed; inset: 0; z-index: 7000; pointer-events: none; overflow: hidden; }
#cascade img { position: absolute; width: 32px; height: 32px; }

/* ============ Resize grip ============ */
.grip {
  position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px;
  cursor: nwse-resize; z-index: 5;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><g fill="%23ffffff"><rect x="9" y="1" width="2" height="2"/><rect x="5" y="5" width="2" height="2"/><rect x="9" y="5" width="2" height="2"/><rect x="1" y="9" width="2" height="2"/><rect x="5" y="9" width="2" height="2"/><rect x="9" y="9" width="2" height="2"/></g><g fill="%23808080"><rect x="10" y="2" width="1" height="1"/><rect x="6" y="6" width="1" height="1"/><rect x="10" y="6" width="1" height="1"/><rect x="2" y="10" width="1" height="1"/><rect x="6" y="10" width="1" height="1"/><rect x="10" y="10" width="1" height="1"/></g></svg>') no-repeat right bottom;
}
.xp-window.maximized .grip, .xp-dialog .grip { display: none; }
@media (max-width: 768px) { .grip { display: none; } }

/* dragged desktop icons become absolutely placed */
#icons.placed { display: block; }
#icons.placed .dicon { position: absolute; }

/* -------------------------------------------------------------------------
   Scattered desktop, icons sit where somebody dropped them, not in a
   tidy column. Two loose columns, staggered rows, a few nudged offsets.
   Rows scale with viewport height but never crowd (min gap clears a label).
   ------------------------------------------------------------------------- */
@media (min-width: 769px) {
  #icons {
    display: block;
    inset: 10px 10px calc(var(--taskbar-h) + 10px) 10px;
    max-height: none;
    pointer-events: none;             /* keep desktop clicks/marquee alive */
    --row: clamp(90px, 11.5vh, 118px);
  }
  #icons .dicon { position: absolute; pointer-events: auto; }
  #icons .dicon:nth-child(1) { left:   6px; top: calc(4px + 0    * var(--row)); }
  #icons .dicon:nth-child(2) { left: 130px; top: calc(4px + 0.42 * var(--row)); }
  #icons .dicon:nth-child(3) { left:  20px; top: calc(4px + 1.05 * var(--row)); }
  #icons .dicon:nth-child(4) { left: 142px; top: calc(4px + 1.5  * var(--row)); }
  #icons .dicon:nth-child(5) { left:   2px; top: calc(4px + 2.1  * var(--row)); }
  #icons .dicon:nth-child(6) { left: 126px; top: calc(4px + 2.58 * var(--row)); }
  #icons .dicon:nth-child(7) { left:  24px; top: calc(4px + 3.15 * var(--row)); }
  #icons .dicon:nth-child(8) { left: 150px; top: calc(4px + 3.66 * var(--row)); }
}

/* =========================================================================
   Banner plane, tows the client logos across the Bliss sky.
   Sits above the wallpaper but under the icons and windows, so it flies
   behind everything on the desktop. Never eats a pointer event.
   ========================================================================= */
#plane-sprite-defs { position: absolute; }
.skyplane {
  position: absolute; left: 0; z-index: 2;
  width: 100%; pointer-events: none;
  animation: plane-bob 7s ease-in-out infinite;
}
.plane-rig {
  display: inline-flex; align-items: center; white-space: nowrap;
  will-change: transform;
}
.plane.flipped { transform: scaleX(-1); }

/* west to east, up high. 60s across, then a 5s beat before the next lap. */
.plane-a      { top: clamp(16px, 4vh, 48px); }   /* clears the hero window */
.plane-a .plane-rig {
  transform: translateX(-100%);
  animation: plane-fly-e 65s linear infinite;
}
/* east to west, lower down. Enters a few seconds after the first plane so
   you actually watch it come in off the right edge. */
.plane-b      { top: 27vh; animation-duration: 6.2s; animation-delay: -2s; }
.plane-b .plane-rig {
  transform: translateX(100vw);
  animation: plane-fly-w 71s linear infinite;
  animation-delay: 4s;
}
/* the last slice of each cycle is the 5s beat with the sky empty */
@keyframes plane-fly-e {
  0%    { transform: translateX(-100%); }
  92.3% { transform: translateX(100vw); }
  100%  { transform: translateX(100vw); }
}
@keyframes plane-fly-w {
  0%    { transform: translateX(100vw); }
  93%   { transform: translateX(-100%); }
  100%  { transform: translateX(-100%); }
}
@keyframes plane-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* the cloth. Sways from the tow point, so the far end moves most, and
   ripples through an animated turbulence filter so it reads as fabric. */
.tow-banner {
  transform-origin: right center;
  animation: plane-sway 5.5s ease-in-out infinite;
  filter: url(#cloth-wave);
}
.plane-b .tow-banner {
  transform-origin: left center;
  filter: url(#cloth-wave-b);
}
@keyframes plane-sway {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1deg); }
}
.tow-strip {
  display: flex; align-items: center; gap: 22px;
  height: 48px; padding: 0 18px;
  background: #fffdf2;
  border-top: 3px solid var(--redwood);
  border-bottom: 3px solid var(--redwood);
  box-shadow: 0 2px 0 rgba(0,0,0,.22);
}
.tow-cap {
  font-size: 11px; font-weight: bold; letter-spacing: .5px;
  color: var(--redwood); line-height: 12px; text-align: center;
  white-space: pre-line;
}
.tow-strip .tl { display: block; height: 26px; width: auto; max-width: 132px; }
.tow-strip .tl-wide  { height: 19px; }
.tow-strip .tl-xwide { height: 19px; max-width: 200px; }  /* ~10:1 wordmarks */
.tow-strip .tl-tall  { height: 32px; }
.tow-strip .tl-stack { height: 38px; }

/* tow rope from the banner's leading edge back to the tail wheel */
.tow-rope {
  width: 30px; height: 2px; margin-bottom: 10px;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,.55) 0 3px, rgba(0,0,0,0) 3px 5px);
}
.plane { display: block; flex: none; }

@media (max-width: 900px) {
  .plane-a { top: 14px; }
  .plane-b { top: 22vh; }
  .tow-strip { height: 34px; gap: 14px; padding: 0 12px; }
  .tow-strip .tl { height: 18px; max-width: 92px; }
  .tow-strip .tl-wide  { height: 13px; }
  .tow-strip .tl-tall  { height: 22px; }
  .tow-strip .tl-stack { height: 26px; }
  .tow-cap { font-size: 9px; line-height: 10px; }
  .plane { width: 72px; height: 38px; }
  .tow-banner, .plane-b .tow-banner { filter: url(#cloth-wave-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .skyplane { display: none; }
}

/* =========================================================================
   Redwood.exe hero, rebuilt to the supplied mockup
   ========================================================================= */
.hero-body { padding: 16px 18px; }
.hero-top { display: flex; gap: 20px; align-items: flex-start; }
.hero-copy { flex: 1; min-width: 0; }
.hero-art { flex: none; width: 150px; height: 150px; margin-top: -4px; image-rendering: pixelated; }

.hero-brand {
  font-family: "Silkscreen", "MS Sans Serif", monospace;
  font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--redwood); letter-spacing: 1px;
}
.hero-tm { font-size: 11px; vertical-align: super; letter-spacing: 0; }
.hero-body h1 { font-size: 20px; line-height: 1.35; margin: 14px 0 12px; font-weight: bold; }
.hero-sub { font-size: 11px; line-height: 1.85; margin: 0; }
.hero-sub b { color: var(--redwood); }
.hero-fine { font-size: 11px; line-height: 1.85; margin: 4px 0 0; color: var(--shadow); }

/* group box with the inset navy legend, as in the mockup */
.weapons {
  border: none; margin: 20px 0 12px; padding: 14px 4px 10px;
  box-shadow: inset  1px  1px var(--shadow), inset -1px -1px var(--hilight),
              inset  2px  2px var(--hilight), inset -2px -2px var(--shadow);
}
.weapons legend {
  background: var(--select); color: #fff;
  font-family: "Silkscreen", "MS Sans Serif", monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 4px 9px; margin-left: 6px;
}
.hero-body .feat-grid { grid-template-columns: repeat(4, 1fr); gap: 0; margin: 4px 0 0; }
.hero-body .feat { border-right: 1px dotted var(--shadow); padding: 6px 4px 2px; gap: 10px; }
.hero-body .feat:last-child { border-right: none; }
.hero-body .feat-label { font-size: 13px; }

.hero-body .marquee { padding: 5px 0; margin-bottom: 14px; }
.hero-body .marquee > span { font-size: 12px; letter-spacing: 1px; }

.xp-btn.big { height: 36px; min-width: 138px; font-size: 15px; }
.hero-ctas { gap: 10px; margin-top: 0; }

.hero-badges {
  flex: none; display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 2px 1px;
}
.hero-badges img { height: 40px; width: auto; display: block; image-rendering: pixelated; }
.hit { margin-left: auto; display: flex; align-items: center; gap: 9px; color: var(--window-text); }
.hero-badges .counter i { font-size: 18px; padding: 3px 4px; min-width: 16px; }
@media (max-width: 768px) {
  .hero-top { flex-direction: column; }
  .hero-art { align-self: center; }
  .hero-body .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-body .feat:nth-child(2) { border-right: none; }
  .hero-badges { flex-wrap: wrap; }
  .hit { margin-left: 0; }
}

/* =========================================================================
   Redwood.exe hero, second mockup pass
   ========================================================================= */
.hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.hero-head .hero-brand { font-size: 40px; letter-spacing: 2px; }
.hero-badge {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border: 1px solid #a8a8a8; background: var(--window);
  font-family: "Silkscreen", "MS Sans Serif", monospace;
  font-size: 10px; line-height: 1.7; letter-spacing: .5px;
}
.hero-badge img { flex: none; }
.hero-rule { height: 1px; margin: 14px 0; border-top: 1px dashed #b4b4b4; }

.hero-body h1 { font-size: 22px; line-height: 1.4; margin: 2px 0 12px; }
.hero-art { flex: none; margin-top: -6px; image-rendering: pixelated; }

.weapons-label {
  font-family: "Silkscreen", "MS Sans Serif", monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--select); margin: 4px 0 10px;
}
.weapons-box { border: 1px dashed #b0b0b0; padding: 14px 4px 12px; }
.weapons-box .feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; }
.weapons-box .feat { border-right: 1px dashed #c4c4c4; padding: 2px 6px; gap: 12px; }
.weapons-box .feat:last-child { border-right: none; }
.weapons-box .feat-label { font-size: 11px; font-weight: bold; line-height: 1.5; }

.hero-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 16px; }
.xp-btn.cta {
  height: 40px; min-width: 168px; padding: 0 18px;
  background: var(--redwood); color: #fff;
  font-size: 22px; font-weight: bold;
  box-shadow: inset -1px -1px #3f0d08, inset 1px 1px #c98d84,
              inset -2px -2px #5e1610, inset 2px 2px #a85c50;
}
.xp-btn.cta:active { box-shadow: inset 1px 1px #3f0d08, inset -1px -1px #c98d84; padding: 1px 17px 0 19px; }
.hero-actions .xp-btn.big { height: 40px; min-width: 150px; font-size: 16px; }
.partner-banner {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: var(--select); color: #ffd200;
  font-family: "Silkscreen", "MS Sans Serif", monospace;
  font-size: 8px; letter-spacing: .3px; text-align: center;
  padding: 0 5px; overflow: hidden; white-space: nowrap;
}

/* ============ Assistant as a small window ============ */
#woody {
  position: absolute; right: 22px; bottom: calc(var(--taskbar-h) + 16px);
  z-index: 500; width: 292px; display: block;
  padding: 3px; background: var(--face); box-shadow: var(--frame);
}
#woody .titlebar { height: 22px; }
.woody-bubble {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--face); border: none; padding: 12px 12px 6px;
  max-width: none; line-height: 1.65;
}
.woody-bubble::after { display: none; }
.woody-bubble img { flex: none; }
.woody-text { flex: 1; min-width: 0; }
#woody .woody-actions { display: flex; gap: 7px; justify-content: flex-end; padding: 4px 12px 12px; margin: 0; }
#woody .woody-actions .xp-btn { min-width: 0; height: 26px; padding: 0 12px; }

@media (max-width: 768px) {
  .hero-head { flex-direction: column; gap: 10px; }
  .hero-body { padding: 12px 13px; }
  .hero-wordmark { width: 232px; }
  .hero-badge-img { width: 138px; }
  .hero-body h1 { font-size: 16px; line-height: 1.4; margin: 2px 0 9px; }
  .hero-body h1 br { display: none; }
  .hero-art { width: 84px; height: 84px; align-self: center; }
  .hero-rule { margin: 10px 0; }
  .weapons-box { padding: 10px 2px 8px; }
  .weapons-box .feat img { width: 44px; height: 44px; }
  .hero-actions { flex-wrap: wrap; }
  .xp-btn.cta { font-size: 17px; height: 34px; min-width: 128px; }
  .hero-actions .xp-btn.big { height: 34px; min-width: 118px; font-size: 13px; }
  .hero-badges { gap: 5px; }
  .hero-badges img { height: 30px; }
  .badge-sep { display: none; }
  .partner-banner { flex-basis: 100%; padding: 8px 10px; white-space: normal; }
  .weapons-box .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .weapons-box .feat:nth-child(2) { border-right: none; }
  #woody { width: min(292px, calc(100vw - 16px)); right: 8px; }
}
.file-row.empty { color: var(--shadow); font-style: italic; padding: 10px; }

/* wordmark and strapline are supplied artwork, not type */
.hero-wordmark { display: block; width: 316px; height: auto; image-rendering: pixelated; }
.hero-badge-img { flex: none; display: block; width: 160px; height: auto; image-rendering: pixelated; align-self: flex-start; margin-top: 2px; }
.hero-head { align-items: flex-start; }

.badge-sep { width: 2px; align-self: stretch; margin: 2px 6px 2px 10px;
  box-shadow: inset -1px 0 var(--hilight), inset 1px 0 var(--shadow); }
#tray-vol { display: block; image-rendering: pixelated; }

/* ============ Respect reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .blink, .woody-tree, .sticker { animation: none !important; }
  .marquee > span { animation: none !important; padding-left: 0 !important; }
  #ss-logo, .ss-fly { display: none !important; }
}

/* ============ Motion: wireframe zoom + rubber band ============ */
.zoomrect {
  position: absolute; left: 0; top: 0; z-index: 7500;
  pointer-events: none; will-change: transform, width, height;
  border: 2px dotted #ffffff; mix-blend-mode: difference;
}
.xp-window.opening { animation: winpop .12s steps(2, end); }
@keyframes winpop { from { opacity: .35; } to { opacity: 1; } }

#rubber {
  position: absolute; z-index: 4; pointer-events: none;
  border: 1px dashed #ffffff; mix-blend-mode: difference;
  animation: ants .5s linear infinite;
}
@keyframes ants { to { background-position: 8px 0; } }

/* Flash-era flourishes */
.xp-btn.cta { transition: transform .08s steps(2, end); }
.xp-btn.cta:hover { transform: translateY(-2px); }
.feat img { transition: transform .12s steps(3, end); }
.feat:hover img { transform: translateY(-4px) scale(1.06); }
.dicon img { transition: transform .1s steps(2, end); }
.dicon:hover img { transform: scale(1.08); }
.boot-pct { margin-top: 6px; font-size: 11px; color: #8080c0; }

/* Images must never start a native drag, it fights the pointer handlers
   used for moving icons and windows. */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
.dicon, .titlebar, #taskbar, #startmenu, .menubar, #icons {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.dicon { touch-action: none; }

@media (max-width: 768px) {
  /* The assistant covered the window's CTA on a phone; there isn't room for
     both, and the CTA wins. */
  #woody { display: none !important; }
}