/* MIKE: Oct 20, 2026: "family" spots (Mike picked option A + C) for the Visualizer, the Academy and the Arcade.
   Same fonts, silver porthole ring and smoked-glass button as the home page Visualizer spot. */
.ps-wrap { max-width: 1140px; margin: 2.2em auto 2.4em; padding: 0 15px; }
.ps-head { text-align: center; font: 700 12px/1.3 'MT Lato', Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #2463b3; margin: 0 0 14px; }
.ps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
a.ps-card, a.ps-card:hover, a.ps-card:focus { text-decoration: none; }
.ps-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 1px 0 #fff inset, 0 6px 18px rgba(20,30,50,.10); transition: transform .2s, box-shadow .2s; }
.ps-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 #fff inset, 0 10px 24px rgba(20,30,50,.16); }
.ps-card:focus-visible { outline: 2px solid #2463b3; outline-offset: 4px; }
.ps-ring { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; padding: 6px;
  background: conic-gradient(from 210deg, #f4f5f7, #aeb3ba, #fff, #9ea4ad, #eef0f2, #b8bdc4, #fff, #a3a9b1, #f4f5f7);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 6px 14px rgba(20,30,50,.22); }
.ps-ring span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 2px 8px rgba(0,0,0,.4); }
.ps-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-viz .ps-ring span { background: #dfe3e8; }
.ps-acad .ps-ring span { background: radial-gradient(circle at 38% 30%, #2c4b7a, #0f2342); }
.ps-acad .ps-ring img { width: 72%; height: 72%; object-fit: contain; }
.ps-arc .ps-ring span { background: radial-gradient(circle at 50% 40%, #241a4a, #0b0a1c); box-shadow: inset 0 2px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,64,200,.55), 0 0 14px rgba(64,220,255,.45); }
.ps-txt { min-width: 0; }
.ps-kicker { display: block; font: 700 11px/1.3 'MT Lato', Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #2463b3; }
.ps-arc .ps-kicker { color: #b0249a; }
.ps-title { display: block; font: 500 22px/1.1 'MT EB Garamond', Georgia, serif; color: #2b2f36; margin: 3px 0 4px; }
.ps-sub { display: block; font: 13.5px/1.4 'MT Lato', Arial, sans-serif; color: #555b64; }
.ps-go { display: inline-block; margin-top: 8px; font: 700 13px/1 'MT Lato', Arial, sans-serif; letter-spacing: .06em; color: #fff; padding: .65em 1.1em; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 50%, rgba(0,0,0,.08) 51%, rgba(0,0,0,.02) 100%), rgba(52,57,66,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.25); }
.ps-card:hover .ps-go { background-color: rgba(36,99,179,.92); }
.ps-arc:hover .ps-go { background-color: rgba(176,36,154,.92); }
@media (max-width: 991px) { .ps-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
@media (max-width: 400px) { .ps-card { gap: 12px; padding: 13px 12px; } .ps-ring { flex-basis: 68px; width: 68px; height: 68px; padding: 5px; } .ps-title { font-size: 19px; } }


.ps-wrap { clear: both; float: none; width: 100%; box-sizing: border-box; }
.ps-wrap { grid-column: 1 / -1; max-width: 1140px; margin-left: auto; margin-right: auto; }
/* EXPLORE mini-launcher. Bottom-LEFT so it never meets Mike's corner avatar or the back-to-top arrow
   (both bottom-right). On phones it sits just above the "Call for a free quote" button.
   It hides itself while the trio above Contact is on screen (js/mike-fixes.js), so they never show together. */
.pl { position: fixed; left: 16px; bottom: 16px; z-index: 900; font-family: 'MT Lato', Arial, sans-serif; }
.pl summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 999px; color: #fff;
  font: 700 12px/1 'MT Lato', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(36,40,48,.94); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 6px 16px rgba(0,0,0,.3); }
.pl summary::-webkit-details-marker { display: none; }
.pl summary:focus-visible { outline: 2px solid #2463b3; outline-offset: 3px; }
.pl summary i { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#5ea6ee, #ff40c8, #40dcff, #5ea6ee); box-shadow: inset 0 0 0 4px rgba(36,40,48,.94); }
.pl ul { list-style: none; margin: 0 0 8px; padding: 8px; position: absolute; left: 0; bottom: 100%; width: 250px; max-width: calc(100vw - 24px); border-radius: 14px; background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.pl li a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: #2b2f36; text-decoration: none; font: 500 17px/1.15 'MT EB Garamond', Georgia, serif; }
.pl li a:hover, .pl li a:focus-visible { background: #eef3fa; }
.pl li img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 36px; }
.pl li .ac { background: #0f2342; object-fit: contain; padding: 4px; }
.pl li small { display: block; font: 11.5px/1.3 'MT Lato', Arial, sans-serif; color: #666; }
.pl { transition: opacity .2s, visibility .2s; }
.pl.is-hidden { opacity: 0; visibility: hidden; }
@media (max-width: 767px) { .pl { left: 12px; bottom: 70px; } }
@media print { .pl { display: none; } }
@media (prefers-reduced-motion: reduce) { .ps-card, .ps-card:hover, .pl { transition: none; transform: none; } }
.ps-grid.ps-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
@media (max-width: 991px) { .ps-grid.ps-two { grid-template-columns: 1fr; max-width: 560px; } }

/* MIKE: Oct 20, 2026 (round 2): phones' bottom-left corner. The call bar's real height is measured by
   js/mike-fixes.js into --bt-callbar-h. The Explore pill sits 12px above the bar, the page gets enough bottom
   padding that nothing ends up hidden under them, and iPhone home-bar space (safe area) is included. */
@media (max-width: 767px) {
  .mobile-call-btn { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .pl { bottom: calc(12px + var(--bt-callbar-h, 44px) + 12px + env(safe-area-inset-bottom, 0px)); }
  .pl summary { background: #24282f; }
  body { padding-bottom: calc(12px + var(--bt-callbar-h, 44px) + 12px + 44px + 16px + env(safe-area-inset-bottom, 0px)); }
  .footer { padding-bottom: 0; }
  /* the YouTube player stays in the page's normal layer, under the fixed buttons */
  .welcm-right { isolation: isolate; }
  .welcm-right iframe { position: relative; z-index: 0; }
}
/* round 2: the two-card version (Visualizer page) uses the same full width as the trio on the other pages */
.ps-grid.ps-two { max-width: none; }
@media (max-width: 991px) { .ps-grid.ps-two { max-width: 560px; } }
/* hide the back-to-top arrow and the call bar while the review buttons are near the bottom of the screen */
html.bt-cta-near #toTop, html.bt-cta-near .mobile-call-btn { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity .2s, visibility .2s; }
@media (prefers-reduced-motion: reduce) { html.bt-cta-near #toTop, html.bt-cta-near .mobile-call-btn { transition: none; } }
/* MIKE: Oct 20, 2026 (final nits): on slab-installations and the Visualizer page the spots sit outside the page's
   .container, so on phones they got 15px less side room than on the other pages. Same inner padding everywhere now.
   CSS only, so js/mike-fixes.js (which looks for .ps-wrap / .bt-reviews) is unaffected. */
@media (max-width: 767px) { .ps-wrap:not(.container .ps-wrap) { padding-left: 30px; padding-right: 30px; } }