/* garyfromthehallway.com home: "The Hallway" (DECISIONS.md 2026-11-03). Palette from GaryKit.
   The privacy, support and 404 pages keep styles.css. */
:root {
  --asphalt: #141416;
  --chalk: #F4F1EA;
  --paper: #FBF9F4;
  --wall: #F1E6CF;
  --hivis: #FF5B1F;
  --flame: #FFB21F;
  --sky: #7CC8F2;
  --welly: #3F6B45;
  --floor: #D9C19A;
  --ink-2: #3A3A42;
  --ink-3: #5E5E66;
  --line: 4px solid var(--asphalt);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  --spring: cubic-bezier(.2, 1.4, .4, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--chalk); color: var(--asphalt); font-family: var(--sans); line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--asphalt); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--hivis); outline-offset: 3px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.say { font-family: var(--rounded); font-weight: 600; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
.h2 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; }

/* Buttons: comic stickers that press in */
.btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: 18px; padding: 16px 28px; border-radius: 999px; border: 3px solid var(--asphalt); background: var(--asphalt); color: var(--chalk); transition: transform 200ms var(--spring); }
.btn:hover { color: var(--chalk); transform: translateY(-3px) rotate(-1.5deg); }
.btn:active { transform: scale(0.95); transition-duration: 80ms; }
.btn.yellow { background: var(--flame); color: var(--asphalt); }
.btn.small { font-size: 16px; padding: 10px 18px; }

/* ---------- Hero: the hallway ---------- */
.hero { --H: max(620px, 100svh); --s: min(var(--H), 72vw); position: relative; height: 100vh; height: var(--H); overflow: hidden; background-color: var(--wall); background-image: repeating-linear-gradient(90deg, rgba(20,20,22,0.035) 0 28px, transparent 28px 56px); }
.nav { position: relative; z-index: 6; display: flex; align-items: center; gap: 10px 14px; min-height: 80px; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand b { font-family: var(--rounded); font-size: 28px; }
.brand span { font-family: var(--rounded); font-size: 16px; color: var(--ink-3); }
.nav .btn { margin-left: auto; }

.hero-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 20px; }
.hero h1 { font-size: clamp(50px, min(7.4vw, 11.5svh), 108px); line-height: 0.95; letter-spacing: -0.035em; max-width: 9ch; }
.hero h1 .w { display: inline-block; }
.lede { margin: 0; font-size: clamp(18px, 1.6vw, 22px); max-width: 34ch; color: var(--ink-2); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 4px; }

.hero > .wrap { position: relative; z-index: 5; }
.scene { position: absolute; inset: 0; z-index: 0; }
.scene > * { position: absolute; }
.skirting { left: 0; right: 0; bottom: 15%; height: 2%; background: var(--paper); border-top: var(--line); }
.floor { left: 0; right: 0; bottom: 0; height: 15%; background-color: var(--floor); background-image: repeating-linear-gradient(90deg, transparent 0 180px, rgba(20,20,22,0.18) 180px 183px); border-top: var(--line); }

