/* Brand Profile pages (/brand/{slug}) in the Optimly refresh look. Restyles the existing
   brand.html markup; its structure, data and agent-facing parts (JSON-LD, alternates, chips,
   section order) are unchanged. Scoped to body.bp-page. No JavaScript, no motion beyond CSS
   hover states. One column, following the live layout: favicon and name, one meta line, the
   "Check your own brand" prompt, then each section's fields as label, source chip, value.
   CTAs here are plain rectangles (no pixel-notch corners): an agreed exception for Brand
   Profiles; the hover colour change stays. Every size is 16px or more. */
body.bp-page {
  background:var(--mr-navy); color:var(--mr-warm-white); font-family:var(--mr-f-body); -webkit-font-smoothing:antialiased;
}
html:has(body.bp-page) { scroll-padding-top:104px; }   /* clear the sticky 80px header */
.bp-page .site-main { background:var(--mr-navy); overflow-x:clip; }
.bp-page .page { max-width:920px; margin:0 auto; padding:clamp(48px,6vw,88px) var(--mr-gutter) clamp(64px,8vw,120px); box-sizing:content-box; }
.bp-page h1, .bp-page h2, .bp-page h3 { color:var(--mr-warm-white); }
.bp-page a { color:inherit; }
.bp-page a:focus-visible { outline:2px solid var(--mr-lime); outline-offset:3px; }
.bp-page .muted { color:rgba(248,244,238,.74); }

/* Header: favicon tile and name on one line, the meta line underneath */
.bp-page .hero { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:clamp(14px,1.4vw,20px); margin:0; }
.bp-page .hero > div { display:contents; }
.bp-page .brand-logo { grid-column:1; grid-row:1; box-sizing:border-box; width:clamp(52px,4.4vw,68px); height:auto; aspect-ratio:1; margin:0; padding:clamp(9px,.9vw,13px); border:1px solid var(--mr-rule); border-radius:22%; background:var(--mr-warm-white); object-fit:contain; }
.bp-page .brand-logo-initials { align-items:center; justify-content:center; padding:0; font:600 clamp(22px,2vw,28px)/1 var(--mr-f-body); }
.bp-page .hero h1 { grid-column:2; grid-row:1; margin:0; font:400 clamp(40px,4.6vw,64px)/1.08 var(--mr-f-display); letter-spacing:-.02em; overflow-wrap:anywhere; }
.bp-page .hero .meta { grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:28px 0 0; font-size:18px; line-height:1.5; color:var(--mr-warm-white); }
.bp-page .hero .meta > a:not(.chip) { font-weight:400; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(223,234,98,.6); }
.bp-page .hero .meta > a:hover { color:var(--mr-lime); }

