/* My Account on a phone (installed web app and native app): Home, Bookings, Forms and Account. Desktop keeps its own layout.
   Every size is written in "design pixels" (Nu = N pixels of the 941px-wide design mock-ups) and scales with the phone's width,
   so the screens keep exactly the proportions of the design on any phone. */
.cp-phone { display: none; }

@media (max-width: 1079px) {
  :root { --u: calc(min(100vw, 460px) / 941); }
  .customer-account-page {
    --u: calc(min(100vw, 460px) / 941);
    --cp-bg: #fcfbf9;
    --cp-ink: #181715;
    --cp-muted: #77726a;
    --cp-line: #efebe4;
    --cp-chip: #f3efe8;
    --cp-green: #1f7a45;
    --cp-green-bg: #e8f4ec;
    --cp-red: #d3342f;
    --cp-red-bg: #fdecea;
    --cp-amber: #9a6208;
    --cp-amber-bg: #fdf3df;
    --cp-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
    width: 100%; max-width: 460px; margin: 0 auto;
    background: var(--cp-bg);
    padding: max(10px, env(safe-area-inset-top)) calc(var(--u) * 80) calc(calc(var(--u) * 150) + env(safe-area-inset-bottom));
  }

  .customer-account-page .cp-desktop { display: none !important; }
  .customer-account-page .cp-phone { display: block; color: var(--cp-ink); padding: 0; }

  /* ----- Header: serif EDIT wordmark and the initials avatar ----- */
  .customer-account-page .customer-app-header { height: auto; min-height: 0; margin: calc(var(--u) * 30) calc(var(--u) * 6) 0 calc(var(--u) * 20); align-items: center; justify-content: space-between; }
  .customer-account-page .customer-app-brand span,
  .customer-account-page .customer-mobile-notification,
  .customer-account-page .customer-app-header-copy { display: none !important; }
  .customer-account-page .customer-app-brand strong {
    font-family: var(--cp-serif); font-weight: 600; font-size: calc(var(--u) * 74); line-height: 1; letter-spacing: -.02em; color: var(--cp-ink);
  }
  .customer-account-page .customer-app-header-meta { display: flex; align-items: center; }
  .customer-account-page .customer-app-avatar {
    width: calc(var(--u) * 88); height: calc(var(--u) * 88); background: var(--cp-chip); font-size: calc(var(--u) * 23); font-weight: 700; color: var(--cp-ink); letter-spacing: .01em;
  }

  /* ----- Bottom navigation: Home, Bookings, Forms, Account ----- */
  .customer-account-page .customer-app-bottom-nav {
    width: 100%; max-width: 460px; height: calc(calc(var(--u) * 124) + env(safe-area-inset-bottom)); padding: calc(var(--u) * 10) calc(var(--u) * 10) env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--cp-line); box-shadow: none; grid-template-columns: 1fr;
  }
  .customer-account-page .customer-sidebar-links { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; width: 100%; }
  .customer-account-page .customer-app-bottom-nav a { color: #6f6a62; font-size: calc(var(--u) * 18.5); font-weight: 500; gap: calc(var(--u) * 8); height: auto; padding-top: calc(var(--u) * 4); }
  .customer-account-page .customer-app-bottom-nav a.mobile-active { color: var(--cp-ink); font-weight: 700; }
  .customer-account-page .customer-nav-icon { width: calc(var(--u) * 72); height: calc(var(--u) * 72); border-radius: 50%; }
  .customer-account-page .customer-app-bottom-nav a.mobile-active .customer-nav-icon { background: var(--cp-chip); }
  .customer-account-page .customer-nav-icon svg { width: calc(var(--u) * 44); height: calc(var(--u) * 44); stroke-width: 1.5; }
  .customer-account-page .customer-nav-icon .customer-desktop-copy { display: none !important; }
  .customer-account-page .customer-nav-icon .customer-mobile-copy { display: inline-flex !important; }

  /* ----- Shared building blocks ----- */
  .cp-phone h1, .cp-phone h2, .cp-phone h3 { font-family: var(--cp-serif); font-weight: 600; letter-spacing: -.012em; color: var(--cp-ink); margin: 0; }
  .cp-phone svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .cp-phone i { font-style: normal; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--cp-chip); }

  .cp-title { margin: calc(var(--u) * 14) 0 calc(var(--u) * 22) calc(var(--u) * 20); }
  .cp-title h1 { font-size: calc(var(--u) * 89); line-height: 1; letter-spacing: -.02em; }
  .cp-title p { margin: calc(var(--u) * 14) 0 0; color: var(--cp-muted); font-size: calc(var(--u) * 24); line-height: 1.22; max-width: calc(var(--u) * 520); }
  .cp-title.cp-greeting { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 14); margin-right: calc(var(--u) * -4); }
  .cp-title.cp-greeting > div { min-width: 0; flex: 1 1 auto; }
  .cp-title.cp-greeting p { font-size: calc(var(--u) * 21); max-width: calc(var(--u) * 360); margin-top: calc(var(--u) * 8); }
  .cp-eyebrow { display: block; font-size: calc(var(--u) * 16); letter-spacing: .17em; font-weight: 500; color: var(--cp-muted); text-transform: uppercase; }
  .cp-greeting .cp-eyebrow { margin-bottom: calc(var(--u) * 4); }
  .cp-greeting h1 { font-size: calc(var(--u) * 80); }

  .cp-book {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14); background: #1b1a18; color: #fff !important; text-decoration: none;
    border-radius: calc(var(--u) * 24); width: calc(var(--u) * 330); height: calc(var(--u) * 91); font-size: calc(var(--u) * 21.5); font-weight: 600; white-space: nowrap; margin-bottom: calc(var(--u) * 4);
  }
  .cp-book svg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); stroke: #fff; }

  .cp-card {
    background: #fff; border: 1px solid var(--cp-line); border-radius: calc(var(--u) * 28); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 30) rgba(60, 48, 30, .045);
    color: var(--cp-ink); text-decoration: none; font: inherit;
  }
  .cp-chevron { width: calc(var(--u) * 26); height: calc(var(--u) * 26); flex: 0 0 auto; color: var(--cp-ink); }

  .cp-pill {
    display: inline-flex; align-items: center; gap: calc(var(--u) * 14); background: var(--cp-chip); color: var(--cp-ink) !important; text-decoration: none;
    border: 0; border-radius: calc(var(--u) * 18); padding: 0 calc(var(--u) * 28); height: calc(var(--u) * 71); font-size: calc(var(--u) * 22.5); font-weight: 500; font-family: inherit; cursor: pointer;
  }
  .cp-pill svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
  .cp-pill.soft { height: calc(var(--u) * 60); padding: 0 calc(var(--u) * 24); font-size: calc(var(--u) * 21); border-radius: calc(var(--u) * 16); gap: calc(var(--u) * 12); }

  .cp-status {
    display: inline-flex; align-items: center; gap: calc(var(--u) * 12); border-radius: 999px; padding: 0 calc(var(--u) * 26); height: calc(var(--u) * 46); font-size: calc(var(--u) * 18.5); font-weight: 500;
    background: var(--cp-green-bg); color: var(--cp-green); white-space: nowrap;
  }
  .cp-status::before { content: ""; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: currentColor; }
  .cp-status.danger { background: var(--cp-red-bg); color: var(--cp-red); }
  .cp-status.warn { background: var(--cp-amber-bg); color: var(--cp-amber); }
  .cp-status.muted { background: #efedea; color: #3d3a35; }
  .cp-status.muted::before { background: #3d3a35; }

  .cp-card-head, .cp-section-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 12); }
  .cp-card-head h2, .cp-section-head h2 { font-size: calc(var(--u) * 41.5); line-height: 1.1; }
  .cp-card-head a, .cp-section-head a { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); color: var(--cp-ink); text-decoration: none; font-size: calc(var(--u) * 21.5); font-weight: 500; }
  .cp-card-head a svg, .cp-section-head a svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
  .cp-section-head { margin: calc(var(--u) * 38) calc(var(--u) * 6) calc(var(--u) * 18) calc(var(--u) * 14); }
  .cp-h2 { font-size: calc(var(--u) * 41.5) !important; margin: calc(var(--u) * 36) 0 calc(var(--u) * 18) calc(var(--u) * 14) !important; }
  .cp-empty { color: var(--cp-muted); font-size: calc(var(--u) * 20); margin: calc(var(--u) * 14) 0 0; }
  .cp-empty-card { padding: calc(var(--u) * 30); display: grid; gap: calc(var(--u) * 10); justify-items: start; margin-bottom: calc(var(--u) * 16); }
  .cp-empty-card strong { font-size: calc(var(--u) * 22.5); }
  .cp-empty-card span { color: var(--cp-muted); font-size: calc(var(--u) * 20); }
  .cp-line { display: flex; align-items: center; gap: calc(var(--u) * 16); margin: calc(var(--u) * 12) 0 0; color: #34312d; font-size: calc(var(--u) * 21.5); line-height: 1.25; }
  .cp-line svg { width: calc(var(--u) * 36); height: calc(var(--u) * 36); flex: 0 0 auto; }
  .cp-line span { min-width: 0; }

  /* ----- Stat tiles ----- */
  .cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 14); margin: calc(var(--u) * 22) calc(var(--u) * -2) 0 calc(var(--u) * -2); }
  .cp-stats .cp-card { padding: calc(var(--u) * 22) calc(var(--u) * 18) calc(var(--u) * 18); display: grid; gap: calc(var(--u) * 26); align-content: space-between; min-width: 0; height: calc(var(--u) * 180); }
  .cp-stat-top { display: flex; align-items: center; gap: calc(var(--u) * 14); }
  .cp-stat-top i { width: calc(var(--u) * 76); height: calc(var(--u) * 76); }
  .cp-stat-top i svg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
  .cp-stat-top > span { display: grid; gap: 0; min-width: 0; }
  .cp-stat-top small { font-size: calc(var(--u) * 14); letter-spacing: .1em; color: var(--cp-muted); text-transform: uppercase; white-space: nowrap; }
  .cp-stat-top strong { font-family: var(--cp-serif); font-size: calc(var(--u) * 51.5); font-weight: 600; line-height: 1; white-space: nowrap; }
  .cp-stats em { font-style: normal; display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 18.5); color: var(--cp-ink); white-space: nowrap; }
  .cp-stats em svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }

  /* ----- Home ----- */
  .cp-next { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 226); gap: calc(var(--u) * 24); padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 38); margin: calc(var(--u) * 22) calc(var(--u) * -6) 0; overflow: hidden; min-height: calc(var(--u) * 333); }
  .cp-next-copy { padding: calc(var(--u) * 30) 0 calc(var(--u) * 20); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .cp-next-copy h2 { font-size: calc(var(--u) * 51.5); line-height: 1.04; margin: calc(var(--u) * 12) 0 calc(var(--u) * 10); }
  .cp-next-copy .cp-pill { margin-top: calc(var(--u) * 22); width: calc(var(--u) * 463); max-width: 100%; justify-content: flex-start; padding-left: calc(var(--u) * 40); }
  .cp-next-copy .cp-pill svg { margin-left: calc(var(--u) * 10); }
  .cp-next-copy p { color: var(--cp-muted); font-size: calc(var(--u) * 21); margin: 0; }
  .cp-next-copy p.cp-line { color: #34312d; }
  .cp-next-image {
    border-radius: calc(var(--u) * 26); min-height: calc(var(--u) * 200); background-color: #e9dfd0; background-size: cover; background-position: center;
    background-image: linear-gradient(160deg, #efe5d6, #d9c9b1);
  }
  .cp-plan { padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 26); margin: calc(var(--u) * 22) calc(var(--u) * -6) 0; }
  .cp-plan-row { display: flex; align-items: center; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 22); padding-top: calc(var(--u) * 22); border-top: 1px solid var(--cp-line); }
  .cp-plan-row i { width: calc(var(--u) * 102); height: calc(var(--u) * 102); }
  .cp-plan-row i svg { width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
  .cp-plan-row div { flex: 1 1 auto; min-width: 0; display: grid; gap: calc(var(--u) * 4); }
  .cp-plan-row small { font-size: calc(var(--u) * 15); letter-spacing: .17em; color: var(--cp-muted); }
  .cp-plan-row strong { font-family: var(--cp-serif); font-size: calc(var(--u) * 38); font-weight: 600; line-height: 1.05; }
  .cp-plan-row span { color: var(--cp-muted); font-size: calc(var(--u) * 21); line-height: 1.3; }
  .cp-allowance { margin-top: calc(var(--u) * 22); padding-top: calc(var(--u) * 18); border-top: 1px solid var(--cp-line); display: grid; gap: calc(var(--u) * 16); }
  .cp-allowance > div:first-child { display: flex; justify-content: space-between; font-size: calc(var(--u) * 20); }
  .cp-allowance > div:first-child span:last-child { color: var(--cp-muted); }
  .cp-bar { height: calc(var(--u) * 17); border-radius: 999px; background: #efece6; overflow: hidden; }
  .cp-bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: #d9cdbb; }
  .cp-allowance small { color: var(--cp-muted); font-size: calc(var(--u) * 18.5); }

  .cp-rows { padding: calc(var(--u) * 4) calc(var(--u) * 28); margin: 0 calc(var(--u) * -6); }
  .cp-row, .cp-form-row, .cp-booking-row { display: flex; align-items: center; gap: calc(var(--u) * 24); }
  .cp-row { padding: calc(var(--u) * 22) 0; }
  .cp-row + .cp-row { border-top: 1px solid var(--cp-line); }
  .cp-row i { width: calc(var(--u) * 76); height: calc(var(--u) * 76); }
  .cp-row i svg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
  .cp-row div, .cp-form-row div, .cp-booking-row div { flex: 1 1 auto; min-width: 0; display: grid; gap: calc(var(--u) * 4); }
  .cp-row strong, .cp-form-row strong, .cp-booking-row strong { font-size: calc(var(--u) * 22.5); font-weight: 600; line-height: 1.2; }
  .cp-row small, .cp-form-row small { color: var(--cp-muted); font-size: calc(var(--u) * 20); }

  /* ----- Bookings ----- */
  .cp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); background: #fff; border: 1px solid var(--cp-line); border-radius: calc(var(--u) * 24); padding: calc(var(--u) * 8); margin: calc(var(--u) * 16) 0 0; height: calc(var(--u) * 77); box-sizing: content-box; }
  .cp-seg button { border: 0; background: transparent; border-radius: calc(var(--u) * 18); font: inherit; font-size: calc(var(--u) * 22.5); font-weight: 500; color: var(--cp-muted); cursor: pointer; }
  .cp-seg button.active { background: var(--cp-chip); color: var(--cp-ink); font-weight: 600; }
  .cp-booking-feature { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 228); gap: calc(var(--u) * 10) calc(var(--u) * 24); padding: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 38); margin: 0 calc(var(--u) * -2) calc(var(--u) * 20); position: relative; overflow: hidden; }
  .cp-booking-copy { position: relative; display: block; min-width: 0; padding-top: calc(var(--u) * 6); }
  .cp-booking-copy .cp-status { position: absolute; top: calc(var(--u) * -2); right: calc(var(--u) * -10); }
  .cp-booking-copy .cp-eyebrow { max-width: 55%; font-size: calc(var(--u) * 14); }
  .cp-booking-copy h3 { font-size: calc(var(--u) * 46.5); line-height: 1.04; margin: calc(var(--u) * 36) 0 calc(var(--u) * 12); }
  .cp-booking-feature .cp-next-image { grid-column: 2; grid-row: 1; min-height: calc(var(--u) * 296); }
  .cp-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 308fr 228fr 176fr; gap: calc(var(--u) * 14); margin: calc(var(--u) * 4) 0 0 calc(var(--u) * -22); padding-right: 0; }
  .cp-action {
    display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12); border: 0; border-radius: calc(var(--u) * 18); height: calc(var(--u) * 79); font: inherit; font-size: calc(var(--u) * 21.5); font-weight: 500;
    background: #f6f3ee; color: var(--cp-ink); cursor: pointer; white-space: nowrap;
  }
  .cp-action.primary { background: var(--cp-chip); }
  .cp-action.soft { background: #f8efe4; }
  .cp-action svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
  .cp-action svg:last-child:not(:first-child) { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
  .cp-booking-row { width: 100%; text-align: left; padding: calc(var(--u) * 24) calc(var(--u) * 26) calc(var(--u) * 24) calc(var(--u) * 24); margin: 0 calc(var(--u) * -2) calc(var(--u) * 16); align-items: flex-start; cursor: pointer; font: inherit; box-sizing: border-box; }
  .cp-booking-row > i { width: calc(var(--u) * 98); height: calc(var(--u) * 98); margin-top: calc(var(--u) * 8); }
  .cp-booking-row > i svg { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
  .cp-booking-row .cp-eyebrow { font-size: calc(var(--u) * 14); }
  .cp-booking-row strong { font-family: var(--cp-serif); font-size: calc(var(--u) * 36.5); font-weight: 600; line-height: 1.08; }
  .cp-booking-row .cp-line { font-size: calc(var(--u) * 20); margin-top: calc(var(--u) * 8); }
  .cp-booking-row .cp-line svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
  .cp-booking-row .cp-status { align-self: flex-start; margin-top: calc(var(--u) * 4); }
  .cp-booking-row .cp-chevron { align-self: center; }

  /* ----- Forms ----- */
  .cp-list-section { margin-top: 0; }
  .cp-form-row { padding: calc(var(--u) * 22) calc(var(--u) * 26) calc(var(--u) * 22) calc(var(--u) * 22); margin: 0 calc(var(--u) * -2) calc(var(--u) * 14); align-items: center; }
  .cp-form-row > i { width: calc(var(--u) * 88); height: calc(var(--u) * 88); }
  .cp-form-row > i svg { width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
  .cp-form-state { flex: 0 0 auto; display: grid; gap: calc(var(--u) * 10); justify-items: end; text-align: right; }
  .cp-form-state small { font-size: calc(var(--u) * 20); }
  .cp-form-state .cp-status { height: calc(var(--u) * 46); }

  /* ----- Account ----- */
  .cp-profile-card { display: flex; align-items: center; gap: calc(var(--u) * 24); padding: calc(var(--u) * 22) calc(var(--u) * 24) calc(var(--u) * 22) calc(var(--u) * 24); margin: 0 calc(var(--u) * -2); min-height: calc(var(--u) * 166); }
  .cp-profile-card > div { flex: 1 1 auto; min-width: 0; display: grid; gap: calc(var(--u) * 6); }
  .cp-profile-card strong { font-family: var(--cp-serif); font-size: calc(var(--u) * 38); font-weight: 600; line-height: 1.08; }
  .cp-profile-card small { color: var(--cp-muted); font-size: calc(var(--u) * 20); overflow-wrap: anywhere; }
  .cp-avatar-lg { flex: 0 0 auto; width: calc(var(--u) * 122); height: calc(var(--u) * 122); border-radius: 50%; display: grid; place-items: center; background: var(--cp-chip); font-size: calc(var(--u) * 36.5); font-weight: 700; }
  .cp-profile-card .cp-pill { flex: 0 0 auto; align-self: center; height: calc(var(--u) * 60); padding: 0 calc(var(--u) * 24); font-size: calc(var(--u) * 21); gap: calc(var(--u) * 12); border-radius: calc(var(--u) * 16); }
  .cp-settings { padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 6); margin: calc(var(--u) * 22) calc(var(--u) * -2) 0; }
  .cp-settings h2 { font-size: calc(var(--u) * 41.5); margin-bottom: calc(var(--u) * 14); }
  .cp-settings a { display: flex; align-items: center; gap: calc(var(--u) * 22); padding: 0; height: calc(var(--u) * 82); border-top: 1px solid var(--cp-line); color: var(--cp-ink); text-decoration: none; }
  .cp-settings a > div { flex: 1 1 auto; min-width: 0; display: grid; gap: calc(var(--u) * 2); }
  .cp-settings strong { font-size: calc(var(--u) * 22.5); font-weight: 500; }
  .cp-settings small { color: var(--cp-muted); font-size: calc(var(--u) * 18.5); }
  .cp-settings i { width: calc(var(--u) * 68); height: calc(var(--u) * 68); }
  .cp-settings i svg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
  .cp-logout { display: flex; align-items: center; gap: calc(var(--u) * 22); width: 100%; margin: calc(var(--u) * 16) calc(var(--u) * -2) 0; padding: calc(var(--u) * 12) calc(var(--u) * 30) calc(var(--u) * 12) calc(var(--u) * 24); font-size: calc(var(--u) * 22.5); cursor: pointer; text-align: left; box-sizing: border-box; }
  .cp-logout i { width: calc(var(--u) * 66); height: calc(var(--u) * 66); }
  .cp-logout i svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
  .cp-logout strong { flex: 1 1 auto; font-weight: 500; }
  .cp-logout i { background: #fbe9e6; color: var(--cp-red); }
  .cp-panel { padding: calc(var(--u) * 28) calc(var(--u) * 30); margin: calc(var(--u) * 22) calc(var(--u) * -2) 0; display: grid; gap: calc(var(--u) * 16); }
  .cp-panel h2 { font-size: calc(var(--u) * 38); }
  .cp-panel .web-push-setting { padding: 0; background: none; border: 0; box-shadow: none; margin: 0; }
  .cp-panel .web-push-setting h2 { display: none; }
  .cp-panel .web-push-setting p { color: var(--cp-muted); font-size: calc(var(--u) * 20); margin: 0 0 calc(var(--u) * 14); line-height: 1.4; }
  .cp-panel .web-push-setting button { display: inline-flex; background: var(--cp-chip); color: var(--cp-ink); border: 0; border-radius: calc(var(--u) * 18); height: calc(var(--u) * 71); align-items: center; padding: 0 calc(var(--u) * 28); font: inherit; font-size: calc(var(--u) * 21.5); font-weight: 500; cursor: pointer; }
  .cp-form { display: grid; gap: calc(var(--u) * 16); }
  .cp-form label { display: grid; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 19); color: var(--cp-muted); }
  .cp-form input, .cp-form select { border: 1px solid var(--cp-line); border-radius: calc(var(--u) * 16); padding: 0 calc(var(--u) * 20); height: calc(var(--u) * 72); font: inherit; font-size: calc(var(--u) * 21); color: var(--cp-ink); background: #fff; }
  .cp-form small { color: var(--cp-muted); font-size: calc(var(--u) * 17.5); }
  .cp-note { margin: 0; font-size: calc(var(--u) * 19); }
  .cp-note.ok { color: var(--cp-green); }
  .cp-note.bad { color: var(--cp-red); }
  .customer-app-version { font-size: calc(var(--u) * 16.5); text-align: center; color: var(--cp-muted); }


  .customer-account-page .cp-phone h1, .customer-account-page .cp-phone h2, .customer-account-page .cp-phone h3 { color: var(--cp-ink); }

  /* ----- Personal information ----- */
  .cp-details { padding-bottom: calc(var(--u) * 14); }
  .cp-detail { display: flex; align-items: center; gap: calc(var(--u) * 22); height: calc(var(--u) * 92); border-top: 1px solid var(--cp-line); }
  .cp-detail i { width: calc(var(--u) * 68); height: calc(var(--u) * 68); }
  .cp-detail i svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
  .cp-detail div { display: grid; gap: calc(var(--u) * 2); min-width: 0; }
  .cp-detail small { color: var(--cp-muted); font-size: calc(var(--u) * 18); letter-spacing: .08em; text-transform: uppercase; }
  .cp-detail strong { font-size: calc(var(--u) * 23); font-weight: 500; overflow-wrap: anywhere; }
  .cp-personal .cp-title h1 { font-size: calc(var(--u) * 78); }


  /* ----- Back link under the header on pages that are not a bottom tab ----- */
  .cp-back-row { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 12) 0 0 calc(var(--u) * 20); height: calc(var(--u) * 62); padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 18); border-radius: 999px; background: var(--cp-chip); color: var(--cp-ink) !important; text-decoration: none; font-size: calc(var(--u) * 24); font-weight: 500; }
  .cp-back-row svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); transform: rotate(180deg); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* The "Privacy settings" chip must not sit on top of the bottom bar. */
  body:has(.customer-app-bottom-nav) .edit-privacy-manage { bottom: calc(calc(var(--u) * 124) + 16px + env(safe-area-inset-bottom)); }
}

@media (min-width: 1080px) { .cp-back-row:not(.cp-back-button) { display: none; } }
.clinical-public-card .cp-back-button { border: 0; cursor: pointer; font-family: inherit; margin: 0 0 14px; }