/* One introduction, sized by the Sanctuary card rather than the viewport. */
.sanctuary-promotions,.sanctuary-promotions *{-webkit-tap-highlight-color:transparent}
.sanctuary-promotions{-webkit-user-select:none;user-select:none}
.sanctuary-promotions:focus:not(:focus-visible),.sanctuary-promotions :is(a,button):focus:not(:focus-visible){outline:none}
.sanctuary-promotions:focus-visible{outline:2px solid #6a8c56;outline-offset:2px}
.sanctuary-promotions[data-promo-input="pointer"]:focus,.sanctuary-promotions[data-promo-input="pointer"] :is(a,button):focus{outline:none}
:is(#sanctuary-care-promotions,#forum-promotions){container-type:inline-size;container-name:sanctuary-company}
:is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo--caretakers,:is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo--conversation{display:block;padding:14px 24px 38px;min-height:148px;min-width:0}
:is(#sanctuary-care-promotions,#forum-promotions):has(.sanctuary-promo--caretakers.is-current){background:linear-gradient(115deg,#faf6e9,#f0f5e9 58%,#edf6f1)}
/* Familiar faces have warm peach paper; new neighbors keep their leafy cream. */
:is(#sanctuary-care-promotions,#forum-promotions):has(.sanctuary-promo--caretakers.is-current .company-person--friends){background:linear-gradient(115deg,#fcf3e8,#f5e2d6 58%,#f8eade);border-color:#e6d5c7}
.company-person--friends .company-avatar{background:#eedccb;color:#886952}
.company-person--friends .company-eyebrow{color:#8a715c}
.company-person--friends .company-name{color:#765742}
:is(#sanctuary-care-promotions,#forum-promotions) .company-person--friends .company-caption{color:#806d5f}
.company-person--friends .company-actions .company-hello{background:#ecd7c4;color:#79593f}
.company-person--friends .company-actions .company-gift{color:#89694e}
.company-person--friends .company-actions button:hover,.company-person--friends .company-avatar:hover{background:#e6ccb5}
:is(#sanctuary-care-promotions,#forum-promotions) .company-content{min-width:0;max-width:100%}
.company-person{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;column-gap:20px;row-gap:12px;min-width:0;min-height:96px;max-width:780px;margin-inline:auto}
.company-avatar{display:grid;place-items:center;align-self:center;width:72px;height:72px;overflow:hidden;border:0;border-radius:50%;background:#e6ecdb;color:#667b55;padding:0;cursor:pointer;box-shadow:0 0 0 5px #ffffff65}
.company-avatar .creature-portrait{width:72px;height:72px;aspect-ratio:1}
.company-initial{font-family:Outfit,sans-serif;font-size:28px;font-weight:500}
.company-person-copy{min-width:0}
.company-eyebrow{display:flex;align-items:center;gap:5px;color:#7b8a6b;font-size:11px;line-height:1.4}
:is(#sanctuary-care-promotions,#forum-promotions) .company-person-copy h2{min-width:0;margin:3px 0 4px;font-size:24px;line-height:1.15;letter-spacing:-.025em;text-align:start;text-wrap:initial}
.company-name{display:block;max-width:100%;padding:0;border:0;background:none;font:inherit;font-weight:500;color:#3f6248;text-align:start;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-decoration:none;cursor:pointer}
:is(#sanctuary-care-promotions,#forum-promotions) .company-caption{max-width:55ch;margin:0;color:#77806c;font-size:12px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.company-online-dot{width:6px;height:6px;border-radius:50%;background:#81a769;flex:none}
.company-actions{grid-column:3;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:3px;min-width:0}
.company-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;border:0;background:none;color:#4b7253;padding:6px 12px;border-radius:12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.company-actions .icon{width:16px;height:16px;pointer-events:none}
.company-actions .company-hello{background:#e1ecd9}
.company-actions .company-gift{color:#977850;font-size:11px}
.company-actions button:hover,.company-avatar:hover{background:#d8e6cd}
.company-name:hover{color:#668d56}
.company-content button:focus-visible{outline:2px solid #6a8c56;outline-offset:3px}
:is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo-controls{width:150px;max-width:calc(100% - 32px);right:18px;bottom:6px}
:is(#sanctuary-care-promotions,#forum-promotions) [data-promo-next]{flex:none}
:is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo-dots button{width:24px;min-width:20px}
:is(#sanctuary-care-promotions,#forum-promotions) .company-empty{display:grid;justify-items:center;gap:3px;text-align:center;min-height:96px;align-content:center}
.company-empty>span{color:#8ba275}.company-empty>span .icon{width:20px;height:20px}
:is(#sanctuary-care-promotions,#forum-promotions) .company-empty h2{font-size:21px;margin:0}
:is(#sanctuary-care-promotions,#forum-promotions) .company-empty p{font-size:12px;line-height:1.4}
.company-empty .text-link{font-size:12px}
:is(#sanctuary-care-promotions,#forum-promotions):has(.sanctuary-promo--conversation.is-current){background:linear-gradient(110deg,#f7f1f7,#f1f4f7 65%,#f1f6ed);border-color:#e8e4ef}
.conversation-content{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:center;min-width:0;min-height:96px}
:is(#sanctuary-care-promotions,#forum-promotions) .conversation-intro h2{font-size:22px;line-height:1.15;color:#685875;margin:3px 0 4px}
:is(#sanctuary-care-promotions,#forum-promotions) .conversation-intro p{font-size:12px;color:#82768a}
.conversation-intro .sanctuary-promo-eyebrow{color:#94849c}
.conversation-all{display:inline-flex;align-items:center;gap:6px;margin-top:5px;min-height:30px;font-size:12px;font-weight:600;color:#79638c;text-decoration:none}
.conversation-all .icon{width:13px;height:13px}
.conversation-topics{display:grid;gap:4px;min-width:0;align-content:center}
.conversation-topic{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;padding:3px 0;color:#655670;text-decoration:none;border-radius:10px}
.conversation-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#e9e2ed;color:#9a83ac}
.conversation-icon .icon{width:16px;height:16px}
.conversation-copy{flex:1;min-width:0}
.conversation-copy strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;line-height:1.4}
.conversation-copy small{display:flex;align-items:center;gap:7px;min-width:0;margin-top:2px;font-size:10px;line-height:1.4;color:#8c8096}
.conversation-copy small>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversation-copy b{font-weight:400}.conversation-copy time{flex:none;color:#9d92a5}
.conversation-topic>.icon{width:12px;height:12px;flex:none;color:#ab9eb5}
.conversation-topic:hover{background:#e9e2ed66}.conversation-all:hover{color:#544363}
.conversation-content a:focus-visible{outline:2px solid #a18bb3;outline-offset:2px}
.conversation-quiet{display:flex;gap:10px;align-items:center;min-width:0;color:#84718c;text-decoration:none;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.conversation-quiet img{flex:0 0 76px;width:76px;height:68px;object-fit:cover;border-radius:15px;mix-blend-mode:multiply}
.conversation-quiet small{display:block;font-size:11px;color:#9a8ba2}
/* Keep the whole introduction centered; never squeeze its actions to an edge. */
@container sanctuary-company (max-width:700px){
 .company-person{grid-template-columns:60px minmax(0,1fr);column-gap:14px;row-gap:12px;max-width:440px}
 .company-avatar,.company-avatar .creature-portrait{width:60px;height:60px}
 .company-actions{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
}
/* Narrow desktop columns use the same compact treatment as a small phone. */
@container sanctuary-company (max-width:520px){
 :is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo--caretakers,:is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo--conversation{padding:14px 18px 38px}
 .company-person{grid-template-columns:60px minmax(0,1fr);column-gap:13px;row-gap:8px}
 .company-avatar{width:60px;height:60px;align-self:center}
 .company-avatar .creature-portrait{width:60px;height:60px}
 :is(#sanctuary-care-promotions,#forum-promotions) .company-person-copy h2{font-size:22px}
 .company-actions{grid-column:1/-1;justify-content:center;gap:8px}
 .company-actions button{padding:6px 12px}
 .conversation-content{grid-template-columns:minmax(0,1fr);gap:5px}
 .conversation-intro{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
 :is(#sanctuary-care-promotions,#forum-promotions) .conversation-intro h2{font-size:20px;margin:0}
 .conversation-intro>.sanctuary-promo-eyebrow,:is(#sanctuary-care-promotions,#forum-promotions) .conversation-intro>p{display:none}
 .conversation-all{margin:0;font-size:11px;flex:none}.conversation-topics{gap:2px}
}
/* Also provides the compact layout when container queries are unavailable. */
@media(max-width:650px){
 :is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo--caretakers,:is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo--conversation{padding:14px 16px 38px}
 .company-person{grid-template-columns:60px minmax(0,1fr);column-gap:13px;row-gap:8px;max-width:440px}
 .company-avatar{width:60px;height:60px;align-self:center}
 .company-avatar .creature-portrait{width:60px;height:60px}
 :is(#sanctuary-care-promotions,#forum-promotions) .company-person-copy h2{font-size:22px}
 .company-actions{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
 .company-actions button{padding:6px 12px}
 .conversation-content{grid-template-columns:minmax(0,1fr);gap:5px}
 .conversation-intro{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
 :is(#sanctuary-care-promotions,#forum-promotions) .conversation-intro h2{font-size:20px;margin:0}
 .conversation-intro>.sanctuary-promo-eyebrow,:is(#sanctuary-care-promotions,#forum-promotions) .conversation-intro>p{display:none}
 .conversation-all{margin:0;font-size:11px;flex:none}.conversation-topics{gap:2px}
}
@container sanctuary-company (max-width:350px){
 :is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo--caretakers,:is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo--conversation{padding-inline:12px}
 .company-person{grid-template-columns:50px minmax(0,1fr);column-gap:10px}
 .company-avatar,.company-avatar .creature-portrait{width:50px;height:50px}
 :is(#sanctuary-care-promotions,#forum-promotions) .company-person-copy h2{font-size:21px}
 :is(#sanctuary-care-promotions,#forum-promotions) .company-caption{font-size:11px}
 .company-actions button{padding-inline:11px}
 :is(#sanctuary-care-promotions,#forum-promotions) .conversation-intro h2{font-size:18px}
 :is(#sanctuary-care-promotions,#forum-promotions) .sanctuary-promo-controls{right:12px}
}