.stage {
  position: relative;
  width: 100%;
  max-width: 1925px;
  margin: 0 auto;
  aspect-ratio: 1925 / 2800;
  overflow: hidden;
  font-size: clamp(9px, 1.06vw, 20.4px);
  container-type: size;
  background-image: url('../img/sky-planet-master.webp');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}
.cap.c2 { left: 15%; top: 23%; width: 20%; }
.cap.c6 { left: 63%; top: 98%; width: 40%; }
.o-cursortrail { left: 20%; top: 4%; width: 5%; aspect-ratio: 1/1; z-index: 99; pointer-events: none; }
.faq-wrap    { left: 8%;   top: 10%;  width: 45%; }
.faq-plan    { left: 50%;   top: 8.5%;  width: 45%; }
.faq-morning { left: 30.13%; top: 3%;  width: 45%; }
.note-copy {
  position: absolute; left: 27%; top: 33%; width: 45%;
  color:  #000080; font-family: 'Reenie Beanie', cursive;
  font-size: 2.2em; line-height: 1.35;
  text-align: right;
}
.o-note { left: 56%; top: 14%; width: 50%; aspect-ratio: 743/1074; z-index: 0; }
.o-star2, .o-star1 { --star-x: 15cqw; --star-y: 35cqh; translate: var(--star-x) var(--star-y); }
.o-star2       { left: 56%; top: 27%; }
.o-star1       { left: 54%; top: 26%; }
.paint-win   { left: 3%; top: 25%; width: 60%; z-index: 24; }
.o-mouse     { left: 60%; top: 45%; width: 50%;}
.o-mouse img { rotate: -5deg;}
.o-sticky   { left: 18%; top: 82%; width: 25%; aspect-ratio: 349/344; z-index: 90; }
.o-sticky2  { left: 2%; top: 73%; width: 25%; aspect-ratio: 349/344; z-index: 90; }
.o-sticky > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.o-sticky .sticky-copy {
  position: absolute; left: 12%; top: 16%; right: 12%; bottom: 12%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Reenie Beanie', cursive; color: #1c2233;
  font-size: 2.8em; line-height: 1.5; transform: rotate(12deg);
}
.o-sticky2 .sticky-copy {
  position: absolute; left: 12%; top: 16%; right: 12%; bottom: 12%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Reenie Beanie', cursive; color: #1c2233;
  font-size: 2.8em; line-height: 1.5; transform: rotate(12deg);
}

/* FAQ sticky hover-flip: question at rest, answer on hover/keyboard focus; JS toggles .is-flipped on tap (touch) */
.o-sticky, .o-sticky2 { cursor: help; }
.o-sticky .sticky-copy, .o-sticky2 .sticky-copy { display: grid; place-items: center; }
.sticky-copy .q, .sticky-copy .a { grid-area: 1 / 1; transition: opacity 0.25s ease; }
.sticky-copy .a { opacity: 0; font-size: 0.8em; line-height: 1.45; }
.o-sticky:hover .q,  .o-sticky:focus-visible .q,  .o-sticky.is-flipped .q,
.o-sticky2:hover .q, .o-sticky2:focus-visible .q, .o-sticky2.is-flipped .q { opacity: 0; }
.o-sticky:hover .a,  .o-sticky:focus-visible .a,  .o-sticky.is-flipped .a,
.o-sticky2:hover .a, .o-sticky2:focus-visible .a, .o-sticky2.is-flipped .a { opacity: 1; }
/* hovered/flipped sticky comes to front of its pair (base z:90; stays under nav z:100) */
.o-sticky:hover,  .o-sticky:focus-visible,  .o-sticky.is-flipped,
.o-sticky2:hover, .o-sticky2:focus-visible, .o-sticky2.is-flipped { z-index: 95; }

