:root {
  --paper: #000;
  --paper-dark: #f5f5f8;
  --ink: #14091f;
  --muted: #4f4360;
  --purple: #7027A8;
  --blue: #00b7ff;
  --yellow: #fff200;
  --nav: #c000ff;
  --bubble-purple: #c000ff;
  --bubble-nav: #7027A8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Arial Narrow", Arial, sans-serif;
  line-height: 1.3;
}

.brand-logo {
  position: absolute;
  top: 44px;
  left: max(4vw, calc((100vw - 1180px) / 2));
  width: clamp(148.5px, 20.7vw, 270px);
  z-index: 4;
  display: block;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.bubbles {
  position: absolute;
  top: 36px;
  left: max(4vw, calc((100vw - 1180px) / 2));
  width: min(42vw, 480px);
  min-width: 300px;
  height: 255px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.bubble {
  position: absolute;
  width: var(--size, 30px);
  height: var(--size, 30px);
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--fill, transparent);
}

.b1 { --size: 48px; --fill: var(--bubble-purple); opacity: .92; top: 4px; left: 8px; }
.b2 { --size: 34px; --fill: var(--blue); opacity: .55; top: 36px; left: 62px; }
.b3 { --size: 22px; --fill: var(--yellow); opacity: .9; top: 13px; left: 103px; }
.b4 { --size: 56px; --fill: var(--bubble-nav); opacity: .4; top: 51px; left: 128px; }
.b5 { --size: 19px; --fill: var(--blue); opacity: .8; top: 7px; left: 189px; }
.b6 { --size: 40px; --fill: var(--yellow); opacity: .6; top: 39px; left: 221px; }
.b7 { --size: 28px; --fill: var(--bubble-purple); opacity: .72; top: 2px; left: 266px; }
.b8 { --size: 16px; --fill: var(--bubble-nav); opacity: .9; top: 77px; left: 299px; }
.b9 { --size: 50px; --fill: var(--blue); opacity: .38; top: 0; left: 324px; }
.b10 { --size: 22px; --fill: var(--yellow); opacity: .86; top: 51px; left: 340px; }
.b11 { --size: 30px; --fill: var(--bubble-purple); opacity: .58; top: 15px; left: 370px; }
.b12 { --size: 18px; --fill: var(--bubble-nav); opacity: .8; top: 82px; left: 410px; }
.b13 { --size: 44px; --fill: var(--yellow); opacity: .48; top: 110px; left: 18px; }
.b14 { --size: 20px; --fill: var(--bubble-purple); opacity: .82; top: 154px; left: 74px; }
.b15 { --size: 36px; --fill: var(--blue); opacity: .68; top: 112px; left: 108px; }
.b16 { --size: 18px; --fill: var(--bubble-nav); opacity: .88; top: 166px; left: 160px; }
.b17 { --size: 50px; --fill: var(--bubble-purple); opacity: .42; top: 122px; left: 190px; }
.b18 { --size: 24px; --fill: var(--yellow); opacity: .9; top: 164px; left: 250px; }
.b19 { --size: 32px; --fill: var(--blue); opacity: .58; top: 114px; left: 292px; }
.b20 { --size: 16px; --fill: var(--bubble-nav); opacity: .76; top: 166px; left: 338px; }
.b21 { --size: 38px; --fill: var(--yellow); opacity: .52; top: 130px; left: 358px; }
.b22 { --size: 22px; --fill: var(--bubble-purple); opacity: .86; top: 178px; left: 404px; }
.b23 { --size: 28px; --fill: var(--blue); opacity: .64; top: 88px; left: 45px; }
.b24 { --size: 42px; --fill: var(--bubble-nav); opacity: .46; top: 136px; left: 88px; }
.b25 { --size: 18px; --fill: var(--yellow); opacity: .94; top: 102px; left: 145px; }
.b26 { --size: 34px; --fill: var(--bubble-purple); opacity: .54; top: 188px; left: 172px; }
.b27 { --size: 24px; --fill: var(--blue); opacity: .84; top: 151px; left: 220px; }
.b28 { --size: 46px; --fill: var(--yellow); opacity: .4; top: 192px; left: 260px; }
.b29 { --size: 20px; --fill: var(--bubble-nav); opacity: .88; top: 99px; left: 286px; }
.b30 { --size: 36px; --fill: var(--bubble-purple); opacity: .5; top: 158px; left: 315px; }
.b31 { --size: 18px; --fill: var(--yellow); opacity: .96; top: 221px; left: 338px; }
.b32 { --size: 30px; --fill: var(--blue); opacity: .62; top: 205px; left: 372px; }
.b33 { --size: 22px; --fill: var(--bubble-nav); opacity: .82; top: 119px; left: 399px; }
.b34 { --size: 40px; --fill: var(--bubble-purple); opacity: .44; top: 212px; left: 418px; }
.b35 { --size: 16px; --fill: var(--yellow); opacity: .9; top: 62px; left: 180px; }
.b36 { --size: 26px; --fill: var(--blue); opacity: .7; top: 72px; left: 240px; }
.b37 { --size: 32px; --fill: var(--bubble-nav); opacity: .48; top: 218px; left: 62px; }
.b38 { --size: 18px; --fill: var(--bubble-purple); opacity: .88; top: 236px; left: 122px; }
.b39 { --size: 24px; --fill: var(--yellow); opacity: .74; top: 228px; left: 205px; }
.b40 { --size: 38px; --fill: var(--blue); opacity: .42; top: 232px; left: 282px; }

/* Looser, wave-like bubble streams that lead toward the hero content. */
.b1 { --size: 48px; --fill: var(--bubble-purple); opacity: .92; top: 26px; left: 10px; }
.b2 { --size: 24px; --fill: var(--blue); opacity: .62; top: 72px; left: 70px; }
.b3 { --size: 18px; --fill: var(--yellow); opacity: .9; top: 15px; left: 118px; }
.b4 { --size: 50px; --fill: var(--bubble-nav); opacity: .46; top: 92px; left: 150px; }
.b5 { --size: 20px; --fill: var(--blue); opacity: .82; top: 57px; left: 212px; }
.b6 { --size: 30px; --fill: var(--yellow); opacity: .68; top: 20px; left: 246px; }
.b7 { --size: 18px; --fill: var(--bubble-purple); opacity: .78; top: 108px; left: 296px; }
.b8 { --size: 42px; --fill: var(--bubble-nav); opacity: .42; top: 142px; left: 328px; }
.b9 { --size: 20px; --fill: var(--blue); opacity: .76; top: 118px; left: 387px; }
.b10 { --size: 32px; --fill: var(--yellow); opacity: .66; top: 160px; left: 420px; }
.b11 { --size: 26px; --fill: var(--bubble-purple); opacity: .7; top: 148px; left: 16px; }
.b12 { --size: 18px; --fill: var(--bubble-nav); opacity: .86; top: 198px; left: 63px; }
.b13 { --size: 36px; --fill: var(--blue); opacity: .5; top: 160px; left: 100px; }
.b14 { --size: 20px; --fill: var(--yellow); opacity: .92; top: 216px; left: 150px; }
.b15 { --size: 42px; --fill: var(--bubble-purple); opacity: .44; top: 180px; left: 188px; }
.b16 { --size: 16px; --fill: var(--bubble-nav); opacity: .88; top: 228px; left: 245px; }
.b17 { --size: 28px; --fill: var(--blue); opacity: .64; top: 185px; left: 274px; }
.b18 { --size: 22px; --fill: var(--yellow); opacity: .9; top: 224px; left: 320px; }
.b19 { --size: 34px; --fill: var(--bubble-purple); opacity: .5; top: 193px; left: 350px; }
.b20 { --size: 16px; --fill: var(--bubble-nav); opacity: .84; top: 235px; left: 405px; }
.b21 { --size: 30px; --fill: var(--yellow); opacity: .62; top: 203px; left: 435px; }
.b22 { --size: 14px; --fill: var(--blue); opacity: .9; top: 242px; left: 472px; }
.b23 { --size: 18px; --fill: var(--bubble-purple); opacity: .8; top: 116px; left: 92px; }
.b24 { --size: 28px; --fill: var(--bubble-nav); opacity: .48; top: 148px; left: 144px; }
.b25 { --size: 16px; --fill: var(--yellow); opacity: .94; top: 126px; left: 205px; }
.b26 { --size: 26px; --fill: var(--blue); opacity: .58; top: 151px; left: 255px; }
.b27 { --size: 18px; --fill: var(--bubble-purple); opacity: .82; top: 175px; left: 305px; }
.b28 { --size: 30px; --fill: var(--bubble-nav); opacity: .46; top: 150px; left: 360px; }
.b29 { --size: 16px; --fill: var(--yellow); opacity: .92; top: 190px; left: 407px; }
.b30 { --size: 22px; --fill: var(--blue); opacity: .7; top: 224px; left: 455px; }
.b31, .b32, .b33, .b34, .b35, .b36, .b37, .b38, .b39, .b40 { display: none; }

.side-nav {
  position: fixed;
  top: 12px;
  right: 16px;
  display: grid;
  gap: 12px;
  padding: 11px 10px 11px 14px;
  border-left: 1px solid var(--yellow);
  background: rgba(0, 0, 0, 0.62);
  z-index: 3;
}


.side-nav a {
  position: relative;
  padding-left: 13px;
  color: var(--nav);
  font-size: 1.15rem;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 160ms ease, transform 160ms ease, text-shadow 160ms ease;
}

.side-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 2px rgba(0, 183, 255, 0.2);
  transform: translateY(-50%);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.side-nav a:hover,
.side-nav a:focus-visible {
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255, 242, 0, 0.8);
  transform: translateX(-4px);
  outline: none;
}

