/* ==========================================================================
   ShowPoppy Standard and ShowPoppy Signature comparison
   --------------------------------------------------------------------------
   A preview system for the pricing section. Everything here is presentation:
   no upload, no storage, no persistence, no billing, no server. The controls
   change a local state object and nothing else.

   One card shell serves both experiences and all three branded
   architectures. Standard locks the architecture and varies only accent and
   font; Branded swaps the header treatment and adds identity, colors and
   assets. Both always carry the Powered by ShowPoppy attribution.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dialog
   -------------------------------------------------------------------------- */
.bp-scrim{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(0px,2vw,32px);
  background:rgba(14,27,42,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.bp-scrim[hidden]{display:none}

.bp{
  display:flex;flex-direction:column;
  width:100%;max-width:1180px;max-height:100%;
  background:var(--surface-primary);
  border-radius:clamp(0px,1.4vw,18px);
  box-shadow:var(--e-3);
  overflow:hidden;
}

.bp__head{
  display:flex;align-items:flex-start;gap:var(--sp-4);flex:none;
  padding:16px 18px;border-bottom:1px solid var(--border-soft);
}
.bp__title{font-size:17px;font-weight:600;letter-spacing:-.014em}
.bp__sub{margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--text-secondary);max-width:64ch}
.bp__x{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-ctl);
  background:var(--surface-primary);border:1px solid var(--border-strong);
  color:var(--text-primary);cursor:pointer;
}
.bp__x:hover{background:var(--surface-secondary)}

.bp__body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden}
@media (min-width:900px){
  .bp__body{grid-template-columns:268px minmax(0,1fr)}
}

/* Control rail */
.bp__rail{
  min-width:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 16px;display:flex;flex-direction:column;gap:14px;
  background:#FCFDFE;border-bottom:1px solid var(--border-soft);
}
@media (min-width:900px){
  .bp__rail{border-bottom:0;border-right:1px solid var(--border-soft)}
}

/* Preview area */
.bp__stage{
  min-width:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px;background:var(--surface-secondary);
}
.bp__stagegrid{display:grid;gap:16px;justify-items:center}
.bp__stagegrid.is-side{grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){
  .bp__stagegrid.is-side{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
.bp__label{
  margin-bottom:8px;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary);
}
.bp__col{width:100%;max-width:420px}

.bp__foot{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;flex:none;
  padding:12px 18px;border-top:1px solid var(--border-soft);
  background:var(--surface-primary);
}
.bp__price{font-size:12.5px;font-weight:500;color:var(--text-secondary)}
.bp__price b{font-weight:600;color:var(--text-primary)}
.bp__cta{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   2. Controls
   -------------------------------------------------------------------------- */
.bp-grp{display:flex;flex-direction:column;gap:6px}
.bp-grp__l{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate-soft);
}

/* Segmented control */
.bp-seg{display:flex;gap:3px;padding:3px;border-radius:var(--r-ctl);
  background:var(--surface-secondary);border:1px solid var(--border-soft)}
.bp-seg button{
  flex:1;min-height:36px;padding:0 10px;border:0;border-radius:7px;
  background:transparent;font-size:12.5px;font-weight:600;color:var(--text-secondary);
  cursor:pointer;white-space:nowrap;
}
.bp-seg button[aria-pressed="true"]{background:var(--surface-primary);color:var(--text-primary);box-shadow:var(--e-1)}

/* Option list */
.bp-opts{display:grid;gap:4px}
.bp-opts button{
  display:flex;align-items:center;gap:8px;width:100%;
  min-height:38px;padding:0 10px;border-radius:8px;
  background:var(--surface-primary);border:1px solid var(--border-soft);
  font-size:12.5px;font-weight:500;color:var(--text-primary);
  cursor:pointer;text-align:left;
}
.bp-opts button:hover{border-color:var(--border-strong)}
.bp-opts button[aria-pressed="true"]{
  border-color:#F0BBA6;background:var(--surface-accent);color:var(--text-accent);font-weight:600;
}
.bp-opts button .bp-tick{margin-left:auto;opacity:0}
.bp-opts button[aria-pressed="true"] .bp-tick{opacity:1}
.bp-opts small{display:block;font-size:10.5px;font-weight:400;color:var(--text-secondary);line-height:1.35}

/* Swatches */
.bp-sw{display:flex;flex-wrap:wrap;gap:6px}
.bp-sw button{
  display:inline-flex;align-items:center;gap:6px;
  min-height:36px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--surface-primary);border:1px solid var(--border-soft);
  font-size:11.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;
}
.bp-sw button[aria-pressed="true"]{border-color:var(--navy);color:var(--text-primary)}
.bp-sw i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(14,27,42,.18)}

