/* ================================================================
   Friendly Profile — restyles the profile page to match the landing
   page (kicker + Bricolage title, rounded soft-shadow cards on the
   sky canvas, brand-glow primary button). The dark premium
   subscription card is kept — it just gets the friendly rounding.

   Scoped entirely under #profilePage. No JS or DOM changes. The
   rules are purely visual, so they apply at every width; a small
   ≤700px block compacts the type for phones.
   ================================================================ */
#profilePage{
  --fp-sky:#f1f4fb; --fp-line:#e4e7ee; --fp-line2:#d2d7e1;
  --fp-ink:#14171f; --fp-soft:#5b626f; --fp-faint:#8a909c;
  --fp-blue:#3a55e6; --fp-blue-deep:#2b40c4;
  --fp-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --fp-shadow:0 12px 30px -18px rgba(32,38,75,.40);
  background:var(--fp-sky);min-height:100vh;
}

/* ── header ──────────────────────────────────────────────────── */
#profilePage .pf-head h1{
  font-family:var(--fp-display);font-weight:800;font-size:30px;
  letter-spacing:-.03em;color:var(--fp-ink);
}
#profilePage .pf-head h1::before{
  content:'Account';display:block;
  font-family:'Plus Jakarta Sans','Manrope',system-ui,sans-serif;
  font-size:13px;font-weight:800;letter-spacing:.02em;
  color:var(--fp-blue);margin-bottom:7px;
}
#profilePage .pf-head p{color:var(--fp-soft)}

/* ── cards ───────────────────────────────────────────────────── */
#profilePage .pf-card{
  border-radius:20px;border-color:var(--fp-line);box-shadow:var(--fp-shadow);
}
#profilePage .pf-label{color:var(--fp-faint)}
#profilePage .pf-label::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--fp-blue);margin-right:7px;vertical-align:1px;
}

/* ── fields + buttons ────────────────────────────────────────── */
#profilePage .pf-input{border-radius:12px;border-color:var(--fp-line2)}
#profilePage .pf-input:focus{border-color:var(--fp-blue);box-shadow:0 0 0 3px rgba(58,85,230,.12)}
#profilePage .pf-select{border-radius:11px;border-color:var(--fp-line2)}
#profilePage .pf-btn{border-radius:12px}
#profilePage .pf-btn-primary{box-shadow:0 12px 26px -12px rgba(58,85,230,.9)}
#profilePage .pf-btn-primary:hover{background:var(--fp-blue-deep)}

/* ── subscription card keeps its premium look, friendlier radius ── */
#profilePage .pf-sub{border-radius:20px}

/* ── phone: compact friendly type ────────────────────────────── */
@media (max-width:700px){
  #profilePage .pf-head h1{font-size:24px}
  #profilePage .pf-head h1::before{font-size:12px;margin-bottom:5px}
  #profilePage .pf-card{border-radius:18px}
}