/* Familiar brand characters, placed at moments of learning and everyday care. */
.product-preview .preview-mascot{width:clamp(125px,15vw,200px);bottom:58px;left:8px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 16px #304c3b10)}
.companion-section{border-top:1px solid var(--line);scroll-margin-top:120px}
.companion-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:42px}
.companion-heading>p{font-size:15px;line-height:2;color:var(--muted);max-width:390px}
.companion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.companion-card{min-width:0;color:inherit;text-decoration:none}
.companion-image{position:relative;overflow:hidden;aspect-ratio:1.12;border-radius:80px 12px 12px 12px;background:#f0eee4;display:flex;align-items:flex-end;justify-content:center;padding:34px 26px 0}
.companion-organize .companion-image{background:#e9eeea;border-radius:12px 80px 12px 12px}
.companion-rest .companion-image{background:#f4e9df;border-radius:12px 12px 80px 12px}
.companion-image>span{position:absolute;top:24px;left:30px;font-size:9px;letter-spacing:.16em;color:#6b786c;z-index:1}
.companion-image>img{width:86%;height:92%;object-fit:contain;object-position:bottom;transition:transform .35s ease;filter:drop-shadow(0 8px 12px #204b3d0a)}
a.companion-card:hover img{transform:translateY(-5px) rotate(-1deg)}
a.companion-card:focus-visible{outline:2px solid #0eb5b0;outline-offset:8px;border-radius:12px}
.companion-caption{position:relative;padding:24px 30px 12px 0}
.companion-caption h3{font-size:20px;font-weight:500;line-height:1.6}
.companion-caption p{font-size:13px;color:var(--muted);line-height:1.8;margin-top:8px}
.companion-caption>span{position:absolute;right:2px;top:28px;color:#798672;font-size:22px}
.companion-footnote{font-size:10px;color:#a19e90;letter-spacing:.08em;margin-top:26px}
#route-dashboard .journal-title-copy{display:grid;grid-template-columns:minmax(0,1fr) 104px;column-gap:22px;align-items:center;min-width:0;flex:1}
.journal-title-copy>.journal-buddy{grid-column:2;grid-row:1/4;width:104px;height:104px;object-fit:contain}
.journal-title-copy>p,.journal-title-copy>h1{grid-column:1}
#route-dashboard .toast.toast-with-buddy{display:flex;gap:12px;align-items:center;padding:12px 24px 12px 14px;max-width:calc(100vw - 32px)}
.toast-with-buddy img{width:55px;height:55px;object-fit:contain;flex:none}
.toast-with-buddy span{line-height:1.7}
@media(max-width:1000px){.companion-grid{gap:18px}.companion-image{padding-inline:12px}.companion-caption h3{font-size:18px}.companion-heading>p{font-size:13px}#route-dashboard .journal-title-copy{grid-template-columns:minmax(0,1fr) 80px;gap:12px}.journal-title-copy>.journal-buddy{width:80px;height:80px}}
@media(max-width:760px){.companion-heading{display:block;margin-bottom:28px}.companion-heading>p{font-size:13px;margin-top:20px}.companion-grid{grid-template-columns:1fr;gap:28px}.companion-card{display:grid;grid-template-columns:43% minmax(0,1fr);gap:22px;align-items:center}.companion-image{aspect-ratio:1;padding:24px 10px 0;border-radius:45px 8px 8px 8px}.companion-organize .companion-image{border-radius:8px 45px 8px 8px}.companion-rest .companion-image{border-radius:8px 8px 45px 8px}.companion-image>span{font-size:6px;top:16px;left:17px;letter-spacing:.08em}.companion-image>img{width:94%;height:94%}.companion-caption{padding:0 0 24px}.companion-caption h3{font-size:16px}.companion-caption p{font-size:11px;margin-top:7px}.companion-caption>span{right:0;top:auto;bottom:0;font-size:16px}.companion-footnote{font-size:8px}.product-preview .preview-mascot{width:126px;left:-1px;bottom:48px}#route-dashboard .journal-title-copy{grid-template-columns:minmax(0,1fr) 68px;column-gap:10px}.journal-title-copy>.journal-buddy{width:68px;height:80px}.journal-title-copy>h1{font-size:25px!important;line-height:1.5!important}#route-dashboard .toast.toast-with-buddy{bottom:24px;font-size:12px}.toast-with-buddy img{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.companion-image>img{transition:none}a.companion-card:hover img{transform:none}}