/* ── YOUR OWN BRAND COLOR ──────────────────────────────────────────────────
   The five presets stay — they are checked, and they are the fastest way to a
   good card. This is the way out of them for an agent whose brokerage color
   is not one of the five, which is the thing Signature actually sells.

   The control is a native <input type=color>: the OS picker, so it is already
   accessible, already touch-friendly, already familiar, and it carries an
   eyedropper on the platforms that have one. Adding a design-editor
   dependency to draw a color wheel would have cost more bytes than the whole
   preview engine.

   The input is stacked UNDER the button rather than hidden, because a
   display:none input cannot be opened by .click() in Safari and cannot be
   reached by a keyboard at all. */
.bp-sw__customcell{position:relative;display:inline-flex}
.bp-sw__picker{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;cursor:pointer;
}
.bp-sw__picker:focus-visible + *,
.bp-sw__custom:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.bp-sw__custom{position:relative;z-index:1;pointer-events:none}

/* The exact value, for an agent who has a brand book open. */
.bp-hexrow{display:flex;align-items:center;gap:8px;flex-basis:100%;margin-top:2px}
.bp-hex{
  width:104px;min-height:34px;padding:0 9px;
  border-radius:8px;background:var(--surface-primary);
  border:1px solid var(--border-soft);
  font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:12px;letter-spacing:.02em;color:var(--text-primary);
  text-transform:uppercase;
}
.bp-hex:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
/* Never an error, and never a lecture. The agent keeps their color; this says
   what we will do about it. */
.bp-hexnote{font-size:11px;line-height:1.35;color:var(--text-secondary)}

/* Free-text control. Matches the option buttons in height, radius and border
   so the rail reads as one set of controls rather than a form dropped in. */
.bp-txt{
  display:block;width:100%;min-height:38px;padding:0 10px;
  border-radius:8px;background:var(--surface-primary);
  border:1px solid var(--border-soft);
  font:inherit;font-size:12.5px;color:var(--text-primary);
}
.bp-txt::placeholder{color:var(--text-secondary);opacity:.8}
.bp-txt:hover{border-color:var(--border-strong)}
.bp-txt:focus-visible{outline:none;border-color:var(--orange);box-shadow:var(--focus-ring)}
.bp-hint{margin-top:5px;font-size:10.5px;line-height:1.4;color:var(--text-secondary)}

.bp-note{
  display:flex;gap:7px;padding:9px 10px;border-radius:8px;
  background:var(--surface-accent);border:1px solid #F5C3AF;
  font-size:11px;line-height:1.45;color:#8A3B15;
}
.bp-note svg{flex:none;margin-top:1px}

.bp-more{
  min-height:36px;padding:0 10px;border-radius:8px;
  background:transparent;border:1px dashed var(--border-strong);
  font-size:11.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;
}

.bp-planned{
  display:inline-flex;align-items:center;padding:2px 7px;border-radius:var(--r-pill);
  background:var(--warning-soft);border:1px solid var(--warning-line);
  font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--warning-text);
}

/* ==========================================================================
   3. THE CARD SYSTEM
   --------------------------------------------------------------------------
   One shell. Everything variable comes through custom properties set on the
   card element itself, so Standard and all three Branded architectures share
   the same components.
   ========================================================================== */
