/* Layout: full-bleed illustrated Atlanta (landscape or portrait art by screen shape) with live ads warped onto the blank billboards, tappable landmark pins, and floating UI. Single committed daylight look. */
:root{
  color-scheme:light;
  --sky:#9fd0ee; --card:#ffffff; --ink:#1f2a24; --muted:#5f6d66; --line:#e3e8e4;
  --green:#22a565; --green-ink:#ffffff; --clay:#b8432a; --peach:#f2a05a;
  --display:"Bungee",Impact,"Arial Black",sans-serif;
  --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html,body{height:100%}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(#8cc6ea,#cfe6c4);color:var(--ink);font-family:var(--body);overflow:hidden;font-size:15px}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--peach);outline-offset:2px}

#view{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab}
#view.drag{cursor:grabbing}
#stage{position:absolute;left:0;top:0;will-change:left,top}
#stage img.art{display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}

.bb{position:absolute;left:0;top:0;width:280px;height:160px;transform-origin:0 0;cursor:pointer;overflow:hidden;background:#fff;border:0;padding:0}
.bb .ad{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:14px 18px;gap:6px;transition:opacity .9s ease;text-align:left;overflow:hidden}
.bb .ad b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.02;letter-spacing:.01em;position:relative;z-index:1;text-wrap:balance}
.bb .ad span{font-weight:800;font-size:15px;position:relative;z-index:1;opacity:.92}
.bb .ad i{position:absolute;display:block}
.bb .ad.sale{border:6px dashed var(--green);background:#fff;color:var(--ink)}
.bb .ad.sale b{color:var(--green)}
.bb:hover .ad,.bb:focus-visible .ad{filter:brightness(1.06)}

.pin{position:absolute;transform:translate(-50%,-100%);border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center}
.pin .bub{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 6px 16px rgba(20,40,30,.3);transition:transform .15s}
.pin .stem{width:3px;height:10px;background:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.pin:hover .bub,.pin:focus-visible .bub{transform:scale(1.12)}
.pin .lab{position:absolute;bottom:56px;white-space:nowrap;background:var(--ink);color:#fff;font-weight:800;font-size:12.5px;padding:3px 9px;border-radius:999px;opacity:0;transform:translateY(4px);transition:.15s;pointer-events:none}
.pin:hover .lab,.pin:focus-visible .lab{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){.pin .bub{animation:bob 3s ease-in-out infinite}.pin:nth-child(2n) .bub{animation-delay:-1.4s}}
@keyframes bob{50%{translate:0 -4px}}

.ui{position:fixed;z-index:3}
.card{background:var(--card);border-radius:22px;box-shadow:0 10px 30px rgba(20,40,30,.22)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:10px 18px;font-weight:800;text-decoration:none;font-size:15px;white-space:nowrap}
.btn.green{background:var(--green);color:var(--green-ink)}
.btn.plain{background:#f1f4f2;color:var(--ink)}
.btn.green:hover{filter:brightness(1.06)}
.btn.plain:hover{background:#e6ebe8}

.topbar{z-index:5;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;max-width:calc(100% - 32px)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:20px;color:var(--clay);white-space:nowrap}
.brand span{color:#1f6b4a}
.live{display:flex;align-items:center;gap:6px;color:var(--green);font-weight:800;white-space:nowrap}
.live i{width:9px;height:9px;border-radius:50%;background:var(--green)}
@media (prefers-reduced-motion:no-preference){.live i{animation:pulse 2s infinite}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,165,101,.6)}70%{box-shadow:0 0 0 8px rgba(34,165,101,0)}100%{box-shadow:0 0 0 0 rgba(34,165,101,0)}}
.beta{font-size:12px;font-weight:800;color:var(--muted);border:1.5px solid var(--line);border-radius:999px;padding:2px 9px}
.topbar .acts{display:flex;gap:6px}
.live>span{white-space:nowrap}

/* language switcher */
.langsw{position:relative;display:inline-block}
.langbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:#f1f4f2;border-radius:999px;padding:10px 13px;font-weight:800;font-size:14px;letter-spacing:.04em;color:var(--ink)}
.langbtn:hover{background:#e6ebe8}
.langbtn .caret{font-size:10px;color:var(--muted)}
.langmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;background:#fff;border-radius:14px;padding:6px;display:grid;gap:2px;z-index:10;box-shadow:0 14px 34px rgba(20,40,30,.25)}
.langmenu button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:9px;font-weight:700;font-size:15px}
.langmenu button:hover,.langmenu button:focus-visible{background:#f1f4f2}
.langmenu button[aria-checked="true"]{color:var(--green)}
.langmenu button[aria-checked="true"]::after{content:" ✓"}
.chips{top:calc(76px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 32px)}
.chip{background:var(--card);border:0;border-radius:999px;padding:7px 14px;font-weight:800;font-size:14px;box-shadow:0 4px 14px rgba(20,40,30,.18);white-space:nowrap}
.chip:hover{background:#f6faf7}
.banner{top:calc(122px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-weight:800;border-radius:12px;padding:8px 20px;box-shadow:0 6px 18px rgba(20,90,50,.3);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}

.cta{bottom:calc(14px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 32px));padding:16px 16px 12px;display:grid;gap:12px}
.who{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted);flex-wrap:wrap}
.who b{color:var(--ink)}
.avs{display:flex}
.avs span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:18px;border:2px solid #fff;margin-left:-8px;background:#ffe2c4}
.avs span:first-child{margin-left:0}
.avs span:nth-child(2){background:#cfe8d9}.avs span:nth-child(3){background:#d6e4f5}.avs span:nth-child(4){background:#f6d6d0}
.cta .row{display:flex;gap:10px}
.cta .big{flex:1;padding:16px 20px;font-size:19px}
.cta .row .plain{flex:0 0 auto}
.cta .foot{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.cta .foot button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px;color:var(--muted)}
#farm{position:absolute;transform-origin:0 0;background:#1b2130;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px;color:#fff;padding:28px 30px;display:flex;flex-direction:column;gap:16px;border-left:10px solid #b5603d}
#farm.tall{border-left:0;border-top:10px solid #b5603d}
#farm.wide{padding-top:92px}
body.atwall .chips,body.atwall .banner{display:none}
#farm header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
#farm h2{margin:0;font-family:var(--display);font-weight:400;font-size:44px;line-height:1;color:var(--peach)}
#farm header p{margin:6px 0 0;font-weight:700;color:#c9d1e3;font-size:17px}
#farm header .btn{font-size:16px;padding:12px 20px}
.wall{display:grid;grid-template-columns:repeat(auto-fill,90px);grid-auto-rows:90px;grid-auto-flow:dense;gap:8px;justify-content:center}
.tile{position:relative;border:0;padding:8px 10px;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;text-align:left;gap:3px;box-shadow:0 3px 10px rgba(0,0,0,.35);transition:transform .15s}
.tile:hover,.tile:focus-visible{transform:scale(1.04);z-index:2}
.tile b{font-family:var(--display);font-weight:400;font-size:13px;line-height:1.05;position:relative;z-index:1}
.tile span{font-weight:800;font-size:10.5px;line-height:1.2;opacity:.9;position:relative;z-index:1}
.tile.w2{grid-column:span 2}.tile.h2{grid-row:span 2}.tile.w3{grid-column:span 3}
.tile.w2 b,.tile.h2 b{font-size:18px}.tile.h2:not(.w2) b{font-size:15px;overflow-wrap:anywhere}.tile.w2.h2 b,.tile.w3 b{font-size:24px}.tile.w2.h2 span,.tile.w3 span{font-size:13px}
.tile.open{background:rgba(255,255,255,.06);border:2px dashed rgba(244,162,89,.75);color:#f4c79c;box-shadow:none}
.tile.open b{color:#f4a259}
.tile i{position:absolute;display:block}
.wallbtn{right:16px;top:50%;transform:translateY(-50%);border:0;background:var(--ink);color:#fff;font-weight:800;font-size:14px;padding:12px 16px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.35);z-index:4}
.wallbtn:hover{background:#2c3a33}
@media (max-width:760px),(max-aspect-ratio:1/1){.wallbtn{top:calc(76px + env(safe-area-inset-top,0px));transform:none;padding:9px 13px;font-size:13px}}
.hint{bottom:calc(14px + env(safe-area-inset-bottom,0px));right:16px;background:rgba(31,42,36,.78);color:#fff;font-weight:700;font-size:13px;padding:7px 12px;border-radius:999px}

.pop{left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(320px,calc(100% - 32px));padding:16px;display:grid;gap:8px;z-index:4}
.pop h3{margin:0;font-size:19px;padding-right:30px}
.pop p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.45}
.pop .tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--clay)}
.pop .x{position:absolute;top:10px;right:10px;border:0;background:#f1f4f2;width:30px;height:30px;border-radius:50%;font-weight:900}
.pop .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

@media (max-width:760px),(max-aspect-ratio:1/1){
  .topbar{gap:8px;padding-left:14px}.topbar .beta,.topbar .acts .plain{display:none}
  .brand{font-size:17px}
  .chips,.banner,.hint{display:none}
  .cta{padding:12px 12px 10px;gap:9px}
  .who{font-size:13.5px}.avs span{width:26px;height:26px;font-size:15px}
  .cta .big{font-size:17px;padding:13px 16px}
  .pop{bottom:calc(178px + env(safe-area-inset-bottom,0px))}
}

.modal{position:fixed;inset:0;z-index:6;background:rgba(15,30,22,.45);display:grid;place-items:center;padding:16px}
.modal .card{width:min(640px,100%);max-height:calc(100% - 32px);overflow:auto;padding:24px;position:relative}
.modal h2{margin:0 0 4px;font-family:var(--display);font-weight:400;color:var(--clay);font-size:26px}
.modal .sub{color:var(--muted);margin:0 0 16px}
.modal .card>div>.sub:first-child{margin-top:0}
.modal .x{position:absolute;top:14px;right:14px;border:0;background:#f1f4f2;width:36px;height:36px;border-radius:50%;font-weight:900;font-size:16px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:2px 12px;counter-increment:s}
.steps li::before{content:counter(s);grid-row:1/3;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;font-weight:900;display:grid;place-items:center}
.steps b{font-size:16px}
.steps span,.faqlist span{color:var(--muted);font-size:14.5px}
.faqlist{display:grid;gap:14px}.faqlist div{display:grid;gap:2px}
.tip{margin-top:16px;background:#eef7f1;border-radius:12px;padding:12px 14px;font-size:14.5px}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px;border-bottom:2px solid var(--ink)}
td{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:top}
td small{display:block;color:var(--muted)}
td.n{text-align:right;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}
.fine{color:var(--muted);font-size:13px;margin-top:12px}
.privnote{left:16px;top:calc(176px + env(safe-area-inset-top,0px));width:min(330px,calc(100% - 32px));padding:14px 16px;display:grid;gap:10px;font-size:14px;font-weight:700;z-index:5}
.privnote .acts{display:flex;gap:8px;flex-wrap:wrap}
.privnote .btn{padding:8px 14px;font-size:14px}
/* On phones the note sits just above the Play box, so it doesn't cover the Big Peach Mall button or the billboards at the top. */
@media (max-width:760px),(max-aspect-ratio:1/1){.privnote{top:auto;bottom:calc(190px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%)}}
@media (max-width:440px){.live{display:none}.topbar{gap:6px;padding-left:12px}}


/* tap feedback and the card beside what was tapped */
.bb.hit,.tile.hit{outline:5px solid #f4a259;outline-offset:-5px;filter:brightness(1.12)}
.pin.hit .bub{transform:scale(1.18)}
.pop.anchored{bottom:auto}
.pop:not([hidden]){animation:popin .18s ease-out}
@keyframes popin{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pop:not([hidden]){animation:none}}
.pop{z-index:6}