.side-nav a:hover::before,
.side-nav a:focus-visible::before {
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 242, 0, 0.22), 0 0 10px rgba(255, 242, 0, 0.9);
  transform: translateY(-50%) scale(1.35);
}

.hero {
  padding-top: 32px;
  position: relative;
  z-index: 1;
}

.hero-inner {
  width: min(1180px, 92vw);
  margin: 0 auto 20px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin: 0 0 14px;
  width: auto;
  display: block;
  font-family: "Archivo Black", Impact, "Arial Narrow", sans-serif;
  text-transform: lowercase;
  font-size: clamp(1.755rem, 2.9025vw, 3.0375rem);
  line-height: 0.98;
  letter-spacing: normal;
  color: var(--blue);
  white-space: nowrap;
}

.hero p {
  max-width: 38rem;
  margin: 0;
  font-size: 1.6rem;
  color: #fff;
}

.hero-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  padding: 9px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.18rem;
}

.btn-primary {
  background: var(--yellow);
  color: var(--ink);
}

.btn-secondary {
  background: var(--nav);
  color: #fff;
}

.machine-accents {
  position: absolute;
  top: 350px;
  width: 31%;
  height: 300px;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  z-index: 0;
}

.machine-accents-left {
  left: 0;
}

.machine-accents-right {
  right: 0;
  transform: scaleX(-1);
}

