/* #region tokens: THE PALETTE AND SPACING EVERY CARD SHARES [Foundation Layer] */
  :root {
    --pa-black: #0b0b0c;
    --pa-ink: #1f2328;
    --pa-muted: #6b7280;
    --pa-line: #e3e5e8;
    --pa-canvas: #eeeeee;
    --pa-card: #ffffff;
    --pa-orange: #5bc0de;
    --pa-orange-dark: #31b0d5;
    --pa-green: #5cb85c;
    --pa-blue: #337ab7;
    --pa-blue-soft: #d9edf7;
    --pa-red: #c9443a;
    --pa-hot: #e4572e;
    --pa-warm: #f0ad4e;
    --pa-cold: #6c8ebf;
    --pa-radius: 14px;
    --pa-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--pa-ink);
    background: var(--pa-canvas);
    -webkit-font-smoothing: antialiased;
  }
/* #endregion */
/* #region app_frame: TOP BAR, SCROLLING CANVAS, ASSISTANT BAR PINNED TO THE BOTTOM [Layout Layer] */
  .pa-app { width: 412px; height: 915px; display: flex; flex-direction: column; background: var(--pa-canvas); overflow: hidden; position: relative; }
  .pa-top { height: 50px; flex: 0 0 50px; background: var(--pa-black); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
  .pa-top .brand { font-weight: 700; font-size: 16px; letter-spacing: .2px; }
  .pa-top .who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c9cdd2; }
  .pa-top .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#444,#888); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; }
  .pa-canvas { flex: 1 1 auto; overflow: hidden; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 10px; }
  .pa-assist { flex: 0 0 auto; background: #fff; border-top: 1px solid var(--pa-line); padding: 8px 10px 12px; }
  .pa-chips { display: flex; gap: 6px; overflow: hidden; margin-bottom: 8px; }
  .pa-chip { flex: 0 0 auto; border: 1px solid var(--pa-line); background: #f7f8f9; border-radius: 999px; padding: 6px 11px; font-size: 12.5px; color: var(--pa-ink); white-space: nowrap; }
  .pa-chip.primary { background: var(--pa-blue-soft); border-color: #c7dbee; color: var(--pa-blue); font-weight: 600; }
  .pa-input { display: flex; align-items: center; gap: 8px; }
  .pa-input .field { flex: 1; height: 44px; border-radius: 22px; background: #f2f3f5; border: 1px solid var(--pa-line); padding: 0 16px; display: flex; align-items: center; color: var(--pa-muted); font-size: 14px; }
  .pa-mic { width: 52px; height: 52px; border-radius: 50%; background: var(--pa-black); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
  .pa-mic svg { width: 22px; height: 22px; }
  .pa-mic.live { background: var(--pa-red); box-shadow: 0 0 0 8px rgba(201,68,58,.18), 0 0 0 16px rgba(201,68,58,.08); }
/* #endregion */
/* #region conversation: WHAT HE SAID AND WHAT THE ASSISTANT ANSWERED, KEPT SHORT [UI Layer] */
  .pa-say { align-self: flex-end; max-width: 84%; background: var(--pa-black); color: #fff; padding: 9px 13px; border-radius: 16px 16px 4px 16px; font-size: 13.5px; line-height: 1.4; }
  .pa-say .via { display: block; font-size: 10.5px; color: #a7adb4; margin-bottom: 2px; }
  .pa-reply { align-self: flex-start; max-width: 92%; color: var(--pa-ink); font-size: 13.5px; line-height: 1.45; padding: 0 2px; }
  .pa-reply b { font-weight: 700; }
/* #endregion */
/* #region cards: THE ONLY SHAPES THE AI IS ALLOWED TO RETURN — the app draws them, the AI only fills them [UI Layer] */
  .pa-card { background: var(--pa-card); border-radius: var(--pa-radius); box-shadow: var(--pa-shadow); overflow: hidden; }
  .pa-card .hd { padding: 12px 14px 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .pa-card .hd .t { font-weight: 700; font-size: 15px; line-height: 1.25; }
  .pa-card .hd .s { font-size: 12px; color: var(--pa-muted); margin-top: 2px; }
  .pa-card .bd { padding: 0 14px 12px; }
  .pa-card .ft { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--pa-line); }
  .pa-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--pa-muted); }
  .pa-btn { flex: 1; height: 42px; border-radius: 10px; border: 1px solid var(--pa-line); background: #fff; font: inherit; font-weight: 600; font-size: 14px; color: var(--pa-ink); display: flex; align-items: center; justify-content: center; gap: 6px; }
  .pa-btn.go { background: var(--pa-green); border-color: var(--pa-green); color: #fff; }
  .pa-btn.warn { background: var(--pa-orange); border-color: var(--pa-orange-dark); color: #fff; }
  .pa-btn.dark { background: var(--pa-black); border-color: var(--pa-black); color: #fff; }
  .pa-btn.small { flex: 0 0 auto; height: 34px; padding: 0 12px; font-size: 13px; }
/* #endregion */
/* #region score: THE NUMBER AND ITS TWO HALVES — potential and ability to pay [UI Layer] */
  .pa-score { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 17px; line-height: 1; }
  .pa-score small { font-size: 8.5px; font-weight: 600; opacity: .85; margin-top: 2px; letter-spacing: .3px; }
  .pa-score.a { background: #2e8b57; } .pa-score.b { background: #6aa84f; } .pa-score.c { background: #d9a43a; } .pa-score.d { background: #9aa1a9; }
  .pa-axes { display: flex; gap: 10px; margin: 2px 0 10px; }
  .pa-axis { flex: 1; }
  .pa-axis .l { font-size: 11px; color: var(--pa-muted); display: flex; justify-content: space-between; }
  .pa-axis .bar { height: 6px; border-radius: 3px; background: #edf0f2; margin-top: 4px; overflow: hidden; }
  .pa-axis .bar i { display: block; height: 100%; background: var(--pa-green); border-radius: 3px; }
/* #endregion */
/* #region facts: EVERY CLAIM CARRIES ITS SOURCE, SO THE SALESMAN CAN TRUST IT [UI Layer] */
  .pa-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .pa-why li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; }
  .pa-why .ic { flex: 0 0 22px; height: 22px; border-radius: 6px; background: #f1f3f5; display: flex; align-items: center; justify-content: center; font-size: 12px; }
  .pa-src { display: inline-block; font-size: 10.5px; color: var(--pa-muted); background: #f3f4f6; border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap; }
  .pa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .pa-tag { font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: #f1f3f5; color: var(--pa-ink); }
  .pa-tag.hot { background: #fde4dc; color: #a33a1c; } .pa-tag.warm { background: #d9edf7; color: #31708f; } .pa-tag.cust { background: #e2f1e5; color: #2b6f37; } .pa-tag.new { background: var(--pa-blue-soft); color: var(--pa-blue); }
/* #endregion */
/* #region route: NUMBERED STOPS WITH SCORE, DRIVE TIME AND A DRAG HANDLE [UI Layer] */
  .pa-stops { list-style: none; margin: 0; padding: 0; }
  .pa-stops li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0f1f3; }
  .pa-stops li:first-child { border-top: 0; }
  .pa-stops .n { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--pa-black); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .pa-stops .n.done { background: var(--pa-green); }
  .pa-stops .m { flex: 1; min-width: 0; }
  .pa-stops .m .t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pa-stops .m .s { font-size: 11.5px; color: var(--pa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pa-stops .sc { flex: 0 0 auto; font-weight: 800; font-size: 13px; color: #2e8b57; }
  .pa-stops .grip { flex: 0 0 14px; color: #c3c7cc; font-size: 14px; letter-spacing: -2px; }
  .pa-summary { display: flex; gap: 8px; margin: 2px 0 8px; }
  .pa-summary div { flex: 1; background: #f6f7f8; border-radius: 10px; padding: 7px 8px; text-align: center; }
  .pa-summary b { display: block; font-size: 16px; }
  .pa-summary span { font-size: 10.5px; color: var(--pa-muted); }
/* #endregion */
/* #region map: A DRAWN STAND-IN FOR THE LIVE GOOGLE MAP, SAME PIN LANGUAGE [UI Layer] */
  .pa-map { position: relative; height: 210px; background: #e9ebe7; overflow: hidden; }
  .pa-map svg.roads { position: absolute; inset: 0; width: 100%; height: 100%; }
  .pa-pin { position: absolute; transform: translate(-50%, -100%); width: 28px; height: 34px; }
  .pa-pin b { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pa-black); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
  .pa-pin span { position: absolute; top: 5px; left: 0; width: 28px; text-align: center; color: #fff; font-size: 11px; font-weight: 800; }
  .pa-pin.a b { background: #2e8b57; } .pa-pin.b b { background: #6aa84f; } .pa-pin.c b { background: #d9a43a; } .pa-pin.g b { background: #fff; border: 2px solid var(--pa-blue); } .pa-pin.g span { color: var(--pa-blue); }
  .pa-me { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--pa-blue); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47,111,174,.2); transform: translate(-50%,-50%); }
  .pa-legend { display: flex; gap: 12px; font-size: 11px; color: var(--pa-muted); padding: 8px 14px 0; }
  .pa-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
/* #endregion */
/* #region visit_sheet: WHAT THE AI HEARD, LAID OUT AS FIELDS, CHANGES MARKED, ONE TAP TO CONFIRM [UI Layer] */
  .pa-fields { display: flex; flex-direction: column; gap: 0; }
  .pa-field { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid #f0f1f3; font-size: 13.5px; }
  .pa-field:first-child { border-top: 0; }
  .pa-field .k { color: var(--pa-muted); }
  .pa-field .v { font-weight: 600; text-align: right; }
  .pa-field.new .v::after { content: "AI"; margin-left: 6px; font-size: 9.5px; font-weight: 800; color: var(--pa-blue); background: var(--pa-blue-soft); padding: 1px 5px; border-radius: 4px; vertical-align: 1px; }
  .pa-quote { font-size: 12.5px; color: #4b5563; background: #f7f8f9; border-left: 3px solid #d7dbe0; padding: 8px 10px; border-radius: 0 8px 8px 0; line-height: 1.45; margin-bottom: 8px; font-style: italic; }
/* #endregion */
/* #region listening: THE VOICE STATE — big, legible in a car, cancel always in reach [UI Layer] */
  .pa-listen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 20px; }
  .pa-wave { display: flex; gap: 5px; align-items: center; height: 60px; }
  .pa-wave i { width: 6px; border-radius: 3px; background: var(--pa-red); }
  .pa-live-text { font-size: 17px; line-height: 1.5; color: var(--pa-ink); max-width: 340px; }
  .pa-live-text em { color: var(--pa-muted); font-style: normal; }
/* #endregion */
/* #region drive_mode: EYES ON THE ROAD — huge type, two buttons, the assistant talks [UI Layer] */
  .pa-drive { flex: 1; background: var(--pa-black); color: #fff; display: flex; flex-direction: column; padding: 22px 20px; gap: 16px; }
  .pa-drive .next { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #9aa1a9; }
  .pa-drive .name { font-size: 28px; font-weight: 800; line-height: 1.15; }
  .pa-drive .eta { font-size: 18px; color: #d1d5db; }
  .pa-drive .brief { background: #1b1d21; border-radius: 14px; padding: 14px; font-size: 16px; line-height: 1.5; color: #e5e7eb; }
  .pa-drive .speaking { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9aa1a9; }
  .pa-drive .row { display: flex; gap: 10px; margin-top: auto; }
  .pa-drive .big { flex: 1; height: 64px; border-radius: 16px; border: 0; font: inherit; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* #endregion */
/* #region pipeline_and_coverage: BUCKETS BY WHEN, AND HOW MUCH OF THE TERRITORY HAS BEEN WALKED [UI Layer] */
  .pa-buckets { display: flex; gap: 6px; }
  .pa-bucket { flex: 1; border-radius: 10px; padding: 8px 6px; text-align: center; background: #f6f7f8; }
  .pa-bucket b { display: block; font-size: 18px; }
  .pa-bucket span { font-size: 10.5px; color: var(--pa-muted); }
  .pa-bucket.over { background: #fde4dc; } .pa-bucket.over b { color: #a33a1c; }
  .pa-bucket.on { outline: 2px solid var(--pa-black); background: #fff; }
  .pa-ring { width: 110px; height: 110px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .pa-ring > div { width: 84px; height: 84px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .pa-ring b { font-size: 24px; } .pa-ring span { font-size: 10.5px; color: var(--pa-muted); }
  .pa-areas { list-style: none; margin: 0; padding: 0; }
  .pa-areas li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #f0f1f3; font-size: 13px; }
  .pa-areas li:first-child { border-top: 0; }
  .pa-areas .nm { flex: 0 0 96px; font-weight: 600; }
  .pa-areas .bar { flex: 1; height: 8px; border-radius: 4px; background: #edf0f2; overflow: hidden; }
  .pa-areas .bar i { display: block; height: 100%; border-radius: 4px; background: var(--pa-green); }
  .pa-areas .pc { flex: 0 0 38px; text-align: right; font-weight: 700; font-size: 12px; }
/* #endregion */
/* #region live_route: WHERE WE ARE IN TODAY'S ROUTE — done, now, still to come [UI Layer] */
  .pa-progress { height: 8px; border-radius: 4px; background: #edf0f2; overflow: hidden; margin: 2px 0 6px; }
  .pa-progress i { display: block; height: 100%; background: var(--pa-green); border-radius: 4px; }
  .pa-progress-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--pa-muted); margin-bottom: 8px; }
  .pa-progress-l .late { color: #a33a1c; font-weight: 700; }
  .pa-stops li.now { background: #eef8fc; margin: 0 -14px; padding: 9px 14px; border-top: 1px solid #f6e3bd; border-bottom: 1px solid #f6e3bd; }
  .pa-stops .n.now { background: var(--pa-orange); box-shadow: 0 0 0 4px rgba(240,173,78,.25); }
  .pa-stops .n.todo { background: #fff; color: var(--pa-ink); border: 2px solid #c9ced4; }
  .pa-stops li.past .t { color: var(--pa-muted); }
  .pa-pin.done b { background: var(--pa-green); } .pa-pin.now b { background: var(--pa-orange); box-shadow: 0 0 0 5px rgba(240,173,78,.3); } .pa-pin.todo b { background: #fff; border: 2px solid #8a929b; } .pa-pin.todo span { color: var(--pa-ink); }
/* #endregion */
/* #region history: PAST PROSPECTIONS GROUPED BY WEEK, ONE DOT FOR THE TEMPERATURE [UI Layer] */
  .pa-week { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--pa-muted); padding: 10px 0 2px; }
  .pa-dot { flex: 0 0 10px; height: 10px; border-radius: 50%; }
  .pa-dot.hot { background: var(--pa-hot); } .pa-dot.warm { background: var(--pa-warm); } .pa-dot.cold { background: var(--pa-cold); } .pa-dot.won { background: var(--pa-green); }
  .pa-stops .when { flex: 0 0 auto; font-size: 11.5px; color: var(--pa-muted); text-align: right; }
/* #endregion */
/* #region route_settings: EVERY KNOB A SUGGESTED ROUTE IS BUILT FROM — each one also answerable by voice [UI Layer] */
  .pa-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #f0f1f3; }
  .pa-set:first-child { border-top: 0; }
  .pa-set .k { font-size: 13.5px; font-weight: 600; }
  .pa-set .k small { display: block; font-weight: 400; font-size: 11.5px; color: var(--pa-muted); margin-top: 1px; }
  .pa-set .v { font-size: 13.5px; font-weight: 600; color: var(--pa-blue); white-space: nowrap; }
  .pa-stepper { display: flex; align-items: center; border: 1px solid var(--pa-line); border-radius: 10px; overflow: hidden; }
  .pa-stepper span { width: 34px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--pa-ink); background: #f7f8f9; }
  .pa-stepper b { min-width: 38px; text-align: center; font-size: 15px; }
  .pa-seg { display: flex; border: 1px solid var(--pa-line); border-radius: 10px; overflow: hidden; }
  .pa-seg span { padding: 7px 10px; font-size: 12.5px; color: var(--pa-ink); border-left: 1px solid var(--pa-line); background: #fff; }
  .pa-seg span:first-child { border-left: 0; }
  .pa-seg span.on { background: var(--pa-black); color: #fff; font-weight: 600; }
  .pa-toggle { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 12px; background: #d6dade; position: relative; }
  .pa-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
  .pa-toggle.on { background: var(--pa-green); }
  .pa-toggle.on::after { left: 21px; }
  .pa-range { flex: 1; max-width: 150px; height: 6px; border-radius: 3px; background: #edf0f2; position: relative; }
  .pa-range i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: var(--pa-green); }
  .pa-range b { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--pa-green); transform: translate(-50%,-50%); }
  .pa-group { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--pa-muted); padding: 12px 0 0; }
  .pa-pinned { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; }
  .pa-pinned span { font-size: 12px; padding: 5px 9px; border-radius: 8px; background: #eef8fc; border: 1px solid #f6e3bd; }
  .pa-pinned span.add { background: #fff; border-style: dashed; border-color: #c9ced4; color: var(--pa-muted); }
  .pa-live { position: sticky; bottom: 0; display: flex; gap: 8px; background: #f6f7f8; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; margin-top: 10px; }
  .pa-live b { font-size: 13px; }
  .pa-live .diff { color: var(--pa-green); font-weight: 700; }
/* #endregion */
/* #region minimal_form: ONLY THE FIELDS THE DATA SAYS ARE NEEDED, EACH SHOWING WHERE ITS VALUE CAME FROM [UI Layer] */
  .pa-in { padding: 9px 0; border-top: 1px solid #f0f1f3; }
  .pa-in:first-child { border-top: 0; }
  .pa-in label { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--pa-muted); margin-bottom: 4px; }
  .pa-in label .req { color: var(--pa-red); margin-left: 2px; }
  .pa-in .box { min-height: 38px; border: 1px solid var(--pa-line); border-radius: 9px; padding: 8px 10px; font-size: 14px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .pa-in .box.empty { color: #a0a6ad; border-style: dashed; }
  .pa-auto { font-size: 10px; font-weight: 700; color: var(--pa-blue); background: var(--pa-blue-soft); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
  .pa-pick { display: flex; gap: 6px; }
  .pa-pick span { flex: 1; text-align: center; padding: 8px 0; border-radius: 9px; border: 1px solid var(--pa-line); font-size: 13px; font-weight: 600; }
  .pa-pick span.hot.on { background: #fde4dc; border-color: #f2b7a5; color: #a33a1c; }
  .pa-more { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f6f7f8; font-size: 12.5px; color: var(--pa-muted); line-height: 1.45; }
  .pa-more b { color: var(--pa-ink); }
/* #endregion */
/* #region week_and_team: TO-DO CHECKLIST, MONTH CALENDAR, LEADERBOARD BARS [UI Layer] */
  .pa-check { list-style: none; margin: 0; padding: 0; }
  .pa-check li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0f1f3; font-size: 13.5px; }
  .pa-check li:first-child { border-top: 0; }
  .pa-check .bx { flex: 0 0 20px; height: 20px; border-radius: 6px; border: 2px solid #c9ced4; }
  .pa-check li.done .bx { background: var(--pa-green); border-color: var(--pa-green); }
  .pa-check li.done .tx { color: var(--pa-muted); text-decoration: line-through; }
  .pa-check .tx { flex: 1; }
  .pa-check .dd { font-size: 11.5px; color: var(--pa-muted); }
  .pa-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; }
  .pa-cal .h { font-size: 10px; font-weight: 700; color: var(--pa-muted); padding-bottom: 2px; }
  .pa-cal .d { height: 34px; border-radius: 8px; background: #f6f7f8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .pa-cal .d.out { background: transparent; color: #c3c7cc; }
  .pa-cal .d.today { outline: 2px solid var(--pa-black); background: #fff; font-weight: 700; }
  .pa-cal .d i { display: block; width: 5px; height: 5px; border-radius: 50%; }
  .pa-cal .d .dots { display: flex; gap: 2px; }
  .pa-lb .bar { flex: 0 0 90px; height: 8px; border-radius: 4px; background: #edf0f2; overflow: hidden; }
  .pa-lb .bar i { display: block; height: 100%; background: var(--pa-orange); }
  .pa-lb li.me { background: #eef8fc; margin: 0 -14px; padding: 8px 14px; }
  .pa-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pa-reasons span { border: 1px solid var(--pa-line); border-radius: 10px; padding: 12px 8px; text-align: center; font-size: 13px; font-weight: 600; background: #fff; }
  .pa-reasons span.on { border-color: var(--pa-black); outline: 1px solid var(--pa-black); }
  .pa-price { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px solid #f0f1f3; font-size: 13.5px; }
  .pa-price.total { font-size: 16px; font-weight: 800; border-top: 2px solid var(--pa-ink); }
  .pa-example { font-size: 10.5px; color: #31708f; background: #d9edf7; border-radius: 4px; padding: 2px 6px; font-weight: 700; }
/* #endregion */
/* #region step_label: THE CAPTION ABOVE EACH MOCKUP, ONLY IN THE PRESENTATION SHEETS [Content Layer] */
  .pa-step { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: #2b2e33; color: #5bc0de; font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 4px 9px; border-radius: 999px; z-index: 5; white-space: nowrap; }
/* #endregion */