/* Plumber Finder USA logged-out pages: button spacing + hierarchy (2026-11-13, Pixel).
   /login/, /claim/ steps, /join/ and the mobile menu. Brand tokens only. No markup, link or form changes. */

/* /claim/ step 2 (code sent): "Resend code" (secondary) + "Try another method" (link) were jammed side by side */
html body .pfo-row{gap:var(--s4) var(--s5);margin-top:var(--s5)}
html body .pfo-row form{margin:0}
html body .pfo-row .btn-ghost{border-color:var(--muted)}
html body .pfo-linkbtn{display:inline-flex;align-items:center;min-height:48px;font-size:var(--t-base)}

/* /claim/ search results: name block and "This is mine" get real separation */
html body .pfo-res>li,html body .pfo-nomatch{gap:var(--s4) var(--s5)}

/* /login/: "Sign in" (primary) / or / "Email me a sign-in code" (secondary) */
html body .pfo-mc-or{margin:var(--s5) 0 0}
html body .pfo-mc-alt{margin-top:var(--s4);border-color:var(--muted)}
/* /login/ code state: "Send a new code" becomes a secondary button, "Use password instead" a centred link */
html body .pfo-mc-row{flex-direction:column;align-items:stretch;gap:var(--s3);margin-top:var(--s4)}
html body .pfo-mc-row button.pfo-mc-link{justify-content:center;width:100%;min-height:48px;padding:0 var(--s5);border:1px solid var(--muted);border-radius:var(--pill);background:var(--white);color:var(--navy);font-size:var(--t-base);text-decoration:none}
html body .pfo-mc-row button.pfo-mc-link[disabled]{color:var(--muted);border-color:var(--line);background:var(--paper)}
html body .pfo-mc-row a.pfo-mc-link{justify-content:center;font-size:var(--t-base);color:var(--navy)}

/* mobile menu: "For plumbers" + "Business login" stacked with more air, visible outline on the second */
html body .mnav-acts{gap:var(--s4)}
html body .mnav-acts .btn-line{border:2px solid color-mix(in srgb,var(--white) 70%,var(--navy))}

/* /join/ plan table: the "Start 30-day trial" pill wrapped to 3 lines inside a 60px column */
@media (max-width:600px){
 html body tfoot .btn{white-space:normal;line-height:1.25;padding:var(--s2);border-radius:var(--r-sm);min-height:48px;font-size:var(--t-sm)}
}

/* stack every pair full width on phones */
@media (max-width:767px){
 html body .pfo-row{flex-direction:column;align-items:stretch;gap:var(--s3)}
 html body .pfo-row form,html body .pfo-row .btn,html body .pfo-row .pfo-linkbtn{width:100%;justify-content:center}
 html body .pfo-res>li .btn,html body .pfo-nomatch .btn{width:100%;justify-content:center}
}