.machine-accent {
  position: absolute;
  display: block;
}

.accent-swoop {
  width: 220px;
  height: 145px;
  left: -48px;
  top: 84px;
  border: 20px solid var(--blue);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 72% 45% 68% 42%;
  transform: rotate(22deg);
}

.accent-ring {
  width: 96px;
  height: 96px;
  left: 154px;
  top: 112px;
  border: 15px solid var(--blue);
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px #000;
  transform: rotate(-18deg) scaleX(1.25);
}

.accent-organic {
  width: 138px;
  height: 118px;
  left: 64px;
  top: 168px;
  background: var(--purple);
  border-radius: 56% 44% 66% 34% / 47% 58% 42% 53%;
  transform: rotate(-24deg);
}

.accent-magenta {
  width: 92px;
  height: 54px;
  left: 184px;
  top: 223px;
  background: var(--nav);
  border-radius: 72% 28% 58% 42% / 40% 67% 33% 60%;
  transform: rotate(26deg);
}

.accent-star {
  width: 32px;
  height: 32px;
  background: var(--yellow);
  clip-path: polygon(50% 0, 59% 38%, 100% 50%, 59% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
}

.accent-star-yellow {
  left: 37px;
  top: 208px;
  transform: rotate(14deg);
}

.accent-star-small {
  width: 24px;
  height: 24px;
  left: 286px;
  top: 154px;
  transform: rotate(-12deg);
}

.accent-star-magenta {
  width: 18px;
  height: 18px;
  left: 251px;
  top: 246px;
  background: var(--nav);
  transform: rotate(22deg);
}

.accent-circle {
  border-radius: 50%;
}

.accent-circle-cyan {
  width: 15px;
  height: 15px;
  left: 320px;
  top: 209px;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 183, 255, 0.26);
}

.accent-circle-purple {
  width: 10px;
  height: 10px;
  left: 278px;
  top: 278px;
  background: var(--purple);
}

