/* Apple-style polish: press feedback, reduced motion/transparency/contrast, tap targets. Linked site-wide after tailwind-built.css. */
/* Press feedback: respond on pointer-down */
a[href*="smart-home-estimator"],[data-testid="hero-cta-secondary"]{transition:color .2s,background-color .2s,border-color .2s,transform .1s ease-out}
a[href*="smart-home-estimator"]:active,[data-testid="hero-cta-secondary"]:active{transform:scale(.97)}
/* Hit areas: grow tap targets without moving layout */
#site-navbar nav a,#nav-mobile-menu a,footer li a{padding-block:.75rem}
footer li a{display:inline-block}
/* Smallest labels up to a readable floor */
.text-\[9px\],.text-\[10px\],.text-\[11px\]{font-size:.6875rem}
/* Touch users have no hover: keep the Explore cue visible */
.simple-row span.opacity-0{opacity:.55}
@media (prefers-reduced-motion:reduce){
  .hero-reveal{animation:none;opacity:1;filter:none;transform:none}
  .ui-marquee-track,.waveform span{animation:none}
  .grain-overlay{display:none}
  a[href*="smart-home-estimator"]:active,[data-testid="hero-cta-secondary"]:active{transform:none}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  #site-navbar{background:#050505!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .backdrop-blur{background:#0a0a0a!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast:more){.text-\[\#9ca3af\]{color:#d1d5db}.border-white\/10{border-color:rgba(255,255,255,.4)}}

/* ---- Response: no tap delay, own pressed states instead of the grey tap flash ---- */
a,button,summary,input,select,textarea,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.simple-row,summary,button,#nav-mobile-toggle{transition:opacity .1s ease-out,transform .1s ease-out}
.simple-row:active,summary:active{opacity:.7}
button:active,#nav-mobile-toggle:active{transform:scale(.95)}

/* ---- Materials: header fades into content instead of a hard 1px rule; blur materializes ---- */
#site-navbar{border-bottom-color:transparent!important;transition-property:color,background-color,backdrop-filter,-webkit-backdrop-filter;transition-duration:.3s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
#site-navbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;pointer-events:none;opacity:0;transition:opacity .3s ease;background:linear-gradient(rgba(5,5,5,.55),rgba(5,5,5,0))}
#site-navbar.backdrop-blur-xl::after{opacity:1}
/* Vibrancy: text over translucent chrome gets more contrast and a touch more tracking */
.backdrop-blur .text-\[\#9ca3af\]{color:#e5e7eb}
#site-navbar nav a[aria-current="page"],#nav-mobile-menu a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:.5em;text-decoration-thickness:1px}

/* ---- Typography: fill tracking gaps only (class-based tracking still wins) ---- */
h1,h2{letter-spacing:-.02em}
h3,h4{letter-spacing:-.01em}
.text-xs:not([class*="tracking"]),.text-sm:not([class*="tracking"]){letter-spacing:.005em}

/* ---- Direction hint: arrows lean toward where the click goes ---- */
.simple-row span[aria-hidden]{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.simple-row:hover span[aria-hidden]{transform:translateX(4px)}

/* ---- Familiarity/consistency: retire the neo-brutalist hard shadow for a soft lift ---- */
html .snap-shadow{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease}
html .snap-shadow:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.5)}
html .snap-shadow:active{transform:scale(.99);box-shadow:none}

/* ---- Feedback: inline validation, visible keyboard focus ---- */
input:user-invalid,textarea:user-invalid,select:user-invalid{border-color:#f87171!important}
:focus-visible{outline:2px solid #f5f5f5;outline-offset:3px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:1px}

/* ---- Craft: anchors clear the fixed header; hint compositor for the hero ---- */
html{scroll-padding-top:5rem}
.hero-reveal{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .simple-row:hover span[aria-hidden]{transform:none}
  html .snap-shadow:hover,html .snap-shadow:active,button:active,#nav-mobile-toggle:active{transform:none}
  #site-navbar,#site-navbar::after{transition:none}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){#site-navbar::after{background:none}}

/* ---- Lead-gen (Nov 2026): header phone on mobile, 3-action sticky bar ---- */
.hdr-phone{margin-left:auto;margin-right:.25rem;white-space:nowrap}
@media (min-width:1024px){.hdr-phone{margin-left:0;margin-right:0}}
@media (max-width:1023.98px){.hdr-phone{letter-spacing:.04em}body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}
@media (max-width:399.98px){.hdr-phone svg{display:none}}
.sb-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:3rem;padding:.5rem .25rem;text-align:center;white-space:nowrap;letter-spacing:.08em}