/* A companion introduction that shares the homepage's calm, playful balance. */
.companion-intro { width: min(1184px, 100%); margin: 0 auto; padding: 126px 32px 52px; display: grid; grid-template-columns: 1.08fr 1fr; gap: 4rem; align-items: center; }
.companion-intro-eyebrow { color: #637756; font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.3rem; }
.companion-intro h1 { font: 500 clamp(2.7rem,4.5vw,4.2rem)/1.08 'Playfair Display', Georgia, serif; color: #234538; letter-spacing: -.045em; margin: 0 0 1.5rem; }
.companion-intro h1 em { display: block; color: #57754e; font-weight: 400; }
.companion-intro-text { max-width: 485px; font-size: 1rem; line-height: 1.85; color: #52665a; margin-bottom: 1rem; }
.companion-store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1.7rem; }
.companion-store-badges a { display: inline-flex; min-height: 44px; align-items: center; }
.companion-store-badges img { display: block; width: auto; height: 44px; }
.companion-store-badges .google-badge { height: 59px; margin: -7.5px 0; }
.companion-intro-fine { font-size: .75rem; line-height: 1.7; color: #677561; margin: .7rem 0 1.1rem; }
.companion-intro-explore { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; color: #3a5c46; font-size: .85rem; font-weight: 600; text-underline-offset: 5px; text-decoration-color: #b3c1a5; }
[data-site-refresh="companion"] .sticky-cta a { padding: 0; background: transparent; border: 0; border-radius: 0; display: inline-flex; align-items: center; box-shadow: none; }
.sticky-cta a img { height: 40px; width: auto; display: block; }
.sticky-cta a .google-badge { height: 54px; margin: -7px 0; }
[data-site-refresh="companion"] .companion-page { max-width: 970px; padding-top: 0; }
[data-site-refresh="companion"] .page-explore { border-top: 1px solid #d6dfcc; padding-top: 1.5rem; }
@media (min-width: 769px) { [data-site-refresh="companion"] .companion-page { background: #fbf8ef; border: 1px solid #e2e1d5; border-radius: 28px; padding: 32px 56px; margin-bottom: 36px; } }
@media (max-width: 680px) {
    .companion-intro { grid-template-columns: 1fr; padding: 99px 24px 32px; gap: 1.8rem; }
    .companion-intro h1 { font-size: 2.9rem; }
    .companion-intro-text { font-size: .98rem; }
    [data-site-refresh="companion"] .companion-page h2 { font-size: 1.7rem; }
}
.companion-intro h1 > span { display: block; text-wrap: balance; }
@media (max-width: 1000px) { .companion-intro { gap: 2.3rem; } }

/* A keepsake-style portrait, distinct from the homepage's landscape window. */
.companion-portrait { position: relative; aspect-ratio: 1 / 1.08; border: 1px solid #ded7bd; border-radius: 30px; background: #f1ead7; box-shadow: 0 20px 55px #3c554012; isolation: isolate; }
.companion-portrait::before { content: ''; position: absolute; inset: 13px; border: 1px solid #d8cfb2; border-radius: 20px; pointer-events: none; }
.companion-portrait-label { position: absolute; top: 34px; left: 24px; right: 24px; color: #68704e; text-align: center; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.companion-portrait-halo { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: #dce5cd; left: 15%; top: 15%; }
/* Centre the visible character, accounting for the PNG's uneven transparent padding. */
.companion-portrait-float { position: absolute; inset: 0; translate: -1.054% 0; }
.companion-portrait-mascot { position: absolute; width: 90%; height: auto; left: 9%; top: 2%; filter: drop-shadow(0 10px 12px #2a493d26); }
.companion-portrait-postcard { position: absolute; width: 25%; height: auto; left: 9%; bottom: 24%; transform: rotate(-12deg); border: 5px solid #fffdf2; border-radius: 6px; box-shadow: 0 7px 16px #3d4a3426; }
.companion-portrait-caption { position: absolute; bottom: 37px; left: 20px; right: 20px; text-align: center; font: 500 clamp(1.2rem,2vw,1.65rem)/1.45 'Playfair Display', Georgia, serif; color: #2d4d3b; }
.companion-portrait-caption em { color: #637653; font-weight: 400; }
@media (max-width: 680px) { .companion-portrait { width: 100%; max-width: 420px; margin: 0 auto; } .companion-portrait-caption { bottom: 30px; font-size: 1.2rem; } .companion-portrait-label { top: 28px; font-size: .57rem; } }
@media (prefers-reduced-motion: no-preference) { .companion-portrait-float { animation: companion-welcome 4s ease-in-out infinite; } @keyframes companion-welcome { 50% { transform: translateY(-6px); } } }

/* Keep the introduction together within a phone's first view. */
@media (max-width: 680px) {
    .companion-intro {
        --portrait-height: clamp(128px, calc(100svh - 465px), 260px);
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'title' 'portrait' 'description' 'stores' 'fine' 'explore';
        gap: .6rem;
        align-content: start;
        padding: 80px 22px 20px;
        min-height: 100svh;
    }
    .companion-intro-copy { display: contents; }
    .companion-intro-eyebrow { display: none; }
    .companion-intro h1 { grid-area: title; font-size: clamp(1.65rem, 7.7vw, 2.2rem); line-height: 1.08; text-align: center; margin: 0; }
    .companion-intro-text { grid-area: description; max-width: none; margin: 0; font-size: .95rem; line-height: 1.55; }
    .companion-store-badges { grid-area: stores; justify-content: center; margin: 0; }
    .companion-intro-fine { grid-area: fine; text-align: center; margin: 0; font-size: .7rem; }
    .companion-intro-explore { grid-area: explore; justify-self: center; font-size: .8rem; }
    .companion-portrait { grid-area: portrait; height: var(--portrait-height); max-width: 420px; aspect-ratio: auto; border-radius: 24px; overflow: hidden; }
    .companion-portrait::before { inset: 8px; border-radius: 17px; }
    .companion-portrait-label { top: 16px; left: 12px; right: 12px; font-size: .56rem; letter-spacing: .11em; }
    .companion-portrait-halo { width: auto; height: 76%; top: auto; bottom: -12%; left: 50%; transform: translateX(-50%); }
    /* The visible centre is 33px left of centre in the 1008x1056 image. */
    .companion-portrait-float { translate: calc((var(--portrait-height) - 2px) * 1.25 * 33 / 1056) 0; }
    .companion-portrait-mascot { width: auto; height: 125%; max-width: none; left: 50%; top: -5%; translate: -50% 0; }
    .companion-portrait-postcard { width: clamp(48px, 16vw, 70px); left: 14%; bottom: 16%; border-width: 3px; }
    .companion-portrait-caption { display: none; }
}