/* membership-loyalty.css · Membership & Loyalty · Execution membership-loyalty-20260906-234200-b7e3a1
   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 of beans 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-ml-hero img.object-cover { object-position: 80% 50%; }
}

/* 3 · Sequencer geometry · Storyboard STB-ML-b7e3a1-r1 · seed ML-b7e3a1-r1-020 · pasted verbatim from keyframes/geometry.css (the only geometry
   CSS on the page; the s5 rule carries the recorded Device-variant adjustment: frame pinned at the 40 % band floor and centred, top −12.3 %),
   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 ML-b7e3a1-r1-020 */
/* s1 · cornerA · top · card left · depth 12.2% · width 69.6% · h 0.767 */
.pmm-ui .cmp-s1 .cmp-field { left:42.5%; right:0; top:30.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.6%; transform:none; }
/* s2 · edge · card right · depth 8.4% · width 55.8% · h 0.73 */
.pmm-ui .cmp-s2 .cmp-field { right:14.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:15.2%; width:55.8%; transform:none; }
/* s3 · cornerA · bottom · card left · depth 14.5% · width 75.8% · h 0.835 */
.pmm-ui .cmp-s3 .cmp-field { left:38.8%; right:0; bottom:32.5%; top:0; } .pmm-ui .cmp-s3 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s3 .cmp-anchor { left:0; bottom:0; width:75.8%; transform:none; }
/* s4 · cornerF · top · card right · depth 10.7% · width 58.6% · h 0.719 */
.pmm-ui .cmp-s4 .cmp-field { right:18.7%; left:0; top:16.7%; bottom:0; } .pmm-ui .cmp-s4 .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-s4 .cmp-anchor { right:0; top:0; width:58.6%; transform:none; }
/* s5 · edge · card left · depth 6.9% · width 40% (Device variant: pinned to the band floor, centred, top -12.3%) · h 1.246 */
.pmm-ui .cmp-s5 .cmp-field { left:12.9%; right:0; top:0; bottom:0; } .pmm-ui .cmp-s5 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s5 .cmp-anchor { left:0; top:-12.3%; width:40%; transform:none; }
/* s6 · cornerF · bottom · card right · depth 13.1% · width 55.7% · h 0.797 */
.pmm-ui .cmp-s6 .cmp-field { right:21.1%; left:0; bottom:19.1%; top:0; } .pmm-ui .cmp-s6 .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-s6 .cmp-anchor { right:0; bottom:0; width:55.7%; transform:none; }
/* s7 · edge · card left · depth 9.3% · width 72% · h 0.671 */
.pmm-ui .cmp-s7 .cmp-field { left:15.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:13.5%; width:72%; transform:none; }
/* record: [{"id":"s1","shape":"cornerA","orientation":"left-top","depth":12.2,"width":69.6,"h":0.767},{"id":"s2","shape":"edge","orientation":"right","depth":8.4,"width":55.8,"h":0.73},{"id":"s3","shape":"cornerA","orientation":"left-bottom","depth":14.5,"width":75.8,"h":0.835},{"id":"s4","shape":"cornerF","orientation":"right-top","depth":10.7,"width":58.6,"h":0.719},{"id":"s5","shape":"edge","orientation":"left","depth":6.9,"width":40,"h":1.246,"top":-12.3,"device":true},{"id":"s6","shape":"cornerF","orientation":"right-bottom","depth":13.1,"width":55.7,"h":0.797},{"id":"s7","shape":"edge","orientation":"left","depth":9.3,"width":72,"h":0.671}] */
}

/* 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, identical to the sibling Runs): mobile text fit for
   dense rows. Below 1024 px the kit restacks the Anchor to ≈ 302 px; rows, heads, chip rows and stat tiles may wrap so a name keeps a real
   measure and a trailing value, chip, button or tile moves to the next line; nothing is scaled or hidden (CMP-GEO-01 · UI text fit / B23). */
@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 { 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 (recorded in the Production Plan as a KIT system candidate): the Device Anchor below 1024 px. The kit restacks
   every Anchor with width: auto, which would stretch the fixed-aspect phone frame to the full media width; the frame keeps the width it has
   at the 552 px Canvas (220.8 px → 221 px) so the full-screen state renders at the same real pixel ladder with no scaling (B23 / B24), and it
   keeps the kit's 40 px overlap onto the restacked Field. Inside the phone the screen rows do not wrap (the screen is narrower than the wrap basis). */
@media (max-width: 1023px) {
  .pmm-ui .cmp .cmp-anchor.ui-device { width: 221px; max-width: calc(100% - 24px); }
  .pmm-ui .ui-device .ui-line, .pmm-ui .ui-device .ui-head, .pmm-ui .ui-device .ui-row { flex-wrap: nowrap; }
  .pmm-ui .ui-device .ui-stats { flex-wrap: nowrap; }
}

/* Localized product labels keep the kit's type ladder. Give the longer rows
   more width, and keep phone balances in two readable label/value rows. */
@media (min-width: 1024px) {
  .pmm-ui .cmp-s1 .cmp-anchor { width: 76%; }
  .pmm-ui .cmp-s2 .cmp-anchor { width: 62%; }
  .pmm-ui .cmp-s4 .cmp-anchor { width: 72%; }
  .pmm-ui .cmp-s6 .cmp-anchor { width: 72%; }
  .pmm-ui .cmp-s7 .cmp-anchor { width: 76%; top: 6%; }
  .pmm-ui .cmp-s5 .cmp-anchor { width: 44%; top: -18.5%; }
}
@media (max-width: 1023px) {
  .pmm-ui .cmp .cmp-anchor.ui-device { width: 243px; }
}
.pmm-ui .ui-device .ui-stats { flex-direction: column; gap: 6px; }
.pmm-ui .ui-device .ui-stat { flex-direction: row; align-items: center; justify-content: space-between; }
.pmm-ui .ui-device i.k-vup, .pmm-ui .ui-device i.k-vdn { left: 0; }
.pmm-ui .ui-device i.k-power { right: 0; }