/* PaddleClub polish layer (2026-10-23). Loaded after the page's own styles; the page markup is unchanged.
   Approved by Troy 2026-10-23: sign sheet + sticky Sign bar, How it works below the numbers, email field fix,
   iPhone touches 1 (pressed states), 2 (frosted bar), 4 (sheet behavior), 5 (icons), 6 (bounce color). Option 3 held. */

/* ---------- 1. pressed states (the site turns off Safari's tap flash; nothing replaced it) ---------- */
.btn{transition:transform .12s ease,filter .12s ease}
.btn:active{transform:scale(.97);filter:brightness(.92)}
summary:active{background:var(--color-bg)}
main a:active,.nav__link:active,.linkbtn:active,.footer a:active{opacity:.55}
.vid__rail button span.i,.vid__pause,.vid__chip,.pcx-x{transition:transform .12s ease}
.vid__rail button:active span.i,.vid__pause:active,.vid__chip:active,.pcx-x:active{transform:scale(.92)}

/* ---------- 2. frosted top bar (solid where blur is unsupported) ----------
   v2 (Troy, 2026-10-23 "just do A"): Safari 26 tints the band above the page with a flat copy of a sticky bar's own
   background, which left a seam above the frosted bar and a white band over the blue hero. The bar itself is now
   transparent (nothing for Safari to sample) and the glass sits on ::before (pseudo-elements are not sampled),
   bleeding 120px up behind the status bar so the blur runs from the top of the screen through the bar. */
.nav.nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.nav.nav>*{position:relative;z-index:1}
.nav.nav::before{content:"";position:absolute;left:0;right:0;bottom:-1px;top:-120px;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.78) 0,rgba(255,255,255,.78) 8px,#fff calc(100% - 120px));-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(26,26,24,.10)}
/* v3 (Troy, 2026-10-23): Safari still paints a flat band, so give it an exact white to copy (a 4px fixed strip, polish.js)
   and fade the glass from frosted at the bar's bottom edge to solid white at its top, where it meets the band. */
.pcx-tint{position:fixed;top:0;left:0;right:0;height:4px;z-index:99;background-color:#fff;pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav.nav::before{background:var(--color-surface)}}

/* ---------- 6. rubber-band overscroll: white above the top bar, navy below the footer ---------- */
html{background:linear-gradient(var(--color-surface) 50%,var(--color-accent-dark) 50%)}

/* ---------- form fixes ---------- */
/* a global input[type=email] rule outranked .in: 15px (iOS zooms on focus) and a grey fill that read as disabled */
input[type="email"].in{font-size:1rem;background:var(--color-surface);border-color:var(--color-silver-dark)}
.back .linkbtn{display:inline-flex;align-items:center;min-height:44px}

/* ---------- page order: How it works below the numbers (lean city pages pinned it second) ---------- */
#vCity[data-lean] #howCity{order:-4}

/* ---------- sign sheet ---------- */
.pcx-on #signcard:not(.pcx-open){display:none!important}
#signcard.pcx-open{position:fixed;left:0;right:0;bottom:0;z-index:201;width:auto;max-width:640px;margin:0 auto;max-height:92vh;max-height:92dvh;overflow-y:auto;
  overscroll-behavior:contain;border:0;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.18);
  padding:22px max(16px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
#signcard.pcx-open > div:first-of-type{padding-right:44px}
.pcx-grab{position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--color-silver)}
.pcx-x{position:absolute;top:8px;right:max(8px,env(safe-area-inset-right,0px));width:44px;height:44px;display:grid;place-items:center;border:0;padding:0;background:none;cursor:pointer}
.pcx-x::before{content:"";grid-area:1/1;width:30px;height:30px;border-radius:50%;background:rgba(118,126,140,.16)}
.pcx-x svg{grid-area:1/1;width:12px;height:12px;stroke:var(--color-text-muted);stroke-width:2.4;stroke-linecap:round;fill:none}
.pcx-x:focus-visible{outline:3px solid var(--color-accent);outline-offset:-4px;border-radius:50%}
.pcx-scrim{position:fixed;inset:0;z-index:200;background:rgba(17,45,78,.42)}
.pcx-lock,.pcx-lock body{overflow:hidden}
.pcx-lock #pcTs{position:fixed;z-index:300;left:50%;top:calc(env(safe-area-inset-top,0px) + 84px);transform:translateX(-50%)}
#signcard .pcx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-sm)}
#signcard .row2b{grid-template-columns:minmax(0,1fr)}
.pcx-zipheld{display:none!important}
.pcx-ziprow{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border-bottom:1px solid var(--color-border)}
.pcx-zipl{flex:1;font-size:.875rem;font-weight:600}
.pcx-ziprow b{font-size:1rem;font-weight:600;color:var(--color-text);font-variant-numeric:tabular-nums}
.pcx-zipc{min-height:44px;padding:0 4px 0 10px;border:0;background:none;font:600 .9375rem var(--font-sans);color:var(--color-accent);cursor:pointer}
.pcx-sees{background:var(--color-accent-lt);border-radius:var(--radius-md);padding:12px 14px;display:grid;gap:2px}
.pcx-sees span{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent)}
.pcx-sees b{font-size:1.0625rem;font-weight:600;color:var(--color-accent-dark);overflow-wrap:anywhere}
.pcx-sees small{font-size:.8125rem;color:var(--color-text)}
@media (prefers-reduced-motion:no-preference){
  #signcard.pcx-open.pcx-in{animation:pcxUp .42s cubic-bezier(.32,.72,0,1)}
  .pcx-scrim.pcx-in{animation:pcxFade .3s ease}
  #signcard.pcx-snap{transition:transform .3s cubic-bezier(.32,.72,0,1)}
  @keyframes pcxUp{from{transform:translateY(100%)}to{transform:none}}
  @keyframes pcxFade{from{opacity:0}to{opacity:1}}}

