/* Phone polish (2026-10-19, after the launch inspection). Loaded last on every page.
   Desktop design stays as approved: almost every rule here is inside a phone/tablet media query.
   Sections: 1 rating links  2 hero  3 spacing  4 booking form  5 tap targets  6 spam-check placeholder */

/* link to the projects hub under the homepage job stories */
.stories-all{margin-top:18px}

/* ---------- 1. rating links (all sizes): the 4.9 rating opens the Thumbtack profile ---------- */
.rate-link{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.55)}
.rate-link:hover,.rate-link:focus-visible{text-decoration-color:currentColor}
.p-chips .rate-link{text-decoration-color:currentColor}
.rev-src{color:inherit;text-underline-offset:3px}
.rev-all{margin-top:clamp(28px,3vw,44px);text-align:center}
.rev-all a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;white-space:nowrap;border-radius:999px;border:2px solid rgba(255,255,255,.75);color:#fff;font-weight:800;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.rev-all a svg{width:18px;height:18px}
.rev-all a:hover,.rev-all a:focus-visible{background:#fff;color:var(--green-deep)}
.rev-all a:active{transform:scale(.97)}

@media (max-width:900px){
  /* ---------- 2. hero: trust chips right under the lede, lighter painting ---------- */
  .hero{padding-bottom:96px;gap:28px}
  .hero-copy{grid-template-areas:"h" "lede" "facts" "rascal" "ctas" "note" "how"}
  .hero-lede{margin-top:14px}
  .hero-facts{margin-top:16px;gap:8px}
  .hero-facts .chip-rate{order:1}
  .hero-facts .chip-trust{order:2}
  .hero-facts .chip-offer{order:3}
  .hero-facts .chip-rate{padding:0}
  .hero-facts .rate-link,.p-chips .rate-link{min-height:44px;padding:0 13px}
  .p-chips .chip-rate{padding:0}
  .hero-rascal{margin-top:4px}
  .hero-note{margin-top:12px}
  .hero-how{margin-top:20px}
  .hero-scrim{background:linear-gradient(180deg,rgba(9,34,22,.74) 0%,rgba(9,34,22,.64) 46%,rgba(9,34,22,.34) 70%,rgba(9,34,22,.16) 100%)} /* taste-skill-ignore: scrim over painting for AA text */
  .hero-scene .layer img{filter:brightness(1.12) saturate(1.06)}
  .iphone{--w:min(250px,66vw)}

  /* ---------- 3. spacing: shorter page, same content ---------- */
  :root{--section:60px}
  .reviews{padding-bottom:84px}
  .bubbles{margin-top:32px;gap:24px}
  .fa-row{padding:12px 0 14px}
  .fa-inline{margin-top:10px}
  /* the two row links sit side by side (each still a 44px+ target) instead of stacked */
  .fa-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2px 14px;width:100%;margin-top:4px}
  .fa-page,.fa-book{width:auto;line-height:1.2;font-size:.9375rem;padding-block:4px}
  .fa-page svg,.fa-book svg{flex:none;width:18px;height:18px}
  .fx-a{margin-top:28px}
  .proof{padding-top:28px}
  .cities{padding:40px 0}
  .foot{padding-bottom:104px}
  .foot-legal{margin-top:28px}

  /* ---------- 4. booking form: Rascal sits on the form without big empty bands ---------- */
  .form-wrap{padding-top:140px}
  .sitter{width:96px;right:30px}
  .bubble-book{right:136px;top:14px}
  .form{padding-top:66px;gap:16px}
  .book-grid{row-gap:24px}
}

@media (max-width:640px){
  /* ---------- 5. tap targets: footer, contact and source links at least 44px tall ---------- */
  .foot p a,.foot-legal a,.foot-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;vertical-align:middle}
  .foot p{line-height:1.5}
  .book-call a{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
  .src a{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
  .f-consent{min-height:44px;align-items:center}
  .rev-src{display:inline-flex;align-items:center;min-height:44px}
  /* footer link lists ("A · B · C"): a tidy two-column list of 44px rows; the dot separators are hidden */
  .foot p:has(> a + a){display:flex;flex-wrap:wrap;font-size:0;line-height:0} /* flex, not grid: the zero-size dot text items take no cell */
  .foot p:has(> a + a) > a{flex:0 0 50%;font-size:1rem;line-height:1.25;justify-content:flex-start;padding:4px 8px 4px 0}
  .foot p[style]:has(> a + a){margin-top:0 !important}
}
/* honeypot field: fully off-screen and 1px (bots still see it in the HTML) */
.f-hp input{width:1px;height:1px;padding:0;border:0}

/* ---------- 6. spam check: never a blank box while Cloudflare's widget loads ---------- */
.ac-turnstile.is-on{position:relative;isolation:isolate}
.ac-turnstile.is-on::before{content:"Loading spam check\2026";position:absolute;inset:0;z-index:-1;display:flex;align-items:center;justify-content:center;background:var(--mint);border-radius:10px;font-size:.9375rem;font-weight:600;color:var(--ink-soft)}
.ac-turnstile.is-on[data-state="error"]::before{content:"Spam check didn't load. Refresh the page, or call 1-408-664-9888.";padding:0 12px;text-align:center}
.ac-turnstile.is-on[data-state="done"]::before{background:none;content:""}

/* 2026-10-19 polish: phones show phone and email on their own lines, so the separator dot is hidden */
@media (max-width:640px){ .book-call .bc-dot{display:none} .book-call a{display:flex;justify-content:center} }