/* PetOS product moment art direction. Loaded after each module's scene styles. */
:is(.bw-scene,.bm-scene,.crm-scene,.pi-scene,.mp-scene,.if-scene,.rd-scene,.dk-scene) {
  --pm-ink: #17263d;
  --pm-copy: #43536a;
  --pm-muted: #61738c;
  --pm-canvas: #f7f9fc;
  --pm-surface: #fff;
  --pm-line: #dee6f0;
  --pm-blue: #1355b2;
  --pm-blue-soft: #eaf2fc;
  --pm-rose: #c92e73;
  --pm-success: #237a57;
  --pm-pending: #94621e;
  font-family: var(--petos-font-sans, 'Rethink Sans', Inter, ui-sans-serif, system-ui, sans-serif);
  color: var(--pm-ink);
  -webkit-font-smoothing: antialiased;
}

:is(.bw-scene,.bm-scene,.crm-scene,.pi-scene,.mp-scene,.if-scene,.rd-scene,.dk-scene)
  :is(strong,b,[class*="total"],[class*="price"],[class*="amount"]) {
  font-variant-numeric: tabular-nums;
}

/* Detail-page product moments use the same inset frame as homepage cards. */
.highlights :is(.highlight-card,.moment-card) > :is(.highlight-visual,.moment-visual) {
  min-height: 0;
  overflow: hidden;
  margin: 8px 0 20px;
  margin-inline: 0;
  padding: 0;
  border: 1px solid #dce6f2;
  border-radius: 12px;
  background: #fff;
}
.highlights .moment-card > .moment-visual { margin-top: 0; }
@media (max-width: 620px) {
  .highlights :is(.highlight-card,.moment-card) > :is(.highlight-visual,.moment-visual) {
    margin-top: 6px;
    margin-bottom: 16px;
  }
  .highlights .moment-card > .moment-visual { margin-top: 0; }
}

