/* The setups page (/setups): five rooms, each an illustrated scene with the real wall screenshots on its
   screen, next to what to buy and how to set it up. Builds on landing.css (nav, buttons, closing band,
   footer). Scenes are drawn in CSS with sizes in container units (cqw: a hundredth of the scene's
   width), so they scale as one picture from a phone to a wide window. */

/* ---------- intro ---------- */
.setups-hero { padding: 64px 0 40px; text-align: center; }
.setups-hero .wrap { position: relative; max-width: 860px; }
.setups-hero .lead { margin: 0 auto; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 18px; }
.jump a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.jump a:hover { background: #fff; }
.disclose { margin: 0 auto; max-width: 40em; font-size: 13px; color: var(--mut); }
.nav .links a[aria-current="page"] { color: var(--ink); }

/* ---------- one setup ---------- */
.setup { padding: 84px 0; scroll-margin-top: 66px; }
.setup.alt { background: var(--paper-2); }
.setup-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.setup-in.reverse .scene { order: 2; }
.setup-copy h2 { margin-bottom: 12px; }
.setup-copy > p { color: var(--ink-2); font-size: 18px; max-width: 32em; }
.setup-copy h3 { margin: 26px 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.facts { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.setup.alt .facts li { background: rgba(255, 255, 255, .75); }
.buy { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.buy li { display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px -16px rgba(70, 45, 20, .35); }
.buy li > div { flex: 1; min-width: 0; }
.buy b { display: block; font-size: 16px; line-height: 1.3; }
.buy span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--mut); }
.buy .btn { flex: none; }
.how { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 8px; }
.how li { counter-increment: step; position: relative; padding-left: 36px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.how li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center; }
.how code { font: .9em ui-monospace, "SF Mono", Menlo, monospace; background: var(--paper-2); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.setup.alt .how code { background: #fff; }
.foot-note { margin: -18px auto 0; padding-bottom: 28px; font-size: 13px; color: var(--mut); }

@media (max-width: 900px) {
  .setup { padding: 60px 0; }
  .setup-in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .setup-in.reverse .scene { order: 0; }
}
@media (max-width: 520px) {
  .buy li { flex-direction: column; align-items: stretch; }
  .buy .btn { justify-content: center; }
}

/* ---------- scenes: shared ---------- */
.scene {
  position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; container-type: inline-size;
  box-shadow: var(--shadow-md);
}
.scene > * { position: absolute; }
.scene img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- kitchen: a screen flipped down from under the cabinet ---------- */
.kitchen { background: #efe6da; }
.kitchen .tiles {
  left: 0; right: 0; top: 30%; bottom: 22%;
  background-color: #f8f5f0;
  background-image:
    linear-gradient(#e4dcd1 1px, transparent 1px),
    linear-gradient(90deg, #e4dcd1 1px, transparent 1px);
  background-size: 7cqw 3.5cqw, 7cqw 7cqw;
}
.kitchen .cabinet {
  left: 6%; right: 6%; top: 0; height: 30%; display: flex; gap: .6cqw; padding: 0 .6cqw .9cqw;
  background: #b99a74; box-shadow: 0 1.2cqw 2cqw -1cqw rgba(60, 40, 20, .35);
}
.kitchen .cabinet span { flex: 1; background: linear-gradient(180deg, #d8bf9c, #ccb08a); box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .18); position: relative; }
.kitchen .cabinet span::after { content: ''; position: absolute; bottom: 1.6cqw; width: .7cqw; height: 4cqw; border-radius: .4cqw; background: #8f7457; }
.kitchen .cabinet span:first-child::after { right: 1.6cqw; }
.kitchen .cabinet span:last-child::after { left: 1.6cqw; }
.kitchen .hinge { left: 41%; width: 18%; top: 30%; height: 1.4cqw; background: #2b2724; border-radius: 0 0 .6cqw .6cqw; }
.kitchen .flip {
  left: 24.5%; width: 51%; top: 30.8%; aspect-ratio: 16 / 9; padding: .9cqw; border-radius: 1cqw; background: #151311;
  transform-origin: 50% 0; transform: perspective(110cqw) rotateX(-9deg);
  box-shadow: 0 3cqw 4cqw -1.5cqw rgba(40, 25, 10, .45);
}
.kitchen .flip img { border-radius: .4cqw; }
.kitchen .counter {
  left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(180deg, #d9d3ca 0 2.4cqw, #b8b0a5 2.4cqw 3.2cqw, #e9e1d5 3.2cqw);
}
.kitchen .board { left: 11%; bottom: 17%; width: 17%; height: 2.4cqw; border-radius: 1.2cqw; background: linear-gradient(180deg, #c99a68, #b4834f); box-shadow: 0 .6cqw .8cqw -.4cqw rgba(60, 40, 20, .4); }
.kitchen .plant { right: 11%; bottom: 17.5%; width: 9cqw; height: 12cqw; }
.kitchen .plant b { position: absolute; left: 1.5cqw; right: 1.5cqw; bottom: 0; height: 4.4cqw; border-radius: 0 0 1.4cqw 1.4cqw; background: #e8e2d8; box-shadow: inset 0 -.8cqw 0 rgba(0, 0, 0, .06); }
.kitchen .plant i { position: absolute; bottom: 3.6cqw; width: 3.4cqw; height: 6.5cqw; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: #7f9b6e; transform-origin: 50% 100%; }
.kitchen .plant i:nth-child(1) { left: 1.2cqw; transform: rotate(-24deg); }
.kitchen .plant i:nth-child(2) { left: 2.8cqw; background: #6d8a5d; height: 7.5cqw; }
.kitchen .plant i:nth-child(3) { left: 4.4cqw; transform: rotate(24deg); }

/* ---------- living room: a TV nearly flush with the wall, in the evening ---------- */
.living { background: linear-gradient(180deg, #5d4d42, #43372f); }
.living .glow { inset: 0; background: radial-gradient(40cqw 34cqw at 86% 58%, rgba(255, 214, 150, .32), transparent 70%); }
.living .tv {
  left: 14%; width: 72%; top: 12%; aspect-ratio: 16 / 9; padding: .45cqw; border-radius: .7cqw; background: #0b0a09;
  box-shadow: 0 1.6cqw 3cqw -1cqw rgba(0, 0, 0, .55), 0 0 6cqw rgba(170, 150, 120, .12);
}
.living .tv img { border-radius: .25cqw; }
.living .console {
  left: 20%; right: 20%; bottom: 7%; height: 10%; border-radius: .8cqw; background: linear-gradient(180deg, #7a5a40, #654a34);
  box-shadow: 0 1.2cqw 2cqw -1cqw rgba(0, 0, 0, .5);
}
.living .console i { position: absolute; bottom: -2.2cqw; width: .8cqw; height: 2.4cqw; background: #4b3726; }
.living .console i:first-child { left: 6%; }
.living .console i:last-child { right: 6%; }
.living .lamp { right: 6%; bottom: 7%; width: 10cqw; height: 34cqw; }
.living .lamp i { position: absolute; left: 1cqw; right: 1cqw; top: 0; height: 8cqw; background: linear-gradient(180deg, #ffe7bd, #f2c98c); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); box-shadow: 0 0 6cqw rgba(255, 210, 140, .7); }
.living .lamp b { position: absolute; left: calc(50% - .35cqw); width: .7cqw; top: 8cqw; bottom: 0; background: #2d241d; }
.living .lamp b::after { content: ''; position: absolute; left: -2.6cqw; bottom: 0; width: 5.9cqw; height: .9cqw; border-radius: .5cqw; background: #2d241d; }
.living .floor { left: 0; right: 0; bottom: 0; height: 7%; background: #2f2620; }

/* ---------- desk or shelf: a white monitor with a streamer beside it ---------- */
.desk { background: linear-gradient(180deg, #f3eee6, #ebe3d7); }
.desk .shelf { left: 8%; right: 8%; top: 9%; height: 1.1cqw; background: #d8c6ad; border-radius: .4cqw; box-shadow: 0 .8cqw 1.2cqw -.6cqw rgba(60, 40, 20, .3); }
.desk .monitor { left: 17%; width: 66%; top: 15%; }
.desk .monitor .screen {
  position: relative; aspect-ratio: 16 / 9; padding: .55cqw .55cqw 1.6cqw; border-radius: .9cqw; background: #f6f5f2;
  box-shadow: inset 0 0 0 .1cqw #ddd8d0, 0 2cqw 3cqw -1.6cqw rgba(60, 40, 20, .4);
}
.desk .monitor .screen img { border-radius: .2cqw; box-shadow: 0 0 0 .2cqw #1b1917; }
.desk .monitor .neck { display: block; margin: 0 auto; width: 7cqw; height: 6.5cqw; background: linear-gradient(90deg, #e7e4df, #f7f5f1 50%, #e3dfd9); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.desk .monitor .base { display: block; margin: -.2cqw auto 0; width: 20cqw; height: 1.4cqw; border-radius: .8cqw; background: #eeebe6; box-shadow: 0 .8cqw 1cqw -.5cqw rgba(60, 40, 20, .35); }
.desk .desktop { left: 0; right: 0; bottom: 0; height: 25.4%; background: linear-gradient(180deg, #c69f74 0 1cqw, #b58d62 1cqw); }
.desk .streamer { left: 66%; bottom: 25.4%; width: 7.5cqw; height: 2.4cqw; border-radius: 1.4cqw 1.4cqw .5cqw .5cqw; background: linear-gradient(180deg, #faf6f1, #e9e2d9); box-shadow: 0 .5cqw .8cqw -.3cqw rgba(60, 40, 20, .35); }
.desk .mug { left: 10%; bottom: 25.4%; width: 4.6cqw; height: 5.2cqw; border-radius: .4cqw .4cqw 1.4cqw 1.4cqw; background: #c58f73; }
.desk .mug b { position: absolute; right: -1.6cqw; top: 1cqw; width: 2cqw; height: 2.6cqw; border: .5cqw solid #c58f73; border-left: 0; border-radius: 0 1.4cqw 1.4cqw 0; }

/* ---------- hallway: a tall screen above a small table ---------- */
.hall { background: #ece3d6; }
.hall .panel {
  left: 0; right: 0; bottom: 0; height: 30%; background: #f5efe6;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .05) .25cqw, transparent .25cqw); background-size: 12cqw 100%;
  box-shadow: 0 -.5cqw 0 #e0d4c3;
}
.hall .tall {
  left: calc(50% - 15.6cqw); width: 31.2cqw; top: 6%; aspect-ratio: 9 / 16; padding: .55cqw; border-radius: .9cqw; background: #141210;
  box-shadow: 0 2.4cqw 3.4cqw -1.6cqw rgba(60, 40, 20, .45);
}
.hall .tall img { border-radius: .4cqw; }
.hall .table { left: 64%; right: 8%; bottom: 13%; height: 1.6cqw; border-radius: .5cqw; background: #8c6a4c; }
.hall .table::before, .hall .table::after { content: ''; position: absolute; top: 1.6cqw; width: .9cqw; height: 9.8cqw; background: #7a5b40; }
.hall .table::before { left: 8%; }
.hall .table::after { right: 8%; }
.hall .table b { position: absolute; left: 30%; bottom: 1.6cqw; width: 8cqw; height: 2.4cqw; border-radius: 0 0 4cqw 4cqw; background: #d7c4a7; }
.hall .hooks { left: 8%; top: 30%; width: 18cqw; height: 2cqw; display: flex; justify-content: space-between; border-radius: .5cqw; background: #8c6a4c; padding: 0 1.4cqw; }
.hall .hooks i { width: 1.2cqw; height: 4cqw; margin-top: 1cqw; border-radius: 0 0 1cqw 1cqw; border: .45cqw solid #3d3229; border-top: 0; }

/* ---------- by the fridge: a tablet in a wall mount ---------- */
.fridge { background: linear-gradient(180deg, #eee7dd, #e6ddd0); }
.fridgebox {
  left: 7%; width: 44%; top: 4%; bottom: -2%; border-radius: 2cqw 2cqw 0 0;
  background: linear-gradient(90deg, #d3d6d8, #eef0f1 35%, #dfe2e4 70%, #cfd2d5);
  box-shadow: 1.6cqw 0 3cqw -1.6cqw rgba(40, 40, 40, .35);
}
.fridgebox .split { position: absolute; left: 0; right: 0; top: 34%; height: .3cqw; background: #b8bcc0; }
.fridgebox .h1, .fridgebox .h2 { position: absolute; right: 2.4cqw; width: 1cqw; border-radius: .5cqw; background: linear-gradient(90deg, #a9adb1, #e7e9eb); }
.fridgebox .h1 { top: 14%; height: 14cqw; }
.fridgebox .h2 { top: 40%; height: 22cqw; }
.fridgebox .note { position: absolute; left: 5cqw; top: 46%; width: 7cqw; height: 8cqw; background: #fff6c9; transform: rotate(-4deg); box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .12); }
.fridgebox .note::before { content: ''; position: absolute; left: calc(50% - .9cqw); top: -.6cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #c58f73; }
.fridgebox .note.n2 { left: 13cqw; top: 58%; width: 9cqw; height: 6.4cqw; background: #fff; transform: rotate(3deg); }
.fridgebox .note.n2::before { background: #7f9fbf; }
.fridge .tablet {
  left: 62%; width: 25cqw; top: 14%; aspect-ratio: 10 / 16; padding: 1.1cqw; border-radius: 1.8cqw; background: #1d1b19;
  box-shadow: 0 0 0 .8cqw #f7f4ef, 0 2.4cqw 3.4cqw -1.6cqw rgba(60, 40, 20, .45);
}
.fridge .tablet img { border-radius: .6cqw; object-position: 50% 0; }
.fridge .wire { left: calc(62% + 12.2cqw); top: calc(14% + 40.8cqw); width: .4cqw; bottom: 0; background: #f2efe9; box-shadow: 0 0 0 .1cqw #d9d2c7; }