.bsod        { left: 46%; top: 75%; width: 50%; z-index: 0; }
.bsod .body { font-size: 1.4em; line-height: 1.28; margin-top: 5%;} /* unified with homepage bsod 2026-07-11 */
/* ============================================================
   PAINT-WINDOW CONTENT — win95 containers (loopstack)
   2026-07-11 treatment (Lucky's pick off the candidates round at
   _outputs/paint-window-candidates-2026-07-11/): white window
   bodies, navy titlebars, yellow labels/highlights, handwriting
   annotations — less terminal, more win95. Gray panels + black
   terminals retired. Styles the scrollable .paint-content only.
   ============================================================ */

/* Section eyebrow — yellow block label */
.va-eyebrow {
  display: inline-block;
  font-family: 'W95FA', monospace;
  font-size: 1.2em; letter-spacing: .06em;
  background: #ffd23f; color: #1a1a1a;
  padding: 0.1em 0.1em; margin-bottom: 0.6em;
}

/* Section rhythm — space between the stacked containers */
.va-sec { margin: 0 0 2.2em; }
.va-sec h1, .va-sec .va-page-title { font-size: 3.8em; line-height: 0.95; margin: 0.1em 0 0.3em; font-weight: 400; }
.va-sec h2 { font-size: 2.2em; line-height: 1.1; margin: 0 0 0.5em; font-weight: 400; }
.va-hero p, .va-sec > p { font-size: 1.3em; line-height: 1.4; margin: 0 0 0.7em; }

