/* Pixel-Stefan accompanies the page. Desktop: every section keeps a gutter free for him
   (right by default, [data-mascot=left] flips it). Narrow screens: he only appears in the first
   section, which keeps space at its bottom. Pixel accents echo his dithered look. */
:root { --pixel: var(--color-ink); --mascot-gutter: 0px; }

/* Room for the figure: the container only gives up what the free page margin beside it lacks,
   so wide screens keep the full text width and he stands in the margin. */
@media (min-width: 64rem) {
  [data-mascot-page] {
    --mascot-gutter: clamp(13rem, 22vw, 19rem);
    --mascot-room: max(0px, calc(var(--mascot-gutter) - max(var(--gutter), (100% - var(--content)) / 2)));
  }
  [data-mascot-page] .container:not(.container .container) { padding-right: var(--mascot-room); }
  [data-mascot-page] [data-mascot=left] .container:not(.container .container) { padding-right: 0; padding-left: var(--mascot-room); }
}
@media (max-width: 63.999rem) {
  [data-mascot-page] > :is(section, header):first-child,
  [data-mascot-page] > div > :is(section, header):first-child { position: relative; padding-bottom: 15rem; }
}

/* Pixel seam between sections: a two-pixel checkerboard like the figure's dither */
[data-mascot-page] :is(section, header) { position: relative; }
[data-mascot-page] :is(section, header) + :is(section, header)::after,
[data-mascot-page] > div > :is(section, header):not(:first-child)::after {
  content: ""; position: absolute; inset: -3px 0 auto; height: 6px; pointer-events: none;
  background: repeating-conic-gradient(var(--pixel) 0 25%, transparent 0 50%) 0 0 / 4px 4px; opacity: .55;
}

/* Hard pixel shadows, borrowed from the speech bubble */
[data-mascot-page] .card,
[data-mascot-page] .sat-proof { box-shadow: 5px 5px 0 var(--pixel); }
[data-mascot-page] .quote-statement {
  position: relative; max-width: 42rem; padding: 1rem 1.25rem; border: 2px solid var(--pixel); border-radius: 1rem;
  background: var(--color-paper-light); box-shadow: 5px 5px 0 var(--pixel);
}

/* Homepage stage: dark like the page heroes, so the paper pixels of the figure stand out */
.web-hero--stage { background: var(--color-ink); color: var(--color-paper-light); display: flex; align-items: center; }
.web-hero--stage .container { width: min(calc(100% - (2 * var(--gutter))), var(--content)); }
.web-hero--stage .web-hero-copy { display: grid; gap: 1.4rem; max-width: 44rem; }
.web-hero--stage .web-hero-copy > * { margin: 0; }
.web-hero--stage h1 { color: var(--color-paper-light); font-size: var(--step-4); max-width: 14ch; }
.web-hero--stage .sat-kicker { color: #e9b7a3; }
.web-hero--stage .sat-intro { font-size: var(--step-1); line-height: 1.5; color: #e4e2da; }
.web-hero--stage .sat-actions a:not(.sat-button) { color: var(--color-paper-light); }
.web-hero--stage .sat-signature { font: 500 .78rem / 1.5 var(--font-label); color: #b9bdb6; }
.web-hero--stage .sat-signature span { white-space: nowrap; }

/* Hero illustration: a fictional design draft, not a reference. Stacked below the copy (button first),
   beside it from 75rem. It stays inside the container, so the figure keeps its free column. */
.web-hero-grid { display: grid; row-gap: clamp(2.25rem, 6vw, 3rem); }
.web-hero-visual { margin: 0; justify-self: center; width: min(100%, 26rem); }
.web-hero-visual img { display: block; width: 100%; height: auto; aspect-ratio: 1199 / 1065; }
.web-hero-visual figcaption { margin-top: .5rem; font: 500 .7rem / 1.4 var(--font-label); letter-spacing: .04em; color: #9ea49c; text-align: right; }
@media (max-width: 63.999rem) { .web-hero-visual { margin-bottom: 1.5rem; } }
@media (max-width: 39.999rem) { .web-hero-visual { width: min(100%, 20rem); } }
@media (min-width: 75rem) {
  .web-hero--stage { min-height: min(86svh, 46rem); }
  .web-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 3vw, 3.5rem); align-items: center; }
  body[data-brand] .sat-home .web-hero--stage h1 { font-size: clamp(3rem, 3.8vw, 4.2rem); max-width: none; }
  .web-hero-visual { width: 100%; max-width: 34rem; justify-self: end; }
}
.web-proof-stack { display: grid; gap: 2rem; }
.web-proof-stack .sat-proof { margin: 0; }

/* The companion layer */
.mascot-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.mascot-layer--contained { position: absolute; z-index: 2; }
.mascot-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.mascot-bubble { position: absolute; top: 0; left: 0; margin: 0; padding: .7rem .95rem; font: 500 .95rem / 1.4 var(--font-text); color: var(--color-ink); background: var(--color-paper-light); border: 2px solid var(--color-ink); border-radius: .9rem; box-shadow: 4px 4px 0 var(--color-ink); opacity: 0; transition: opacity .18s ease-out; }
.mascot-layer[data-talking=true] .mascot-bubble { opacity: 1; }
.mascot-layer[data-ground=dark] .mascot-bubble { border-color: var(--color-paper-light); box-shadow: none; }
.mascot-bubble::after { content: ""; position: absolute; top: calc(50% - 8px); width: 14px; height: 14px; background: inherit; border: inherit; border-width: 0 0 2px 2px; }
.mascot-bubble[data-tail=right]::after { right: -9px; transform: rotate(-135deg); }
.mascot-bubble[data-tail=left]::after { left: -9px; transform: rotate(45deg); }
.mascot-bubble[data-tail=down]::after { top: auto; bottom: -9px; left: calc(var(--tail-x, 50%) - 7px); transform: rotate(-45deg); }
.mascot-handle { position: absolute; top: 0; left: 0; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mascot-zzz { position: absolute; top: 0; left: 0; font: 700 1.3rem / 1 var(--font-label); color: var(--color-ink); opacity: 0; transition: opacity .4s; }
.mascot-layer[data-ground=dark] .mascot-zzz { color: var(--color-paper-light); }
.mascot-layer[data-asleep=true] .mascot-zzz { opacity: 1; }
.mascot-zzz span { display: inline-block; animation: mascot-z 2.6s ease-in-out infinite; }
.mascot-zzz span:nth-child(2) { animation-delay: .5s; font-size: 1.1em; }
.mascot-zzz span:nth-child(3) { animation-delay: 1s; font-size: 1.3em; }
@keyframes mascot-z { 0% { transform: translateY(.4rem); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-1.6rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mascot-zzz span { animation: none; } }
@media (max-width: 63.999rem) { .mascot-bubble { font-size: .85rem; } }