.accent-sparkle {
  width: 18px;
  height: 18px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.layout > .card,
.layout > .stacked-art {
  position: relative;
  z-index: 1;
}
.layout {
  width: min(1180px, 92vw);
  margin: 12px auto 70px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "what art why"
    "inside inside inside"
    "how how contact"
    "about about about";
  gap: 12px;
  position: relative;
  z-index: 1;
  align-items: stretch;
}

.intro {
  grid-area: what;
}

#why {
  grid-area: why;
}

.intro,
#why {
  padding-bottom: 20px;
}

.intro p:last-child,
#why p:last-child {
  margin-bottom: 0;
}

#inside {
  grid-area: inside;
  width: 100%;
  margin: 0;
  align-self: stretch;
  text-align: left;
}

#inside p {
  color: var(--ink);
}

#inside {
  margin-bottom: 90px;
}

.inside-accents {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  align-self: end;
  justify-self: center;
  width: 80%;
  height: 0;
  pointer-events: none;
  z-index: 0;
}

.inside-accent {
  position: absolute;
  display: block;
}

.inside-purple-circle {
  width: 100%;
  height: 230px;
  top: -250px;
  left: 0;
  border-radius: 50%;
  background: var(--purple);
}

.inside-cyan-star,
.inside-yellow-star,
.inside-white-sparkle {
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
}

.inside-cyan-star {
  width: 38px;
  height: 38px;
  left: 11%;
  top: -54px;
  background: var(--blue);
}

.inside-yellow-star {
  width: 26px;
  height: 26px;
  right: 13%;
  top: -31px;
  background: var(--yellow);
  transform: rotate(18deg);
}

.inside-magenta-circle {
  width: 22px;
  height: 22px;
  right: 23%;
  top: -17px;
  border-radius: 50%;
  background: var(--nav);
}

.inside-white-sparkle {
  width: 16px;
  height: 16px;
  left: 29%;
  top: -45px;
  background: #fff;
}

.inside-extra-star {
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
}

.inside-extra-star-one {
  width: 26px;
  height: 26px;
  left: 20%;
  top: -83px;
  background: var(--yellow);
}

.inside-extra-star-two {
  width: 18px;
  height: 18px;
  right: 30%;
  top: -74px;
  background: var(--blue);
  transform: rotate(16deg);
}

.inside-extra-star-three {
  width: 22px;
  height: 22px;
  left: 45%;
  top: -34px;
  background: var(--nav);
  transform: rotate(-12deg);
}

.inside-extra-star-four {
  width: 14px;
  height: 14px;
  right: 5%;
  top: -55px;
  background: #fff;
}

.inside-extra-circle {
  border-radius: 50%;
}

.inside-extra-circle-one {
  width: 16px;
  height: 16px;
  left: 5%;
  top: -67px;
  background: var(--blue);
}

.inside-extra-circle-two {
  width: 23px;
  height: 23px;
  left: 35%;
  top: -80px;
  background: var(--nav);
}

.inside-extra-circle-three {
  width: 14px;
  height: 14px;
  right: 37%;
  top: -48px;
  background: var(--yellow);
}

.inside-extra-circle-four {
  width: 20px;
  height: 20px;
  right: 8%;
  top: -12px;
  background: var(--blue);
}

#how ol {
  margin-left: 0;
  list-style: none;
  counter-reset: machine-step;
}

#how ol li {
  position: relative;
  min-height: 30px;
  padding-left: 44px;
  counter-increment: machine-step;
}

#how ol li + li {
  margin-top: 12px;
}

#how ol li::before {
  content: counter(machine-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 31px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: "Archivo Black", Impact, "Arial Narrow", sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
}

#about {
  grid-area: about;
}

#how {
  grid-area: how;
}

#contact {
  grid-area: contact;
}

.card {
  background: var(--paper-dark);
  padding: 16px 16px 14px;
  border: 1px solid rgba(28, 15, 15, 0.08);
  border-radius: 12px;
}

.card h2 {
  margin: 0 0 10px;
  font-family: "Archivo Black", Impact, "Arial Narrow", sans-serif;
  text-transform: lowercase;
  font-size: 2rem;
  color: var(--purple);
}

.card h3 {
  margin: 0 0 4px;
  font-family: "Archivo Black", Impact, "Arial Narrow", sans-serif;
  text-transform: lowercase;
  font-size: 1.55rem;
  color: var(--blue);
}