/* handwriting annotations — Reenie Beanie relief between the mono blocks */
.va-anno {
  display: block; width: fit-content;
  font-family: 'Reenie Beanie', cursive; color: #000080;
  font-size: 2em; line-height: 1.15; rotate: -2deg;
  pointer-events: none; margin-top: 0.3em;
}
.va-anno.right { margin-left: auto; rotate: 2deg; }
.va-squig { text-decoration: underline wavy #000080 2px; text-underline-offset: 0.2em; }

/* Win95 CTA button — yellow bevel (hero CTA + final CTA + dialog OK) */
.va-btn {
  display: inline-block;
  font-family: 'W95FA', monospace; font-size: 1.2em; letter-spacing: .02em;
  color: #000; text-decoration: none;
  background: #bfbfbf; border: 1px solid #000;
  box-shadow: inset 2px 2px 0 #d4d4d4, inset -2px -2px 0 #a2a2a2;
  padding: 0.5em 1.1em; margin: 0.3em 0 0.9em; cursor: pointer;
}
.va-btn:active { box-shadow: inset -2px -2px 0 #d4d4d4, inset 2px 2px 0 #a2a2a2; }

/* shared window chrome — navy titlebar on a white body */
.va-win {
  background: #fff; border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
  font-family: 'W95FA', monospace; margin: 0.6em 0 0.7em;
}
.va-win-bar {
  display: flex; align-items: center; gap: 0.35em;
  background: linear-gradient(90deg, #000080, #0f388c); padding: 0.15em 0.3em;
}
.va-win-title { color: #fff; font-size: 0.95em; }
.va-win-btns { margin-left: auto; display: flex; gap: 2px; }
.va-win-btns .t-btn {
  width: 1.15em; height: 1em; min-width: 15px; min-height: 13px;
  background: #bfbfbf; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff;
  display: grid; place-items: center; font-size: 0.7em; color: #000; font-weight: 700;
}
.va-win-body { padding: 0.7em 0.8em; background: #fff; }

/* ---- META = SKILLS-BARS — white panel, navy fill ---- */
.va-meta {
  list-style: none; margin: 0.6em 0 0; padding: 0.7em 0.8em;
  background: #fff; border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
  font-family: 'W95FA', monospace;
}
.va-meta li { display: grid; grid-template-columns: 6.5em 1fr 2.6em; align-items: center; gap: 0.6em; margin: 0 0 0.35em; }
.va-meta li:last-child { margin-bottom: 0; }
.va-meta .va-key { font-size: 1.1em; color: #000; letter-spacing: .02em; }
.va-meta .va-val { font-size: 1.1em; color: #000; text-align: right; }
.va-bar {
  height: 0.85em;
  background:
    /* filled portion (navy squares) clipped to --fill, over an empty track */
    linear-gradient(#000080, #000080) left / var(--fill,50%) 100% no-repeat,
    #f4f4f4;
  border: 1px solid #000;
  /* segment gaps punched through the fill too */
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 0.55em, transparent 0.55em 0.7em);
  mask: repeating-linear-gradient(90deg, #000 0 0.55em, transparent 0.55em 0.7em);
}
.va-bar[data-fill="90"] { --fill: 90%; }
.va-bar[data-fill="70"] { --fill: 70%; }
.va-bar[data-fill="55"] { --fill: 55%; }
.va-bar[data-fill="40"] { --fill: 40%; }
.va-bar[data-fill="28"] { --fill: 28%; }

/* ---- THE COST = win95 dialog (replaces the black terminal) ---- */
.va-dlg .va-win-body { display: grid; grid-template-columns: 2.6em 1fr; gap: 0.7em; }
.va-dlg-ico {
  width: 2.2em; height: 2.2em; border-radius: 50%;
  background: #000080; color: #fff;
  display: grid; place-items: center; font-weight: 700;
}
.va-stats { list-style: none; margin: 0; padding: 0; }
.va-stats li { font-size: 1.02em; line-height: 1.45; margin: 0 0 0.6em; }
.va-stats li:last-child { margin-bottom: 0; }
.va-dlg .va-btnrow { grid-column: 1 / -1; display: flex; justify-content: center; }
.va-dlg .va-btnrow .va-btn { margin: 0.1em 0 0; padding: 0.3em 2em; }
.va-stat-n { color: #000080; font-weight: 700; }
.va-hl { background: #ffd23f; color: #1a1a1a; padding: 0 0.2em; }

/* ---- lists / tags ---- */
.va-list { list-style: none; margin: 0.5em 0 0; padding: 0; }
.va-list li { font-family: 'W95FA', monospace; font-size: 1.15em; line-height: 1.4; margin: 0 0 0.6em; }
/* ---- FIVE DECISIONS = checked boxes ---- */
.va-chks { list-style: none; margin: 0.5em 0 0; padding: 0; }
.va-chks li {
  display: grid; grid-template-columns: 1.6em 1fr; gap: 0.6em;
  font-family: 'W95FA', monospace; font-size: 1.15em; line-height: 1.45; margin: 0 0 0.75em;
}
.va-chk {
  width: 1em; height: 1em; margin-top: 0.5em; background: #fff;
  color: #000000; font-weight: 700; font-size: 2em;
}
.va-chks .va-k { font-weight: 700; }

/* ---- THE CATALOG = explorer tabs + listview (treatment B block) ---- */
.va-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.va-tab {
  font-family: 'W95FA', monospace; font-size: 1.1em; color: #000;
  background: #bfbfbf; border: 2px solid #000; border-bottom: none;
  padding: 0.3em 0.9em 0.35em; cursor: pointer; position: relative; top: 2px;
  box-shadow: inset 1px 1px 0 #d4d4d4;
}
.va-tab[aria-selected="true"] { background: #fff; padding-bottom: 0.55em; top: 0; z-index: 2; box-shadow: none; }
.va-tabpanel {
  border: 2px solid #000; background: #fff; position: relative; z-index: 1;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
}
.va-tabpanel[hidden] { display: none; }
.va-tabpanel ul { list-style: none; margin: 0; padding: 0; }
.va-tabpanel li {
  display: grid; grid-template-columns: 12em 1fr; align-items: baseline;
  font-family: 'W95FA', monospace; font-size: 1.15em; line-height: 1.4;
}
.va-tabpanel li:nth-child(even) { background: #fdf6e0; }
.va-tabpanel li:hover { background: #ffe98a; }
.va-lv-name { padding: 0.28em 0.6em; display: flex; gap: 0.45em; align-items: baseline; }
.va-lv-out { padding: 0.28em 0.6em 0.28em 0; }
.va-fico {
  width: 1.1em; height: 0.8em; background: #ffd23f; border: 1px solid #8a6d00;
  position: relative; align-self: center; flex: 0 0 auto;
}
.va-fico::before {
  content: ""; position: absolute; top: -0.28em; left: 0; width: 45%; height: 0.24em;
  background: inherit; border: inherit; border-bottom: none;
}

/* ---- WHAT YOU GET / DON'T = mini Notepad windows ---- */
.va-pads { display: grid; gap: 0.9em; margin-top: 0.6em; }
.va-pad {
  background: #fff; border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
  font-family: 'W95FA', monospace;
}
.va-pad-bar {
  display: flex; align-items: center; gap: 0.35em;
  background: linear-gradient(90deg, #000080, #0f388c); padding: 0.15em 0.3em;
}
.va-pad-ico { color: #dfe7ff; font-size: 0.9em; }
.va-pad-title { color: #fff; font-size: 0.95em; }
.va-pad-btns { margin-left: auto; display: flex; gap: 2px; }
.va-pad-btns .t-btn {
  width: 1.15em; height: 1em; min-width: 15px; min-height: 13px;
  background: #bfbfbf; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff;
  display: grid; place-items: center; font-size: 0.7em; color: #000; font-weight: 700;
}
.va-pad-body { padding: 0.6em 0.7em; background: #fff; }
.va-pad-body p { font-size: 1.15em; line-height: 1.4; color: #000; margin: 0 0 0.45em; }
.va-pad-body p:last-child { margin-bottom: 0; }

/* ---- WHAT'S INSIDE = light explorer tree (inside a va-win) ---- */
.va-tree p { font-size: 1.02em; line-height: 1.5; margin: 0; white-space: nowrap; overflow: hidden; }
.va-tree .va-fld { color: #000080; font-weight: 700; }
.va-tree .va-done { color: #0a6b28; font-weight: 700; }

/* ---- HOW IT WORKS = schedule table ---- */
.va-steps { list-style: none; margin: 0.5em 0 0.7em; padding: 0; counter-reset: none; }
.va-steps li { display: grid; grid-template-columns: 4.5em 1fr; gap: 0.7em; align-items: baseline; margin: 0 0 0.6em; }
.va-step-k { font-family: 'W95FA', monospace; background: #ffd23f; color: #1a1a1a; padding: 0 0.35em; font-size: 1em; align-self: start; }
.va-step-v { font-family: 'W95FA', monospace; font-size: 1.15em; line-height: 1.4; color: #000; }
.va-steps code, .va-how code {
  font-family: 'W95FA', monospace; background: #fdf6e0; border: 1px solid #c9a52f; padding: 0 0.2em; color: #000080;
}

/* ---- WHO IT'S FOR = group boxes ---- */
.va-gbox {
  border: 2px solid #000; background: #fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
  padding: 0.9em 0.8em 0.6em; margin: 1.2em 0 0.8em; position: relative;
  font-family: 'W95FA', monospace;
}
.va-gbox .va-legend {
  position: absolute; top: -0.75em; left: 0.8em; background: #fff;
  padding: 0 0.45em; font-size: 1.05em; letter-spacing: .04em; font-weight: 700;
}
.va-gbox.va-ok .va-legend { color: #0a6b28; }
.va-gbox.va-no .va-legend { color: #a11919; }
.va-gbox .va-list { margin: 0; }

/* ---- PRICING = boxed spec — white panel ---- */
.va-spec {
  list-style: none; margin: 0.5em 0 0.7em; padding: 0.7em 0.9em;
  background: #fff; border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
  font-family: 'W95FA', monospace;
}
.va-spec li { display: flex; align-items: baseline; margin: 0 0 0.35em; font-size: 1.15em; }
.va-spec li:last-child { margin-bottom: 0; }
.va-spec .va-spec-k { color: #000; }
.va-spec .va-spec-k::after {
  content: ""; flex: 1; align-self: end; border-bottom: 1px dotted #666; margin: 0 0.4em 0.3em;
}
.va-spec .va-spec-v { color: #000080; font-weight: 700; white-space: nowrap; }

/* ---- FAQ CHAT-LOG WINDOW — white message log (was green-on-black IRC) ---- */
.va-faq { margin-top: 1.6em; }
.va-chat {
  background: #fff; color: #000;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
  font-family: 'W95FA', monospace;
  margin-top: 0.5em;
}
.va-chat-bar {
  display: flex; align-items: center;
  background: linear-gradient(90deg, #000080, #0f388c);
  padding: 0.15em 0.3em;
}
.va-chat-title { color: #fff; font-size: 1em; letter-spacing: .02em; }
.va-chat-btns { margin-left: auto; display: flex; gap: 2px; }
.va-chat-btns .t-btn {
  width: 1.15em; height: 1em; min-width: 15px; min-height: 13px;
  background: #bfbfbf; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff;
  display: grid; place-items: center; font-size: 0.7em; color: #000; font-weight: 700;
}
.va-chat-log {
  padding: 0.6em 0.7em;
  font-size: 1.05em; line-height: 1.4;
}
.va-chat-log .ln { margin: 0 0 0.35em; text-indent: -3.2em; padding-left: 3.2em; }
.va-chat-log .h { font-weight: 700; }
.va-chat-log .h-you { color: #000080; }   /* your handle — navy */
.va-chat-log .h-ld  { color: #b3550e; }   /* luckyd3v handle — rust */
.va-chat-log .sys   { color: #7a7a7a; font-style: italic; text-indent: 0; padding-left: 0; margin-top: 0.6em; }
.va-chat-input {
  border-top: 1px solid #bfbfbf; padding: 0.3em 0.6em;
  font-size: 1.05em; color: #7a7a7a;
}
.va-chat-cur { color: #000080; margin-right: 0.3em; }
.va-chat-blink { animation: va-blink 1.1s steps(1) infinite; color: #000080; }

@keyframes va-blink { 50% { opacity: 0; } }

@media (max-width: 760px) {
  .stage {
    width: 100%; max-width: 760px;
    margin: 0 auto;
    aspect-ratio: 440 / 1610;
    background-size: cover; background-position: bottom;
    overflow: hidden;
    font-size: clamp(7px, 2.4vw, 10.5px);
  }
    .cap.c6 { display: none; }
  .cap.c2 { display: block; left: 5%; top: 2%; width: 68%; font-size: 1.5em; z-index: 14; }
  .o-cursortrail { left: 6%; top: 14%; width: 10%; z-index: 99; }
  .faq-wrap  { left: 5%;  top: 4%;  width: 90%; z-index: 0; }   /* Session Wrap window */
  .faq-plan, .faq-morning,
  .o-star1, .o-star2 { display: none; }
  .o-note { left: 35%; top: 13%; width: 75%; z-index: 1; }
  .o-note .note-copy { font-size: 1.6em; left: 27%; width: 48%; text-align: left; } /* unified note size, all pages 2026-07-11 */
  .paint-win { left: 5%; top: 41%; width: 90%; aspect-ratio: 799/860; z-index: 24; }
  .o-mouse { left: -10%; top: 13%; width: 75%; aspect-ratio: 1353/902; z-index: 0; }
  .o-mouse img { transform: none; rotate: 28deg; transform:scaleX(-1); }

  .o-sticky  { left: 5%; top: 25%; width: 34%; }
  .o-sticky2 { left: 16%; top: 30%; width: 34%; }
  .o-sticky .sticky-copy, .o-sticky2 .sticky-copy { font-size: 1.6em; }
  .bsod { left: 5%; top: 70%; width: 90%; aspect-ratio: 750/450; z-index: 29; }
  .bsod .body { font-size: 1.5em; line-height: 1.28; margin-top: 5%;}
  .faq-win { aspect-ratio: auto; }
  /* catalog tabs + listview at 440px — tighter labels, narrower name column */
  .va-tab { padding: 0.3em 0.5em 0.35em; font-size: 0.95em; }
  .va-tabpanel li { grid-template-columns: 9.5em 1fr; }



  /* paint-window interior text — one consistent mobile step-down; same rule on
     all 4 pages' mobile blocks (starting value, tune freely) */
  .paint-content { font-size: 1em; }
}