.photo { right: calc(6% + var(--s) * 0.34); top: 9%; width: calc(var(--s) * 0.17); aspect-ratio: 4 / 5; background: var(--paper); border: var(--line); border-radius: 10px; padding: 10px; transform: rotate(3deg); z-index: 1; display: flex; flex-direction: column; }
.photo .shot { position: relative; flex: 1; background: var(--sky); border: 2px solid var(--asphalt); border-radius: 4px; overflow: hidden; }
.photo .grass { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #9BCB6B; border-top: 2px solid var(--asphalt); }
.photo .tape { position: absolute; left: 0; right: 0; top: 30%; height: 8%; background: repeating-linear-gradient(90deg, var(--asphalt) 0 6px, var(--paper) 6px 12px); }
.photo .peek { position: absolute; right: -80%; bottom: 4%; width: 100%; max-width: none; animation: peek 7s ease-in-out infinite; }
.photo b { font-family: var(--rounded); font-size: clamp(10px, 0.9vw, 13px); text-align: center; padding-top: 6px; letter-spacing: 0.04em; }

.door { right: 6%; bottom: 15%; width: calc(var(--s) * 0.28); height: calc(var(--s) * 0.62); background: var(--sky); border: var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; z-index: 1; }
.door i { position: absolute; border: var(--line); border-radius: 12px; }
.door .pane { left: 14%; right: 14%; top: 7%; height: 22%; background: var(--paper); }
.door .panel { left: 14%; right: 14%; top: 36%; height: 50%; }
.door .slot { left: 26%; right: 26%; top: 52%; height: 5%; background: var(--flame); border-width: 3px; border-radius: 4px; transform-origin: top; animation: letterbox 9s ease-in-out infinite 3s; }
.door .knob { left: 8%; top: 46%; width: 16px; height: 16px; background: var(--flame); border-width: 3px; border-radius: 50%; }

.wellies { right: calc(6% + var(--s) * 0.28 + 18px); bottom: 15%; width: calc(var(--s) * 0.1); height: calc(var(--s) * 0.26); display: flex; gap: 8%; align-items: flex-end; z-index: 2; }
.wellies i { flex: 1; height: 100%; background: var(--welly); border: var(--line); border-radius: 14px 14px 6px 22px; }
.wellies i + i { height: 92%; transform: rotate(-4deg); transform-origin: bottom; }

.mat { right: 6%; bottom: 3.5%; width: calc(var(--s) * 0.28); height: calc(var(--s) * 0.075); background: var(--hivis); border: var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--rounded); font-weight: 700; font-size: calc(var(--s) * 0.024); letter-spacing: 0.08em; z-index: 2; }

.gary-spot { right: calc(6% + var(--s) * 0.38 + 40px); bottom: 6.5%; width: calc(var(--s) * 0.56); z-index: 4; }
.bubble { position: absolute; left: 52%; width: max-content; max-width: 110%; bottom: 80%; background: var(--paper); border: var(--line); border-radius: 26px; padding: 14px 20px; font-family: var(--rounded); font-weight: 600; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.25; transform-origin: 8% 100%; text-wrap: balance; }
.bubble::after { content: ""; position: absolute; left: 7%; bottom: -16px; width: 24px; height: 24px; background: var(--paper); border-right: var(--line); border-bottom: var(--line); transform: rotate(45deg); }
.bubble.pop { animation: pop 380ms var(--spring); }
/* The bubble sits right of Gary's tongue, over the scene, so it never runs into the copy. Narrower windows push it further right. */
@media (min-width: 721px) and (max-width: 1100px) { .bubble { left: 66%; max-width: 106%; } .bubble::after { left: 5%; } }
@media (min-width: 721px) and (max-width: 860px) { .bubble { left: 80%; max-width: 100%; font-size: 16px; } }
.gary { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gary img { width: 100%; animation: sway 4s ease-in-out infinite; transform-origin: 50% 85%; }
.gary.squash img { animation: squash 420ms ease-out, sway 4s ease-in-out infinite 420ms; }
.tap { position: absolute; left: -2%; bottom: 30%; width: 56px; height: 56px; border-radius: 50%; background: var(--flame); border: 3px solid var(--asphalt); font-family: var(--rounded); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; transform: rotate(-12deg); pointer-events: none; transition: opacity 300ms, transform 300ms; }
.tap::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--flame); animation: ring 1.8s ease-out infinite; }
.tap.gone { opacity: 0; transform: rotate(-12deg) scale(0.4); }
.caption { left: 6%; bottom: 4%; margin: 0; font-family: var(--rounded); font-style: italic; font-size: clamp(14px, 1.2vw, 17px); max-width: 22ch; z-index: 3; }

