/* pmm-customers-segments-f976c4.css · Customers & Segments · Execution customers-segments-20260906-032906-f976c4
   Page-scoped stylesheet for the PMM Candidate. It owns only the bounded media canvas and its internal
   Field / Anchor geometry (Composite CMP-GEO-01 / CMP-GEO-02 / CMP-CONTENT-01 / CMP-IMPL-01). The section
   shell keeps its own background, container, spacing, heading, copy, CTA and responsive order, and no
   narrative typography role is redefined here (Visual V24 / Code & Build B25). */

/* 1 · Section column mode (CMP-GEO-01 · Balanced 1:1 for every below-hero section).
   Media ≈ 50% of the 1152px container minus a 12px gutter ⇒ ≈ 552px rendered Composite width.
   These set the governed track widths only; they do not recreate or restyle the shared section shell. */
@media (min-width: 1024px) {
  .pmm-ui .section-feature > div > div:nth-child(1) { max-width: 50%; width: 50%; }
  .pmm-ui .section-feature > div > div:nth-child(2) { max-width: 50%; width: 50%; padding-left: 12px; padding-right: 12px; }
}

/* 2 · Hero Scene crop on narrow viewports. The confirmed focal subject (the owner handing a bag to a returning
   customer at the counter) sits in the right third of the 3:2 Scene; object-fit: cover would otherwise centre-crop
   it away below 1024px. Position only — the shared component keeps its structure, treatment and typography. */
@media (max-width: 1023px) {
  #section-cs-hero img.object-cover { object-position: 80% 50%; }
}

/* 3 · Sequencer geometry · Storyboard STB-CS-f976c4-r1 · seed CS-f976c4-r1-001 · pasted verbatim (the only geometry CSS on the page),
   scoped to the desktop breakpoint and placed before the kit so the kit's ≤ 1023 px restack rules own mobile. */
@media (min-width: 1024px) {
/* pmm sequencer · seed CS-f976c4-r1-001 */
/* s1 · cornerA · top · card left · depth 11.2% · width 69.4% · h 0.774 */
.pmm-ui .cmp-s1 .cmp-field { left:41.8%; right:0; top:29.2%; bottom:0; } .pmm-ui .cmp-s1 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s1 .cmp-anchor { left:0; top:0; width:69.4%; transform:none; }
/* s2 · edge · card right · depth 7.4% · width 72.4% · h 0.82 */
.pmm-ui .cmp-s2 .cmp-field { right:13.4%; left:0; top:0; bottom:0; } .pmm-ui .cmp-s2 .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-s2 .cmp-anchor { right:0; top:9.9%; width:72.4%; transform:none; }
/* s3 · cornerA · top · card left · depth 13.6% · width 75.5% · h 0.751 */
.pmm-ui .cmp-s3 .cmp-field { left:38.1%; right:0; top:31.6%; bottom:0; } .pmm-ui .cmp-s3 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s3 .cmp-anchor { left:0; top:0; width:75.5%; transform:none; }
/* s4 · edge · card right · depth 9.8% · width 70.6% · h 0.664 */
.pmm-ui .cmp-s4 .cmp-field { right:15.8%; left:0; top:0; bottom:0; } .pmm-ui .cmp-s4 .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-s4 .cmp-anchor { right:0; top:15.4%; width:70.6%; transform:none; }  /* hand adjustment: the condition row wraps in the longer languages, and at the seed's 18.6% the taller     card's bottom edge landed 7 px from the Field, inside the band CMP-GEO-02 rejects. */
/* s5 · cornerA · bottom · card left · depth 15.9% · width 70.9% · h 0.719 */
.pmm-ui .cmp-s5 .cmp-field { left:45%; right:0; bottom:33.9%; top:0; } .pmm-ui .cmp-s5 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s5 .cmp-anchor { left:0; bottom:0; width:70.9%; transform:none; }
/* s6 · cornerF · top · card right · depth 12.1% · width 60.7% · h 0.792 */
.pmm-ui .cmp-s6 .cmp-field { right:20.1%; left:0; top:18.1%; bottom:0; } .pmm-ui .cmp-s6 .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-s6 .cmp-anchor { right:0; top:0; width:60.7%; transform:none; }
/* s7 · edge · card left · depth 8.3% · width 71.7% · h 0.792 */
.pmm-ui .cmp-s7 .cmp-field { left:14.3%; right:0; top:0; bottom:0; } .pmm-ui .cmp-s7 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s7 .cmp-anchor { left:0; top:8.4%; width:71.7%; transform:none; }
/* record: [{"id":"s1","shape":"cornerA","orientation":"left-top","depth":11.2,"width":69.4,"h":0.774},{"id":"s2","shape":"edge","orientation":"right","depth":7.4,"width":72.4,"h":0.82},{"id":"s3","shape":"cornerA","orientation":"left-top","depth":13.6,"width":75.5,"h":0.751},{"id":"s4","shape":"edge","orientation":"right","depth":9.8,"width":70.6,"h":0.664},{"id":"s5","shape":"cornerA","orientation":"left-bottom","depth":15.9,"width":70.9,"h":0.719},{"id":"s6","shape":"cornerF","orientation":"right-top","depth":12.1,"width":60.7,"h":0.792},{"id":"s7","shape":"edge","orientation":"left","depth":8.3,"width":71.7,"h":0.792}] */
}

