/* Reuse the original Tally template. Every added rule is scoped to Trio Joy. */
.trio-section{margin-top:76px;scroll-margin-top:110px}
.trio-section .product-copy,.trio-section .product-identity>div{min-width:0}
.trio-section .product-identity img{flex-shrink:0}
.trio-section .product-hero{background:linear-gradient(135deg,#fff3cc 0%,#f6e4be 44%,#d4ead7 100%);color:#24523e;height:var(--trio-template-height,auto);min-height:0}
.trio-section .product-copy{padding-block:clamp(26px,5vw,70px)}
.trio-section .product-identity span{color:#63734b}
.trio-section .product-copy>p{color:#53614d}
.trio-section .phone-stage{background:radial-gradient(ellipse at 50% 65%,#ffffffa3 0%,#fff0 72%)}
.trio-section .preview-language-card figcaption{color:#476348}
.trio-section .trio-screen-stack{position:relative;aspect-ratio:1280/2617;width:100%;background:#fff8e9;isolation:isolate}
.trio-section .trio-screen-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;visibility:hidden;pointer-events:none}
.trio-section .trio-screen-stack img.is-active{visibility:visible}
.trio-section a:focus-visible,.trio-section button:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
@media(max-width:640px){.trio-section{margin-top:48px;scroll-margin-top:88px}}