/* partners.css V1.7 - 2026-10-05, Nolan. Globals: the .h-pa__rb round back and the .h-pa__btn size override are gone. */
/* partners.css V1.6 - 2026-10-05, Nolan. PT-10: My business is a text button (.h-pa__mine). */
/* partners.css V1.5 - 2026-10-05, Nolan. The search is the global .h-searchrow/.h-search; the postal box is .h-input. */
/* partners.css V1.4 - 2026-10-05, Nolan. The page is its tab's scroller (it did not scroll; Karl's walk). */
/* partners.css V1.3 - 2026-10-05, Nolan. The page takes the tab's full width (it shrank to 32px as a contained flex item; Karl's walk). */
/* partners.css V1.2 - 2026-10-05, Nolan. The postal-code ask (.h-pa__postal). */
/* partners.css V1.1 - 2026-10-05, Nolan. NR-02: the full-width chrome moved to the shared panel option; the PRE-NR-01 fallback rules are gone (the page has its host). */
/* partners.css V1.0 - 2026-10-05, Parker. Partners Gate B: the member-side Partners page and partner slide-in (`.h-pa`), to the accepted package (PM-01…27). Tokens only; a partner's brand colour arrives as `--pa-brand`, already contrast-guarded by partners.js. Replaces the legacy member `.h-pt` look in hub.css (NR-11 retires it; the staff views still use `.h-pt`). */
/* ============================================================================
   PARTNERS — THE MEMBER SIDE

   Shape (Karl, Oct 1): the directory is a PAGE under both navs; one partner
   is a full-width slide-in from the right over everything. Measurements are
   the accepted prototype's (Partners_Acceptance.html, walked and approved
   Oct 1), on the app's own tokens.

   ⛔ NO RAW COLOUR. The partner's own colour is data, not style: partners.js
   guards it (white text ≥ 4.5:1) and hands it in as `--pa-brand`; every rule
   here falls back to the app's surface when a partner has none.
   ========================================================================== */
.h-pa, .h-pa-sheet {
  --pa-soft: color-mix(in srgb, var(--ink) 80%, var(--bg));
  --pa-on-brand-line: color-mix(in srgb, var(--on-colour) 14%, transparent);
  --pa-on-brand-soft: color-mix(in srgb, var(--on-colour) 82%, transparent);
  --pa-gold-line: rgba(var(--gold-rgb), .55);
  --pa-gold-wash: rgba(var(--gold-rgb), .12);
  --pa-pro-ink: var(--active-purple-ink);
  --pa-pro-line: rgba(var(--purple-rgb), .55);
  --pa-pro-wash: rgba(var(--purple-rgb), .10);
}
.h-pa { color: var(--ink); font-family: var(--font-body); font-size: 14px; }
/* ZERO-SPECIFICITY RESETS, so `.h-btn` and the rules below always win. */
:where(.h-pa) button { font: inherit; color: inherit; cursor: pointer; }
:where(.h-pa) a { color: inherit; text-decoration: none; }
.h-pa--slide, .h-pa--page { container: pa / inline-size; }

/* ---- the page ---------------------------------------------------------- */
.h-pa--page { background: var(--panel); min-height: 100%; padding: 0 16px 28px; }
/* The page is a flex item of `.h-tab` (a flex row), and size containment (the `pa` container above) gives it no
   intrinsic width, so without this it shrank to its padding (32px) — Karl's walk, 2026-10-05. It takes the tab's width. */
