/* v2.17 Teddy interactive layer (MKT-TD-01 v1 draft + Rowan overrides 1 Nov 2026: bigger Teddy, learner-encouraging lines allowed).
   Never on navy, never near forms/booking/newsletter sign-up. Static under reduced motion. */
/* A: section moments — Teddy beside each mapped section heading (desktop: in the free space right of the heading; phones: above the content). Never over text or buttons. */
.td-inline{display:flex;align-items:center;gap:14px;margin:4px 0 22px;max-width:560px}
.td-inline img{width:110px;height:110px;flex:0 0 auto;filter:drop-shadow(0 8px 12px rgba(20,32,74,.18))}
.td-inline p,.td-pop p,.td-cheer .td-say{position:relative;margin:0;background:#fff;border:2px solid #D6DCE8;border-radius:18px;padding:10px 14px;font:600 16px/1.4 var(--font-d);color:#14204A;box-shadow:0 6px 16px rgba(20,32,74,.08)}
.td-inline p::before,.td-pop p::before{content:"";position:absolute;left:-10px;top:50%;width:16px;height:16px;margin-top:-8px;background:#fff;border-left:2px solid #D6DCE8;border-bottom:2px solid #D6DCE8;transform:rotate(45deg);border-radius:0 0 0 4px}
@media (min-width:1000px){
 .band>.wrap{position:relative}
 .td-inline{position:absolute;top:-8px;right:24px;margin:0;max-width:360px;flex-direction:row-reverse}
 .wrap:has(>.td-inline)>.sec-head{max-width:min(760px,calc(100% - 380px));min-height:150px}
 .td-inline img{width:150px;height:150px}
 .td-inline p{max-width:200px}
 .td-inline p::before{left:auto;right:-10px;transform:rotate(-135deg)}
}
@media (prefers-reduced-motion:no-preference){
 .js-td .td-inline.anim:not(.in) img{opacity:0;transform:translateY(26px) scale(.8) rotate(-6deg)}
 .js-td .td-inline.anim:not(.in) p{opacity:0;transform:scale(.9)}
 .js-td .td-inline.anim.in:not(.static) img{animation:tdPop .55s cubic-bezier(.2,.9,.3,1.35) both}
 .js-td .td-inline.anim.in:not(.static) p{animation:tdSay .32s .3s cubic-bezier(.2,.9,.3,1.2) both}
}
@keyframes tdPop{0%{opacity:0;transform:translateY(26px) scale(.8) rotate(-6deg)}60%{opacity:1;transform:translateY(-6px) scale(1.04) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes tdSay{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* B: title bubble — the real H2 is the bubble */
.td-title{display:flex;align-items:flex-end;gap:18px;flex-wrap:nowrap}
.td-title .td-tface{width:150px;height:150px;flex:0 0 auto;filter:drop-shadow(0 8px 14px rgba(20,32,74,.18))}
.td-title .td-hwrap{flex:1 1 auto;min-width:0}
.td-title h2.td-bubble{position:relative;display:inline-block;background:#fff;border:2.5px solid #D6DCE8;border-radius:26px;padding:16px 24px;margin:0 0 40px;font-size:clamp(24px,2.6vw,34px);box-shadow:0 10px 24px rgba(20,32,74,.10)}
.td-title h2.td-bubble::before{content:"";position:absolute;left:-14px;bottom:22px;width:22px;height:22px;background:#fff;border-left:2.5px solid #D6DCE8;border-bottom:2.5px solid #D6DCE8;transform:rotate(45deg);border-radius:0 0 0 5px}
@media (max-width:860px){.td-title .td-tface{width:92px;height:92px}.td-title h2.td-bubble{padding:12px 16px;margin-bottom:24px}}

/* C: pop-in (peek) */
.td-pop{display:flex;align-items:center;gap:14px;margin:6px 0 20px;max-width:560px}
.td-pop img{width:110px;height:110px;flex:0 0 auto;filter:drop-shadow(0 6px 10px rgba(20,32,74,.16))}
@media (prefers-reduced-motion:no-preference){.js-td .td-pop.anim img{transform:translateX(-30px) rotate(-8deg);opacity:0}.js-td .td-pop.anim p{opacity:0;transform:scale(.94)}
 .js-td .td-pop.anim.in img{transform:none;opacity:1;transition:transform 320ms cubic-bezier(.2,.9,.3,1.3),opacity 240ms}.js-td .td-pop.anim.in p{opacity:1;transform:none;transition:opacity 240ms 200ms,transform 240ms 200ms}}
@media (max-width:860px){.td-pop img,.td-inline img{width:78px;height:78px}}

/* D: article end cheer */
.td-cheer{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:34px 0 48px}
.td-cheer img{width:120px;height:120px;filter:drop-shadow(0 6px 10px rgba(20,32,74,.16))}
.td-cheer .td-say{order:-1}
.td-cheer .td-say::after{content:"";position:absolute;right:-10px;top:50%;width:16px;height:16px;margin-top:-8px;background:#fff;border-right:2px solid #D6DCE8;border-top:2px solid #D6DCE8;transform:rotate(45deg);border-radius:0 4px 0 0}
@media (max-width:860px){.td-cheer img{width:88px;height:88px}}
@media (forced-colors:active){.td-bub,.td-inline p,.td-pop p,.td-cheer .td-say,.td-title h2.td-bubble{border-color:CanvasText}}