/* Brand positioning guide: sameness test, angle cards, formula, touchpoints. */
.bp-guide .bp-test { margin:44px 0; padding:26px; border-radius:26px; border:1px solid var(--fe-border); background:var(--fe-surface); color:var(--fe-ink); scroll-margin-top:110px; }
.bp-guide .bp-title { margin-top:6px; font:400 clamp(1.6rem,3vw,2.1rem)/1.1 'DM Serif Display',serif; }
.bp-guide .bp-sub { margin-top:6px; color:var(--fe-muted); font-size:.92rem; line-height:1.55; }
.bp-guide .bp-card { margin-top:18px; padding:22px; border-radius:22px; background:var(--fe-raised); border:1px solid var(--fe-border); animation:bp-in .35s ease; }
@keyframes bp-in { from { opacity:0; transform:translateY(8px); } }
.bp-guide .bp-prog { display:flex; justify-content:space-between; align-items:center; color:var(--fe-muted); font:700 .78rem 'Manrope',sans-serif; }
.bp-guide .bp-dots { display:flex; gap:5px; }
.bp-guide .bp-dots i { width:22px; height:6px; border-radius:6px; background:var(--fe-border); }
.bp-guide .bp-dots i.is-done { background:color-mix(in srgb,var(--fe-accent) 50%,var(--fe-border)); }
.bp-guide .bp-dots i.is-on { background:var(--fe-accent); }
/* The shop sign is always a lit sign: dark board, warm text */
.bp-guide .bp-sign { position:relative; display:grid; gap:10px; margin:18px 0; padding:30px 24px; border-radius:14px; background:#1d2622; border:6px solid #2e3a35; box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),0 20px 40px -24px rgba(0,0,0,.6); text-align:center; }
.bp-guide .bp-sign::before, .bp-guide .bp-sign::after { content:""; position:absolute; top:-20px; width:3px; height:16px; background:#56635d; }
.bp-guide .bp-sign::before { left:22%; } .bp-guide .bp-sign::after { right:22%; }
.bp-guide .bp-sign-label { color:rgba(255,255,255,.45); font:800 .68rem 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.bp-guide .bp-sign-line { color:#ffd98a; font:400 clamp(1.4rem,3.2vw,2rem)/1.25 'DM Serif Display',serif; text-shadow:0 0 18px rgba(255,190,90,.35); }
.bp-guide .bp-q { font:800 1rem 'Manrope',sans-serif; }
.bp-guide .bp-opts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.bp-guide .bp-opt { min-height:50px; padding:0 16px; border:2px solid var(--fe-border); border-radius:14px; background:var(--fe-surface); color:var(--fe-ink); font:700 .95rem 'Manrope',sans-serif; text-align:left; cursor:pointer; transition:border-color .2s,transform .2s,opacity .2s; }
.bp-guide .bp-opt:not(:disabled):hover { border-color:var(--fe-accent); transform:translateY(-2px); }
.bp-guide .bp-opt.is-right { border-color:#2f9a63; background:color-mix(in srgb,#2f9a63 14%,var(--fe-surface)); }
.bp-guide .bp-opt.is-right::after { content:" ✓"; color:#2f9a63; }
.bp-guide .bp-opt.is-wrong { border-color:#cc4b37; background:color-mix(in srgb,#cc4b37 12%,var(--fe-surface)); }
.bp-guide .bp-opt.is-dim { opacity:.45; }
.bp-guide .bp-opt:disabled { cursor:default; }
.bp-guide .bp-reveal { margin-top:16px; animation:bp-in .35s ease; }
.bp-guide .bp-verdict { font:400 1.25rem/1.3 'DM Serif Display',serif; }
.bp-guide .bp-verdict span { display:block; margin-top:4px; color:var(--fe-muted); font:600 .9rem 'Manrope',sans-serif; }
.bp-guide .bp-better { margin-top:12px; padding:14px 16px; border-left:4px solid var(--fe-accent); border-radius:0 14px 14px 0; background:color-mix(in srgb,var(--fe-accent) 10%,var(--fe-surface)); font-size:.95rem; line-height:1.55; }
.bp-guide .bp-better b { display:block; margin-bottom:3px; color:var(--fe-accent); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.bp-guide .bp-next { margin-top:14px; min-height:44px; padding:0 20px; border:0; border-radius:999px; background:var(--fe-accent); color:var(--fe-raised); font:800 .9rem 'Manrope',sans-serif; cursor:pointer; }
.bp-guide button:focus-visible { outline:3px solid var(--fe-accent-2); outline-offset:2px; }
.bp-guide .bp-result { text-align:center; }
.bp-guide .bp-score b { display:block; color:var(--fe-accent); font:400 4rem/1 'DM Serif Display',serif; }
.bp-guide .bp-score span { color:var(--fe-muted); font-weight:700; font-size:.85rem; }
.bp-guide .bp-result-t { margin:14px auto 8px; max-width:30ch; font:400 1.45rem/1.25 'DM Serif Display',serif; }
.bp-guide .bp-result-b { max-width:60ch; margin:0 auto; color:var(--fe-muted); font-size:.95rem; line-height:1.6; }

.bp-guide .bp-angles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:22px 0; }
.bp-guide .bp-angles > div { display:grid; align-content:start; gap:6px; padding:18px; border-radius:18px; border:1px solid var(--fe-border); background:var(--fe-raised); color:var(--fe-muted); font-size:.88rem; line-height:1.55; }
.bp-guide .bp-ic { font-size:1.6rem; }
.bp-guide .bp-angles b { color:var(--fe-ink); font:400 1.25rem 'DM Serif Display',serif; }
.bp-guide .bp-angles em { margin-top:4px; padding-top:8px; border-top:1px dashed var(--fe-border); color:var(--fe-ink); font-style:italic; font-size:.84rem; }
.bp-guide .bp-formula { margin:22px 0; padding:24px; border-radius:20px; background:#1f2b26; color:#eef3ef; font:400 clamp(1.15rem,2.4vw,1.45rem)/1.7 'DM Serif Display',serif; }
.bp-guide .bp-formula span { padding:1px 8px; border-radius:6px; background:rgba(120,220,180,.16); color:#8fe3c0; font:700 .85em 'Manrope',sans-serif; }
.bp-guide .bp-touch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:22px 0; }
.bp-guide .bp-touch > div { display:grid; gap:4px; padding:16px; border-radius:16px; border:1px solid var(--fe-border); border-top:4px solid var(--fe-accent); background:var(--fe-raised); color:var(--fe-muted); font-size:.88rem; line-height:1.5; }
.bp-guide .bp-touch b { color:var(--fe-ink); font-size:.98rem; }
@media (max-width:760px) {
  .bp-guide .bp-angles, .bp-guide .bp-touch { grid-template-columns:1fr 1fr; }
  .bp-guide .bp-test { padding:16px; margin-left:-6px; margin-right:-6px; }
}
@media (max-width:520px) {
  .bp-guide .bp-angles, .bp-guide .bp-touch, .bp-guide .bp-opts { grid-template-columns:1fr; }
  .bp-guide .bp-card { padding:16px; }
}
@media (prefers-reduced-motion:reduce) { .bp-guide .bp-card, .bp-guide .bp-reveal { animation:none; } }