#tab-partners > .h-pa--page { flex: 1 1 auto; width: 100%; min-width: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.h-pa__ph {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  margin: 0 -16px 12px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line2);
}
.h-pa__pt {
  flex: 1; min-width: 0; margin: 0; font: 800 17px/1.15 var(--font-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-pa__mine {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px;
  border: 0; background: none; color: var(--ink); font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
.h-pa__mine .h-pa__ic { color: var(--muted); }
.h-pa__col { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.h-pa__col--flat { max-width: none; margin: 0; }
.h-pa__ic { width: 18px; height: 18px; }

/* ---- the slide-in: the shared right panel, full width at every width ---- */
/* The shared right panel is dressed as a drawer elsewhere (hub.css: 92% wide,
   a purple wash, a big title). The partner slide-in is the accepted
   prototype's full screen instead, so it states its own frame here. */
/* The full-width chrome is the shared `H365UI.panel({ full: true })` (NR-02, components.css); only the title is ours. */
.h-panel.h-pa-slide .h-panel__title {
  flex: 1; min-width: 0; font: 800 17px/1.15 var(--font-display); letter-spacing: normal; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-pa--slide { padding-bottom: 8px; }

/* ---- the postal-code ask (Karl, 2026-10-05) ------------------------------ */
.h-pa__postal { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.h-pa__plab { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.h-pa__prow { display: flex; gap: 8px; align-items: stretch; }
/* The postal box is the global `.h-input`; only the capitals are ours. */
.h-pa__pin { flex: 1; min-width: 0; text-transform: uppercase; }
.h-pa__pbtn { min-height: 44px; flex: none; }

/* ---- sections, area line, search ---------------------------------------- */
.h-pa__sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 2px -6px; }
.h-pa__sec b { font: 400 14px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.h-pa__sec label { cursor: pointer; }
.h-pa__sec small { font-size: 12px; font-weight: 700; color: var(--muted); }
.h-pa__area {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0;
  border: 0; background: none; text-align: left; font-size: 12.5px; color: var(--muted);
}
.h-pa__al { flex: 1; min-width: 0; line-height: 1.35; }
.h-pa__al b { color: var(--ink); }
.h-pa__ca { flex: none; color: var(--green); font-weight: 800; }
.h-pa__area.is-none { padding: 10px 12px; border-radius: var(--r-xl); border: 1px solid var(--pa-gold-line); background: var(--pa-gold-wash); }
.h-pa__area.is-none .h-pa__al { color: var(--ink); }
.h-pa__area.is-none .h-pa__al b { color: var(--gold); }
/* The search is the global search row (`.h-searchrow` > `.h-search`): the purple glow, no inner outline. */
.h-pa__srch { margin: 0; }
.h-pa__clr {
  flex: none; width: 36px; height: 36px; margin-right: -8px; padding: 0;
  border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.h-pa__clr[hidden] { display: none; }
.h-pa__hint { padding: 10px 12px; border-radius: var(--r-xl); background: var(--panel2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.h-pa__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.h-pa__note--c { text-align: center; }
.h-pa__empty { padding: 22px 14px; border-radius: var(--r-2xl); border: 1px dashed var(--line2); text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; }
.h-pa__empty b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 14.5px; }
.h-pa__link { border: 0; background: none; padding: 0; color: var(--green); font-weight: 800; }
/* A link that stands on its own line (Edit, + New offer) is a full-size target. */
.h-pa__link--solo { display: inline-flex; align-items: center; min-height: 36px; min-width: 36px; }

/* ---- logos, badges, offers ---------------------------------------------- */
.h-pa__lg {
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  border-radius: var(--r-md); background: var(--pa-brand, var(--brand-charcoal)); color: var(--on-colour);
  font-weight: 900; letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--pa-on-brand-line);
}
.h-pa__lg img { width: 100%; height: 100%; object-fit: cover; }
.h-pa__tb { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.h-pa__tb--fe { border: 1px solid var(--green); background: linear-gradient(var(--green-dim), var(--green-dim)), var(--panel); color: var(--ink); }
.h-pa__tb--fl { border: 1px solid var(--pa-gold-line); background: linear-gradient(var(--pa-gold-wash), var(--pa-gold-wash)), var(--panel); color: var(--gold); }
.h-pa__tb--fo { border: 1px solid var(--line2); background: var(--panel2); color: var(--muted); }
.h-pa__offer { display: block; font: 400 22px/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.is-pro > .h-pa__offer, .is-pro .h-pa__rmain > .h-pa__offer, .h-pa__deal.is-pro .h-pa__offer, .h-pa__flg.is-pro .h-pa__offer { color: var(--pa-pro-ink); }
.h-pa__ptag { font: 800 10.5px var(--font-body); color: var(--pa-pro-ink); margin-left: 4px; letter-spacing: .04em; vertical-align: middle; }

/* ---- home: standout, deals, browse -------------------------------------- */
.h-pa__hero {
  display: block; width: 100%; text-align: left; border: 0; border-radius: var(--r-xl); padding: 18px 16px 16px;
  color: var(--on-colour); background: linear-gradient(135deg, var(--pa-brand, var(--brand-charcoal)), var(--bg) 75%);
}
.h-pa__k { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--pa-on-brand-soft); }
.h-pa__hero strong { display: block; margin: 8px 0 12px; font: 400 40px/.95 var(--font-display); text-transform: uppercase; }
.h-pa__by { display: flex; align-items: center; gap: 10px; }
.h-pa__by b { display: block; font-size: 14px; }
.h-pa__by small { font-size: 12px; color: var(--pa-on-brand-soft); }
.h-pa__go {
  margin-left: auto; flex: none; height: 40px; padding: 0 14px; border-radius: var(--r-md);
  background: var(--on-colour); color: var(--brand-black); font-weight: 900; font-size: 13.5px; display: inline-flex; align-items: center;
}
.h-pa__deal {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; width: 100%; min-height: 44px;
  padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left;
}
.h-pa__who { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.h-pa__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.h-pa__cr {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 11px 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 13.5px; font-weight: 700;
}
.h-pa__cr .h-pa__ic { color: var(--green); width: 16px; height: 16px; }
.h-pa__cr span:not(.h-pa__ic) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-pa__cr small { color: var(--muted); font-size: 11.5px; }

/* ---- rows, featured frame, Flagship card -------------------------------- */
.h-pa__row {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; width: 100%;
  padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left;
}
.h-pa__row--static { cursor: default; }
.h-pa__rmain { min-width: 0; }
.h-pa__nl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.h-pa__nl b { font-size: 14.5px; }
.h-pa__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.h-pa__m .h-pa__ic { width: 12px; height: 12px; }
.h-pa__row .h-pa__offer { font-size: 19px; margin-top: 8px; }
.h-pa__featd {
  margin: 4px 0; padding: 0 12px; border: 1px solid rgba(var(--green-rgb), .3); border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(var(--green-rgb), .06), transparent);
}
.h-pa__featd .h-pa__row { border-bottom: 0; }
.h-pa__flg {
  position: relative; display: block; width: 100%; margin: 4px 0; padding: 16px; overflow: hidden; text-align: left;
  border-radius: 18px; border: 1px solid var(--pa-gold-line); color: var(--on-colour); box-shadow: var(--sh-2);
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--gold-rgb), .18), transparent 55%),
    linear-gradient(150deg, var(--pa-brand, var(--brand-charcoal)), var(--bg) 80%);
}
.h-pa__flg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.h-pa__fk { font-size: 10.5px; font-weight: 900; letter-spacing: .16em; color: var(--gold-hi); }
.h-pa__ft { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.h-pa__ft b { display: block; font: 400 23px/1.02 var(--font-display); text-transform: uppercase; }
.h-pa__ft small { display: block; margin-top: 5px; font-size: 12px; color: var(--pa-on-brand-soft); }
.h-pa__flg .h-pa__offer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pa-on-brand-line); font-size: 28px; line-height: 1; }
.h-pa__fgo {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; height: 36px; padding: 0 14px;
  border-radius: var(--r-lg); background: var(--gold-mid); color: var(--on-gold); font-weight: 900; font-size: 13px;
}
.h-pa__cta {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--panel2); text-align: left;
}
.h-pa__cta > .h-pa__ic:first-child { color: var(--green); }
.h-pa__cta > span:not(.h-pa__ic) { flex: 1; min-width: 0; }
.h-pa__cta b { display: block; font-size: 13.5px; }
.h-pa__cta small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.h-pa__cta--staff { margin-top: 4px; border-style: dashed; }

/* ---- category: the sub-category words (fixed, wraps, never sideways) ---- */
.h-pa__sub {
  --pa-subs: 4; display: grid; grid-template-columns: repeat(var(--pa-subs), minmax(0, 1fr)); gap: 1px;
  border: 1px solid var(--line2); border-radius: var(--r-xl); overflow: hidden; background: var(--line2);
}
.h-pa__sub button {
  min-width: 0; min-height: 40px; padding: 10px 4px; border: 0; background: var(--panel2);
  font-size: 12.5px; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-pa__sub button.is-on { background: var(--green); color: var(--on-green); }

/* ---- states ------------------------------------------------------------- */
.h-pa__sk {
  border-radius: var(--r-lg); background: linear-gradient(90deg, var(--panel2), var(--elev), var(--panel2));
  background-size: 200% 100%; animation: h-pa-shimmer 1.2s linear infinite;
}
.h-pa__skrow { display: flex; gap: 12px; }
.h-pa__skcol { flex: 1; display: flex; flex-direction: column; gap: 8px; }
@keyframes h-pa-shimmer { to { background-position: -200% 0; } }
.h-pa__state { padding: 28px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel2); text-align: center; }
.h-pa__state > .h-pa__ic { width: 28px; height: 28px; color: var(--muted); }
.h-pa__state b { display: block; margin: 10px 0 6px; font: 400 22px/1.05 var(--font-display); text-transform: uppercase; }
.h-pa__state p { margin: 0 auto 14px; max-width: 34ch; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---- buttons ------------------------------------------------------------ */
/* The buttons are the global .h-btn at its standard size (Karl's walk, 10-05: no module sizes). Only layout is ours. */
.h-pa__btn.h-btn--sm { margin-top: 8px; align-self: flex-start; }
/* Kept on purpose: the Flagship tier's own gold (the tier colour), on the global button. */
.h-pa__btn--gold { background: var(--gold-mid); color: var(--on-gold); }

/* ---- the partner page ---------------------------------------------------- */
.h-pa__band { margin: -12px -16px 0; padding: 16px 16px 18px; color: var(--on-colour); background: linear-gradient(160deg, var(--pa-brand, var(--brand-charcoal)), var(--panel) 88%); }
@container pa (min-width: 640px) { .h-pa__band { margin: 0; border-radius: var(--r-xl); } }
.h-pa__bk { margin-bottom: 10px; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; color: var(--gold-hi); }
.h-pa__btop { display: flex; align-items: center; gap: 12px; }
.h-pa__bname { min-width: 0; }
.h-pa__band h1 { margin: 0; font: 400 26px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.h-pa__band .h-pa__m { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--on-colour); }
.h-pa__band .h-pa__tb { background: var(--panel); }
.h-pa__acts { --pa-acts: 3; display: grid; grid-template-columns: repeat(var(--pa-acts), minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.h-pa__acts .h-pa__btn { min-width: 0; padding: 12px 6px; gap: 5px; font-size: 13px; white-space: nowrap; overflow: hidden; color: var(--on-colour); border-color: var(--pa-on-brand-line); background: color-mix(in srgb, var(--bg) 35%, var(--pa-brand, var(--brand-charcoal))); }
.h-pa__acts .h-pa__btn .h-pa__ic { width: 15px; height: 15px; }
.h-pa__rec.is-on { color: var(--green); border-color: rgba(var(--green-rgb), .45); }
.h-pa__rec.is-tap .h-pa__ic { animation: h-pa-stick .7s ease; transform-origin: 30% 80%; }
@keyframes h-pa-stick { 30% { transform: rotate(-24deg) scale(1.25); } 60% { transform: rotate(6deg); } }
.h-pa__big { margin-top: 16px; padding: 16px; border-radius: var(--r-xl); background: var(--bg); border: 1px solid var(--line2); color: var(--ink); }
.h-pa__big small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.h-pa__big strong { display: block; margin: 6px 0 4px; font: 400 32px/1 var(--font-display); text-transform: uppercase; }
.h-pa__ex { display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.h-pa__proline {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 12px; border-radius: var(--r-xl);
  border: 1px solid var(--pa-pro-line); background: var(--pa-pro-wash); font-size: 13.5px; text-align: left;
}
.h-pa__proline .h-pa__ic { color: var(--pa-pro-ink); width: 16px; height: 16px; }
.h-pa__proline b { color: var(--pa-pro-ink); }
.h-pa__u { margin-left: auto; flex: none; font-size: 12px; font-weight: 800; color: var(--pa-pro-ink); }
.h-pa__mo {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 44px;
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left;
}
.h-pa__mo b { display: block; font: 400 18px/1.05 var(--font-display); text-transform: uppercase; }
.h-pa__mo small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.h-pa__desc { margin: 0; font-size: 13.5px; line-height: 1.6; }
.h-pa__cover { padding: 12px; border-radius: var(--r-xl); background: var(--panel2); border: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.h-pa__cover .h-pa__ic { width: 14px; height: 14px; vertical-align: -2px; }
.h-pa__ok { color: var(--green); font-weight: 800; }
.h-pa__kv { display: flex; flex-direction: column; }
.h-pa__r {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 13.5px;
}
.h-pa__r > .h-pa__ic { color: var(--muted); width: 16px; height: 16px; }
.h-pa__t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.h-pa__r em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--green); }
.h-pa__sup { cursor: pointer; }
.h-pa__sq { width: 24px; height: 24px; flex: none; display: grid; overflow: hidden; border-radius: var(--r-sm); }
.h-pa__sq > * { width: 100%; height: 100%; }

/* ---- the ticket --------------------------------------------------------- */
.h-pa__tk { border-radius: 22px; overflow: hidden; color: var(--on-colour); background: linear-gradient(160deg, var(--pa-brand, var(--brand-charcoal)), var(--bg)); }
.h-pa__tkh { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 13.5px; font-weight: 800; }
.h-pa__tkt { margin-left: auto; }
.h-pa__tkb { padding: 22px 16px; border-top: 2px dashed color-mix(in srgb, var(--on-colour) 28%, transparent); text-align: center; }
.h-pa__tkb strong { display: block; font: 400 40px/.95 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.h-pa__tkb small { display: block; margin-top: 10px; font-size: 12px; color: var(--pa-on-brand-soft); }
.h-pa__code {
  margin: 16px auto 0; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 18px;
  border-radius: var(--r-xl); border: 2px dashed var(--on-colour); background: none; color: var(--on-colour);
  font: 900 20px var(--font-body); letter-spacing: .16em;
}
.h-pa__reveal {
  margin: 16px auto 0; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: var(--r-xl); border: 0; background: var(--on-colour); color: var(--brand-black); font-weight: 900; font-size: 15px;
}
.h-pa__tk .h-pa__code, .h-pa__tk .h-pa__reveal { color: inherit; }
.h-pa__tk .h-pa__reveal { color: var(--brand-black); }
.h-pa__used { padding: 16px; border-radius: var(--r-2xl); border: 1px solid rgba(var(--green-rgb), .35); background: linear-gradient(var(--green-dim), var(--green-dim)), var(--panel); text-align: center; font-weight: 800; color: var(--green); }

/* ---- the live member pass ------------------------------------------------ */
.h-pa__pass {
  position: relative; overflow: hidden; padding: 20px; border-radius: 22px;
  border: 1px solid rgba(var(--green-rgb), .22);
  background: linear-gradient(145deg, var(--hero-green-deep), var(--bg) 60%, var(--panel2));
}
.h-pa__pass::after {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(var(--green-rgb), .18), transparent 30%);
  animation: h-pa-sweep 4s linear infinite;
}
@keyframes h-pa-sweep { to { transform: rotate(1turn); } }
.h-pa__pass > * { position: relative; z-index: 1; }
.h-pa__pwho { display: flex; align-items: center; gap: 12px; }
.h-pa__pav { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; font-weight: 900; font-size: 19px; background: var(--elev); }
.h-pa__pass h2 { margin: 0; font: 400 24px var(--font-display); text-transform: uppercase; }
.h-pa__plbl { font-size: 12px; font-weight: 800; color: var(--green); }
.h-pa__clock { margin-top: 18px; font: 400 44px/1 var(--font-display); color: var(--green); font-variant-numeric: tabular-nums; }
.h-pa__pdate { font-size: 12px; color: var(--pa-soft); min-height: 1.2em; }
/* THE STILL CHECK: with motion off, a 4-character check that changes every
   few seconds stands in for the moving light (GC-RD-01). */
.h-pa__mark { display: none; margin-top: 10px; font: 900 18px var(--font-body); letter-spacing: .3em; color: var(--green); }
.h-pa__ofr { margin-top: 14px; padding: 12px; border-radius: var(--r-xl); background: color-mix(in srgb, var(--bg) 60%, transparent); font-size: 14px; font-weight: 800; }
.h-pa__ofr small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--pa-soft); }

/* ---- My business -------------------------------------------------------- */
.h-pa__mh { display: flex; gap: 10px; align-items: center; }
.h-pa__mh b { font-size: 15px; }
.h-pa__mb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 3px; }
.h-pa__stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.h-pa__stat div { padding: 10px 6px; border-radius: var(--r-xl); background: var(--panel2); border: 1px solid var(--line); text-align: center; }
.h-pa__stat b { display: block; font: 400 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.h-pa__stat small { font-size: 10.5px; font-weight: 800; color: var(--muted); }
.h-pa__stat em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: var(--green); }
.h-pa__st { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--muted); }
.h-pa__st--live { color: var(--green); border-color: rgba(var(--green-rgb), .45); }
.h-pa__st--awaiting_approval { color: var(--gold); border-color: var(--pa-gold-line); }
.h-pa__st--draft { color: var(--muted); }
.h-pa__opp, .h-pa__tier { display: flex; flex-direction: column; padding: 12px; border-radius: var(--r-2xl); background: var(--panel2); border: 1px solid var(--line); }
.h-pa__oh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.h-pa__opp b, .h-pa__tier b { font-size: 14px; }
.h-pa__opp small, .h-pa__tier small { font-size: 12px; color: var(--muted); }
.h-pa__early { align-self: flex-start; margin-top: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: linear-gradient(var(--pa-gold-wash), var(--pa-gold-wash)), var(--panel2); color: var(--gold); font-size: 11px; font-weight: 800; }
.h-pa__sent { margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--green); }
.h-pa__sent .h-pa__ic { width: 14px; height: 14px; vertical-align: -2px; }
.h-pa__opp--gold { border-color: var(--pa-gold-line); }
.h-pa__opp--gold b { color: var(--gold); }

/* ---- Become a partner, the owner's offer form --------------------------- */
.h-pa__pitch { padding: 16px; border-radius: 16px; border: 1px solid rgba(var(--green-rgb), .18); background: linear-gradient(135deg, color-mix(in srgb, var(--hero-green-deep) 45%, var(--bg)), var(--panel2)); }
.h-pa__pitch b { display: block; font: 400 24px/1.05 var(--font-display); text-transform: uppercase; }
.h-pa__pitch span { display: block; margin-top: 4px; color: var(--pa-soft); font-size: 13.5px; line-height: 1.5; }
.h-pa__tier ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--pa-soft); }
.h-pa__tier--featured { border-color: rgba(var(--green-rgb), .35); }
.h-pa__tier--featured b { color: var(--green); }
.h-pa__tier--flagship { border-color: var(--pa-gold-line); }
.h-pa__tier--flagship b { color: var(--gold); }
.h-pa__tier--community b { color: var(--ink); }
.h-pa__f { display: flex; flex-direction: column; gap: 5px; }
.h-pa__f label, .h-pa__lb { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.h-pa__in {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r-lg);
  border: 1px solid var(--line2); background: var(--bg); color: var(--ink); font: 16px var(--font-body);
}
.h-pa__pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.h-pa__in.is-bad, .h-pa__seg.is-bad { border-color: var(--danger); }
.h-pa__err { font-size: 12px; color: var(--danger); font-weight: 700; }
/* The offer form's choices are the global `.h-seg`; only the error ring is ours. */

