/* LifeByLogic Pro's own page (Clear pages for Pro and invited clients, PR 3, November 3, 2026): lifebylogic.com/pro/.
   It wears the invitation page's look (lbl-invite.v1.css: the light card in the Brain Lab's radiating blue, the
   profile-style header and the white parts), so a professional and their client see one family of pages. This adds
   what only Pro has: the badge, the link maker's tests, the ready message, the clients' rows with their New mark,
   the folds and the picture of what a client sees. Phone first. */
.pro-badge { background: #0E1B24; }
.pro-verified { font-size: 16px; color: var(--pf-ink-2); }
.pro-links a { white-space: nowrap; }
.inv-part h3.inv-part-title { font-size: 22px; }
.pro [tabindex="-1"], .pro textarea, .pro input, .pro-link { scroll-margin-top: 96px; }
.pro-hint { font-style: normal; font-weight: 400; color: var(--pf-ink-3); }

.pro-set { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pro-set legend { padding: 0; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--pf-ink); }
.pro-lab { border: 1px solid var(--pf-line); border-radius: 12px; background: var(--pf-tint); }
.pro-lab > summary { min-height: 48px; display: flex; align-items: center; padding: 0 14px; font-size: 16px; font-weight: 700; color: var(--pf-ink); cursor: pointer; }
.pro-lab-tests { display: flex; flex-direction: column; padding: 0 8px 8px; }
.pro-test, .pro-choice { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 10px 6px; border-top: 1px solid var(--pf-line); cursor: pointer; }
.pro-test:first-child { border-top: 0; }
.pro-choice { border-top: 0; padding: 6px 0; font-size: 16px; line-height: 1.5; color: var(--pf-ink-2); }
.pro-test input, .pro-choice input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--pf-teal-ink); }
.pro-test > span { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.4; }
.pro-test strong { color: var(--pf-ink); font-weight: 600; }
.pro-minutes { color: var(--pf-ink-3); }