.card p,
.card li {
  font-size: 1.35rem;
}

.lead {
  font-weight: 700;
  color: var(--nav);
}

strong {
  color: var(--nav);
}

.goal-warning {
  font-weight: 700;
  color: var(--purple);
}

.accent-line {
  display: block;
  font-weight: 700;
  color: var(--blue);
}

.card ul,
.card ol {
  margin: 8px 0 10px 22px;
  padding: 0;
}

.stacked-art {
  grid-area: art;
  position: relative;
  min-height: 310px;
  justify-self: stretch;
  width: 100%;
}

.machine-visual {
  margin: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 18px 14px;
}

.machine-visual::before,
.machine-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.machine-visual::before {
  width: calc(90% - 20px);
  height: calc(88% + 20px);
  top: calc(50% - 10px);
  left: calc(7% + 10px);
  background: var(--blue);
  z-index: 0;
  transform: translateY(-50%);
}

.machine-visual::after {
  width: calc(82% - 20px);
  height: calc(91% + 20px);
  top: calc(50% - 10px);
  left: calc(4% + 10px);
  background: #fff;
  z-index: 1;
  transform: translateY(-50%);
}

.machine-visual img {
  display: block;
  width: min(100%, 360px);
  height: auto;
  opacity: 1;
  mix-blend-mode: normal;
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

.sheet {
  position: absolute;
  inset: 10px 20px 10px 20px;
  border: 6px solid var(--ink);
  background: #fafaff;
}

.s1 { transform: rotate(-6deg); }
.s2 { transform: rotate(-2deg); }
.s3 {
  transform: rotate(2deg);
  display: grid;
  place-items: center;
}

.odd-mark {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 6px solid var(--ink);
  position: relative;
  display: grid;
  place-items: center;
}

.ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--purple);
}

.dot {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yellow);
  right: -8px;
  top: 12px;
}

.s3 p {
  margin: 10px 0 0;
  font-family: "Archivo Black", Impact, "Arial Narrow", sans-serif;
  font-size: 2rem;
}

.inside-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  align-items: stretch;
  margin-top: 30px;
}

.inside-grid article {
  background: #ededf4;
  padding: 10px;
  border: 1px solid rgba(28, 15, 15, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.inside-grid h3 {
  color: var(--blue);
  margin-bottom: 0;
}

.inside-grid article p {
  margin: 4px 0 0;
}

.mini-visual {
  margin-top: 24px;
  min-height: 80px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 1.05rem;
}


.practical-items-image {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 2;
}
.stay-longer-image,
.remember-this-place-image {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translateY(-20px);
}
.practical-items-visual {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-top: -16px;
}

.inside-grid article:has(.practical-items-visual) {
  padding-bottom: 0;
}

.practical-items-visual::before,
.practical-items-visual::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.practical-items-visual::before {
  width: 85%;
  height: 86%;
  background: var(--blue);
  z-index: 0;
}

.practical-items-visual::after {
  width: 76%;
  height: 80%;
  background: #fff;
  z-index: 1;
}

.span-2 {
  grid-column: auto;
}

.stacked-art {
  min-height: 310px;
  align-self: start;
}

.intro,
#why {
  height: 415px;
  align-self: start;
  margin-top: 49px;
}

a {
  color: var(--purple);
}

#contact a {
  color: var(--blue);
}

.request-walkthrough {
  margin: 0.5em 0;
  color: var(--nav);
  font-size: 1.755rem;
  font-weight: 700;
}

.request-walkthrough + p {
  margin-top: 0.5em;
}

@media (max-width: 1050px) {
  .machine-accents {
    display: none;
  }

  .layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "what art"
      "why art"
      "inside inside"
      "how contact"
      "about about";
  }

  .stacked-art {
    min-height: 100%;
  }

  .span-2 {
    grid-column: auto;
  }

  .hero-inner {
    padding-left: 0;
  }

  .hero p,
  .card p,
  .card li {
    font-size: 1.16rem;
  }
}

