/* r19 · 23.10.2026: six fixes from Grzegorz on v18 (strona/agencje/FEEDBACK-R19.md). Everything else is r18 as it was. */

/* 1–2 · the outline: one thin line, with the time, the island and the status glyphs at the top, like the real phone.
   Desktop: the phone's own box (as before). Phones: r11-hero.js sets --gu / left / top each frame (placeGhost). */
.h17-ghost { --gu: var(--u); box-shadow: inset 0 0 0 1px rgba(255,255,255,.66), 0 0 0 1px rgba(0,0,0,.14); background: none; }
.h17-ghost::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.h19-sb { position: absolute; left: calc(13.65 * var(--gu)); right: calc(13.65 * var(--gu)); top: calc(13.65 * var(--gu)); height: calc(59 * var(--gu)); color: rgba(255,255,255,.8);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.h19-sb .t { position: absolute; left: calc(40 * var(--gu)); top: calc(21 * var(--gu)); font-size: calc(17 * var(--gu)); line-height: calc(20 * var(--gu)); font-weight: 600; letter-spacing: -.01em; }
.h19-sb .di { position: absolute; left: 50%; top: calc(11 * var(--gu)); width: calc(126 * var(--gu)); height: calc(37.33 * var(--gu)); margin-left: calc(-63 * var(--gu)); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.h19-sb .ic { position: absolute; right: calc(36 * var(--gu)); top: calc(25 * var(--gu)); height: calc(12 * var(--gu)); display: flex; align-items: center; gap: calc(7 * var(--gu)); fill: currentColor; }
.h19-sb svg { display: block; height: calc(12 * var(--gu)); width: auto; }
.h19-sb svg.w { height: calc(11.5 * var(--gu)); }
.h19-sb svg.b { height: calc(13 * var(--gu)); }
@media (max-width: 759px) {
  .h17-ghost { --gh: 0px; left: 50%; top: 50%; width: calc(417.3 * var(--gu)); height: calc(871.3 * var(--gu)); margin: calc(-435.65 * var(--gu)) 0 0 calc(-208.65 * var(--gu)); border-radius: calc(63 * var(--gu)); }
  .h17-ghost::after { inset: calc(13.65 * var(--gu)); border-radius: calc(49.35 * var(--gu)); }
}

/* 3 · the lines beside the phone in the headline's font (size fitted in r11-hero.js: fitSays) */
.h17-say { font-weight: 850; font-size: clamp(44px, 6.6vw, 96px); line-height: .93; letter-spacing: -.042em; }
@media (max-width: 759px) { .h17-say { font-size: 44px; line-height: .95; } }

/* 5 · Navigate: bigger, lit, and the section ends above the tab bar (83.67u), so the button and its note are never under it */
.jp-where { height: calc(206 * var(--u)); padding-top: calc(16 * var(--u)); }
.jp-where-btn { height: calc(64 * var(--u)); font-size: calc(18 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(36 * var(--u)) rgba(199,230,53,.3), 0 0 0 1px rgba(0,0,0,.25); }
.jp-where-btn.hint { box-shadow: 0 calc(10 * var(--u)) calc(44 * var(--u)) rgba(199,230,53,.6), 0 0 0 calc(4 * var(--u)) rgba(199,230,53,.35), 0 0 0 1px rgba(0,0,0,.25); }

/* 6 · the tram runs on the rails: it lives inside the camera wrapper with the map, so the zoom and the drift move it too */
.h19-cam { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); height: calc(844 * var(--u)); transform-origin: calc(306 * var(--u)) calc(574 * var(--u)); will-change: transform; }
.h11-map.live .h19-cam { animation: h17-cam 2.8s cubic-bezier(.2,.7,.2,1) both, h17-drift 16s ease-in-out 2.8s infinite alternate; }
.h11-map.live .h11-mapimg img { animation: none; }
.h11-mapimg img { transform-origin: 0 0; }
.h19-rail { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); height: calc(844 * var(--u)); pointer-events: none; overflow: visible; }
.h19-rail .tram rect { fill: #2b2e33; stroke: rgba(255,255,255,.22); stroke-width: .6; }
.h19-rail .tram rect.win { fill: #F2D27A; stroke: none; filter: drop-shadow(0 0 2px rgba(242,210,122,.9)); }
.h19-rail .tram .halo { fill: rgba(255,240,200,.22); }
@media (prefers-reduced-motion: reduce) { .h19-cam { animation: none !important; } .h19-rail { display: none; } }

/* r19b · 23.10 (phone screenshot): the cap line "For festivals up to 10,000 guests" and the credit "Ellis Rook · Main Stage" leave the hero.
   The phone layout itself stays as it is until Grzegorz finds another video (his call). */
.h11-copy .cap, .h11-credit { display: none; }