/* Header system: workspace context, public browser, or a focused content crop. */
:is(.bw-head,.crm-top,.pi-top,.mp-top,.if-top,.rd-top) {
  height: 31px;
  border-bottom: 1px solid var(--pm-line);
  background: #fbfcfe;
}
:is(.crm-top,.pi-top,.mp-top,.if-top,.rd-top) > :is(b,.crm-brand) {
  color: var(--pm-blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -.01em;
}
:is(.bw-head,.crm-top,.pi-top,.mp-top,.if-top,.rd-top) > span:last-child {
  color: var(--pm-muted);
  font-size: 8px;
  font-weight: 500;
}
.bw-head > b { color: var(--pm-ink); font-size: 9px; font-weight: 700; }
.bm-browser { background: #f8fafc; border-bottom-color: var(--pm-line); color: #8392a5; }
.bm-service-overline { color: var(--pm-blue); font-size: 8px; font-weight: 700; letter-spacing: .055em; }
.bm-service-overline span { color: var(--pm-muted); font-size: 8px; font-weight: 500; }
:is(.bw-scene-1 .bw-overline,.bw-scene-3 .bw-overline,.crm-pets .crm-heading small,
    .mp-scene-1 .mp-title small,.mp-scene-2 .mp-member-head small,
    .if-scene-1 .if-overview-head small,.rd-scene-1 .rd-template-settings > small) {
  color: var(--pm-muted);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .06em;
}

/* Booking pilot: keep the coordinate system used by its CSS cursor timeline. */
.bm-scene-1 .bm-browser {
  color: #8593a5;
  background: #fbfcfe;
  border-bottom-color: var(--pm-line);
}
.bm-scene-1 .bm-flow-head {
  border-bottom-color: var(--pm-line);
}
.bm-scene-1 .bm-flow-content { grid-template-columns: 56% 44%; }
.bm-scene-1 .bm-flow-choices > small,
.bm-scene-1 .bm-flow-summary > small {
  color: var(--pm-blue);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .035em;
}
.bm-scene-1 .bm-choice {
  border-color: var(--pm-line);
  border-radius: 8px;
}
.bm-scene-1 .bm-choice b { color: var(--pm-ink); font-size: 11px; font-weight: 650; }
.bm-scene-1 .bm-choice em { color: var(--pm-muted); font-size: 9px; }
.bm-scene-1 .bm-times span { font-size: 9px; font-weight: 600; }
.bm-scene-1 .bm-flow-summary {
  background: #f8fbff;
  border-left-color: var(--pm-line);
}
.bm-scene-1 .bm-flow-summary > b { font-size: 15px; font-weight: 650; }
.bm-scene-1 .bm-summary-placeholder { color: var(--pm-muted); font-size: 9px; }
.bm-scene-1 .bm-summary-details {
  color: var(--pm-copy);
  font-size: 9px;
  line-height: 1.5;
}
.bm-scene-1 .bm-summary-details strong { color: var(--pm-ink); font-size: 10px; }
.bm-scene-1 .bm-summary-action { font-size: 9px; font-weight: 650; }
.bm-scene-1 .bm-summary-action { position: absolute; left: auto; right: 8px; bottom: 8px; margin: 0; padding: 5px 7px; }
.bm-scene-1 .bm-edit { left: 14px; bottom: 14px; font-size: 7px; white-space: nowrap; }

/* Finance pilot: one result leads; supporting numbers are deliberately quieter. */
.if-scene-1 .if-overview { background: #fff; }
.if-scene-1 .if-overview-head small {
  color: var(--pm-muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .055em;
}
.if-scene-1 .if-overview-head strong { color: var(--pm-ink); font-size: 18px; font-weight: 650; }
.if-scene-1 .if-period { background: #f0f3f8; }
.if-scene-1 .if-period span { color: var(--pm-copy); font-weight: 600; }
.if-scene-1 .if-metrics {
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 8px;
}
.if-scene-1 .if-metrics > div {
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: #f4f7fb;
}
.if-scene-1 .if-metrics > div:first-child { grid-column: 2; grid-row: 1; }
.if-scene-1 .if-metrics > div:nth-child(2) { grid-column: 3; grid-row: 1; }
.if-scene-1 .if-metrics > .if-net {
  grid-column: 1;
  grid-row: 1;
  background: #eaf2fc;
}
.if-scene-1 .if-metrics small {
  color: var(--pm-muted);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .035em;
}
.if-scene-1 .if-metrics strong {
  color: var(--pm-ink);
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 650;
}
.if-scene-1 .if-metrics .if-net strong {
  color: var(--pm-blue);
  font-size: clamp(18px, 2.8vw, 26px);
}

/* Business: the customer-facing page carries the color story. */
.bw-scene .bw-head,
.bw-scene .bw-sitebar { border-bottom-color: var(--pm-line); }
.bw-settings,
.bw-modules,
.bw-account-nav { background: #f7f9fc; }
.bw-scene-1 .bw-hero-art { height: 56px; }
.bw-scene-1 .bw-hero-copy { padding-top: 10px; }
.bw-hero-copy b { color: var(--pm-ink); font-size: 15px; font-weight: 700; letter-spacing: -.035em; }
.bw-setting-line { color: var(--pm-muted); }
.bw-service-text strong,
.bw-detail-copy strong,
.bw-booking-step > strong,
.bw-account-main strong { color: var(--pm-ink); font-weight: 700; letter-spacing: -.035em; }
.bw-service-text p,
.bw-detail-copy p { color: var(--pm-copy); font-size: 9px; }
.bw-scene-2 .bw-service-photo { margin-top: -36px; }
.bw-service-meta { border-top-color: var(--pm-line); }
.bw-preview-service,
.bw-preview-shop,
.bw-account-box,
.bw-pet-card { border-color: var(--pm-line); border-radius: 8px; background: #fff; }
.bw-preview-title { color: var(--pm-ink); font-size: 14px; letter-spacing: -.03em; }
.bw-shop-product strong { font-size: 13px; }
.bw-price { color: var(--pm-blue); font-size: 12px; }
.bw-cart-panel { background: #f7f9fc; }
.bw-cart-total { color: var(--pm-ink); font-size: 10px; }
.bw-pet-card b { font-size: 12px; }

/* Booking: use one clear selection and a single price or date focal point. */
.bm-scene:not(.bm-scene-1) .bm-browser { color: #8b9aab; background: #fbfcfe; }
.bm-language-card,
.bm-choice,
.bm-date,
.bm-pay-choice { border-color: var(--pm-line); }
.bm-language-card { box-shadow: 0 7px 19px #273e5b12; }
.bm-language-copy strong { color: var(--pm-ink); font-weight: 700; letter-spacing: -.035em; }
.bm-language-copy p { color: var(--pm-copy); }
.bm-service-overline,
.bm-pricing-main .bm-topline,
.bm-payment-intro .bm-topline { color: var(--pm-blue); }
.bm-receipt { background: #f2f7fd; }
.bm-receipt > strong { color: var(--pm-ink); font-size: 12px; }
.bm-receipt :is(.bm-total-base,.bm-total-added) { color: var(--pm-blue); font-size: 13px; }
.bm-availability-side { background: #f7f9fc; }
.bm-day-heading { color: var(--pm-ink); font-weight: 700; }
.bm-payment-due { background: #eef5fd; border-color: #d5e5f7; }
.bm-payment-due strong { color: var(--pm-blue); font-size: 15px; }
.bm-scene-5 { --bm-payment-cursor-x: 7.5%; }
.bm-scene-5 .bm-payment { padding: 11px 14px 12px !important; }
.bm-scene-5 .bm-topline span:last-child,
.bm-scene-5 .bm-pay-choice small { color: var(--pm-muted); font-size: 8px; }
.bm-scene-5 .bm-pay-note { color: var(--pm-muted); font-size: 8px; line-height: 1.3; }
.bm-scene-5 .bm-payment .bm-topline { margin-bottom: 8px; }
.bm-scene-5 .bm-pay-choice { min-height: 48px !important; }
.bm-scene-5 .bm-payment-due {
  flex: 0 0 40px;
  margin-top: 9px !important;
  padding: 8px 10px;
  border: 1px solid #d5e5f7;
  border-radius: 8px;
}
.bm-scene-5 .bm-payment-due strong { right: 10px; }

/* CRM: the selected pet or person is the subject; the table is supporting UI. */
.crm-stage { background: #fff; }
.crm-heading strong,
.crm-profile-head strong,
.crm-pet-title strong { color: var(--pm-ink); font-weight: 700; }
.crm-table-head { color: var(--pm-muted); background: #f7f9fc; }
.crm-table-row { border-bottom-color: var(--pm-line); }
.crm-person b,
.crm-pet-choice b { color: var(--pm-ink); font-weight: 700; }
.crm-pet-choice { border-color: var(--pm-line); background: #fff; }
.crm-pet-sheet { border-color: #d6e3f2; box-shadow: 0 9px 24px #253e6114; }
.crm-facts > div { background: #f3f7fc; }
.crm-facts b { color: var(--pm-ink); }
.crm-record { border-color: var(--pm-line); background: #fff; }
.crm-related-summary { background: #eef5fc; color: var(--pm-blue); }

/* POS: distinguish catalog, cart, form and inventory without more chrome. */
.pi-top { border-bottom-color: var(--pm-line); }
.pi-pos-cart { background: #f5f8fc; }
.pi-catalog-row b,
.pi-cart-title,
.pi-draft-head strong,
.pi-variant-detail > strong,
.pi-activity-head strong { color: var(--pm-ink); font-weight: 700; }
.pi-catalog-row { border-bottom-color: var(--pm-line); }
.pi-cart-total { color: var(--pm-ink); font-size: 12px; }
.pi-cart-total b { color: var(--pm-blue); font-size: 13px; }
.pi-field { border-color: var(--pm-line); background: #fff; }
.pi-field b { color: var(--pm-ink); font-size: 9px; }
.pi-draft-grid .pi-field:first-child { border-color: #b9d2ef; background: #f7fbff; }
.pi-assist span { background: #edf4fc; }
.pi-variant-facts > div { background: #f1f6fb; }
.pi-variant-facts b { color: var(--pm-ink); font-size: 9px; }
.pi-event,
.pi-order-row { border-bottom-color: var(--pm-line); }

/* Membership: package value and remaining credit lead each scene. */
.mp-package-side,
.mp-wallet,
.mp-rule-summary { background: #f6f9fd; }
.mp-title strong,
.mp-member-head strong,
.mp-flow-main > strong { color: var(--pm-ink); font-weight: 700; }
.mp-service,
.mp-package-plan,
.mp-choice,
.mp-choice-row { border-color: var(--pm-line); border-radius: 8px; }
.mp-package-plan { box-shadow: 0 6px 17px #253e5b0d; }
.mp-package-plan strong { color: var(--pm-blue); font-size: 18px; font-weight: 700; }
.mp-package-fact b { color: var(--pm-ink); }
.mp-benefits strong,
.mp-flow-credit strong,
.mp-rule-summary strong { color: var(--pm-blue); font-weight: 700; }
.mp-member-tabs,
.mp-flow-tabs { border-bottom-color: var(--pm-line); }

/* Finance: keep the primary amount clear in every state. */
.if-stage { background: #fff; }
.if-view-tabs,
.if-source-tabs { border-bottom-color: var(--pm-line); }
.if-view-tabs span,
.if-source-tabs span { background: #f2f5f9; color: var(--pm-copy); }
.if-breakdown-content strong { color: var(--pm-blue); font-size: 22px; font-weight: 700; }
.if-break-row { color: var(--pm-copy); border-bottom-color: var(--pm-line); font-size: 9px; }
.if-break-row b { color: var(--pm-ink); font-size: 9px; }
.if-invoice-id strong { color: var(--pm-ink); font-size: 16px; font-weight: 700; }
.if-invoice-line { border-bottom-color: var(--pm-line); }
.if-share { border-color: #d4e3f4; background: #f9fbfe; }
.if-share-preview { background: #eaf2fc; }
.if-question { background: #e7f1fc; }
.if-answer { border-color: var(--pm-line); color: var(--pm-copy); font-size: 9px; }

/* Documents: make the preview read like a real artifact. */
.rd-top { border-bottom-color: var(--pm-line); }
.rd-template-preview,
.rd-prompt-wrap { background: #f4f8fc; }
.rd-template-settings > strong,
.rd-record-info > strong,
.rd-sign-content strong,
.rd-booking > strong,
.rd-prompt-wrap > strong { color: var(--pm-ink); font-weight: 700; }
.rd-template-preview .rd-preview-head { color: var(--pm-ink); font-weight: 700; }
.rd-preview-section { border-bottom-color: var(--pm-line); color: var(--pm-copy); }
.rd-preview-section b { color: var(--pm-ink); }
.rd-preview-count { background: #e6f0fc; font-size: 9px; }
.rd-record-tabs span,
.rd-condition-options span { border-color: var(--pm-line); }
.rd-photo { border-color: #d4e2f0; border-radius: 8px; }
.rd-record-info > strong { font-size: 15px; }
.rd-record-line { border-bottom-color: var(--pm-line); color: var(--pm-copy); }
.rd-sign-row { border-bottom-color: var(--pm-line); }
.rd-mat-prompt { background: #fff9fc; }

/* Doki: the answer is the hero of each conversation. */
.dk-head { border-bottom-color: var(--pm-line); }
.dk-content { background: #fcfdff; }
.dk-welcome strong { color: var(--pm-ink); font-size: 16px; font-weight: 700; }
.dk-welcome p { color: var(--pm-copy); font-size: 9px; }
.dk-suggestion,
.dk-follow { border-color: #d2e3f6; border-radius: 8px; background: #f0f6fe; }
.dk-answer { border-color: #d9e5f2; box-shadow: 0 4px 14px #253e5b0c; }
.dk-answer strong { color: var(--pm-ink); font-size: 12px; font-weight: 700; }
.dk-answer p { color: var(--pm-copy); font-size: 9px; line-height: 1.4; }
.dk-rows > div { border-bottom-color: var(--pm-line); font-size: 8px; }
.dk-rows span { color: var(--pm-muted); }
.dk-source { color: var(--pm-muted); }
.dk-input { border-color: var(--pm-line); background: #fff; }
.dk-scene-2 .dk-content { justify-content: flex-start; padding: 10px 14px; }
.dk-scene-2 .dk-answer { padding: 9px 11px; }
.dk-scene-2 .dk-answer strong { font-size: 14px; }
.dk-scene-2 .dk-rows > div { padding: 5px 0; }
.dk-scene-2 .dk-follow { margin-top: 6px; padding: 6px 9px; }

/* One-stop business page: five static product crops use the same visual grammar. */
.operations .op-ui,
.combos .combo-window,
.website .website-window,
.business-hero .site-window {
  border-color: var(--pm-line, #dee6f0);
  box-shadow: 0 12px 28px #253e5b12;
}
.operations .op-ui .ui-head,
.combos .combo-window .ui-head,
.website .website-window .ui-head {
  min-height: 31px;
  padding: 0 13px;
  background: #f7f9fc;
  border-bottom-color: #dee6f0;
}
.operations .op-ui .ui-head strong,
.combos .combo-window .ui-head strong { color: #1355b2; font-size: 9px; font-weight: 700; }
.combos .combo:first-child .ui-head strong,
.website .website-window .ui-head strong { color: #17263d; }
.operations .op-ui .ui-head span,
.combos .combo-window .ui-head span,
.website .website-window .ui-head span {
  padding: 0;
  background: none;
  color: #61738c;
  font-size: 8px;
  font-weight: 500;
}
.operations .op-ui .ui-body { padding: 17px 18px; }
.operations .op-ui .ui-line { border-bottom-color: #e3eaf2; color: #61738c; font-size: 9px; }
.operations .op-ui .ui-line b { color: #17263d; font-size: 10px; font-weight: 700; }
.operations .op-ui .ui-tags span { border-radius: 6px; background: #eaf2fc; color: #1355b2; font-size: 8px; }
.operations .op-row:nth-child(1) .ui-line:nth-child(2),
.operations .op-row:nth-child(2) .ui-line:nth-child(3),
.operations .op-row:nth-child(3) .ui-line:nth-child(2),
.operations .op-row:nth-child(4) .ui-line:nth-child(1),
.operations .op-row:nth-child(5) .ui-line:nth-child(2) {
  margin: 0 -6px;
  padding-right: 6px;
  padding-left: 6px;
  border-radius: 5px;
  background: #f0f6fd;
}
.operations .op-row:nth-child(3) .ui-line:nth-child(2) b { color: #237a57; }
.operations .op-row:nth-child(5) .ui-line:nth-child(2) b { color: #1355b2; }

/* Stronger focal composition for the eight first moments shown together on the homepage. */
.bw-scene-1 .bw-public-brand { padding: 9px; }
.bw-scene-1 .bw-sitebar { height: 37px; border-color: #d8e5f3; background: #fff; }
.bw-scene-1 .bw-hero-art {
  display: block;
  height: 43px;
  border-right: 1px solid #d8e5f3;
  border-left: 1px solid #d8e5f3;
  background-image: linear-gradient(110deg, #dce8f733, #e8f0fa22), url('./pet-grooming-salon-cover.png');
  background-position: center 40%;
}
.bw-scene-1[data-state=b] .bw-hero-art { background-image: linear-gradient(110deg, #f6dfeb44, #fceef422), url('./pet-grooming-salon-cover.png'); }
.bw-scene-1[data-state=c] .bw-hero-art { background-image: linear-gradient(110deg, #e8dfd044, #f6f0e722), url('./pet-grooming-salon-cover.png'); }
.bw-scene-1 .bw-hero-copy { padding: 9px 10px 10px; border-color: #d8e5f3; }
.bw-scene-1 .bw-hero-copy b { font-size: 15px; line-height: 1.06; }
.bw-scene-1 .bw-hero-copy > span { margin: 4px 0 7px; }
.bw-scene-1 .bw-hero-copy em { padding: 5px 7px; }

.bm-scene-1 .bm-flow-summary {
  background: linear-gradient(155deg, #143a70 0%, #0e2952 100%);
  border-left-color: #0e2952;
  color: #fff;
}
.bm-scene-1 .bm-flow-summary > small { color: #a9d1ff; }
.bm-scene-1 .bm-flow-summary > b,
.bm-scene-1 .bm-summary-details,
.bm-scene-1 .bm-summary-details strong { color: #fff; }
.bm-scene-1 .bm-summary-details * { color: #fff; }
.bm-scene-1 .bm-summary-placeholder { color: #c4d9f4; }
.bm-scene-1 .bm-summary-action { background: #f2c7dd; color: #0e2952; }
.bm-scene-1 .bm-edit { color: #c8e1ff; }
.bm-scene-1 .bm-choice { box-shadow: 0 2px 7px #193e6b0d; }

.crm-scene-1 .crm-heading { margin-bottom: 11px; }
.crm-scene-1 .crm-heading strong { font-size: 21px; }
.crm-scene-1 .crm-a .crm-table-row:not(.crm-muted-row) { background: #f0f6fe; border-radius: 7px; }
.crm-scene-1 .crm-open { background: #dfeefe; }
.crm-scene-1 .crm-contact-grid > div { border-color: #d9e5f2; background: #f8fbff; }
.crm-scene-1 .crm-profile-head > .crm-person { width: 44px; height: 44px; }

.pi-scene-1 .pi-pos-cart { background: #edf4fc; }
.pi-scene-1 .pi-cart-total {
  align-items: center;
  padding: 8px;
  border: 0;
  border-radius: 7px;
  background: #dbeafb;
}
.pi-scene-1 .pi-cart-total b { font-size: 15px; }
.pi-scene-1 .pi-catalog-row:first-of-type { background: #f5f9fe; }
.pi-scene-1 .pi-cart-line { min-height: 22px; }
.pi-scene-1 .pi-cart-total { margin-top: 5px; padding: 6px 8px; }
.pi-scene-1 .pi-pay { margin-top: 5px; padding: 6px; border-radius: 7px; }

.mp-scene-1 .mp-package-side { background: #edf4fc; }
.mp-scene-1 .mp-package-plan { border-color: #c9ddf4; }
.mp-scene-1 .mp-package-plan strong { font-size: 19px; }
.mp-scene-1 .mp-title strong { font-size: 17px; }

.if-scene-1 .if-metrics > .if-net { background: #dceafb; }
.if-scene-1 .if-metrics > div:not(.if-net) { background: #f1f4f8; }

.rd-scene-1 .rd-template-preview { background: #eaf2fb; }
.rd-scene-1 .rd-preview-head { margin-top: 8px; font-size: 12px; }
.rd-scene-1 .rd-preview-count { padding: 9px; border-radius: 7px; background: #d8eafa; }
.rd-scene-1 .rd-template-settings > strong { font-size: 17px; }

.dk-scene-1 .dk-content {
  background: #fbfcfe;
}
.dk-scene-1 .dk-welcome-mark { width: 33px; height: 33px; border-radius: 10px; }
.dk-scene-1 .dk-welcome strong { font-size: 17px; }
.dk-scene-1 .dk-suggestion { background: #fff; box-shadow: 0 5px 14px #294b7412; }
@media (max-width: 620px) {
  .bm-scene-5 .bm-payment { padding: 9px 12px 10px !important; }
  .bm-scene-1 .bm-flow-content { grid-template-columns: 55% 45%; }
  .bm-scene-1 .bm-flow-choices > small { font-size: 8px; }
  .bm-scene-1 .bm-choice b { font-size: 10px; }
  .bm-scene-1 .bm-choice em { font-size: 8px; }
  .bm-scene-1 .bm-times span { font-size: 8px; }
  .if-scene-1 .if-metrics { grid-template-columns: 1.25fr 1fr 1fr; gap: 5px; }
  .if-scene-1 .if-metrics > div { padding: 9px 7px; }
  .if-scene-1 .if-metrics strong { font-size: 12px; }
  .if-scene-1 .if-metrics .if-net strong { font-size: 17px; }
}
@media (max-width: 360px) {
  .bm-scene-1 .bm-edit { left: 10px; bottom: 10px; max-width: 32px; white-space: normal; line-height: 1.1; }
  .bm-scene-1 .bm-summary-action { right: 5px; padding-inline: 4px; }
}