.card-x{
  --bp-accent:#F15A2A;
  --bp-ink:#0E1B2A;
  /* Computed by the renderer from whatever brand color the agent chose (see
     SPBrandColor / lib/brand_color.php). Declared here so a card drawn before
     they are set still has sane values rather than none. */
  --bp-ink-on:#FFFFFF;      --bp-ink-text:#0E1B2A;    --bp-ink-tint:#F2F4F6;
  --bp-accent-on:#FFFFFF;   --bp-accent-text:#C0400F; --bp-accent-tint:#FEEFEA;
  --bp-second:#5F6B7A;
  --bp-display:var(--font-sans);
  --bp-body:var(--font-sans);

  width:100%;background:var(--surface-primary);
  border:1px solid var(--border-subtle);border-radius:14px;
  box-shadow:var(--e-2);overflow:hidden;
  font-family:var(--bp-body);color:var(--bp-ink-text);
}
.card-x *{min-width:0}

/* Font presets.
   Four distinct treatments, not two. Previously "Clean" and "Editorial" had
   no rule of their own and silently fell back, so two of the six choices did
   nothing. Each now sets family, tracking and display weight, and those vars
   are consumed by the address as well as the headings, so the choice is
   visible on every card type rather than only the ones with a hero line. */
.card-x{--bp-track:-.012em;--bp-dweight:600;--bp-dsize:1}

.card-x[data-font="modern"]{
  --bp-display:var(--font-sans);--bp-track:-.014em;--bp-dweight:600;
}
.card-x[data-font="classic"]{
  --bp-display:var(--font-serif);--bp-track:-.006em;--bp-dweight:600;--bp-dsize:1.04;
}
.card-x[data-font="clean"]{
  --bp-display:var(--font-sans);--bp-track:.012em;--bp-dweight:500;
}
.card-x[data-font="editorial"]{
  --bp-display:var(--font-serif);--bp-track:.006em;--bp-dweight:600;--bp-dsize:1.1;
}

/* Everything that should answer to the font choice. Scoped through .card-x
   so it outranks the component defaults declared further down the file. */
.card-x .cx-addr,.card-x .cx-hero,.card-x .cx-banner__name,.card-x .cx-agent__n,
.card-x .cx-cover__n,.card-x .cx-soon__t{
  font-family:var(--bp-display);
  letter-spacing:var(--bp-track);
  font-weight:var(--bp-dweight);
}
.card-x .cx-hero{font-size:calc(17px * var(--bp-dsize))}
.card-x[data-arch="editorial"] .cx-hero{font-size:calc(21px * var(--bp-dsize))}
.card-x .cx-addr{font-size:calc(13.5px * var(--bp-dsize))}

/* --- Standard header ---------------------------------------------------- */
.cx-head{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg,#fff,#FBFCFD);
}
.cx-head img{height:18px;width:auto;max-width:none}
.cx-type{
  margin-left:auto;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--surface-secondary);border:1px solid var(--border-subtle);
  font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bp-second);white-space:nowrap;
}

/* --- Branded: Signature Banner ------------------------------------------
   The band carries four things at once, so it earns its room. Luxury in a
   header is mostly space and restraint: the logo badge and the type pill both
   step back in weight, and the name takes what they give up. */
.cx-banner{
  display:flex;align-items:center;gap:13px;
  padding:16px 16px 15px;
  background:var(--bp-ink);color:var(--bp-ink-on);
}
.cx-banner__id{min-width:0;padding-right:4px}
.cx-banner__name{font-family:var(--bp-display);font-size:15.5px;font-weight:600;line-height:1.22}
/* THE TRANSLUCENT-WHITE TRICK ONLY WORKS ON A DARK GROUND.
   These three sat on a navy banner for their whole life, so white at 70%
   opacity and a white 7% wash were fine. On a pale brand color they become
   near-invisible — measured at 1.15:1 on a bright yellow. They derive from
   the COMPUTED foreground now (currentColor, which is --bp-ink-on), so the
   same rule reads correctly on any brand color the agent chooses. */
.cx-banner__org{
  font-size:11px;line-height:1.35;margin-top:3px;letter-spacing:.008em;
  color:currentColor;opacity:.82;
}
.cx-banner__type{
  margin-left:auto;padding:3px 8px;border-radius:var(--r-pill);
  background:transparent;
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;color:currentColor;
}
.cx-banner__rule{height:3px;background:var(--bp-accent)}