/* Status badge and source chips: outlined, text only (no lead dot) */
.bp-page .badge { display:inline-flex; align-items:center; gap:0; padding:5px 10px; border-radius:0; background:none; font:600 16px/1.5 var(--mr-f-body); letter-spacing:0; white-space:nowrap; }
.bp-page .badge::before { content:none; }
.bp-page .badge-verified { color:var(--mr-lime); border:1px solid rgba(223,234,98,.5); }
.bp-page .badge-unclaimed { color:var(--mr-sky); border:1px solid rgba(171,202,223,.45); }
.bp-page .chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--mr-rule); border-radius:0; background:rgba(255,255,255,.04); color:rgba(248,244,238,.9); font:500 16px/1.5 var(--mr-f-mono); letter-spacing:0; text-decoration:none; white-space:nowrap; }
.bp-page a.chip:hover { color:var(--mr-lime); border-color:rgba(223,234,98,.5); }
.bp-page .section h3 .chip { padding:3px 10px; font:600 16px/1.5 var(--mr-f-body); }
.bp-page .chip-owner { color:var(--mr-lime); border-color:rgba(223,234,98,.5); background:none; }
.bp-page .chip-sourced { color:var(--mr-sky); border-color:rgba(171,202,223,.45); background:none; }
.bp-page .chip a { color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* "Is this your brand?" (unclaimed only) */
.bp-page .panel { margin:28px 0 0; padding:18px 22px; border:1px solid var(--mr-rule); border-radius:0; background:var(--mr-glass); color:var(--mr-warm-white); box-shadow:none; font-size:16px; line-height:1.6; }
.bp-page .panel.claim-inline .cta { display:inline; min-height:0; padding:0; border-radius:0; background:none; color:var(--mr-lime); font-weight:600; text-decoration:underline; text-underline-offset:4px; transform:none; }
.bp-page .panel.claim-inline .cta:hover { color:#fff; }

/* The prompt: the CTA, its one-line explanation directly underneath */
.bp-page .brand-discovery { display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin:36px 0 0; }
.bp-page .brand-discovery p { margin:0; font-size:16px; line-height:1.5; }
.bp-page .cta { display:inline-flex; align-items:center; justify-content:center; min-height:61px; padding:0 36px; border:0; border-radius:0; background:var(--mr-lime); color:var(--mr-ink-deep); font:600 19px/1 var(--mr-f-body); letter-spacing:0; text-decoration:none; transform:none; transition:background .22s ease; }
.bp-page .cta:hover, .bp-page .cta:focus-visible { background:linear-gradient(100deg,var(--mr-lime) 0%,var(--mr-sky) 55%,var(--mr-lavender) 100%); color:var(--mr-ink-deep); transform:none; }
.bp-page .cta.btn-outline { border:0; }

/* Sections: heading, then fields stacked as label + source chip, then value. Bands alternate
   navy and raised navy edge to edge (drawn outside the reading column). */
.bp-page .page > section { position:relative; margin:0; padding-block:clamp(48px,6vw,88px); }
.bp-page .page > section:first-of-type { margin-top:clamp(64px,6.7vw,96px); padding-top:0; }
/* Alternate sections sit on a full-bleed raised band. The background fills the column itself;
   the spread shadow only paints outside the box, so on its own it left the middle dark. */
.bp-page .page > section:nth-of-type(even) { background:var(--mr-navy-raised); box-shadow:0 0 0 100vmax var(--mr-navy-raised); clip-path:inset(0 -100vmax); }
.bp-page .page > section:first-of-type:nth-of-type(even) { padding-top:clamp(48px,6vw,88px); }
.bp-page .page > section h2 { margin:0 0 12px; font:400 clamp(32px,3.34vw,48px)/1.2 var(--mr-f-display); letter-spacing:-.02em; }
.bp-page .section { margin:0; padding:26px 0; border-top:1px solid var(--mr-rule); }
.bp-page .section:last-child { border-bottom:1px solid var(--mr-rule); }
.bp-page .section h3 { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0; font:700 18px/1.4 var(--mr-f-body); letter-spacing:0; }
.bp-page .section > p, .bp-page .section > ul { margin:12px 0 0; max-width:760px; font-size:16px; line-height:1.6; }
.bp-page .section > p.muted { margin-top:8px; }
.bp-page .section a { text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(223,234,98,.6); }
.bp-page .section a:hover { color:var(--mr-lime); }
.bp-page ul.plain { padding-left:20px; list-style:square; }
.bp-page ul.plain li + li { margin-top:8px; }
.bp-page ul.plain li::marker { color:var(--mr-sky); }
/* index.css draws its own dot with li::before; the square marker replaces it here. */
.bp-page ul.plain li { padding:0; }
.bp-page ul.plain li::before { content:none; }

/* Unclaimed: the closing claim prompt, as a calm panel in the column (not a full-width band) */
.bp-page .lavender-cta { margin:clamp(48px,6vw,72px) 0 0; padding:32px; border:1px solid var(--mr-rule); border-radius:0; background:var(--mr-navy-raised); color:var(--mr-warm-white); }
.bp-page .lavender-cta h2 { margin:0 0 12px; color:var(--mr-warm-white); font:400 clamp(26px,2.2vw,32px)/1.2 var(--mr-f-display); }
.bp-page .lavender-cta p { margin:0 0 12px; color:rgba(248,244,238,.86); font-size:16px; line-height:1.6; }
.bp-page .lavender-cta .cta { margin-top:12px; background:var(--mr-lime); color:var(--mr-ink-deep); }

/* Closing line */
.bp-page .page > p.muted:last-child { margin:32px 0 0; font-size:16px; }

@media (max-width:640px) {
  .bp-page .lavender-cta { padding:24px 20px; }
  .bp-page .cta { width:100%; }
  .bp-page .brand-discovery { align-items:stretch; }
}
@media (prefers-reduced-motion:reduce) { .bp-page .cta { transition:none; } }