/* Server Shift website. Rules from Dilon's design video: three planes (huge type behind, the phone in the middle,
   buttons and tickets on top), ONE signal color that only means "tap this" (green), and no middle sizes:
   one huge thing per section, everything else small. Colors: espresso, cream paper, brass. */
:root {
  --bg: #17100b; --bg-2: #1f160f; --line: #3a2a1d; --paper: #f4ecdc; --paper-2: #e9dcc4; --ink: #22170f;
  --text: #f1e7d4; --muted: #a8957c; --ghost: #2a1d14; --brass: #c99a46;
  --tap: #3f9a52; --tap-dark: #2a6e39; --tap-edge: #133a1c;
  --f-big: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --f-ui: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--f-ui); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.label { font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.small { font-size: 14px; color: var(--muted); max-width: 30em; margin: 0; }
.giant { font: 900 1em/.8 var(--f-big); text-transform: uppercase; letter-spacing: -.01em; margin: 0; user-select: none; }

/* the one tap color */
.tap { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--tap), var(--tap-dark)); color: #fff;
  text-decoration: none; font: 600 16px/1 var(--f-ui); padding: 16px 26px; border-radius: 999px; border: 1px solid #1d4d27;
  box-shadow: inset 0 1px 0 rgba(220,255,220,.35), 0 4px 0 var(--tap-edge), 0 14px 30px rgba(0,0,0,.45); transition: transform .08s, box-shadow .08s; white-space: nowrap; }
.tap:hover { filter: brightness(1.07); }
.tap:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(220,255,220,.35), 0 1px 0 var(--tap-edge), 0 8px 20px rgba(0,0,0,.4); }
.tap svg { width: 14px; height: 14px; }
.tap.sm { padding: 9px 16px; font: 600 13px/1 var(--f-ui); letter-spacing: 0; text-transform: none; color: #fff; box-shadow: inset 0 1px 0 rgba(220,255,220,.35), 0 3px 0 var(--tap-edge); }
.bar nav { align-items: center; }
a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 6px; }