/* --- Branded: Split Profile ---------------------------------------------
   The rail is a spine, not a panel: a flat 70px, down from the 148px it was
   taking out of a 337px card. It used to switch on at a 560px *viewport*,
   which says nothing about how wide the card actually is — a narrow card in a
   wide window still surrendered 44% of itself to the rail, leaving the body
   too cramped to set "Requested time" on one line.
   At 70px the column holds the portrait and the brand color and nothing
   else; no name, brokerage or license would set legibly across that measure,
   so the identity lives in the agent block at the foot of the body, the same
   as every other branded architecture. */
.card-x{container-type:inline-size}
.cx-split{display:grid;grid-template-columns:70px minmax(0,1fr)}

/* Lit from the top rather than filled flat — a tall column of one dead value
   reads as a printing error, not a design. The accent edge where the spine
   meets the body is the same 3px rule the Signature banner draws under
   itself, turned on its side. */
.cx-spine{
  padding:14px 0;overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bp-ink) 90%,#fff),
    var(--bp-ink) 46%,
    color-mix(in srgb,var(--bp-ink) 93%,#000));
  color:#fff;
  box-shadow:inset -3px 0 0 var(--bp-accent);
  display:flex;flex-direction:column;align-items:center;
}

/* 1. Monogram — badge at the head, rule falling away from it. */
.cx-spine__mono{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:38px;height:26px;padding:0 8px;border-radius:5px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;
}
.cx-spine__drop{
  flex:1;width:1px;min-height:0;margin-top:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0));
}

/* 2. Spine Type — set vertically, centered on the column. In vertical writing
   mode the flex main axis runs top to bottom, so this row reads downward. */
.cx-spine__type{
  writing-mode:vertical-rl;
  display:flex;align-items:center;gap:11px;
  margin:auto 0;min-height:0;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}
.cx-spine__type b{font-weight:700;color:#fff}
.cx-spine__type span{font-weight:500;color:rgba(255,255,255,.6)}
.cx-spine__dot{
  flex:none;width:3px;height:3px;border-radius:50%;
  background:var(--bp-accent);
}

/* 3. Color Only — the band and its accent edge are the whole treatment. */

/* --- Branded: Editorial Minimal ----------------------------------------- */
.cx-edhead{padding:20px 20px 0;display:flex;align-items:center;gap:10px}
.cx-edhead img{height:16px;width:auto;max-width:none;opacity:.9}
.cx-edtype{
  margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bp-second);
}
.cx-edrule{height:1px;background:var(--bp-accent);margin:14px 20px 0;opacity:.55}

/* --- Shared identity, logo ----------------------------------------------
   The initials avatar is gone with the Split Profile rewrite: every branded
   architecture now leads with the real portrait, and Standard carries no
   agent identity at all, so nothing was left that drew initials. */
.cx-logo{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  height:24px;padding:0 8px;border-radius:5px;
  /* A BORDER, NOT A FILL. A white wash was invisible on a pale brand color;
     replacing it with a currentColor wash then tinted the chip TOWARD the
     text and cost contrast the other way (measured 4.45 on magenta). With no
     fill the text sits on the banner ground itself — the exact pairing
     SPBrandColor.on() already guaranteed — and the chip still reads as a chip. */
  background:transparent;
  border:1px solid color-mix(in srgb, currentColor 32%, transparent);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;color:currentColor;
}
.cx-logo--ink{background:var(--bp-ink);border-color:transparent;color:var(--bp-ink-on)}

/* --- Body components ---------------------------------------------------- */
.cx-body{padding:14px;display:flex;flex-direction:column;gap:11px}
.card-x[data-arch="editorial"] .cx-body{padding:16px 20px 20px;gap:14px}

.cx-hero{font-family:var(--bp-display);font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.012em}
.card-x[data-arch="editorial"] .cx-hero{font-size:21px;line-height:1.2}
.cx-lead{font-size:12px;line-height:1.5;color:var(--bp-second)}