/* after signing: four steps */
.sent.pcx-done{background:none;padding:0}
.pcx-card-done [data-back]{display:none}
.pcx-done > :not(.pcx-steps-wrap){display:none}
.pcx-steps-wrap{display:grid;gap:var(--space-md)}
.pcx-steps{list-style:none;margin:0;padding:0;display:grid}
.pcx-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--color-border)}
.pcx-steps li:first-child{border-top:0;padding-top:4px}
.pcx-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 .875rem var(--font-sans);border:2px solid var(--color-silver);color:var(--color-text-muted);background:var(--color-surface)}
.pcx-steps .done .pcx-dot{background:var(--color-success);border-color:var(--color-success);color:#fff}
.pcx-steps .now .pcx-dot{border-color:var(--color-accent);color:var(--color-accent)}
.pcx-dot svg{width:14px;height:14px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pcx-steps b{display:block;font-size:.9375rem;font-weight:600;color:var(--color-text)}
.pcx-steps .now b{color:var(--color-accent-dark)}
.pcx-steps li span:last-child{font-size:.8125rem;color:var(--color-text-muted);line-height:1.45;overflow-wrap:anywhere}
.pcx-another{display:grid;place-items:center;min-height:44px;font-size:.9375rem;font-weight:600;color:var(--color-accent-dark);text-decoration:underline;text-underline-offset:2px;background:none;border:0;cursor:pointer}
.btn.pcx-share,#shareBtn.pcx-share{display:flex;align-items:center;justify-content:center;gap:8px}

/* ---------- sticky Sign bar (same glass as the top bar) ---------- */
.pcx-bar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;align-items:center;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(26,26,24,.10);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.pcx-bar.on{transform:none;visibility:visible;transition:transform .25s ease}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pcx-bar{background:var(--color-surface)}}
.pcx-bar p{flex:1;min-width:0;margin:0;font-size:.8125rem;line-height:1.3;color:var(--color-text-muted)}
.pcx-bar p b{display:block;font-size:.9375rem;font-weight:600;color:var(--color-accent-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcx-bar .btn{min-height:44px;padding:.5rem 1.25rem}
.pcx-barpad{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}

/* ---------- 5. icons: iOS share shape and matching weights, frosted video controls ---------- */
/* muted loop (Troy, 2026-10-23): the full rail (Mute, Share, Pause) shows from the start, so nothing moves when the sound comes on.
   Mute sits on top. In the loop, Mute turns the sound on and Pause pauses the preview (polish.js). The chip sits bottom-left. */
.vid__tap{justify-content:flex-start;padding:0 0 14px 12px}
#vidRail[hidden]{display:grid!important}
#vidMute{order:-1}
.vid__pause{display:none!important}
.vid__rail button span.i,.vid__pause,.vid__chip{background:rgba(17,45,78,.64);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.vid__rail button>span:last-child{background:rgba(17,45,78,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.vid__rail button svg,.vid__chip svg{stroke-width:1.8}
.vid__rail button svg .pcx-f,.vid__chip svg .pcx-f{fill:#fff;stroke:none}
.vid__pause svg{width:18px;height:18px}
.pcx-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  .btn:active,.vid__rail button:active span.i,.vid__pause:active,.vid__chip:active,.pcx-x:active{transform:none}
  .pcx-bar,.pcx-bar.on{transition:none}}