/* ---- sheets this module opens (Change area, Report it, pickers) --------- */
.h-pa-sheet .h-pa__sp { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--pa-soft); }
.h-pa-sheet .h-pa__f + .h-pa__f { margin-top: 10px; }
.h-pa__o2 {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 4px;
  border: 0; border-bottom: 1px solid var(--hairline); background: none; text-align: left; font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.h-pa__o2 > span:not(.h-pa__ic):not(.h-pa__ck) { flex: 1; min-width: 0; }
.h-pa__o2 small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.h-pa__ck { color: var(--green); display: grid; }
.h-pa__msec { margin: 10px 2px 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---- "Supported by" inside a Space (NR-08) ------------------------------ */
.h-pa--embed { display: flex; flex-direction: column; }

/* ---- motion off: the OS setting or the app's own switch ----------------- */
@media (prefers-reduced-motion: reduce) {
  .h-pa__pass::after, .h-pa__sk, .h-pa__rec.is-tap .h-pa__ic { animation: none; }
  .h-pa__mark { display: block; }
}
html[data-motion="off"] .h-pa__pass::after,
html[data-motion="off"] .h-pa__sk,
html[data-motion="off"] .h-pa__rec.is-tap .h-pa__ic { animation: none; }
html[data-motion="off"] .h-pa__mark { display: block; }