/* header */
.bar { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1200px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 18px max(20px, env(safe-area-inset-left)); }
.page .bar { position: relative; }
.mark { font: 900 22px/1 var(--f-big); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: var(--text); }
.mark span { color: var(--brass); }
.bar .mark { white-space: nowrap; }
@media (max-width: 480px) { .bar nav a[href="./#restaurants"] { display: none; } }
.bar nav { display: flex; gap: clamp(14px, 3vw, 28px); font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.bar nav a:not(.tap) { text-decoration: none; color: var(--muted); }
.bar nav a:not(.tap):hover { color: var(--text); }

/* a real phone (Pixel-style, 20:9 screen). --w sets the size. */
.device { --w: 300px; position: relative; width: var(--w); margin: 0; padding: calc(var(--w) * .034); border-radius: calc(var(--w) * .135);
  background: #0b0b0c;
  box-shadow: 0 0 0 calc(var(--w) * .007) #575a60, 0 0 0 calc(var(--w) * .012) #232427,
    inset 0 0 calc(var(--w) * .01) #000, 0 calc(var(--w) * .1) calc(var(--w) * .2) rgba(0,0,0,.6), 0 calc(var(--w) * .02) calc(var(--w) * .04) rgba(0,0,0,.5); }
.device img, .device video { display: block; width: 100%; aspect-ratio: 9 / 20; object-fit: cover; border-radius: calc(var(--w) * .1); background: #140c07; }
.device::before { content: ""; position: absolute; z-index: 2; top: calc(var(--w) * .052); left: 50%; width: calc(var(--w) * .034); aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 38% 38%, #2c3644 0 18%, #07080a 46%); box-shadow: 0 0 0 1px #000; }
.device::after { content: ""; position: absolute; right: calc(var(--w) * -.022); top: 21%; width: calc(var(--w) * .011); height: 27%;
  border-radius: 0 3px 3px 0; background: linear-gradient(#5d6067 0 26%, transparent 26% 36%, #5d6067 36% 100%); }

/* tickets that float on top of the phone (the top plane) */
.ticket { position: absolute; z-index: 3; background: var(--paper); color: var(--ink); font: 500 11px/1.45 var(--f-mono); letter-spacing: .04em;
  padding: 10px 14px 12px; border-radius: 3px; box-shadow: 0 18px 30px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3); text-transform: uppercase; white-space: nowrap; }
.ticket b { display: block; font: 900 26px/1 var(--f-big); letter-spacing: 0; margin-top: 2px; }
.ticket .plus { color: var(--ink); }

/* hero, driven by scrolling (Dilon 2026-11-12): at the top the name is in front and readable, the phone sits under it.
   Scrolling about 70% of a screen holds the hero in place while the phone slides up over "SHIFT" and the name steps back
   (smaller, darker); then the tickets pop in and the page scrolls on. The script at the end of index.html moves things and
   adds .pin / .landed. Without the script, or with "reduce motion" on, you get the finished picture. */
.hero { --F: clamp(120px, 22vw, 300px); --top: 84px; position: relative; isolation: isolate; }
.hero-sticky { position: relative; height: 100svh; min-height: 600px; overflow-x: clip; }
.hero.pin .hero-pin { height: calc(100svh + var(--pin, 600px)); }
.hero.pin .hero-sticky { position: sticky; top: 0; }
.hero-sticky::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(60% 50% at 50% 42%, #3a2617 0, transparent 70%), linear-gradient(var(--bg), var(--bg-2)); }
.hero-name { position: absolute; z-index: 1; top: var(--top); left: 0; right: 0; text-align: center; color: var(--paper); font-size: var(--F);
  transform-origin: 50% 0; }
.hero-name span { display: block; }
.hero-name span + span { color: var(--brass); }
.hero-kick { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--top) + var(--F) * 1.6 + 22px); text-align: center;
  padding-inline: 20px; }
.hero-kick .lede { font-size: 17px; line-height: 1.5; color: var(--text); max-width: 26em; margin: 8px auto 0; }
.hero-stage { position: absolute; z-index: 2; left: 50%; top: 0; transform: translate(-50%, calc(var(--top) + var(--F) * .7)) rotate(-3deg); }
.hero.pin .hero-stage, .hero.pin .hero-name { will-change: transform; }
.hero .device { --w: clamp(220px, 56vw, 300px); }
.hero .device video { pointer-events: none; }
.hero .t1 { left: calc(100% - 30px); top: 22%; --r: 4deg; }
.hero .t2 { right: calc(100% - 26px); bottom: 9%; --r: -5deg; }
.hero .ticket { transform: rotate(var(--r)); transition: opacity .2s, transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.hero.pin:not(.landed) .ticket { opacity: 0; transform: rotate(0deg) translateY(18px) scale(.6); transition-duration: .15s; }
.hero.landed .t2 { transition-delay: .12s; }
.hero-foot { display: grid; justify-items: center; gap: 12px; text-align: center; padding-block: calc(36px + var(--spill, 0px)) 24px;
  background: linear-gradient(var(--bg-2), var(--bg)); }

/* sections share the same three-plane idea: a huge ghost word behind */
.sec { position: relative; padding-block: 110px; overflow: hidden; isolation: isolate; }
.ghost { position: absolute; z-index: -1; left: 50%; top: 40px; transform: translateX(-50%); color: var(--ghost); font-size: clamp(140px, 26vw, 360px); white-space: nowrap; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.sec-head .label { color: var(--brass); }
.sec-title { font: 900 clamp(56px, 9vw, 120px)/.85 var(--f-big); text-transform: uppercase; margin: 10px 0 0; }

/* how a shift works: four tickets on a steel ticket rail, the server doing each step */
.rail-wrap { position: relative; }
.rail { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 20px;
  background: linear-gradient(#d9dde1, #9aa0a6 40%, #5f646a 60%, #b3b8bd); box-shadow: 0 8px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7); }
.tickets { list-style: none; margin: 0; padding: 10px max(20px, calc((100vw - 1200px) / 2 + 20px)) 44px; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.tkt { position: relative; filter: drop-shadow(0 22px 22px rgba(0,0,0,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.tkt:nth-child(1) { --tilt: -1.4deg; } .tkt:nth-child(2) { --tilt: 1deg; } .tkt:nth-child(3) { --tilt: -.6deg; } .tkt:nth-child(4) { --tilt: 1.5deg; }
.paper { position: relative; background: #fbf8f1; color: #1c1915; font: 400 12.5px/1.55 var(--f-mono); padding: 22px 18px 34px;
  transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 0; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x; }
@media (hover: hover) { .tkt:hover .paper { transform: rotate(calc(var(--tilt, 0deg) * -1.6)); } }
.paper .t-top { display: flex; justify-content: space-between; gap: 8px; color: #7d7568; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.paper h3 { font: 500 15px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0 2px; }
.paper .t-meta { margin: 0; color: #4d473e; }
.paper hr { border: 0; border-top: 1px dashed #9a9183; margin: 11px 0; }
.paper .items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.paper .items li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.paper .items img { width: 30px; height: 26px; object-fit: contain; }
.paper .row { display: flex; justify-content: space-between; gap: 10px; }
.paper .row.dim { color: #7d7568; }
.paper .row.goal { color: #6b4d12; font-size: 11.5px; }
.paper .notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; color: #4d473e; font-size: 11.5px; line-height: 1.5; }
.paper .notes li { padding-left: 14px; position: relative; }
.paper .notes li::before { content: "-"; position: absolute; left: 0; }
.t-amt { margin-top: 14px; padding-top: 10px; border-top: 2px solid #1c1915; min-height: 92px; padding-right: 72px; }
.t-amt small { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #7d7568; }
.t-amt b { display: block; font: 900 46px/.95 var(--f-big); letter-spacing: 0; margin-top: 2px; }
/* the server (or bartender) doing the step: the game's own animation, standing in front of the ticket */
.mover { position: absolute; z-index: 2; right: 0; bottom: -10px; width: calc(var(--fw) * 1px); height: 180px; background-repeat: no-repeat;
  background-size: auto 180px; background-position: 0 0; transform: scale(.72); transform-origin: 100% 100%;
  animation: sprite calc(var(--n) * 83ms) steps(var(--n)) infinite; pointer-events: none; }
@keyframes sprite { to { background-position: calc(var(--n) * var(--fw) * -1px) 0; } }
.swipe { display: none; padding-inline: max(20px, env(safe-area-inset-left)); }

/* two wallets: before/after renovation on a phone, and what each wallet buys */
.money { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.ba-col { display: grid; justify-items: center; gap: 16px; text-align: center; position: sticky; top: 28px; }
.ba { --w: 300px; --x: 50%; }
.ba-view { position: relative; overflow: hidden; border-radius: calc(var(--w) * .1); aspect-ratio: 9 / 20; background: #140c07; }
.ba-view img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--paper); box-shadow: 0 0 12px rgba(0,0,0,.7); pointer-events: none; }
.ba-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6' fill='none' stroke='%2322170f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,.55); }
.ba-tag { position: absolute; top: 48px; z-index: 1; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper);
  background: rgba(23,16,11,.72); padding: 6px 8px; border-radius: 4px; pointer-events: none; }
.ba-tag.l { left: 10px; } .ba-tag.r { right: 10px; }
.ba input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.wallets { display: grid; gap: 22px; min-width: 0; }
.wallet { border: 1px solid var(--line); border-radius: 12px; padding: clamp(18px, 3vw, 28px); background: linear-gradient(#21170f, #19110b); }
.w-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.w-big { font: 900 clamp(64px, 8vw, 92px)/.85 var(--f-big); color: var(--brass); }
.wallet.tips .w-big { color: var(--paper); }
.w-top .label { color: var(--text); }
.w-lead { margin: 4px 0 0; color: var(--muted); font-size: 14px; max-width: 30em; }
.w-group { margin: 22px 0 10px; color: var(--brass); }
.buy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.wallet.tips .buy { margin-top: 22px; }
.buy li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.025); border: 1px solid #2e2218; }
.buy img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.buy b { display: block; font: 600 14px/1.25 var(--f-ui); color: var(--text); }
.buy small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.buy .price { display: block; margin-top: 3px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .06em; color: var(--brass); }
.w-note { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }

/* dress for the tip: the same server in every uniform, with a price tag */
.lineup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: end; }
.fit { position: relative; display: grid; justify-items: center; gap: 16px; text-align: center; }
.fit::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 96px; height: 18px; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.6), transparent 70%); z-index: -1; }
.fit img { height: clamp(190px, 25vw, 320px); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(0,0,0,.5)); transition: transform .3s; }
@media (hover: hover) { .fit:hover img { transform: translateY(-6px); } }
.tag { width: 100%; max-width: 150px; background: var(--paper); color: var(--ink); border-radius: 4px; padding: 10px 8px 11px; display: grid; gap: 2px;
  box-shadow: 0 10px 20px rgba(0,0,0,.45); }
.fit:nth-child(odd) .tag { transform: rotate(-1.5deg); } .fit:nth-child(even) .tag { transform: rotate(1.2deg); }
.tag b { font: 900 30px/.95 var(--f-big); }
.tag span { font: 600 12.5px/1.25 var(--f-ui); }
.tag small { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #6f6252; }
.dress-more { margin-top: 30px; }

/* restaurants: one slide per job, its name huge behind its phone */
.jobs { list-style: none; margin: 0; padding: 0 max(20px, calc((100vw - 1200px) / 2 + 20px)) 24px; display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 72vw, 340px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.job { scroll-snap-align: center; position: relative; display: grid; justify-items: center; padding-top: 38px; isolation: isolate; }
.job .giant { position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); font-size: 112px; color: #2e2017; text-align: center; white-space: nowrap; }
.job .device { --w: 220px; }
.job .cap { width: 100%; margin-top: 26px; border-top: 1px solid var(--line); padding-top: 12px; }
.job .cap h3 { font: 600 15px/1.3 var(--f-ui); margin: 6px 0 4px; }
.job .cap p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.jobs-hint { margin-top: 14px; }
.job-meta { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: end; margin-top: 14px; }
.job-meta .host { width: 52px; height: 90px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.job-meta dl { margin: 0; display: grid; gap: 4px; }
.job-meta dl div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
.job-meta dt { font: 500 10.5px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.job-meta dd { margin: 0; font-size: 13px; color: var(--text); }

/* daily */
.daily-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ticks li { border-top: 1px solid var(--line); padding: 14px 0; display: grid; grid-template-columns: 76px 1fr; gap: 8px; color: var(--muted); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li span { font: 500 11px/1.9 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.ticks b { color: var(--text); font-weight: 600; }
.shelf { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; padding: 28px 22px 34px; border-radius: 6px;
  background: linear-gradient(#24180f, #1b120b); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px rgba(0,0,0,.45); }
.shelf::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; background: linear-gradient(#4a3424, #2c1f15); box-shadow: 0 6px 10px rgba(0,0,0,.5); z-index: 0; }
.shelf img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,.6)); }

/* last call */
.last { text-align: center; padding-block: 120px 130px; position: relative; overflow: hidden; isolation: isolate; }
.last .giant { font-size: clamp(64px, 13vw, 190px); color: var(--paper); margin: 14px 0 34px; }
.last .giant span { color: var(--brass); }

/* footer */
.foot { border-top: 1px solid var(--line); background: #120c08; padding-block: 64px max(28px, env(safe-area-inset-bottom)); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.foot-brand .mark { font-size: 34px; display: inline-block; margin-bottom: 12px; }
.foot-brand p { color: var(--muted); font-size: 14px; max-width: 24em; margin: 0 0 22px; }
.foot h4 { font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 4px 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.foot ul a { color: var(--text); text-decoration: none; opacity: .85; }
.foot ul a:hover { opacity: 1; text-decoration: underline; }
.foot ul .soon { color: var(--muted); }
.foot ul .soon small { display: block; font: 500 10px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.foot-base { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
  font: 400 11px/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* text pages (privacy, terms, help) */
.page main { padding-block: 24px 96px; }
.doc { max-width: 720px; margin: 0 auto; }
.doc .giant { font-size: clamp(64px, 12vw, 132px); color: var(--paper); margin: 12px 0 18px; }
.doc .updated { margin-bottom: 40px; }
.doc h2 { font: 600 16px/1.35 var(--f-ui); margin: 36px 0 8px; color: var(--text); }
.doc p, .doc li { color: #d3c5ad; margin: 0 0 12px; }
.doc a { color: var(--text); }
.doc ul { padding-left: 1.2em; }
.qa { border-top: 1px solid var(--line); padding: 18px 0 6px; }
.qa h2 { margin-top: 0; }

@media (max-width: 860px) {
  .hero { --F: 31vw; --top: 70px; }
  .hero .device { --w: clamp(220px, 70vw, 300px); }
  .hero .t1 { left: auto; right: -26px; top: 14%; }
  .hero .t2 { right: auto; left: -30px; bottom: 16%; }
  .daily-grid, .money { grid-template-columns: minmax(0, 1fr); }
  .ba-col { position: static; }
  .buy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buy li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; align-content: start; }
  .buy img { width: 40px; height: 40px; }
  .buy li:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
  .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .sec { padding-block: 80px; }
}
@media (max-width: 1100px) {
  .tickets { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(300px, 80vw); overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 54px; }
  .tickets::-webkit-scrollbar { display: none; }
  .tkt { scroll-snap-align: center; }
  .swipe { display: block; margin-top: -26px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tap, .paper { transition: none; } .mover { animation: none; } }