.cx-prop{display:flex;gap:11px;align-items:flex-start}
.cx-photo{
  flex:none;width:88px;height:66px;border-radius:8px;overflow:hidden;
  background:#DCE6F0;display:block;position:relative;
  /* A hairline so the thumbnail sits in a frame rather than bleeding into
     the card at its lighter edges. */
  box-shadow:inset 0 0 0 1px rgba(14,27,42,.08);
}
.cx-addr{font-size:13.5px;font-weight:600;line-height:1.3}
.cx-city{font-size:11.5px;color:var(--bp-second);margin-top:1px}

.cx-when{
  display:flex;gap:16px;padding:9px 11px;border-radius:8px;
  background:var(--surface-secondary);
}
.cx-wk{display:block;font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--bp-second)}
.cx-wv{display:block;margin-top:2px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

/* The message is a note from a person, so it is set to be read rather than
   scanned: longer leading, real padding, and a full hairline instead of the
   hard accent slab down one edge. The accent survives as a soft inset bar —
   present enough to mark the quote, quiet enough that the note never
   out-shouts the property or the actions. */
.cx-msg{
  position:relative;
  padding:14px 15px 14px 18px;border-radius:10px;
  background:color-mix(in srgb,var(--bp-ink) 2.5%,#fff);
  border:1px solid color-mix(in srgb,var(--bp-ink) 9%,#fff);
  font-size:12px;line-height:1.72;color:#3B4859;
}
.cx-msg::before{
  content:"";position:absolute;left:8px;top:14px;bottom:14px;width:2.5px;
  border-radius:2px;background:var(--bp-accent);opacity:.5;
}

.cx-doc{
  display:grid;gap:3px;padding:9px 11px;border-radius:8px;
  background:var(--success-soft);border:1px solid var(--success-line);
}
.cx-dk{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--success-text)}
.cx-dv{font-size:12px;font-weight:600}
.cx-dlink{justify-self:start;margin-top:3px;padding:5px 9px;border-radius:6px;
  background:var(--surface-primary);border:1px solid var(--success-line);
  font-size:11px;font-weight:600;color:var(--success-text)}

/* One gap, one radius, one border weight across the stack. The hierarchy is
   carried by height and weight rather than by five competing treatments, so
   the primary is unmistakable without being loud. */
.cx-acts{display:grid;gap:8px}
.cx-act{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 14px;border-radius:9px;
  font-size:12.5px;font-weight:600;line-height:1;letter-spacing:-.004em;
}
/* Optical alignment: the icon sits a hair high against a cap-height label. */
.cx-act svg{flex:none;margin-top:-.5px}
/* The primary takes one step in height and one in weight. Nothing else moves. */
.cx-act--plain,.cx-act--brand{min-height:44px;font-size:13px;font-weight:700}
.cx-act--yes{background:var(--bp-accent);color:var(--bp-accent-on)}
.cx-act--alt{background:var(--surface-primary);border:1px solid var(--border-strong);color:var(--bp-ink-text)}
.cx-act--no{background:var(--surface-primary);border:1px solid var(--danger-line);color:#B4282C}
.cx-note{
  padding:9px 11px;border-radius:8px;border:1px dashed var(--border-strong);
  font-size:11px;color:var(--slate-soft);
}

/* Itinerary rows */
.cx-itin{border:1px solid var(--border-soft);border-radius:9px;overflow:hidden}
.cx-irow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-bottom:1px solid var(--border-soft)}
.cx-irow:last-child{border-bottom:0}
/* The accent AS TEXT on white — darkened only as far as it must be, so a
   pale brand color is still legible and still theirs. */
.cx-itime{flex:none;width:62px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--bp-accent-text)}
.cx-idrive{
  display:flex;align-items:center;gap:6px;padding:4px 11px 4px 84px;
  background:#FBFCFD;border-bottom:1px solid var(--border-soft);
  font-size:10.5px;color:var(--slate-soft);
}

/* Change summary (Tour Update) */
.cx-chg{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:8px;
  background:var(--warning-soft);border:1px solid var(--warning-line);flex-wrap:wrap}
.cx-chg__k{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warning-text)}
.cx-chg__v{display:block;margin-top:2px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.cx-chg__v--was{color:var(--slate-soft);text-decoration:line-through}

.cx-ok{
  display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:8px;
  background:var(--success-soft);border:1px solid var(--success-line);
  font-size:12px;font-weight:600;color:var(--success-text);
}

/* License line. Branded only — the standard card carries no agent identity,
   so the sign-off block it used to share with this rule is gone. */
.cx-sig__l{font-size:10px;color:var(--bp-second);font-variant-numeric:tabular-nums}

/* --- Footer: attribution ------------------------------------------------ */
.cx-foot{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-top:1px solid var(--border-soft);
  background:#FBFCFD;
}
.cx-foot img{height:17px;width:auto;max-width:none;opacity:.95}
.cx-foot__t{font-size:11px;font-weight:600;line-height:1.25}
.cx-foot__s{font-size:10px;color:var(--bp-second);line-height:1.3}
.cx-foot__r{margin-left:auto;font-size:10px;color:var(--bp-second);white-space:nowrap}

/* Planned-type placeholder body */
.cx-soon{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 18px;text-align:center;
}
.cx-soon__t{font-family:var(--bp-display);font-size:15px;font-weight:600}
.cx-soon__d{font-size:11.5px;line-height:1.5;color:var(--bp-second);max-width:34ch}

/* --------------------------------------------------------------------------
   4. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .bp-scrim,.bp{animation:none !important;transition:none !important}
}

/* --------------------------------------------------------------------------
   5. Stacking
   --------------------------------------------------------------------------
   Every one of these is a <span> in the markup, and a span is inline by
   default, so a name and a brokerage rendered as siblings concatenate into
   "Olivia BennettBennett Realty Group". They are declared block here once,
   rather than being patched one at a time as each is spotted.
   -------------------------------------------------------------------------- */
.cx-addr,.cx-city,
.cx-sig__l,
.cx-foot__t,.cx-foot__s,
.cx-banner__name,.cx-banner__org,
.cx-dk,.cx-dv,
.cx-hero,.cx-lead{display:block}

/* The wrappers those pairs sit inside are spans too. The Split Profile spine
   is absent from both lists on purpose: its children are flex items, which
   are blockified already, and forcing display:block would break the vertical
   writing mode the Spine Type treatment depends on. */
.cx-prop>span:not(.cx-photo),
.cx-foot>span,
.cx-banner__id{display:block;min-width:0}
.cx-when>span{display:block}

/* ==========================================================================
   6. Where the add-on price actually shows
   --------------------------------------------------------------------------
   Standard is a competent system notification: it identifies the sender and
   gets out of the way. Branded is the agent's own material: portrait, hero
   listing image, credential, brand color and direct contact. The gap has to
   be visible at a glance or the add-on does not read as worth paying for.
   ========================================================================== */

/* --- Headshot ----------------------------------------------------------- */
.cx-shot{display:inline-flex;flex:none;line-height:0}
.cx-shot__img{
  display:block;border-radius:50%;object-fit:cover;
  /* The ring picks up the agent's own secondary color, so the portrait sits
     inside the brand rather than beside it. Three layers, not two: a thin
     white separation, a softened accent ring at 68% rather than the full
     saturated hoop, and a drop shadow to lift the portrait off the panel.
     The old hard 3.5px band read as a sticker. */
  box-shadow:
    0 0 0 1.5px #fff,
    0 0 0 3px color-mix(in srgb,var(--bp-accent) 68%,#fff),
    0 4px 12px -4px rgba(14,27,42,.3);
}

/* --- Branded hero property image ---------------------------------------- */
.cx-heroprop{margin:-14px -14px 0;position:relative}
.card-x[data-arch="editorial"] .cx-heroprop{margin:0 -20px}
.cx-heroimg{
  display:block;position:relative;
  height:152px;
  background:#D3E0EC;
}
/* The photographic pass. A flat image pasted into a frame is what makes a
   card read as a mockup; a real listing preview has light falling across it
   and an edge that catches. Kept to a whisper — it must not tint the
   photograph, only give it depth. */
.cx-heroimg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%),
    radial-gradient(128% 86% at 50% 6%,rgba(255,255,255,.10),rgba(8,14,22,.15) 76%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.10);
}
.cx-heroprop__t{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 15px 14px;
  background:linear-gradient(180deg,
    rgba(9,14,22,0),rgba(9,14,22,.52) 44%,rgba(9,14,22,.88));
}
/* A short accent rule above the address. It is the smallest possible mark
   that says a person laid this out on purpose. */
