/* Homepage composition experiment. Copy, assets and shared public styles stay intact. */
.whale52-public .hero-layout{
 display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
 grid-template-rows:auto auto auto 1fr;column-gap:48px;row-gap:0;
 padding-block:64px;min-height:0;align-items:start;
}
.whale52-public .hero-content{display:contents}
.whale52-public .hero-content>.eyebrow{grid-column:1;grid-row:1}
.whale52-public .hero h1{grid-column:1;grid-row:2;min-height:0;margin:24px 0;font-size:clamp(38px,3.7vw,56px);line-height:1.08}
.whale52-public .hero-lead{grid-column:1;grid-row:3;font-size:15px;line-height:1.7;margin:0;max-width:44ch}
.whale52-public .hero-actions{grid-column:1;grid-row:4;margin-top:28px;gap:12px;flex-wrap:wrap}
.whale52-public .hero-video-showcase{grid-column:2;grid-row:1/5;align-self:center;min-height:0;margin:0;padding:0;overflow:visible}
.whale52-public .hero-video-shell{max-width:none;border-color:#58636B;background:var(--w-ink)}
.whale52-public :is(.hero-video-head,.hero-video-foot){padding:14px 16px;font-size:11px;letter-spacing:.04em}
.whale52-public :is(.hero,#demo) .dn-video-control{width:44px;height:44px;font-size:0;background:rgba(11,14,18,.9)}
.whale52-public :is(.hero,#demo) .dn-video-control::before{content:"";width:0;height:0;border-block:7px solid transparent;border-left:11px solid white;margin-left:3px}
.whale52-public :is(.hero,#demo) .dn-video-control[aria-pressed=true]::before{width:10px;height:14px;border-block:0;border-inline:3px solid white;margin-left:0}
.whale52-public #demo .demo-video-intro{margin:40px 0 32px;gap:48px}
.whale52-public #demo h2 span{color:var(--w-ink)}
.whale52-public .demo>.container>.demo-video-visual{padding:0!important;border:0;border-radius:4px;background:var(--w-surface);gap:0}
.whale52-public #demo .neon-demo-tabs{margin:0;padding:12px;gap:8px;border:1px solid var(--w-line);border-bottom:0;border-radius:4px 4px 0 0}
.whale52-public #demo .neon-demo-tabs button{min-height:44px;padding:10px 20px;font-size:14px;background:transparent;border-color:transparent}
.whale52-public #demo .neon-demo-tabs button:hover{background:var(--w-paper);border-color:var(--w-line)}
.whale52-public #demo .neon-demo-tabs button.neon-active{background:var(--w-ink);color:var(--w-paper);border-color:var(--w-ink)}
.whale52-public .demo>.container>.demo-video-visual .demo-video-frame{border-radius:0 0 4px 4px}
.whale52-public #cases .usecases-heading{grid-template-columns:1.4fr .6fr;gap:64px;align-items:end}
.whale52-public #cases h2 span{color:var(--w-paper)}
.whale52-public #cases .case-list{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0 48px;margin-top:48px}
.whale52-public #cases .case{min-height:0;padding:28px 0;border:0;border-top:1px solid #58636B;border-radius:0;background:transparent}
.whale52-public #cases .case:first-child{grid-row:1/3;padding-right:48px;border-right:1px solid #58636B}
.whale52-public #cases .case h3{font-size:25px;line-height:1.2;letter-spacing:-.035em;margin:24px 0 16px;max-width:23ch}
.whale52-public #cases .case:first-child h3{font-size:clamp(30px,3vw,42px);max-width:19ch;margin-top:48px}
.whale52-public #cases .case p{font-size:14px;line-height:1.75;max-width:53ch;flex:0}
.whale52-public #cases .case-head{color:#B5C1C8}
.whale52-public #cases .case-bottom{border:0;padding:0;margin-top:24px;color:#B5C1C8;line-height:1.6}
.whale52-public #cases .case:first-child .case-bottom{margin-top:auto;padding-top:40px}
.whale52-public #cases .case-prompt{border:0;border-top:1px solid #58636B;border-radius:0;background:transparent;margin-top:20px;padding:28px 0 0}
.whale52-public #cases .case-prompt :is(span,button){color:#B5C1C8}
.whale52-public #cases .case-prompt button{font-family:var(--w-font);font-size:13px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px) and (min-width:901px){
 .whale52-public .hero-layout{column-gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
 .whale52-public .hero-actions .btn{padding-inline:16px}
}
@media(max-width:900px){
 .whale52-public .hero-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto);padding-block:32px;gap:0}
 .whale52-public .hero h1{font-size:clamp(34px,6.5vw,52px);margin:24px 0}
 .whale52-public .hero-video-showcase{grid-column:1;grid-row:3;margin:0 0 24px;max-width:none;width:100%}
 .whale52-public .hero-lead{grid-row:4;max-width:65ch;line-height:1.6}
 .whale52-public .hero-actions{grid-row:5;margin-top:24px}
 .whale52-public #cases .usecases-heading{grid-template-columns:1fr;gap:20px}
 .whale52-public #cases .case-list{column-gap:28px}
 .whale52-public #cases .case:first-child{padding-right:28px}
}
@media(max-width:760px){
 .whale52-public #demo .demo-video-intro{grid-template-columns:1fr;gap:16px;margin:28px 0 24px}
 .whale52-public #demo .neon-demo-tabs{padding:8px}
 .whale52-public #cases .case-list{grid-template-columns:1fr;margin-top:32px}
 .whale52-public #cases .case:first-child{grid-row:auto;padding-right:0;border-right:0}
 .whale52-public #cases .case{padding:24px 0}
 .whale52-public #cases .case h3{font-size:24px;margin:20px 0 12px}
 .whale52-public #cases .case:first-child h3{font-size:30px;margin:24px 0 16px}
 .whale52-public #cases .case:first-child .case-bottom{margin-top:24px;padding-top:0}
 .whale52-public #cases .case-prompt{margin-top:0;padding-top:24px;gap:12px}
}