/* Context-specific Pipo scenes: task, earned star, agreed gift and first try. */
.cycle-heading{display:block;text-align:center;max-width:740px;margin:0 auto 30px}
.how-section .cycle-heading h2{font-size:1.9375rem;line-height:1.12;max-width:23ch;margin-inline:auto;text-align:center}
.cycle-heading>p{margin-top:14px}
.phone-visual>img{aspect-ratio:1;object-fit:contain}
.experience-section .demo-welcome{display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:12px;min-height:140px;margin:8px 0 18px}
.experience-section .demo-welcome>div{min-width:0}
.experience-section .demo-welcome>.demo-pipo{width:112px;height:132px;aspect-ratio:1;object-fit:contain;object-position:center bottom;align-self:end}
.final-section{background:var(--coralTint);color:var(--ink);border-top:1px solid var(--mist)}
.final-layout.pipo-invitation{display:grid;grid-template-columns:minmax(112px,.85fr) minmax(0,1.15fr);column-gap:18px;row-gap:16px;align-items:center}
.pipo-invitation>.pipo-try-scene{display:flex;align-items:center;justify-content:center;grid-column:1;grid-row:2;min-width:0}
.pipo-try-scene>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;max-width:240px}
.pipo-invitation>.final-copy{display:contents}
.pipo-invitation h2{grid-column:1/-1;grid-row:1;font-size:1.75rem;line-height:1.18;letter-spacing:-.025em;text-align:left}
.pipo-invitation .button{grid-column:1/-1;grid-row:3;margin-top:0;width:100%}
.pipo-invitation .aux{grid-column:2;grid-row:2;margin:0;text-align:left;color:var(--ink)}
@media(min-width:600px){
 .final-layout.pipo-invitation{grid-template-columns:minmax(180px,240px) minmax(0,540px);column-gap:32px;justify-content:center}
 .pipo-invitation>.pipo-try-scene{grid-row:1/4}
 .pipo-invitation h2{grid-column:2;font-size:2rem}
 .pipo-invitation .button{grid-column:2;grid-row:3;width:auto;justify-self:start}
 .pipo-invitation .aux{grid-column:2;grid-row:2;text-align:left}
}
@media(min-width:900px){
 .cycle-heading{margin-bottom:32px}
 .how-section .cycle-heading h2{font-size:2.5rem;max-width:none}
 .cycle-heading>p{margin-top:16px}
 .experience-section .demo-welcome{grid-template-columns:minmax(0,1fr) 148px;min-height:150px;gap:16px;margin:0}
 .experience-section .demo-welcome>.demo-pipo{width:148px;height:148px}
 .final-layout.pipo-invitation{grid-template-columns:minmax(240px,310px) minmax(0,620px);grid-template-rows:auto;column-gap:48px;row-gap:0}
 .pipo-invitation>.pipo-try-scene{grid-row:1}
 .pipo-invitation>.final-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;grid-column:2;grid-row:1;min-width:0}
 .pipo-try-scene>img{max-width:310px}
 .pipo-invitation h2{font-size:2.5rem;max-width:27ch}
 .pipo-invitation .button{min-width:270px;margin-top:0}
}
@media(max-width:359px){
 .how-section .cycle-heading h2{font-size:1.75rem}
 .experience-section .demo-welcome{grid-template-columns:minmax(0,1fr) 94px;gap:8px}
 .experience-section .demo-welcome>.demo-pipo{width:94px;height:124px}
 .final-layout.pipo-invitation{grid-template-columns:96px minmax(0,1fr);column-gap:12px}
 .pipo-invitation h2{font-size:1.5rem}
 .pipo-invitation .button{font-size:1rem;padding-inline:14px;gap:10px}
}