@media (max-width: 760px) {
  .brand-logo {
    top: 8px;
    width: min(225px, 55.8vw);
    margin: 0;
  }
  .side-nav {
    position: static;
    width: min(1180px, 92vw);
    margin: 140px auto 0;
    grid-template-columns: repeat(5, auto);
    justify-content: start;
  }

  .hero {
    padding-top: 46px;
  }

  .hero-inner {
    padding-left: 0;
    align-items: flex-start;
    text-align: left;
  }

  .hero h1 {
    width: auto;
    display: block;
    white-space: normal;
  }

  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "what"
      "art"
      "why"
      "inside"
      "about"
      "how"
      "contact";
  }

  .stacked-art,
  .span-2 {
    min-height: 310px;
  }

  .inside-grid {
    grid-template-columns: 1fr;
  }

  .bubbles {
    display: none;
  }
}

/* Phone-specific refinements: retain the desktop design in one responsive site. */
@media (max-width: 760px) {
  html { scroll-padding-top: 1rem; }
  .brand-logo { top: 8px; width: min(225px, 55.8vw); margin: 0; }
  .side-nav { position: static; width: min(680px, 92vw); margin: 108px auto 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 9px 6px; border: 1px solid var(--yellow); border-radius: 10px; background: rgba(0, 0, 0, 0.82); justify-content: stretch; }
  .side-nav a { padding: 6px 2px; color: var(--blue); font-size: clamp(0.72rem, 3.3vw, 1rem); line-height: 1; text-align: center; }
  .side-nav a::before { display: none; }
  .side-nav a:hover, .side-nav a:focus-visible { transform: none; }
  .hero { padding-top: 32px; }
  .hero-inner { width: min(680px, 92vw); margin-bottom: 18px; padding-left: 0; align-items: flex-start; text-align: left; }
  .hero h1 { width: auto; display: block; white-space: normal; font-size: clamp(2rem, 9.2vw, 3rem); line-height: 1; }
  .hero p { font-size: clamp(1.15rem, 5.5vw, 1.45rem); }
  .hero-actions { width: 100%; gap: 9px; }
  .btn { flex: 1 1 12rem; padding: 11px 12px; font-size: 1rem; text-align: center; }
  .layout { width: min(680px, 92vw); margin-top: 8px; gap: 14px; grid-template-columns: 1fr; grid-template-areas: 'what' 'art' 'why' 'inside' 'about' 'how' 'contact'; }
  .stacked-art, .span-2 { min-height: 0; }
  .machine-visual { min-height: 360px; padding: 18px 12px; }
  .machine-visual img { width: min(100%, 300px); }
  .inside-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
  .inside-grid article { padding: 14px; }
  .mini-visual { margin-top: 18px; }
  .practical-items-visual { margin-top: -8px; }
  .intro, #why { height: auto; margin-top: 0; }
  #inside { margin-bottom: 28px; }
  .inside-accents { width: 94%; }
  .inside-purple-circle { height: 145px; top: -166px; }
  .card { padding: 16px 14px; }
  .card h2 { font-size: clamp(1.55rem, 8vw, 2rem); }
  .card h3 { font-size: 1.35rem; }
  .card p, .card li { font-size: 1.08rem; }
  #how ol li { padding-left: 40px; }
  .request-walkthrough { font-size: 1.3rem; }
  .bubbles { display: none; }
}
@media (max-width: 380px) {
  .brand-logo { width: min(190px, 62vw); }
  .side-nav { margin-top: 94px; }
  .side-nav a { font-size: 0.7rem; }
  .machine-visual { min-height: 310px; }
}
/* Keep the header, actions, and navigation within narrow phone screens. */
@media (max-width: 760px) {
  .hero { padding-top: 96px; }
  .btn { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 760px) { .hero { padding-top: 120px; } }


/* These separators are deliberately shown only on phone layouts. */
.mobile-section-divider {
  display: none;
}
@media (max-width: 760px) {
  .layout {
    grid-template-areas:
      "what"
      "art"
      "why"
      "why-inside"
      "inside"
      "inside-how"
      "about"
      "how"
      "contact";
  }
  .mobile-section-divider {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 5px 2%;
    position: relative;
    z-index: 1;
  }
  .mobile-section-divider span {
    width: 100%;
    height: 2px;
    background: var(--yellow);
    box-shadow: 0 0 10px rgba(255, 242, 0, 0.45);
  }
  .mobile-divider-why-inside { grid-area: why-inside; }
  .mobile-divider-inside-how { grid-area: inside-how; }
}
@media (max-width: 760px) {
  /* Match the vertical rhythm on both mobile-only dividers. */
  #inside { margin-bottom: 0; }
  .mobile-divider-inside-how { margin-top: 0; }
}