/* Pixloud: extra fit-and-finish for every screen size (phones 320px up to large desktops). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,svg{max-width:100%}

/* Small phones (iPhone SE, older Androids): the mobile header had no room for logo + theme + Start free + menu.
   The colour theme is still in the Accessibility panel. */
@media (max-width:374px){
  [data-px-header="m"] button[aria-label^="Theme"]{display:none}
  [data-px-header="m"] .s81d0569{padding:0 14px;gap:8px}
  [data-px-header="m"] a[href$="/auth/signup"]{padding:0 12px;font-size:14px;white-space:nowrap}
}

/* Tablets and small laptops: the full desktop menu was wider than the screen. */
@media (min-width:721px) and (max-width:1180px){
  [data-px-header="d"] .s52bf2e1{padding:0 20px;gap:12px}
  [data-px-header="d"] a[href="/join"]{display:none}
  [data-px-header="d"] .s3b6c1f3,[data-px-header="d"] .s38506df{padding:0 10px}
}
@media (min-width:721px) and (max-width:900px){
  [data-px-header="d"] .s5a3a4c3,[data-px-header="d"] .s57cda4c{height:30px;width:auto}
  [data-px-header="d"] button[aria-label^="Theme"]{display:none}
  [data-px-header="d"] .s18fcd6f{padding:0 14px}
}

/* Phones: fields at 16px stop iPhone zooming in when tapped; links big enough for a thumb. */
@media (max-width:720px){
  input,select,textarea{font-size:16px !important}
  .px-m form{grid-template-columns:minmax(0,1fr)}
  .px-m form > *,.px-m input,.px-m select,.px-m textarea{min-width:0;max-width:100%}
}

/* ---------- Phone footer (partials/footer-m.php) ---------- */
.pf{container-type:normal}
.pf-in{position:relative;padding:44px 20px 40px;display:grid;gap:0}
.pf-brand{display:grid;justify-items:center;text-align:center;gap:12px;padding-bottom:28px}
.pf-logo{display:block;height:64px;width:auto}
.pf-tag{margin:4px 0 0;font:800 20px/1.25 Manrope,sans-serif;letter-spacing:-.03em;color:var(--on,#F5F7FF)}
.pf-desc{margin:0;max-width:34ch;font-size:15px;line-height:1.55;color:var(--subtle,#C8D0E6)}
.pf-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pf-brand .pf-social{margin-top:8px}
.pf-sec{padding:24px 0;border-top:1px solid var(--border,#26304D)}
.pf-two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.pf-h{margin:0 0 10px;font:700 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#00D2FE)}
.pf ul{list-style:none;margin:0;padding:0}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.pf ul a{display:flex;align-items:center;min-height:40px;font-size:15px;line-height:1.3;color:var(--subtle,#C8D0E6);text-decoration:none}
.pf ul a:hover,.pf ul a:focus-visible{color:var(--on,#F5F7FF)}
.pf-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 16px;border-radius:12px;background:var(--raised,#1B2445);border:1px solid var(--border,#26304D);color:var(--on,#F5F7FF);font:600 15px/1 Inter,sans-serif;text-decoration:none;white-space:nowrap}
.pf-btn:hover,.pf-btn:focus-visible{border-color:var(--accent,#00D2FE)}
.pf-stack{display:grid;gap:10px}
.pf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-note{margin:12px 0 0;font-size:13px;color:var(--muted,#AAB2CB)}
.pf-card{margin-bottom:28px;padding:20px;border-radius:16px;border:1px solid var(--border,#26304D);background:linear-gradient(135deg,rgba(148,47,253,.14),rgba(0,179,254,.10))}
.pf-card-t{margin:0;font:800 19px/1.25 Manrope,sans-serif;letter-spacing:-.02em;color:var(--on,#F5F7FF)}
.pf-card .pf-note{margin:4px 0 16px}
.pf-base{display:grid;justify-items:center;gap:14px;padding-top:24px;border-top:1px solid var(--border,#26304D);text-align:center}
.pf-legal{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 8px;font-size:13px;color:var(--muted,#AAB2CB)}
.pf-legal a,.pf-legal button{display:inline-flex;align-items:center;min-height:36px;background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer}
.pf-legal a:hover,.pf-legal button:hover{color:var(--on,#F5F7FF)}
.pf-copy{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:13px;color:var(--muted,#AAB2CB)}
.pf-dot{display:inline-flex;align-items:center;gap:7px}
.pf-dot span{width:8px;height:8px;border-radius:50%;background:#22c55e}
.pf-mark{display:block;width:44px;height:44px;margin:18px auto 0;opacity:.35;filter:grayscale(1)}
.pf-mark{margin-bottom:36px}
@media (max-width:359px){.pf-row{grid-template-columns:1fr}.pf ul a{font-size:14px}.pf-social{gap:7px}.pf-social a{width:40px;height:40px}}

/* ---------- Phone floating buttons ----------
   WhatsApp stays bottom-right as the main action; "Back to top" sits neatly above it
   (smaller, quieter) instead of on top of it. Accessibility stays bottom-left. */
@media (max-width:720px){
  #px-utils button[aria-label="Back to top"]{right:20px;bottom:80px;width:44px;height:44px;border-radius:50%;background:var(--surface,#151D39);color:var(--on,#F5F7FF);border:1px solid var(--border,#26304D);box-shadow:0 10px 26px -8px rgba(0,0,0,.45)}
  nav[aria-label="Social"]{border:1px solid var(--border,#26304D)}
  #px-utils:has(#pixloud-wa) button[aria-label="Back to top"]{display:none}
  body:has(.px-lcard) #px-utils button[aria-label="Back to top"]{display:none}
}

/* Phone floating buttons: quieter accessibility button, hide-while-reading (fab.js), WhatsApp label */
@media (max-width:720px){
  #px-utils button[aria-controls="pixloud-a11y"]{width:44px;height:44px;left:16px;bottom:20px;background:var(--surface,#151D39);color:var(--on,#F5F7FF);border:1px solid var(--border,#26304D);box-shadow:0 10px 26px -8px rgba(0,0,0,.45)}
  #px-utils button[aria-controls="pixloud-a11y"] svg{width:24px;height:24px}
  #px-utils button[aria-controls="pixloud-a11y"],#px-utils button[aria-label="Back to top"],nav[aria-label="Social"]{transition:translate .3s cubic-bezier(.4,0,.2,1),opacity .3s}
  html.px-fab-hide #px-utils button[aria-controls="pixloud-a11y"]{translate:-90px 0;opacity:0;pointer-events:none}
  html.px-fab-hide #px-utils button[aria-label="Back to top"],html.px-fab-hide nav[aria-label="Social"]{translate:90px 0;opacity:0;pointer-events:none}
  nav[aria-label="Social"].px-wa-pill{border-radius:26px}
  nav[aria-label="Social"].px-wa-pill>:first-child{width:auto;padding:0 18px 0 14px;gap:8px;border-radius:26px;color:#25D366}
  nav[aria-label="Social"].px-wa-pill>:first-child::after{content:"Chat with us";font:600 15px/1 Inter,sans-serif;color:var(--on,#F5F7FF);white-space:nowrap}
  html.px-fab-hide nav[aria-label="Social"].px-wa-pill{translate:0 0;opacity:1;pointer-events:auto}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  #px-utils button,nav[aria-label="Social"]{transition:none!important}
}