/* The discovery hero keeps its existing controls and route visibility hooks. */
.intro.playful-intro {
    --home-ink:var(--ink);
    --home-paper:var(--paper);
    --home-lime:var(--brand-yellow);
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
    grid-template-areas:"copy collage" "copy quick";
    grid-template-rows:minmax(220px,1fr) auto;
    align-items:center;
    gap:16px 28px;
    position:relative;
    isolation:isolate;
    padding:28px 30px;
    margin:0 0 28px;
    border:1.5px solid var(--home-ink);
    border-radius:28px;
    background:linear-gradient(115deg,var(--cyan-soft),#fff 58%,var(--teal-soft));
    color:var(--home-ink);
}
.intro.playful-intro[hidden] { display:none; }
.playful-intro .intro-copy {
    grid-area:copy;
    position:relative;
    z-index:2;
    min-width:0;
    padding:12px 0;
    animation:home-arrive .48s ease-out both;
}
.playful-intro .home-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 20px;
    font-size:10px;
    line-height:1.3;
    font-weight:750;
    letter-spacing:1.3px;
    text-transform:uppercase;
}
.home-eyebrow>span {
    width:10px;
    height:10px;
    flex:none;
    border:1.5px solid var(--home-ink);
    border-radius:50%;
    background:var(--brand-yellow);
    box-shadow:3px 0 0 var(--home-ink);
}
.playful-intro.intro h1 {
    position:relative;
    width:max-content;
    max-width:100%;
    margin:0;
    font-family:var(--heading, 'Manrope', sans-serif);
    font-size:clamp(42px,4.3vw,69px);
    font-weight:850;
    line-height:1.02;
    letter-spacing:-.064em;
    color:var(--home-ink);
}
.playful-intro.intro h1>br { display:initial; }
.playful-intro.intro h1>span {
    display:inline-block;
    position:relative;
    z-index:0;
    color:inherit;
    white-space:nowrap;
}
.playful-intro.intro h1>span::after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:auto -3px 0;
    height:.25em;
    background:var(--home-lime);
    transform:rotate(-1.8deg);
    border-radius:35% 13% 24% 16%;
}
.playful-intro .intro-copy>p {
    max-width:290px;
    margin:22px 0 23px;
    font-size:14px;
    line-height:1.6;
    letter-spacing:0;
    color:var(--muted);
}
.playful-intro .home-create {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    min-height:48px;
    padding:7px 8px 7px 20px;
    border:1.5px solid var(--home-ink);
    border-radius:999px;
    background:var(--brand-coral);
    color:var(--home-ink);
    font-size:14px;
    font-weight:800;
    box-shadow:3px 3px 0 var(--home-ink);
}
.playful-intro .home-create>span {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--home-ink);
    color:var(--home-lime);
}
.playful-intro .home-create .icon { width:17px; height:17px; }
.playful-intro .home-create:hover { background:#ff9292; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--home-ink); }
.playful-intro .home-create:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--home-ink); }
.playful-intro .home-collage {
    grid-area:collage;
    position:relative;
    align-self:stretch;
    min-width:0;
    min-height:240px;
    pointer-events:none;
    animation:home-arrive .6s .07s ease-out both;
}
.home-collage-orbit {
    position:absolute;
    width:73%;
    height:91%;
    left:16%;
    top:3%;
    border-radius:50%;
    background:var(--brand-cyan);
    transform:rotate(-15deg);
}
.home-photo {
    position:absolute;
    margin:0;
    padding:5px;
    border:1.5px solid var(--home-ink);
    border-radius:15px;
    background:var(--home-paper);
    box-shadow:2px 3px 0 #10343b1f;
    overflow:hidden;
}
.home-photo img { display:block; width:100%; height:100%; object-fit:cover; border-radius:9px; }
.home-photo-coffee { z-index:2; left:2%; top:11%; width:66%; height:63%; transform:rotate(-8deg); }
.home-photo-coffee img { object-position:46% 50%; }
.home-photo-beach { z-index:1; right:1%; top:0; width:33%; height:76%; transform:rotate(9deg); }
.home-photo-beach img { object-position:27% 74%; }
.home-photo-games { z-index:3; width:49%; height:48%; right:1%; bottom:0; transform:rotate(5deg); }
.home-photo-games img { object-position:53% 50%; }
.home-spark { position:absolute; width:40px; height:40px; top:0; left:1%; z-index:4; color:var(--brand-coral); transform:rotate(8deg); }
.home-sticker {
    position:absolute;
    z-index:4;
    bottom:0;
    left:10%;
    display:block;
    padding:13px 16px;
    border:1.5px solid var(--home-ink);
    border-radius:50%;
    background:var(--brand-yellow);
    box-shadow:2px 2px 0 var(--home-ink);
    color:var(--home-ink);
    font-family:Georgia,serif;
    font-size:19px;
    font-style:italic;
    line-height:1.02;
    text-align:center;
    transform:rotate(-11deg);
}
.home-sticker svg { width:15px; height:15px; vertical-align:middle; }
.home-swoop { position:absolute; width:72px; height:40px; bottom:-5px; left:43%; z-index:5; color:var(--brand-teal); transform:rotate(-22deg); }
.playful-intro .free-card {
    grid-area:quick;
    justify-self:stretch;
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    max-width:none;
    min-height:61px;
    padding:10px 11px 10px 14px;
    border:1.5px solid var(--home-ink);
    border-radius:16px;
    background:var(--teal-deep);
    color:#fff;
    overflow:visible;
}
.playful-intro .free-card .bolt-badge { display:grid; width:27px; height:27px; border:0; background:none; color:var(--home-lime); transform:rotate(-10deg); }
.playful-intro .free-card .bolt-badge .icon { width:25px; height:25px; fill:var(--home-lime); }
.playful-intro .free-card h2 { margin:0; font-family:var(--heading, 'Manrope', sans-serif); font-size:18px; font-weight:800; line-height:1.2; letter-spacing:-.6px; white-space:nowrap; }
.playful-intro .free-card .button {
    grid-column:auto;
    grid-row:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0 0 0 auto;
    min-height:40px;
    width:auto;
    padding:9px 13px;
    border:1px solid #ffffff35;
    border-radius:999px;
    background:var(--home-paper);
    color:var(--home-ink);
    font-size:12px;
    font-weight:750;
    line-height:1.3;
    white-space:nowrap;
}
.playful-intro .free-card .button:hover { background:var(--home-lime); }
.playful-intro .free-card .button>.icon { width:17px; height:17px; }
@keyframes home-arrive { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:1100px) and (min-width:741px) {
    .intro.playful-intro { gap:14px 20px; padding:24px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
    .playful-intro.intro h1 { font-size:clamp(38px,4.65vw,51px); }
    .playful-intro .home-collage { min-height:223px; }
    .playful-intro .free-card { gap:5px; padding:8px 9px; }
    .playful-intro .free-card .bolt-badge { width:21px; }
    .playful-intro .free-card h2 { font-size:16px; }
    .playful-intro .free-card .button { padding:9px 11px; gap:6px; }
}
@media (max-width:740px) {
    .intro.playful-intro {
        grid-template-columns:1fr;
        grid-template-areas:"copy" "collage" "quick";
        grid-template-rows:auto 94px auto;
        gap:14px;
        margin-bottom:22px;
        padding:21px 18px 14px;
        border-radius:22px;
    }
    .playful-intro .intro-copy { padding:0; }
    .playful-intro .home-eyebrow { margin-bottom:13px; font-size:8px; letter-spacing:1.05px; gap:7px; }
    .home-eyebrow>span { width:8px; height:8px; }
    .playful-intro.intro h1 { font-size:clamp(34px,10.9vw,55px); line-height:1.01; letter-spacing:-.065em; }
    .playful-intro .intro-copy>p { max-width:none; margin:13px 0 14px; font-size:11px; line-height:1.5; }
    .playful-intro .home-create { min-height:44px; padding:5px 6px 5px 17px; gap:23px; font-size:12px; box-shadow:2px 2px 0 var(--home-ink); }
    .playful-intro .home-create>span { width:30px; height:30px; }
    .playful-intro .home-collage { min-height:0; margin:0 4px; }
    .home-collage-orbit { left:18%; top:0; width:63%; height:100%; border-radius:50%; }
    .home-photo { padding:3px; border-radius:9px; }
    .home-photo img { border-radius:5px; }
    .home-photo-coffee { left:1%; top:4%; width:48%; height:96%; transform:rotate(-5deg); }
    .home-photo-beach { right:29%; top:-4%; width:24%; height:102%; transform:rotate(7deg); }
    .home-photo-games { right:0; bottom:0; width:34%; height:87%; transform:rotate(5deg); }
    .home-spark { top:-5px; left:42%; width:22px; height:22px; }
    .home-sticker { left:36%; bottom:-3px; padding:7px 10px; font-size:13px; box-shadow:1px 1px 0 var(--home-ink); }
    .home-sticker svg { width:11px; height:11px; }
    .home-swoop { display:none; }
    .playful-intro .free-card { min-height:60px; gap:8px; padding:7px 8px 7px 12px; border-radius:13px; }
    .playful-intro .free-card h2 { font-size:17px; }
    .playful-intro .free-card .bolt-badge { width:24px; height:24px; }
    .playful-intro .free-card .button { min-height:44px; padding:9px 13px; font-size:11px; gap:10px; }
}
@media (max-width:360px) {
    .intro.playful-intro { padding:18px 14px 12px; gap:12px; grid-template-rows:auto 84px auto; }
    .playful-intro.intro h1 { font-size:10.7vw; }
    .playful-intro .intro-copy>p { max-width:220px; }
    .playful-intro .free-card { gap:5px; padding-left:8px; }
    .playful-intro .free-card h2 { font-size:15px; }
    .playful-intro .free-card .bolt-badge { width:20px; }
    .playful-intro .free-card .button { padding:9px 10px; gap:7px; }
}
@media (prefers-reduced-motion:reduce) {
    .playful-intro .intro-copy,.playful-intro .home-collage { animation:none; }
    .playful-intro .home-create { transition:none; }
    .playful-intro .home-create:hover,.playful-intro .home-create:active { transform:none; }
}