/* Overnight round 7 (Oct 14, 2026 ~2:30 AM CT): readability, mobile and accessibility polish.
   Loaded last (end of footer partial, after r6.css). Revert all = remove the r7.css link in src/partials/footer.html and rebuild.
   Each block is tagged with its SITE-CHANGES.md number (#74-#107). */

/* #74/#76 business promise chips: free consult by video, phone or text / quoted up front / 1 business day */
.biz-promise{list-style:none;padding:0;margin:1rem 0 1.25rem;display:flex;flex-wrap:wrap;gap:.6rem .8rem}
.biz-promise li{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border:2px solid #22e6ff;background:rgba(11,16,48,.85);color:#f2f4ff;font-weight:700;font-size:1.1rem;line-height:1.3;box-shadow:3px 3px 0 #ff3fb4}
.biz-promise li::before{content:"✓";color:#ffd23f;font-weight:700}

/* #85 gentle "Create a free account" line under prices */
.acct-nudge{margin:1.1rem 0 .4rem;font-size:1.15rem;line-height:1.6;color:#e6ecff;max-width:36em}
.acct-nudge a{font-weight:700;color:#ffd23f}

/* #89 mobile bottom bar: all 4 buttons fit on small phones (the 4th was cut off by ~14px at 360px wide) */
@media (max-width:700px){
  .fx-dock.bar-c{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)}
  .fx-dock.bar-c .bar-k{min-width:0}
}
@media (max-width:389px){.fx-dock.bar-c .bar-l{white-space:normal;overflow-wrap:anywhere;font-size:.8rem}}

/* #90 VIP banner close (x) button: 44px tap target (same pink box look) */

/* #91 "Join the VIP waitlist" link: 44px tall tap area */

/* #92 VIP banner text easier to read: words 15.2px -> 16px+, PLATINUM VIP chip 9.9px -> 12.8px on computers, 8.8px -> 11px on phones */
@media (max-width:700px){.ka-vipstrip{font-size:1rem}.ka-vipstrip-in{padding-left:.6rem;padding-right:.4rem}.ka-vipstrip .vs-chip{font-size:.69rem;padding:.4rem .45rem}.ka-vipstrip .vs-cta{white-space:normal;line-height:1.25;font-size:1rem}}

/* #93 small helper text raised to about 18px for older eyes (was 16-16.8px) */
.hint,.assist,.map-help,.biz-small{font-size:1.15rem;line-height:1.55}
.biz-list li{font-size:1.15rem}

/* #94 page intro lines stop at a comfortable reading length on wide screens */
.page-head .lead{max-width:34em}

/* #95 plain paragraphs in sections keep a comfortable line length (about 70-75 characters) */
main section .wrap>p:not([class]){max-width:36em}
main details>p{max-width:38em}

/* #96 jump links (#business, #vip-title, #class-title) land with a little breathing room above */
:target{scroll-margin-top:1.25rem}

/* #97 printing a page: hide the VIP banner and the question pop-up */
@media print{.ka-vipstrip,.askq,.askq-back,.acct-nudge{display:none!important}}

/* #98 reduced motion: no lift on cards/buttons, no transition on the new r7 bits */
@media (prefers-reduced-motion:reduce){
  a.px-box:hover,.tier:hover,.tm-card:hover,.tm-card:focus-visible,.btn:hover,.quest-btn:hover,.ka-ar-btn:hover{transform:none!important}
  .biz-promise li,.acct-nudge a{transition:none}
}

/* #99 phones/tablets: tapped cards and buttons don't stay "stuck" lifted after a tap */
@media (hover:none){
  a.px-box:hover,.tier:hover,.tm-card:hover,.level:hover,.btn:hover,.quest-btn:hover,.ka-ar-btn:hover,.more-games .mg-card:hover{transform:none}
}

/* #100 taps respond instantly (no double-tap zoom delay on buttons and links) */
a,button,summary,label,select,[role=switch]{touch-action:manipulation}

/* #101 photos never push the page sideways */
main img{max-width:100%;height:auto}

/* #102 long words and web addresses wrap instead of causing sideways scrolling */
main{overflow-wrap:break-word}

/* #103 form placeholder (example) text readable but clearly lighter than typed text */
input::placeholder,textarea::placeholder{color:#a9b2d6;opacity:1}

/* #104 links inside paragraphs: thicker underline, easier to spot */
main p a:not(.btn),main li a:not(.btn):not(.tm-card):not(.mg-card),.faq details p a{text-decoration-thickness:2px;text-underline-offset:4px}

/* #105 skip link: big, high-contrast and clearly outlined when it appears */
.skip:focus,.skip:focus-visible{font-weight:700;font-size:1.15rem;outline:4px solid #ff3fb4!important;outline-offset:2px}

/* #106 home "level select" map: the right-hand column was cut off on small phones (360px); boxes now share the width evenly */
@media (max-width:700px){
  .levels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .levels li,.levels .level{min-width:0}
  .levels .level{overflow-wrap:anywhere}
}
@media (max-width:400px){.levels{gap:1.25rem .9rem}.levels .level{padding:.9rem .5rem}}

/* #107 dropdown arrows (▼) a little bigger and easier to see (14.4px -> 17.6px); no spin when motion is reduced */
.pxs-caret{font-size:1.1rem;line-height:1}
@media (prefers-reduced-motion:reduce){.pxs-caret{transition:none}}
html.calm .pxs-caret{transition:none}

/* #108 after the intro screen closes, keyboard focus returns to the top of the page (so Tab reaches "Skip to main content" first); no outline on the page itself */
body:focus{outline:none}