/* "Need help?" pop-up: two picture tiles.
   Hunter's pick, 2026-10-08: option 2, "TWO PICTURE TILES", from
   Brand/Mockups/help-button-2026-10-08 (he called the old pop-up "awful looking").

   ONE stylesheet for every page that has the pop-up: the four Clarity Guide chrome.css copies,
   plans.html, u65.html and index.html each still carry their own older .helppop rules, and the
   header has drifted between those copies before. Every rule here is keyed to #helppop, which
   outranks all of those older class rules without anyone having to edit them.

   Paired with /assets/helppop.js (X, Escape, phone position, the homepage's own toggle). */

#helppop.htiles{position:absolute;right:0;top:calc(100% + 12px);z-index:95;
  width:430px;max-width:calc(100vw - 24px);box-sizing:border-box;margin:0;
  background:#fff;border:0;border-radius:20px;padding:22px 20px 10px;
  box-shadow:0 22px 48px -18px rgba(1,29,70,.38),0 0 0 1px rgba(1,29,70,.07);
  text-align:center;color:#011D46;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.45}
#helppop.htiles[hidden]{display:none}

#helppop .hp-h{margin:0 0 4px;padding:0 34px;font-family:'Lora',Georgia,'Times New Roman',serif;
  font-size:21px;font-weight:600;line-height:1.25;color:#011D46;text-wrap:balance}
#helppop .hp-hours{margin:0;padding:0;font-size:14.5px;line-height:1.45;font-weight:500;color:#455166}

#helppop .hp-x{position:absolute;top:8px;right:8px;width:44px;height:44px;min-height:0;margin:0;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;background:none;color:#455166;cursor:pointer}
#helppop .hp-x:hover{background:#EEF3F9;color:#011D46}

#helppop .hp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 6px}
/* every property the header's own ".head-phone a" pill rule sets is set again here */
#helppop .hp-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:150px;margin:0;padding:18px 12px 16px;border:0;border-radius:16px;
  background:#011D46;color:#fff;text-decoration:none;text-align:center;white-space:normal;
  font-size:16px;font-weight:500;line-height:1.4;box-shadow:none;
  transition:background-color .2s ease,box-shadow .2s ease,transform .12s ease}
#helppop .hp-tile:hover{background:#011430;color:#fff}
#helppop .hp-tile.hp-time{background:#fff;color:#011D46;box-shadow:inset 0 0 0 1.5px #C9D5E4}
#helppop .hp-tile.hp-time:hover{background:#F3F6FA;color:#011D46;box-shadow:inset 0 0 0 1.5px #011D46}
#helppop .hp-tile:active{transform:scale(.98)}
#helppop .hp-tile b{display:block;font-size:17px;font-weight:800;line-height:1.25}
#helppop .hp-tile span{display:block;font-size:14px;line-height:1.4;font-weight:500;opacity:.9}

#helppop .hp-ic{width:34px;height:34px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
#helppop .hp-x .hp-ic{width:20px;height:20px;stroke-width:2}

#helppop .hp-alt{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0 6px;
  border:0;border-radius:8px;background:none;box-shadow:none;color:#1A3A6B;
  font-size:14.5px;font-weight:700;text-decoration:none;white-space:normal}
#helppop .hp-alt:hover{background:none;color:#011D46;text-decoration:underline}
#helppop .hp-alt .hp-ic{width:16px;height:16px;stroke-width:2}

#helppop a:focus-visible,#helppop button:focus-visible{outline:3px solid #E20212;outline-offset:2px}

/* Phones: full width under the header. helppop.js sets the top from the button's position. */
@media (max-width:640px){
  #helppop.htiles{position:fixed;left:12px;right:12px;width:auto;max-width:none;padding:20px 14px 8px}
  #helppop .hp-tiles{gap:10px}
  #helppop .hp-tile{min-height:140px;padding:16px 8px}
  #helppop .hp-tile b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  #helppop .hp-tile{transition:none}
  #helppop .hp-tile:active{transform:none}
}