/* 4 · Composite kit · KIT-v1 · copied verbatim from Composite kit · stylesheet, sequencer, verify */
/* pmm-composite.css · Composite UI kit · KIT-v1 (2026-09-04)
   Atoms and tokens for every below-hero Contained Composite. Pages assemble these
   classes; they never restyle them. Geometry is emitted per section by the sequencer
   and is the only CSS a page may add. Rules: Composite CMP-GEO-01/02, Visual V20–V25. */
.pmm-ui {
  --cui-title: 16px; --cui-primary: 15px; --cui-support: 13px; --cui-aux: 12px;
  --ui-ink: #0f172a; --ui-ink2: #475569; --ui-ink3: #94a3b8;
  --ui-line: #e2e8f0; --ui-line2: #eef2f6; --ui-brand: #1f5fe0; --ui-ctl: #d3d9e1;
  --ui-plate: linear-gradient(135deg,#eef1f5 0%,#e2e7ee 100%); --ui-card: #fff; --ui-avatar: #e2e8f0; --ui-avatar-ink: #334155; --ui-soft: #f4f6f8;
}
/* Composite root and Canvas never clip (Composite Active rule 16) */
.pmm-ui .cmp { position: relative; width: 100%; color: var(--ui-ink); overflow: visible; }
.pmm-ui .cmp-canvas { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: visible; clip-path: none; }
.pmm-ui .cmp-field { position: absolute; overflow: hidden; border-radius: 20px; }
.pmm-ui .cmp-plate { background-image: var(--ui-plate); }
.pmm-ui .section-bg-gray .cmp-plate { background-image: linear-gradient(135deg,#ffffff 0%,#e6eaf0 100%); }
.pmm-ui .cmp-field-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmm-ui .cmp-anchor { position: absolute; border-radius: 16px; background: var(--ui-card); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 28px 64px -12px rgba(15,23,42,.22); overflow: hidden; font-size: var(--cui-primary); line-height: 1.35; transform: none; }
/* dark Anchor: only inside the page's black section over an evening Scene (Visual V22) */
.pmm-ui .cmp-dark { --ui-ctl: #ffffff2e; --ui-ink: #f1f5f9; --ui-ink2: #b6c0d0; --ui-ink3: #7d8a9e; --ui-line: #ffffff1a; --ui-line2: #ffffff12; --ui-card: #182235; --ui-avatar: #2a3650; --ui-avatar-ink: #e2e8f0; --ui-soft: #1f2b41; }
.pmm-ui .cmp-dark .cmp-anchor { box-shadow: 0 1px 2px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
/* atoms */
.pmm-ui .ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-line); }
.pmm-ui .ui-title { font-size: var(--cui-title); font-weight: 700; letter-spacing: -0.01em; display: block; }
.pmm-ui .ui-sub { font-size: var(--cui-support); color: var(--ui-ink2); display: block; }
.pmm-ui .ui-row { display: flex; align-items: center; gap: 10px; }
.pmm-ui .ui-grow { flex: 1; min-width: 0; }
.pmm-ui .ui-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmm-ui .ui-body { padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.pmm-ui .ui-body-soft { background: var(--ui-soft); border-top: 1px solid var(--ui-line2); }
.pmm-ui .ui-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ui-avatar); color: var(--ui-avatar-ink); display: flex; align-items: center; justify-content: center; font-size: var(--cui-aux); font-weight: 700; flex: none; position: relative; }
.pmm-ui .ui-avatar .ui-ch { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ui-card); background: #fff; overflow: hidden; }
.pmm-ui .ui-avatar .ui-ch img { width: 100%; height: 100%; display: block; }
/* list rows: hairline dividers, never boxes */
.pmm-ui .ui-line { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--ui-line2); }
.pmm-ui .ui-line.is-last, .pmm-ui .ui-conv:last-child, .pmm-ui .ui-prow.is-last { border-bottom: 0; padding-bottom: 18px; }
.pmm-ui .ui-conv { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ui-line2); align-items: center; }
.pmm-ui .ui-nm { font-size: var(--cui-primary); font-weight: 600; display: block; }
.pmm-ui .ui-pv { font-size: var(--cui-support); color: var(--ui-ink2); display: block; margin-top: 1px; }
.pmm-ui .ui-row.ui-pv { display: flex; margin-top: 0; }
.pmm-ui .ui-val { font-size: var(--cui-primary); font-weight: 700; white-space: nowrap; }
.pmm-ui .ui-lbl { font-size: var(--cui-aux); font-weight: 700; letter-spacing: .06em; color: var(--ui-ink3); }
/* chips: filled neutral pills, no border, no accent */
.pmm-ui .ui-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--cui-aux); font-weight: 600; border-radius: 999px; padding: 4px 10px; white-space: nowrap; background: var(--ui-soft); color: var(--ui-ink2); }
/* buttons: 40 / 34 px, one primary per Composite */
.pmm-ui .ui-btn { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; border-radius: 8px; min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border: 1px solid transparent; flex: none; line-height: 1; }
.pmm-ui .ui-btn-pri { background: var(--ui-brand); color: #fff; }
.pmm-ui .ui-btn-out { background: var(--ui-card); border-color: var(--ui-ctl); color: var(--ui-ink); }
.pmm-ui .ui-btn-sm { font-size: 13px; min-height: 34px; padding: 0 12px; }
.pmm-ui .ui-search { display: flex; align-items: center; gap: 9px; border: 1px solid var(--ui-line); border-radius: 10px; padding: 9px 12px; font-size: var(--cui-primary); color: var(--ui-ink3); background: var(--ui-card); }
.pmm-ui .ui-search .ui-grow { color: var(--ui-ink); }
/* the only bordered boxes allowed inside a card: a selectable option or a search result, never nested */
.pmm-ui .ui-opt { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: 12px; }
.pmm-ui .ui-compose { border: 1px solid var(--ui-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pmm-ui .ui-compose-ph { color: var(--ui-ink3); }
.pmm-ui .ui-opt.is-on { border-color: var(--ui-ink); background: var(--ui-soft); }
.pmm-ui .ui-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 12px; }
.pmm-ui .ui-toggle { width: 38px; height: 22px; border-radius: 999px; background: var(--ui-brand); position: relative; flex: none; }
.pmm-ui .ui-toggle::after { content: ''; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.pmm-ui .ui-toggle.is-off { background: #cbd5e1; } .pmm-ui .ui-toggle.is-off::after { right: auto; left: 3px; }
.pmm-ui .ui-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ui-ctl); flex: none; background: var(--ui-card); }
.pmm-ui .ui-radio.is-on { border: 6px solid var(--ui-brand); }
.pmm-ui .ui-bar { height: 6px; border-radius: 999px; background: var(--ui-soft); overflow: hidden; }
.pmm-ui .ui-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ui-brand); }
.pmm-ui .ui-prow { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--ui-line2); }
.pmm-ui .ui-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; background: var(--ui-soft); }
.pmm-ui .ui-pname { font-size: var(--cui-primary); font-weight: 600; display: block; }
.pmm-ui .ui-pmeta { font-size: var(--cui-support); color: var(--ui-ink2); display: block; margin-top: 1px; }
.pmm-ui .ui-pprice { font-size: var(--cui-primary); font-weight: 700; white-space: nowrap; }
.pmm-ui .ui-stats { display: flex; gap: 10px; }
.pmm-ui .ui-stat { flex: 1; background: var(--ui-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pmm-ui .ui-ctabs { display: flex; gap: 18px; border-bottom: 1px solid var(--ui-line); padding: 0 18px; }
.pmm-ui .ui-ctab { font-size: var(--cui-primary); font-weight: 600; color: var(--ui-ink3); padding: 9px 0; border-bottom: 2px solid transparent; }
.pmm-ui .ui-ctab.is-on { color: var(--ui-ink); border-bottom-color: var(--ui-ink); }
.pmm-ui .ui-bubble { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 14px; border-top-left-radius: 4px; padding: 12px 14px; font-size: var(--cui-primary); line-height: 1.45; }
/* channel marks: official assets only, 16–18 px */
.pmm-ui .ui-chan { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pmm-ui .ui-chan img, .pmm-ui .ui-chbtn img { width: 16px; height: 16px; border-radius: 4px; }
.pmm-ui .ui-chs { display: flex; flex-direction: column; gap: 8px; }
.pmm-ui .ui-chbtn { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 1px solid var(--ui-ctl); border-radius: 8px; background: var(--ui-card); font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 1; }
.pmm-ui .ui-chbtn.is-on { border-color: var(--ui-ink); background: var(--ui-soft); }
.pmm-ui svg.ui-i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; color: var(--ui-ink2); }
.pmm-ui svg.ui-i.is-sm { width: 14px; height: 14px; }
.pmm-ui .ui-btn-pri svg.ui-i { color: #fff; }
/* device Anchor (Composite CMP-GEO-02 · Device variant) · iPhone 15 Pro proportions. */
.pmm-ui .ui-device { position: absolute; width: 42%; aspect-ratio: 70.6 / 146.6; border-radius: 14% / 6.75%; background: #2a2c31; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 2.5px #101215, 0 1px 2px rgba(15,23,42,.1), 0 30px 70px -14px rgba(15,23,42,.4); }
.pmm-ui .ui-device .ui-screen { position: absolute; inset: 1.01% 2.1%; border-radius: 12% / 5.8%; background: var(--ui-card); overflow: hidden; display: flex; flex-direction: column; }
.pmm-ui .ui-device .ui-island { position: absolute; left: 50%; top: 1.9%; width: 26%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #0b0c0f; z-index: 3; }
.pmm-ui .ui-device .ui-statusbar { height: 8.2%; flex: none; }
.pmm-ui .ui-device i.ui-key { position: absolute; width: 1%; background: #3a3d43; border-radius: 1px; box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
.pmm-ui .ui-device i.k-vup { left: -1%; top: 23.5%; height: 7.4%; }
.pmm-ui .ui-device i.k-vdn { left: -1%; top: 32.4%; height: 7.4%; }
.pmm-ui .ui-device i.k-power { right: -1%; top: 26.5%; height: 11.8%; }
.pmm-ui .ui-device .ui-screen > .ui-foot { margin-top: auto; border-top: 1px solid var(--ui-line2); padding: 12px 16px 28px; }
.pmm-ui .ui-device .ui-btn { box-sizing: border-box; width: 100%; }
.pmm-ui .ui-device .ui-homebar { position: absolute; left: 50%; bottom: 1.6%; width: 36%; height: .6%; transform: translateX(-50%); border-radius: 999px; background: #0f172a; opacity: .85; z-index: 3; }
/* mobile: internal layers restack; nothing is scaled */
@media (max-width: 1023px) {
  .pmm-ui .cmp .cmp-canvas { aspect-ratio: auto; display: flex; flex-direction: column; }
  .pmm-ui .cmp .cmp-field { position: relative; inset: auto; width: 100%; height: 160px; flex: none; }
  .pmm-ui .cmp .cmp-field img { object-position: center; }
  .pmm-ui .cmp .cmp-anchor { position: relative; inset: auto; width: auto; margin: -40px 12px 0; z-index: 2; }
}

/* 5 · Run-local kit extension (recorded in the Storyboard as a KIT system candidate): photographic customer avatar inside the
   existing .ui-avatar atom — Visual V21 / Code & Build B24 person-photo avatars, non-growing 1:1 circular crop, object-fit: cover. */
.pmm-ui .ui-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* 6 · Run-local kit extension (recorded in the Production Plan as a KIT system candidate): mobile text fit for dense
   rows. Below 1024 px the kit restacks the Anchor to ≈ 302 px; a row that carries an avatar, a name, a value and a chip
   left the name column with no width (CMP-GEO-01 · UI text fit / Code & Build B23). Rows, heads, chip rows and stat tiles may
   wrap so the name keeps a real measure and a trailing value, chip, button or tile moves to the next line; nothing is scaled or hidden. */
@media (max-width: 1023px) {
  .pmm-ui .ui-line, .pmm-ui .ui-head, .pmm-ui .ui-row { flex-wrap: wrap; row-gap: 6px; }
  .pmm-ui .ui-line > .ui-grow, .pmm-ui .ui-head > .ui-grow, .pmm-ui .ui-row > .ui-grow { flex: 1 1 150px; }
  .pmm-ui .ui-stats { flex-wrap: wrap; }
  .pmm-ui .ui-stats > .ui-stat { flex: 1 1 40%; }
}

/* 7 · Run-local kit extension (KIT system candidate): a filter or condition row is a list of
   chips, and a locale whose condition labels run longer than English pushed that row past the
   card edge on desktop, where the kit only wraps rows below 1024 px. The two chip rows wrap at
   every width instead of overflowing; every other row atom keeps its single-line behaviour. */
.pmm-ui .cmp-s3 .ui-body > .ui-row,
.pmm-ui .cmp-s4 .ui-body > .ui-row { flex-wrap: wrap; row-gap: 6px; }

/* 8 · Run-local kit extension (KIT system candidate): the imported-fields row is a chip list
   like the segment conditions, and the Admin's own field names run longer in some languages
   than the card is wide. It wraps at every width rather than overflowing. */
.pmm-ui .cmp-s7 .ui-body > .ui-row { flex-wrap: wrap; row-gap: 6px; }