/* ---------- Three rules ---------- */
.rules { background: var(--chalk); border-top: var(--line); padding: 104px 0 96px; }
.rules .wrap { display: flex; flex-direction: column; gap: 56px; }
.rules .h2 { text-align: center; }
.tiles { display: flex; flex-wrap: wrap; gap: 80px 28px; padding-top: 60px; }
.tile { --r: 0deg; flex: 1 1 300px; min-width: 0; border-radius: 40px; padding: 0 32px 36px; display: flex; flex-direction: column; gap: 10px; transform: rotate(var(--r)); transition: transform 220ms var(--spring); }
.tile:hover { transform: rotate(0deg) translateY(-6px); }
.tile img { width: 240px; margin: -100px auto 0; transition: transform 300ms var(--spring); }
.tile:hover img { transform: translateY(-8px) rotate(-3deg); }
.tile .big { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile h3 { font-size: 26px; }
.tile p { margin: 0; font-size: 18px; }
.tile.flame { --r: -1.5deg; background: var(--flame); }
.tile.sky { --r: 1deg; background: var(--sky); }
.tile.dark { --r: -0.5deg; background: var(--asphalt); color: var(--chalk); }
.tile.dark .big { color: #FF7A45; }

/* ---------- Why bother: the evidence (VOICE.md 8.12). Tiles are written by scripts/build-why.py ---------- */
.why { position: relative; background-color: var(--wall); background-image: repeating-linear-gradient(90deg, rgba(20,20,22,0.035) 0 28px, transparent 28px 56px); border-top: var(--line); padding: 104px 0 0; }
.why > .wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.why-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.why-head p { margin: 0; font-size: 20px; }
.clips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 36px 28px; width: 100%; padding-top: 12px; }
.clips .clip { flex: 1 1 300px; }
.why-more { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.fine { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-3); }

/* A clipping: a rounded panel taped to the wall. Shared by the home strip and /why/. */
.clip { --r: 0deg; --tape: rgba(124,200,242,0.75); position: relative; min-width: 0; border-radius: 32px; padding: 40px 30px 28px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); transform: rotate(var(--r)); transition: transform 220ms var(--spring); }
.clip::before { content: ""; position: absolute; top: -11px; left: 50%; width: 88px; height: 24px; margin-left: -44px; background: var(--tape); border-radius: 3px; transform: rotate(-3deg); }
.clip:hover { transform: rotate(0deg) translateY(-6px); }
.clip .big { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.clip h3 { font-size: 22px; line-height: 1.2; }
.clip p { margin: 0; }
.clip .plain { font-size: 17px; color: var(--ink-2); }
.clip .say { font-size: 18px; line-height: 1.35; padding-top: 4px; }
.clip .src { font-size: 13px; line-height: 1.4; color: var(--ink-3); padding-top: 6px; }
.clip .src a { color: inherit; }
.clip .src a:hover { color: var(--asphalt); }
.clip.flame { --tape: rgba(251,249,244,0.8); background: var(--flame); }
.clip.sky { --tape: rgba(251,249,244,0.8); background: var(--sky); }
.clip.hivis { --tape: rgba(251,249,244,0.8); background: var(--hivis); }
.clip.flame .plain, .clip.sky .plain, .clip.hivis .plain, .clip.flame .src, .clip.sky .src, .clip.hivis .src { color: var(--asphalt); }
.clip.dark { --tape: rgba(255,178,31,0.9); background: var(--asphalt); color: var(--chalk); }
.clip.dark .big { color: #FF7A45; }
.clip.dark .plain { color: #D6D3CC; }
.clip.dark .src { color: #A8A8B0; }
.clip.dark .src a:hover { color: #FFFFFF; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The post on the mat: a pile of journals, drawn */
.pile { z-index: 3; display: flex; flex-direction: column; align-items: center; }
.pile i { display: block; height: 15px; border: 3px solid var(--asphalt); border-radius: 4px; }
.pile i:nth-child(1) { width: 78%; background: var(--sky); transform: rotate(-4deg) translateX(-6%); }
.pile i:nth-child(2) { width: 92%; margin-top: -3px; background: var(--paper); transform: rotate(2deg); }
.pile i:nth-child(3) { width: 100%; margin-top: -3px; background: var(--flame); }

/* The section ends on the hallway floor: Gary, the mat, the post */
.why-floor { position: relative; height: 92px; margin-top: 150px; background-color: var(--floor); background-image: repeating-linear-gradient(90deg, transparent 0 180px, rgba(20,20,22,0.18) 180px 183px); border-top: var(--line); border-bottom: var(--line); }
.why-floor::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; background: var(--paper); border-top: var(--line); }
.why-floor > * { position: absolute; }
.why-floor img { left: calc(50% - 300px); bottom: 26px; width: 230px; animation: sway 4s ease-in-out infinite; transform-origin: 50% 85%; }
.why-floor .mat { left: calc(50% - 60px); right: auto; bottom: 22px; width: 200px; height: 40px; font-size: 13px; }
.why-floor .pile { left: calc(50% - 35px); bottom: 58px; width: 150px; }

/* ---------- Widgets ---------- */
.widgets { padding: 40px 0 96px; }
.widgets .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px clamp(48px, 8vw, 120px); }
.widgets-copy { flex: 0 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.widgets-copy p { margin: 0; font-size: 19px; color: var(--ink-2); }
/* The phone: drawn in the site's ink line, a home screen with Gary's widgets among plain icons. */
.phone { --pw: 300px; flex: 0 0 auto; width: var(--pw); aspect-ratio: 9 / 19.2; padding: 10px; background: var(--asphalt); border-radius: 54px; --r: 2deg; animation: float 5s ease-in-out infinite; }
.phone .screen { position: relative; height: 100%; border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; padding: 14px 18px 12px;
  background: linear-gradient(165deg, var(--sky) 0%, #BFE2F5 45%, var(--wall) 75%, var(--flame) 130%); }
.phone .status { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 8px; font-family: var(--sans); font-size: 14px; color: var(--asphalt); }
.phone .island { width: 84px; height: 24px; border-radius: 14px; background: var(--asphalt); }
.phone .bars { width: 26px; height: 12px; border: 2px solid var(--asphalt); border-radius: 4px; position: relative; }
.phone .bars::after { content: ""; position: absolute; inset: 1px 5px 1px 1px; background: var(--asphalt); border-radius: 1px; }
.phone .home { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 14px; margin-top: 22px; }
.phone .w-medium { grid-column: span 4; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 0 0 1px rgba(20,20,22,0.08); }
.phone .w-small { grid-column: span 2; grid-row: span 2; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 0 0 1px rgba(20,20,22,0.08); align-self: start; }
.phone .app { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.phone .app img, .phone .app i { width: 100%; aspect-ratio: 1; border-radius: 13px; }
.phone .app i { background: var(--c); border: 2px solid rgba(20,20,22,0.12); }
.phone .app b { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--asphalt); line-height: 1; }
.phone .app s { display: block; width: 60%; height: 6px; border-radius: 3px; background: rgba(20,20,22,0.18); }
.phone .dock { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 12px; border-radius: 30px; background: rgba(251,249,244,0.5); }
.phone .dock i { aspect-ratio: 1; border-radius: 13px; background: var(--c); border: 2px solid rgba(20,20,22,0.12); }

/* ---------- Club ---------- */
.club { padding: 72px 0 120px; }
.club .wrap { display: flex; flex-direction: column; gap: 40px; }
.club-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.club-head p { margin: 0; font-size: 20px; }
.plans { display: flex; flex-wrap: wrap; gap: 72px 24px; }
.plan { flex: 1 1 340px; min-width: 0; border-radius: 40px; padding: 40px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.plan h3 { font-size: 30px; }
.plan ul { margin: 0; padding: 0; list-style: none; font-size: 18px; line-height: 1.7; }
.plan.free { background: var(--paper); }
.plan.free ul { color: var(--ink-2); }
.plan.paid { background: var(--hivis); }
.plan.paid img { position: absolute; right: 16px; top: -80px; width: 170px; animation: bob 3.6s ease-in-out infinite; }
.plan .price { margin: auto 0 0; font-size: 16px; font-weight: 600; }

/* ---------- Last word ---------- */
.last { background: var(--asphalt); color: var(--chalk); padding: 96px 0 48px; }
.last .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; }
.doorway { flex: 1 1 380px; min-width: 0; position: relative; aspect-ratio: 5 / 4; background: var(--wall); border: 4px solid var(--chalk); border-radius: 28px; overflow: hidden; }
.doorway > * { position: absolute; }
.doorway .door { right: 12%; bottom: 20%; width: 26%; height: 70%; border-radius: 18px 18px 0 0; }
.doorway .floor { height: 20%; }
.doorway img { left: 6%; bottom: 9%; width: 58%; animation: breathe 4.5s ease-in-out infinite; transform-origin: 50% 90%; }
.last-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.last h2 { font-size: clamp(64px, 9vw, 120px); line-height: 0.9; letter-spacing: -0.035em; }
.last .say { margin: 0; font-size: 21px; color: #D6D3CC; }
.last .sign { font-family: var(--rounded); color: #D6D3CC; }
.footer { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 80px; font-size: 15px; color: #A8A8B0; }
.footer a { color: #D6D3CC; }
.footer a:hover { color: #FFFFFF; }
.footer span { margin-left: auto; }

/* ---------- Motion ---------- */
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes squash { 0% { transform: scale(1, 1); } 30% { transform: scale(1.14, 0.84); } 60% { transform: scale(0.94, 1.08); } 100% { transform: scale(1, 1); } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes peek { 0%, 70%, 100% { transform: translateX(0); } 80%, 90% { transform: translateX(-16px); } }
@keyframes letterbox { 0%, 88%, 100% { transform: scaleY(1); } 91%, 95% { transform: scaleY(0.35); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-12px) rotate(var(--r)); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 0.97); } }
@keyframes rise { from { transform: translateY(0.5em) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Load-in: the headline words rise, Gary's bubble pops after. Only with JS, so nothing hides without it. */
.js .hero h1 .w { animation: rise 600ms var(--spring) both; }
.js .bubble { opacity: 0; }
.js .bubble.pop { opacity: 1; }

/* Scroll reveals */
.js .reveal { opacity: 0; transform: translateY(48px) rotate(calc(var(--r, 0deg) * 4)); transition: opacity 500ms ease-out, transform 700ms var(--spring); }
.js .reveal.in { opacity: 1; transform: rotate(var(--r, 0deg)); }
.js .tile.reveal.in:hover, .js .clip.reveal.in:hover { transform: rotate(0deg) translateY(-6px); }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .brand span { display: none; }
  .hero-copy { gap: 16px; padding-top: 8px; }
  .lede { font-size: 18px; }
  .hero { height: auto; overflow: visible; }
  .scene { position: relative; inset: auto; height: 560px; margin-top: 8px; }
  .skirting { bottom: 24%; }
  .floor { height: 24%; }
  .photo { right: auto; left: 5%; top: 3%; width: 30%; min-width: 0; transform: rotate(-4deg); }
  .door { right: -6%; bottom: 24%; width: 32%; height: 66%; }
  .wellies { display: none; }
  .mat { right: 3%; bottom: 8%; width: 30%; height: 9%; font-size: 12px; }
  .gary-spot { right: auto; left: -2%; bottom: 13%; width: 80%; }
  .bubble { left: 40%; max-width: 82%; font-size: 17px; padding: 12px 16px; }
  .bubble::after { left: 14%; }
  .tap { left: 4%; bottom: 44%; width: 50px; height: 50px; font-size: 14px; }
  .hero { overflow-x: clip; }
  .caption { left: 5%; bottom: 4%; max-width: 58%; font-size: 14px; line-height: 1.3; }
  .rules { padding: 72px 0 64px; }
  .rules .wrap { gap: 32px; }
  .tiles { gap: 96px; }
  .tile { padding: 0 28px 32px; }
  .tile img { width: 220px; margin-top: -96px; }
  .tile .big { font-size: 56px; }
  .widgets { padding: 24px 0 72px; }
  .widgets-copy { text-align: center; align-items: center; }
  .phone { --pw: min(280px, 78vw); }
  .club { padding: 56px 0 88px; }
  .plans { gap: 88px; }
  .plan { padding: 32px 28px; }
  .plan.paid { padding-top: 76px; }
  .plan.paid img { width: 132px; top: -64px; right: 12px; }
  .why { padding-top: 72px; }
  .why > .wrap { gap: 32px; }
  .clips { gap: 40px; }
  .clip { padding: 36px 26px 26px; }
  .clip .big { font-size: 54px; }
  .why-floor { height: 72px; margin-top: 150px; }
  .why-floor img { left: 2%; bottom: 18px; width: 190px; }
  .why-floor .mat { left: auto; right: 5%; bottom: 16px; width: 44%; height: 34px; font-size: 12px; }
  .why-floor .pile { left: auto; right: 12%; bottom: 46px; width: 30%; }
  .last { padding: 72px 0 40px; }
  .footer { margin-top: 56px; }
  .footer span { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .bubble { opacity: 1; transform: rotate(var(--r, 0deg)); }
}