.cx-heroprop__rule{
  display:block;width:26px;height:2px;border-radius:2px;
  background:var(--bp-accent);margin-bottom:8px;
}
.cx-heroprop__t .cx-addr{
  color:#fff;font-size:calc(15.5px * var(--bp-dsize));
  text-shadow:0 1px 3px rgba(6,10,16,.42);
}
.cx-heroprop__t .cx-city{
  color:rgba(255,255,255,.8);margin-top:2px;
  text-shadow:0 1px 3px rgba(6,10,16,.4);
}

/* --- Branded buyer-tour cover ------------------------------------------- */
.cx-cover{
  margin:-14px -14px 2px;padding:16px 14px;
  background:linear-gradient(135deg,var(--bp-ink),color-mix(in srgb,var(--bp-ink) 60%,var(--bp-accent)));
  /* A ground made of the brand color, so the text on it is computed, never
     assumed white — a pale brand used to put white on pale yellow here. */
  color:var(--bp-ink-on);
}
.cx-cover__k{display:block;font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;opacity:.72}
.cx-cover__n{display:block;margin-top:3px;font-family:var(--bp-display);
  font-size:19px;font-weight:600;letter-spacing:-.01em}

/* --- Branded agent block ------------------------------------------------
   This panel is the clearest single reason to pay for the add-on, so it is
   given the room of a real profile rather than the margins of a footer. */
