/* Draft homepage refinement. No shared page styles or recording behavior. */
#top.home-story{position:relative;isolation:isolate;overflow-x:clip}
.hero-aqua-ribbon{position:absolute;inset:0 0 auto;width:100%;height:330px;z-index:-1;pointer-events:none}
#top .wl-hero{max-width:1120px;width:calc(100% - 64px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:12px;padding:16px 0 12px;overflow:visible;align-items:center}
#top .quick-start-shell{grid-column:1/-1;width:min(100%,820px);margin:0 auto 10px;z-index:5}
.quick-submit{color:#1C2B4A;transition:background .15s}
.quick-submit:hover{background:#fa927f}.quick-submit:disabled{opacity:.55;cursor:wait}
.quick-field:focus-within{outline:2px solid #138C9D;outline-offset:3px;border-radius:12px}
.quick-submit:focus-visible,.quick-explore:focus-visible{outline:3px solid #138C9D;outline-offset:4px}
#top .wl-copy-block{padding:0 0 28px;align-self:center}
#top .wl-copy h1{font-size:clamp(40px,4.6vw,60px);line-height:1.06;letter-spacing:-.045em;margin:0 0 18px}
#top .wl-description{font-size:18px;line-height:1.45;max-width:500px;margin:0 0 22px}
#top .hero-reassurance{max-width:490px;margin:20px 0 16px;gap:12px}
#top .hero-reassurance svg{height:32px;width:30px}
#top .hero-reassurance li{font-size:12px;font-weight:500;gap:8px}
#top .wl-scene.chat-scene{padding:22px 0 74px;overflow:visible}
#top .hero-sweep{width:170%;height:calc(100% + 36px);left:-47%;right:auto;top:-3px;bottom:auto}
#top .chat-player{border:3px solid white!important;border-radius:20px!important}
#top .chat-player .wl-video{border-radius:17px!important}
#top .chat-player::before{display:none}
#top .chat-player .hero-prompt-label{left:-18px;top:-28px;font-size:12px;padding:7px 12px;z-index:8}
/* Keep conversation on the edges and the controls clear; event timing stays untouched. */
#top .chat-player .chat-viewport{inset:31% -82px 18px!important}
#top .chat-entry{width:210px}
#top .chat-entry.invite-entry{width:246px}
#top .chat-entry.wavellama-entry{width:240px}
/* Four original occasion shortcuts, with no heading, cards or section field. */
.hero-occasion-strip{position:relative;margin:8px 0 0;padding:12px 0 8px;background:transparent}
.hero-section-divider{display:block;position:absolute;bottom:100%;left:0;width:100%;height:28px;pointer-events:none}
.hero-occasion-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:calc(100% - 48px);max-width:520px;margin:0 auto;padding:0}
.hero-occasion-row a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:54px;padding:3px 0;color:#1C2B4A;text-decoration:none;font:600 12px/1.3 'DM Sans',Arial,sans-serif;text-align:center;background:none;border:0;border-radius:0;box-shadow:none}
.hero-occasion-row svg{width:24px;height:24px;flex:none}
.hero-occasion-row a:hover span{text-decoration:underline;text-underline-offset:3px}
.hero-occasion-row a:focus-visible{outline:3px solid #138C9D;outline-offset:3px;border-radius:5px}
.reassurance-mobile-break{display:none}
@media(min-width:761px) and (max-width:1000px){
 #top .wl-hero{width:calc(100% - 48px);column-gap:24px}
 #top .wl-copy h1{font-size:clamp(36px,4.8vw,48px)}
 #top .wl-description{font-size:16px}
 #top .hero-reassurance{gap:5px}#top .hero-reassurance li{font-size:10px}
 #top .chat-player .chat-viewport{inset:31% -54px 18px!important}
}
@media(max-width:760px){
 .hero-aqua-ribbon{display:none}
 #top .wl-hero{display:flex;flex-direction:column;width:calc(100% - 28px)!important;padding:8px 0 0!important;gap:0!important;overflow:visible!important}
 #top .wl-copy-block,#top .wl-conversion{display:contents!important}
 #top .wl-copy{order:0!important;text-align:center!important;width:100%}
 #top .wl-copy h1{font-size:34px!important;line-height:1.06!important;margin:0 0 10px!important;letter-spacing:-.04em!important}
 #top .wl-description{font-size:16px!important;line-height:1.35!important;text-align:center!important;max-width:330px!important;margin:0 auto 15px!important}
 #top .quick-start-shell{order:1!important;width:100%;max-width:500px;margin:0 auto 4px}
 #top .hero-quick-start{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.18fr) 44px;gap:4px;padding:8px 7px 8px 12px;border-radius:50px;box-shadow:0 5px 20px #1C2B4A0c;min-height:62px}
 #top .quick-field,#top .quick-field+.quick-field{display:grid;grid-template-columns:19px minmax(0,1fr);column-gap:6px;padding:0;border:0;border-radius:0;min-height:44px}
 #top .quick-field+.quick-field{border-left:1px solid #1C2B4A14;padding-left:9px}
 #top .quick-field>svg{width:19px;height:24px}
 #top .quick-field>span{font-size:9px;line-height:1.25;align-self:end}
 /* Whole labelled field is tappable; compact visible text, native select menu. */
 #top .quick-field select{font-size:11px;line-height:1.4;min-height:22px;padding:0 1px 0 0;font-weight:700;align-self:start;letter-spacing:-.02em}
 #top .quick-submit{width:44px;height:44px;min-height:44px;margin:0;border-radius:50%;color:#1C2B4A}
 #top .quick-submit>span{display:none}#top .quick-submit>svg{width:23px;height:23px}
 #top .quick-explore{font-size:10px;line-height:1.3;margin:4px 12px 0 auto;padding:2px 0;min-height:0}
 #top .quick-start-error{font-size:12px;margin:5px 10px}
 #top .hero-reassurance{order:2!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:5px 0 7px;width:100%;max-width:390px}
 #top .hero-reassurance li{font-size:11px;line-height:1.3;gap:4px;white-space:normal}
 #top .hero-reassurance li:nth-child(3)>span{max-width:78px}
 #top .hero-reassurance svg{width:22px;height:25px}
 #top .wl-scene.chat-scene{order:3!important;width:100%!important;padding:32px 0 64px!important;margin:0!important;--mobile-media-h:clamp(330px,calc(100svh - 335px),490px)}
 #top .chat-scene .chat-player{width:calc(var(--mobile-media-h)*.5625)!important;height:var(--mobile-media-h)!important;max-width:calc(100% - 24px)!important;border-radius:17px!important}
 #top .chat-player .wl-video{border-radius:14px!important}
 #top .chat-player .hero-prompt-label{top:auto;bottom:calc(100% + 5px);left:-2px;font-size:12px;padding:6px 10px}
 #top .hero-sweep-mobile{top:1px;height:100%;left:calc((100% - 100vw)/2);width:100vw}
 #top .chat-player .chat-viewport{inset:auto!important;bottom:18px!important;height:62%!important;width:min(325px,calc(100vw - 36px))!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}
 #top .chat-entry,#top .chat-entry.invite-entry,#top .chat-entry.wavellama-entry{width:100%;padding-inline:3px}
 #top .wl-actions{order:4!important;margin:6px auto 22px!important;align-self:center}
 #top .wl-conversion .wl-watch{font-size:14px!important}
 .hero-occasion-strip{margin-top:6px;padding:8px 0 4px}
 .hero-section-divider{height:22px}
 .hero-occasion-row{width:calc(100% - 28px);max-width:390px;gap:4px}
 .hero-occasion-row a{font-size:11px;min-height:52px}
 .hero-occasion-row svg{width:23px;height:23px}
 .reassurance-mobile-break{display:block}

}
@media(max-width:360px){
 #top .hero-quick-start{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr) 44px;padding-left:8px;gap:2px}
 #top .quick-field,#top .quick-field+.quick-field{grid-template-columns:15px minmax(0,1fr);column-gap:4px}
 #top .quick-field+.quick-field{padding-left:5px}#top .quick-field>svg{width:15px}#top .quick-field select{font-size:10px}
 #top .hero-reassurance li{font-size:11px}
}
/* The visible label/value stays still; the native select covers the full 44px field. */
.quick-field{min-height:48px}
.quick-field>.quick-value{grid-column:2;grid-row:2;font:700 17px/1.4 Manrope,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.quick-field select{position:absolute;inset:0;width:100%;height:100%;min-height:44px;opacity:0;font-size:16px!important;cursor:pointer}
@media(max-width:760px){
 #top .quick-field>.quick-value{font-size:12px;line-height:1.4;align-self:start;font-weight:700;letter-spacing:-.02em}
 #top .quick-field>span:not(.quick-value){font-size:10px}
 #top .hero-reassurance li{font-size:11px}
}
@media(max-width:360px){#top .quick-field>.quick-value{font-size:11px}#top .hero-reassurance li{font-size:11px}}
/* Compact, consistent occasion shortcuts; the existing icons stay intact. */
.hero-occasion-icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:#D1E8EC;color:#138C9D}
.hero-occasion-icon svg{width:25px;height:25px;stroke:#138C9D}
.hero-occasion-row a{gap:6px;min-height:70px}
@media(max-width:760px){.hero-occasion-icon{width:38px;height:38px;border-radius:11px}.hero-occasion-icon svg{width:23px;height:23px}.hero-occasion-row a{min-height:62px;font-size:11px}}