/* In normal flow after page content: never overlays an answer, CTA or help. */
.page-companion{display:flex;justify-content:flex-end;max-width:1120px;margin:16px auto 0;padding:0 24px;pointer-events:none;contain:layout style}
.page-companion-quiz{max-width:760px;margin-top:8px}
@media(max-width:600px){.page-companion{padding:0 20px;margin-top:12px}.page-companion-quiz{margin-top:8px}}

/* Keep the fixed brand box as a blank placeholder while the admin shell loads. */
.admin-body:has(#loading:not([hidden])) .page-companion { visibility:hidden; }

/* Explicit theme paint lets paper blend even when the document background is on html. */
.page-companion{--guide-surface:var(--paper,#FBFDFC)}
.admin-body .page-companion{--guide-surface:var(--admin-bg,#f6f9f6)}
.page-companion persona-guide{background:var(--guide-surface);mix-blend-mode:normal}
.page-companion persona-guide img{mix-blend-mode:multiply}

/* Owned thematic placements reserve their actual visible box in normal flow. */
persona-guide[data-brand-guide],persona-guide.brand-guide-context{width:var(--brand-size);height:var(--brand-size);max-width:none;--guide-size:var(--brand-size)!important}
.brand-guide-home,.brand-guide-hero{--brand-size:200px}
.brand-guide-section{--brand-size:160px}
.brand-guide-card{--brand-size:88px}
.brand-guide-entry{--brand-size:112px}
.brand-guide-result{--brand-size:144px}
.brand-guide-quiz,.brand-guide-history{--brand-size:48px}
.brand-masthead{display:flex;align-items:center;gap:24px;margin-bottom:24px}
.brand-masthead>persona-guide{order:2;margin-left:auto}
.brand-masthead>div{min-width:0;flex:1}
.brand-masthead .page-title,.brand-masthead .page-intro{margin-top:0}
.brand-topic-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.brand-topic-card{display:block;background:var(--mint,#effaf6);border:1px solid var(--line,#dbe9e3);border-radius:20px;padding:20px;color:inherit;text-decoration:none;overflow:auto}
.brand-topic-card persona-guide{float:right;margin:0 0 8px 10px}
.brand-topic-card h3{margin:8px 0}
.brand-topic-card p{margin:8px 0;font-size:15px;line-height:1.5}
.test-card:has(>.brand-guide-card){display:block;min-height:0;overflow:auto}
.test-card>.brand-guide-card{float:right;margin:0 0 10px 14px}
.test-card:has(>.brand-guide-card) .card-actions{clear:both;padding-top:12px}
.test-card:has(>.brand-guide-card)>a.btn{clear:both;display:table}
.brand-entry-heading{display:flow-root}
.brand-entry-heading persona-guide{float:right;margin:0 0 0 16px}
.brand-entry-heading h1{min-width:0;margin:12px 0}
.test-entry .test-layout{display:block;max-width:800px}
.result-hero:has(>.brand-guide-result){display:grid;grid-template-columns:minmax(0,1fr) 144px;column-gap:24px;padding:24px 28px;align-items:center;min-height:0}
.result-hero>.brand-guide-result{grid-column:2;grid-row:2/4;align-self:center}
.result-hero:has(>.brand-guide-result)>:not(persona-guide){grid-column:1}
.result-hero:has(>.brand-guide-result)>.eyebrow{grid-column:1/-1;grid-row:1}
.result-hero:has(>.brand-guide-result)>h1{grid-row:2}
.result-hero:has(>.brand-guide-result)>.brand-hint{grid-row:3}
.result-hero:has(>.brand-guide-result)>.small-copy{grid-column:1/-1;grid-row:4}
.result-hero:has(>.brand-guide-result) h1{margin:8px 0 12px}
.page-companion{--brand-size:80px;float:right;margin:0 0 8px 16px;padding:0;width:var(--brand-size)}
.brand-guide-quiz{float:right;margin-left:12px}
.brand-guide-history{float:right;margin-left:12px}
@media(max-width:600px){
 persona-guide.brand-guide-home,persona-guide.brand-guide-hero{--brand-size:128px;--guide-size:128px!important}
 persona-guide.brand-guide-section{--brand-size:96px}
 persona-guide.brand-guide-card{--brand-size:64px}
 persona-guide.brand-guide-entry{--brand-size:80px}
 persona-guide.brand-guide-result{--brand-size:96px}
 persona-guide.brand-guide-quiz{--brand-size:40px}
 .brand-masthead{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:12px;align-items:start}
 .brand-masthead>div{display:contents}
 .brand-masthead>.brand-guide-section{grid-column:2;grid-row:2;align-self:start}
 .brand-masthead .page-title{grid-column:1/-1;grid-row:1;font-size:36px;line-height:1.12}
 .brand-masthead .page-intro{grid-column:1;grid-row:2;margin-bottom:0}
 .brand-masthead>div>.eyebrow{grid-column:1/-1;grid-row:1}
 .brand-masthead:has(>div>.eyebrow) .page-title{grid-row:2}
 .brand-masthead:has(>div>.eyebrow)>.brand-guide-section,.brand-masthead:has(>div>.eyebrow) .page-intro{grid-row:3}
 .brand-topic-cards{grid-template-columns:1fr}
 .brand-entry-heading persona-guide{margin-left:12px}
 .test-entry .page-title{font-size:32px;line-height:1.12}
 .result-hero:has(>.brand-guide-result){grid-template-columns:minmax(0,1fr) 96px;gap:12px;padding:20px}
 .result-hero:has(>.brand-guide-result) h1{font-size:32px}
 .hero-art:has(>.brand-guide-hero){min-height:128px}
 .guide-hero:has(>.brand-guide-home){min-height:128px}
}

.brand-hint{display:inline-block;margin-top:10px;padding:10px 14px;border:1px solid #b9d9ce;border-radius:16px 16px 16px 4px;background:#effaf6;color:var(--ink,#273735);font-size:15px;line-height:1.4}

.brand-guide-context{--brand-size:80px}
@media(max-width:600px){.brand-guide-context,.page-companion{--brand-size:48px}}