.cx-agent{
  margin-top:4px;padding:15px;border-radius:12px;
  background:color-mix(in srgb, var(--bp-ink) 4%, #fff);
  border:1px solid color-mix(in srgb, var(--bp-ink) 12%, #fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  display:flex;flex-direction:column;gap:12px;
}
.cx-agent__top{display:flex;align-items:center;gap:13px}
.cx-agent__id{min-width:0}
.cx-agent__n{display:block;font-family:var(--bp-display);font-size:15.5px;font-weight:600;line-height:1.22}
.cx-agent__o{display:block;font-size:11.5px;color:var(--bp-second);line-height:1.35;margin-top:3px}
.cx-agent .cx-sig__l{display:block;margin-top:3px}
/* Ruled off above, so the agent's own words read as a statement rather than
   as a third line of the address block. */
.cx-cred{
  display:flex;align-items:flex-start;gap:7px;
  padding-top:12px;
  border-top:1px solid color-mix(in srgb,var(--bp-ink) 10%,#fff);
  font-size:10.5px;line-height:1.45;color:var(--bp-second);
}
.cx-cred__i{display:inline-flex;flex:none;margin-top:1px;color:var(--bp-accent-text);line-height:0}
.cx-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cx-cbtn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;border-radius:9px;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--bp-ink) 3%,#fff));
  border:1px solid color-mix(in srgb, var(--bp-ink) 15%, #fff);
  box-shadow:0 1px 1.5px rgba(14,27,42,.05);
  font-size:11px;font-weight:600;letter-spacing:.004em;color:var(--bp-ink-text);
}
/* The icon carries the brand color, the label stays ink. Three fully
   colored buttons would compete with the primary action above. */
.cx-cbtn svg{flex:none;color:var(--bp-accent-text)}

/* --- Actions: plain for Standard, brand-colored for Branded ------------ */
.cx-act--plain{background:var(--navy);color:#fff;box-shadow:0 1px 2px rgba(14,27,42,.16)}
/* Confident, not shiny. A shallower gradient and a shadow tinted with the
   agent's own color instead of flat black — black shadow on a color is the
   thing that makes a button look stuck on rather than lit. */
.cx-act--brand{
  /* A tight range, not a ramp. Taking the foot 14% toward black turned gold
     into mud; 7% keeps it gold and still gives the face a direction of
     light. */
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bp-accent) 97%,#fff),
    color-mix(in srgb,var(--bp-accent) 93%,#000));
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 2px color-mix(in srgb,var(--bp-accent) 34%,transparent),
    0 6px 14px -8px color-mix(in srgb,var(--bp-accent) 58%,transparent);
}

/* Editorial keeps its whitespace: no full-bleed hero on that architecture. */
.card-x[data-arch="editorial"] .cx-cover{margin:0 -20px 4px}

/* --- Attribution: the logo is the attribution, not a caption beside it --- */
.cx-foot{flex-direction:column;align-items:flex-start;gap:3px}
.cx-pb{display:inline-flex;align-items:center;gap:7px}
.cx-pb__k{
  font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bp-second);
}
.cx-foot .cx-foot__s{font-size:10px}

/* The drawn listing fills its frame at both sizes. */
.cx-scene{display:block;width:100%;height:100%}
img.cx-scene{object-fit:cover}
.cx-heroimg{overflow:hidden}
.cx-heroimg .cx-scene{position:absolute;inset:0}

/* ==========================================================================
   A REAL CARD, WITHOUT THE SAMPLE'S PICTURES
   --------------------------------------------------------------------------
   The drawn listing scene is a design sample: on a delivered card it would be
   a picture of a house that is not the house. So a real card usually has no
   listing image at all, and these are the states the components need when
   the image is simply absent — not a grey box where a photograph would be,
   which reads as a broken card rather than a card without a photo.
   ========================================================================== */
.cx-prop--noimg{gap:0}

/* The hero frame's negative margins exist to let an image bleed to the card
   edges. With no image there is nothing to bleed, so the block returns to the
   body's own gutter and the accent rule carries the address on its own. */
.cx-heroprop--noimg{margin:0}
.cx-heroprop--noimg .cx-heroprop__t{
  position:static;padding:0;background:none;
}
.cx-heroprop--noimg .cx-heroprop__t .cx-addr{
  color:var(--bp-ink-text);font-size:calc(15px * var(--bp-dsize));text-shadow:none;
}
.cx-heroprop--noimg .cx-heroprop__t .cx-city{color:var(--bp-second);text-shadow:none}

/* Initials, for a branded card whose agent has not saved a headshot. It
   claims nothing — unlike a stock photograph of somebody else. */
.cx-shot--mono{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:50%;line-height:1;
  background:color-mix(in srgb,var(--bp-ink) 88%,#fff);color:var(--bp-ink-on);
  font-weight:600;font-size:15px;letter-spacing:.02em;
  box-shadow:
    0 0 0 1.5px #fff,
    0 0 0 3px color-mix(in srgb,var(--bp-accent) 68%,#fff),
    0 4px 12px -4px rgba(14,27,42,.3);
}

/* --- The attribution is a link ------------------------------------------ */
a.cx-pb{
  /* Negative margin offsets the padding so making it tappable does not
     nudge the footer layout. */
  margin:-4px -7px;padding:4px 7px;border-radius:6px;
  text-decoration:none;color:inherit;
  transition:background-color .16s var(--ease);
}
a.cx-pb:hover{background:color-mix(in srgb, var(--bp-ink) 7%, transparent)}
a.cx-pb:hover .cx-pb__k{color:var(--bp-ink-text)}
a.cx-pb:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--bp-accent);
}
.bp-note--quiet{
  background:var(--surface-secondary);border-color:var(--border-subtle);
  color:var(--text-secondary);
}

/* An uploaded brand mark replaces the text badge (2026-08-22). The base
   badge classes keep their height; the image drops the chip chrome and
   scales to fit. */
.cx-logo--img{
  padding:0;background:transparent;border:none;border-radius:3px;
  width:auto;max-width:110px;object-fit:contain;
}
.cx-spine__mono.cx-logo--img{max-width:54px}