.pro-link { padding: 14px; border-radius: 14px; background: var(--pf-tint); border: 1px solid #B9DDE1; display: flex; flex-direction: column; gap: 10px; }
.pro-message { min-height: 140px; line-height: 1.5; resize: vertical; }
.pro-send-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pro-send-row .inv-button { width: 100%; min-width: 0; padding: 0 8px; }
.pro-update { display: flex; flex-direction: column; gap: 10px; }

.pro-clients { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pro-client { padding: 14px; border: 1px solid var(--pf-line); border-radius: 14px; background: var(--pf-tint); display: flex; flex-direction: column; gap: 8px; }
.pro-client[data-new="true"] { border-left: 4px solid var(--pf-teal-ink); }
.pro-client-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pro-code { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--pf-ink); overflow-wrap: anywhere; }
.pro-client-head .inv-meta { flex-basis: 100%; font-size: 16px; color: var(--pf-ink-3); }
.pro-new { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--pf-teal-ink); color: #FFFFFF; font-size: 16px; font-weight: 700; }
.pro-asked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pro-asked li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--pf-line); font-size: 16px; }
.pro-asked li:first-child { border-top: 0; }
.pro-asked-name { flex: 1 1 100%; font-weight: 600; color: var(--pf-ink); }
.pro-sent { color: var(--pf-teal-ink); font-weight: 700; }
.pro-wait { color: var(--pf-ink-3); }
.pro-actions { display: flex; flex-wrap: wrap; gap: 0 16px; }
.pro-results { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px dashed #B9D3D8; }
.pro-results:focus { outline: none; }
.pro-result { padding: 12px 14px; border-radius: 12px; background: var(--pf-surface); border: 1px solid var(--pf-line); display: flex; flex-direction: column; gap: 6px; }
.pro-result p { font-size: 16px; line-height: 1.55; color: var(--pf-ink-2); }
.pro-measures { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 16px; line-height: 1.45; }
.pro-measures dt { color: var(--pf-ink-2); }
.pro-measures dd { margin: 0; color: var(--pf-ink); font-weight: 600; text-align: right; }

.pro-fold { border-top: 1px solid var(--pf-line); }
.pro-fold:first-child { border-top: 0; }
.pro-fold > summary {
  min-height: 52px; display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--pf-ink); cursor: pointer;
}
.pro-fold > summary::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--pf-teal); box-shadow: 0 0 0 4px rgba(94,196,201,0.22); }
.pro-fold-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 14px; }
.pro-fold-body p { font-size: 16px; line-height: 1.6; color: var(--pf-ink-2); }
.pro-how { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--pf-ink-2); }
.pro-problems { margin: 0; padding: 10px 14px 10px 30px; border-radius: 12px; background: #FFF6E8; border: 1px solid rgba(228,162,75,0.6); font-size: 16px; line-height: 1.5; color: var(--pf-ink); }

/* The picture of what a client sees: a small screen drawn from the professional's own card. */
.pro-shot { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pro-shot-screen {
  width: min(100%, 300px); padding: 12px; border-radius: 26px; border: 8px solid #0E1B24; background: #F1F9FA; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 14px 34px rgba(14,27,36,0.22);
}
.pro-shot-address { font: 500 16px var(--font-mono); color: var(--pf-ink-3); text-align: center; overflow-wrap: anywhere; }
.pro-shot-hero { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #DDF3F5 0%, #F1F9FA 100%); }
.pro-shot-photo {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 2px solid #FFFFFF;
  background: #E4F6F7; font: 500 16px var(--font-display); color: var(--pf-teal-ink);
}
.pro-shot-hero p { display: flex; flex-direction: column; font-size: 16px; line-height: 1.3; color: var(--pf-ink); min-width: 0; overflow-wrap: anywhere; }
.pro-shot-hero span { color: var(--pf-ink-2); }
.pro-shot-screen .pro-shot-ask { font-size: 16px; line-height: 1.45; color: var(--pf-ink); }
.pro-shot-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; font-size: 16px; line-height: 1.2; text-align: center; color: var(--pf-ink-2); }
.pro-shot-steps li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pro-shot-steps span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--pf-teal-ink); color: var(--pf-teal-ink); font-weight: 700; }
.pro-shot-button { padding: 10px; border-radius: 10px; background: var(--pf-teal-ink); color: #FFFFFF; font-size: 16px; font-weight: 700; text-align: center; }
.pro-shot figcaption { font-size: 16px; line-height: 1.55; color: var(--pf-ink-2); }

@media (min-width: 640px) {
  .pro-asked-name { flex: 1 1 auto; }
  .pro-send-row { display: flex; flex-wrap: wrap; }
  .pro-send-row .inv-button { width: auto; min-width: 140px; }
  .pro-shot { flex-direction: row; align-items: flex-start; gap: 18px; }
  .pro-shot figcaption { flex: 1 1 0; padding-top: 18px; }
}

/* PR 4 of the plan (November 3, 2026), by the owner's words that day: "the surrounding complete background and the
   narrow page itself need to be corrected", and the site's wordmark in place of the word LifeByLogic. The page now
   fills the screen in the card's own light colors below the site's menu, up to 1200px wide; on a wide screen the
   link maker and the clients sit side by side, and every other part spans both. */
body.pro-page { background: #F1F9FA; color: #0E1B24; }
body.pro-page a { color: #11646A; }
body.pro-page :focus-visible { outline-color: #11646A; }
.pro { max-width: 1200px; padding: 28px 16px 80px; }
.pro .inv-head { padding: 0; }
.pro .inv-label { display: flex; align-items: center; gap: 8px; color: #11646A; }
.pro .inv-title { color: #0E1B24; font-size: clamp(32px, 4.4vw, 46px); }
.pro .inv-help, .pro .inv-reviewed { padding: 0; color: #3A4A57; }
.pro .inv-help a { color: #11646A; }
.pro .inv-host noscript p { color: #3A4A57; }
.pro .inv-sheet { background: transparent; border: 0; border-radius: 0; overflow: visible; padding-bottom: 0; }
.pro .inv-hero { border: 1px solid var(--pf-line); border-radius: 22px; }
.pro .inv-part, .pro .inv-test-note, .pro .inv-sheet > .inv-note, .pro .inv-who { margin-left: 0; margin-right: 0; }
.pro .inv-form { max-width: 560px; }
.lbl-mark { display: inline-flex; align-items: center; vertical-align: -0.12em; color: inherit; }
.lbl-mark svg { display: block; height: 0.82em; width: auto; overflow: visible; }
.inv-label .lbl-mark svg { height: 18px; }
.pro-badge .lbl-mark { margin-right: 0.3em; }
.pro-badge .lbl-mark svg { height: 0.78em; }
@media (min-width: 640px) {
  .pro { padding: 36px 28px 96px; }
}
@media (min-width: 1024px) {
  .pro { padding: 40px 40px 112px; }
  .pro-sheet[data-pro-sheet="pro"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .pro-sheet[data-pro-sheet="pro"] > * { grid-column: 1 / -1; }
  .pro-sheet[data-pro-sheet="pro"] > [data-pro-part="ask"] { grid-column: 1; }
  .pro-sheet[data-pro-sheet="pro"] > [data-pro-part="ask"] + [data-pro-part="clients"] { grid-column: 2; }
  .pro .inv-hero { padding: 30px 28px 26px; gap: 24px; }
  .pro .inv-photo, .pro .inv-initials { width: 132px; height: 132px; }
}