PageSourceSearch

https://www.solhour.ai/how-it-works

html solhour.ai collected 2026-10-05 13:26:01 UTC 54,978 bytes, 516 lines download raw bytes

1<!DOCTYPE html><html lang="en" data-scroll-behavior="smooth" class="inter_bc220a90-module__m5YftW__variable fraunces_cb49a3b4-module__LeHHTG__variable instrument_serif_1dd02c61-module__1FHk8G__variable jetbrains_mono_85d22c22-module__HuXS2q__variable h-full antialiased"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/03bda585a99c6450-s.p.0zzh68k1~whtc.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/051742360c26797e-s.p.0f97p8c3305p~.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/3c7c6164b2587822-s.p.0duriy8536ewt.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/7ebf22b5a21034f8-s.p.10_7676vm7pyy.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/e41d5df559864f9e-s.p.0gq7fw9.sy_5..woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=%2Flogos%2Fsol-hour-orange-v3-clean.png&amp;w=1080&amp;q=75 1x, /_next/image?url=%2Flogos%2Fsol-hour-orange-v3-clean.png&amp;w=2048&amp;q=75 2x"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=%2Flanding%2Fhow%2Fhero-bottle.png&amp;w=640&amp;q=75 1x, /_next/image?url=%2Flanding%2Fhow%2Fhero-bottle.png&amp;w=1920&amp;q=75 2x"/><link rel="stylesheet" href="/_next/static/chunks/0d.xp1xfcgd_5.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/0ydkxyci3bafg.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/0yb2wil16uz6h.js"/>
1<script src="/_next/static/chunks/08gwp-g~326bf.js" async=""></script>
1<script src="/_next/static/chunks/10u3y4bw1ayzs.js" async=""></script>
1<script src="/_next/static/chunks/07f1qd~q5490h.js" async=""></script>
1<script src="/_next/static/chunks/0pqt~8bl3ukh4.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-0ww0t2l.ybyh-.js" async=""></script>
1<script src="/_next/static/chunks/0_k62yrztifng.js" async=""></script>
1<script src="/_next/static/chunks/12bn.ymq6qkoo.js" async=""></script>
1<script src="/_next/static/chunks/0d3shmwh5_nmn.js" async=""></script>
1<script src="/_next/static/chunks/0qev5gd8jf4~k.js" async=""></script>
1<meta name="next-size-adjust" content=""/><title>How it works · Sol Hour</title><meta name="description" content="Four steps to a Sol Hour — you set the room, guests join in, the night unfolds, a recap arrives."/><link rel="icon" href="/favicon.ico?favicon.0ochudwmquamc.ico" sizes="32x32" type="image/x-icon"/><link rel="icon" href="/favicon-sol-32.png" sizes="32x32" type="image/png"/><link rel="icon" href="/favicon-sol.png" sizes="512x512" type="image/png"/><link rel="apple-touch-icon" href="/apple-icon.png"/>
1<script src="/_next/static/chunks/03~yq9q893hmn.js" noModule=""></script>
1</head><body class="min-h-full flex flex-col"><div hidden=""><!--$--><!--/$--></div><div class="landing-page"><style>
2  .landing-page {
3    --cream: #F4ECDE;
4    --cream-2: #FBF6EC;
5    --cream-soft: #FBF6EC;
6    --text: #190F0A;
7    --orange: #E68410;
8    --brown: #51341D;
9    --dark: #1A100B;
10    --muted: rgba(25, 15, 10, 0.72);
11    --line: rgba(81, 52, 29, 0.16);
12    --white-soft: #FFFDF8;
13    --radius-lg: 38px;
14    --radius-md: 28px;
15    --radius-sm: 18px;
16    --shadow-soft: 0 28px 60px rgba(26, 16, 11, 0.14);
17    --shadow: 0 22px 45px rgba(26, 16, 11, 0.15);
18    --container: 1220px;
19    font-family: "Inter", var(--font-inter), sans-serif;
20    background: var(--cream);
21    color: var(--text);
22    overflow-x: hidden;
23    width: 100%;
24    min-height: 100dvh;
25  }
26
27  .landing-page * { box-sizing: border-box; }
28  .landing-page img { max-width: 100%; display: block; }
29  .landing-page a { color: inherit; text-decoration: none; }
30
31  .landing-page .container {
32    width: min(var(--container), calc(100% - 64px));
33    margin: 0 auto;
34  }
35
36  .landing-page .eyebrow {
37    font-family: "Inter", var(--font-inter), sans-serif;
38    font-size: 12px;
39    line-height: 1;
40    font-weight: 500;
41    color: var(--orange);
42    text-transform: uppercase;
43    letter-spacing: 0.55em;
44    margin-bottom: 24px;
45  }
46
47  .landing-page h1,
48  .landing-page h2,
49  .landing-page h3 {
50    font-family: "Instrument Serif", var(--font-instrument-serif), Georgia, serif;
51    font-weight: 400;
52    font-style: normal;
53    color: var(--text);
54    letter-spacing: -0.055em;
55    background: none;
56    -webkit-background-clip: initial;
57    background-clip: initial;
58    -webkit-text-fill-color: currentColor;
59    filter: none;
60    margin: 0;
61  }
62
63  .landing-page h1 {
64    font-size: clamp(82px, 10.4vw, 170px);
65    line-height: 0.91;
66    max-width: 620px;
67  }
68  .landing-page h2 {
69    font-size: clamp(54px, 6.2vw, 92px);
70    line-height: 0.96;
71  }
72  .landing-page h3 {
73    font-size: clamp(32px, 3.2vw, 48px);
74    line-height: 1.02;
75  }
76  .landing-page p {
77    font-size: 20px;
78    line-height: 1.7;
79    color: var(--text);
80    font-weight: 400;
81    margin: 0;
82  }
83
84  .landing-page .btn {
85    height: 58px;
86    padding: 0 32px;
87    border-radius: 999px;
88    border: 1px solid transparent;
89    display: inline-flex;
90    align-items: center;
91    justify-content: center;
92    gap: 12px;
93    font-size: 16px;
94    font-weight: 500;
95    transition: 0.35s ease;
96    cursor: pointer;
97    white-space: nowrap;
98  }
99  .landing-page .btn-primary {
100    background: var(--orange);
101    color: white;
102    box-shadow: 0 14px 24px rgba(230, 132, 16, 0.18);
103  }
104  .landing-page .btn-primary:hover {
105    transform: translateY(-3px);
106    box-shadow: 0 20px 36px rgba(230, 132, 16, 0.28);
107    background: #f08b10;
108    color: white;
109  }
110  .landing-page .btn-secondary {
111    background: rgba(255,255,255,0.44);
112    border-color: rgba(81, 52, 29, 0.18);
113    color: var(--text);
114  }
115  .landing-page .btn-secondary:hover {
116    transform: translateY(-3px);
117    background: #fff;
118    border-color: rgba(230, 132, 16, 0.35);
119  }
120
121  /* Header */
122  .landing-page .site-header {
123    position: fixed;
124    top: 18px;
125    left: 0;
126    width: 100%;
127    z-index: 50;
128    pointer-events: none;
129  }
130  .landing-page .nav-wrap {
131    width: min(1140px, calc(100% - 64px));
132    margin: 0 auto;
133    height: 68px;
134    border-radius: 999px;
135    background: rgba(251, 246, 236, 0.78);
136    border: 1px solid rgba(81, 52, 29, 0.14);
137    box-shadow: 0 8px 24px rgba(26, 16, 11, 0.10);
138    backdrop-filter: blur(18px);
139    -webkit-backdrop-filter: blur(18px);
140    display: flex;
141    align-items: center;
142    justify-content: space-between;
143    padding: 0 24px 0 28px;
144    pointer-events: auto;
145  }
146  .landing-page .logo { width: 130px; height: auto; }
147  .landing-page .nav-links {
148    display: flex;
149    align-items: center;
150    gap: 34px;
151    font-size: 15px;
152    font-weight: 500;
153    color: var(--text);
154  }
155  .landing-page .nav-links a { transition: 0.25s ease; }
156  .landing-page .nav-links a:hover,
157  .landing-page .nav-links a.active { color: var(--orange); }
158  .landing-page .nav-cta {
159    height: 44px;
160    padding: 0 26px;
161    font-size: 15px;
162  }
163  .landing-page .nav-account-group {
164    display: flex;
165    align-items: center;
166    gap: 12px;
167  }
168  .landing-page .mobile-toggle {
169    display: none;
170    width: 44px;
171    height: 44px;
172    border-radius: 50%;
173    border: 1px solid var(--line);
174    background: #fff9ef;
175    align-items: center;
176    justify-content: center;
177    flex-direction: column;
178    gap: 5px;
179    cursor: pointer;
180  }
181  .landing-page .mobile-toggle span {
182    width: 18px;
183    height: 2px;
184    background: var(--text);
185    border-radius: 10px;
186    display: block;
187  }
188
189  /* Footer */
190  .landing-page .footer {
191    background: var(--cream);
192    padding: 34px 0 36px;
193  }
194  .landing-page .footer-inner {
195    display: flex;
196    align-items: center;
197    justify-content: space-between;
198    gap: 40px;
199  }
200  .landing-page .footer-logo { width: 175px; height: auto; }
201  .landing-page .footer-links {
202    display: flex;
203    align-items: center;
204    gap: 30px;
205    font-size: 17px;
206    color: var(--text);
207  }
208  .landing-page .footer-links a { transition: 0.25s ease; }
209  .landing-page .footer-links a:hover { color: var(--orange); }
210  .landing-page .footer-icons {
211    display: flex;
212    align-items: center;
213    gap: 18px;
214    color: var(--orange);
215  }
216  .landing-page .footer-icons a {
217    display: inline-flex;
218    align-items: center;
219    justify-content: center;
220    color: var(--orange);
221    transition: 0.25s ease;
222  }
223  .landing-page .footer-icons a:hover {
224    color: var(--text);
225    transform: translateY(-2px);
226  }
227  .landing-page .footer-icons svg {
228    display: block;
229    width: 22px;
230    height: 22px;
231  }
232
233  /* Reveal-on-scroll */
234  .landing-page [data-animate] {
235    opacity: 0;
236    transform: translateY(34px);
237    transition: opacity 0.8s ease, transform 0.8s ease;
238  }
239  .landing-page [data-animate].show {
240    opacity: 1;
241    transform: translateY(0);
242  }
243  .landing-page .delay-1 { transition-delay: 0.12s; }
244  .landing-page .delay-2 { transition-delay: 0.22s; }
245  .landing-page .delay-3 { transition-delay: 0.32s; }
246  .landing-page .delay-4 { transition-delay: 0.42s; }
247
248  /* Base responsive — container + nav shrinks */
249  @media (max-width: 1100px) {
250    .landing-page .container,
251    .landing-page .nav-wrap {
252      width: min(100% - 40px, var(--container));
253    }
254  }
255
256  @media (max-width: 860px) {
257    .landing-page .nav-links { display: none; }
258    .landing-page .nav-cta { display: none; }
259    .landing-page .nav-account-group { display: none; }
260    .landing-page .mobile-toggle { display: flex; }
261    .landing-page .nav-links.nav-links-open {
262      display: flex;
263      position: absolute;
264      top: 76px;
265      left: 20px;
266      right: 20px;
267      padding: 24px;
268      background: #FBF6EC;
269      border-radius: 24px;
270      flex-direction: column;
271      align-items: flex-start;
272      box-shadow: 0 20px 50px rgba(26,16,11,0.14);
273      gap: 20px;
274    }
275    .landing-page .nav-wrap {
276      height: 62px;
277      padding: 0 16px 0 20px;
278    }
279    .landing-page .logo { width: 115px; }
280    .landing-page .footer-inner {
281      flex-direction: column;
282      align-items: flex-start;
283    }
284    .landing-page .footer-links {
285      flex-wrap: wrap;
286      gap: 18px 24px;
287    }
288  }
289
290  @media (max-width: 560px) {
291    .landing-page .container,
292    .landing-page .nav-wrap {
293      width: calc(100% - 26px);
294    }
295    .landing-page .eyebrow {
296      font-size: 10px;
297      letter-spacing: 0.42em;
298    }
299    .landing-page .footer-logo { width: 150px; }
300  }
301
302  /* How-it-works hero */
303  .landing-page .how-hero {
304    padding: 168px 0 66px;
305    min-height: 600px;
306    background: var(--cream);
307    display: flex;
308    align-items: center;
309  }
310  .landing-page .how-hero-grid {
311    display: grid;
312    grid-template-columns: 1fr 0.92fr;
313    align-items: center;
314    gap: 90px;
315  }
316  .landing-page .how-hero h1 {
317    font-size: clamp(86px, 10.4vw, 164px);
318    line-height: 0.88;
319    max-width: 660px;
320  }
321  .landing-page .how-hero-image {
322    height: 550px;
323    border-radius: 34px;
324    overflow: hidden;
325    box-shadow: var(--shadow);
326    position: relative;
327  }
328  .landing-page .how-hero-image img {
329    width: 100%;
330    height: 100%;
331    object-fit: cover;
332    object-position: center;
333    transition: 0.55s ease;
334  }
335  .landing-page .how-hero-image:hover img {
336    transform: scale(1.045);
337  }
338
339  /* Steps */
340  .landing-page .steps-section {
341    padding: 26px 0 74px;
342    background: var(--cream);
343  }
344  .landing-page .steps-list {
345    display: flex;
346    flex-direction: column;
347    gap: 56px;
348  }
349  .landing-page .wide-step {
350    min-height: 300px;
351    border-radius: 30px;
352    overflow: hidden;
353    position: relative;
354    background: var(--dark);
355    box-shadow: 0 14px 30px rgba(26, 16, 11, 0.10);
356    transition: 0.38s ease;
357  }
358  .landing-page .wide-step:hover {
359    transform: translateY(-6px);
360    box-shadow: 0 24px 46px rgba(26, 16, 11, 0.18);
361  }
362  .landing-page .wide-step-bg {
363    position: absolute;
364    inset: 0;
365    width: 100%;
366    height: 100%;
367    object-fit: cover;
368    object-position: center;
369    transition: 0.6s ease;
370  }
371  .landing-page .wide-step:hover .wide-step-bg {
372    transform: scale(1.045);
373  }
374  .landing-page .wide-step::after {
375    content: "";
376    position: absolute;
377    inset: 0;
378    background:
379      linear-gradient(90deg, rgba(26,16,11,0.98) 0%, rgba(26,16,11,0.86) 33%, rgba(26,16,11,0.36) 66%, rgba(26,16,11,0.10) 100%),
380      linear-gradient(180deg, rgba(26,16,11,0.15), rgba(26,16,11,0.48));
381    z-index: 1;
382    pointer-events: none;
383  }
384  .landing-page .step-content {
385    position: relative;
386    z-index: 3;
387    padding: 46px 50px;
388    max-width: 610px;
389    color: white;
390  }
391  .landing-page .step-number {
392    font-size: 12px;
393    line-height: 1;
394    letter-spacing: 0.42em;
395    color: var(--orange);
396    font-weight: 600;
397    margin-bottom: 26px;
398  }
399  .landing-page .step-content h2 {
400    color: white;
401    font-size: clamp(44px, 4.5vw, 64px);
402    line-height: 0.95;
403    letter-spacing: -0.045em;
404    margin-bottom: 26px;
405  }
406  .landing-page .step-content p {
407    max-width: 520px;
408    font-size: 18px;
409    line-height: 1.55;
410    color: white;
411  }
412  .landing-page .recap-phone {
413    position: absolute;
414    z-index: 4;
415    top: 18px;
416    left: 51%;
417    width: 170px;
418    height: auto;
419    filter: drop-shadow(0 18px 26px rgba(0,0,0,0.35));
420    transition: 0.45s ease;
421  }
422  .landing-page .wide-step:hover .recap-phone {
423    transform: translateY(-8px);
424  }
425  .landing-page .wide-step-tall { height: 400px; }
426
427  /* Bottom CTA */
428  .landing-page .bottom-cta {
429    background: linear-gradient(180deg, #55331C 0%, #1A100B 100%);
430    padding: 58px 0 52px;
431    text-align: center;
432    color: white;
433  }
434  .landing-page .bottom-cta h2 {
435    color: white;
436    font-size: clamp(44px, 4.6vw, 66px);
437    line-height: 0.95;
438    letter-spacing: -0.045em;
439    margin-bottom: 8px;
440  }
441  .landing-page .bottom-cta p {
442    color: rgba(255,255,255,0.72);
443    font-size: 17px;
444    line-height: 1.4;
445    margin-bottom: 18px;
446  }
447  .landing-page .bottom-cta .btn {
448    min-width: 230px;
449    min-height: 48px;
450  }
451
452  /* How-it-works responsive */
453  @media (max-width: 1100px) {
454    .landing-page .how-hero-grid { gap: 48px; }
455    .landing-page .how-hero h1 { font-size: clamp(78px, 11vw, 130px); }
456  }
457
458  @media (max-width: 900px) {
459    .landing-page .how-hero {
460      padding: 132px 0 58px;
461      min-height: auto;
462    }
463    .landing-page .how-hero-grid { grid-template-columns: 1fr; }
464    .landing-page .how-hero-image { height: 335px; }
465    .landing-page .steps-section { padding-top: 10px; }
466    .landing-page .steps-list { gap: 34px; }
467    .landing-page .wide-step { min-height: 300px; }
468    .landing-page .wide-step::after {
469      background:
470        linear-gradient(90deg, rgba(26,16,11,0.98) 0%, rgba(26,16,11,0.80) 48%, rgba(26,16,11,0.35) 100%),
471        linear-gradient(180deg, rgba(26,16,11,0.12), rgba(26,16,11,0.52));
472    }
473    .landing-page .step-content {
474      padding: 40px 36px;
475      max-width: 560px;
476    }
477    .landing-page .recap-phone {
478      width: 138px;
479      left: auto;
480      right: 42px;
481      top: 34px;
482    }
483  }
484
485  @media (max-width: 560px) {
486    .landing-page .how-hero { padding-top: 118px; }
487    .landing-page .how-hero h1 { font-size: 75px; }
488    .landing-page .how-hero-image {
489      height: 260px;
490      border-radius: 26px;
491    }
492    .landing-page .steps-section { padding-bottom: 54px; }
493    .landing-page .wide-step {
494      min-height: 360px;
495      border-radius: 24px;
496    }
497    .landing-page .wide-step::after {
498      background: linear-gradient(180deg, rgba(26,16,11,0.94) 0%, rgba(26,16,11,0.80) 48%, rgba(26,16,11,0.42) 100%);
499    }
500    .landing-page .step-content { padding: 34px 26px; }
501    .landing-page .step-number { margin-bottom: 20px; }
502    .landing-page .step-content h2 { font-size: 45px; }
503    .landing-page .step-content p {
504      font-size: 15px;
505      max-width: 300px;
506    }
507    .landing-page .recap-phone {
508      width: 120px;
509      right: 24px;
510      top: auto;
511      bottom: 24px;
512    }
513    .landing-page .bottom-cta { padding: 48px 0 44px; }
514    .landing-page .bottom-cta h2 { font-size: 48px; }
515  }
516</style><header class="site-header"><div class="nav-wrap"><a aria-label="Sol Hour home" href="/"><img alt="Sol Hour" width="1024" height="386" decoding="async" data-nimg="1" class="logo" style="color:transparent" srcSet="/_next/image?url=%2Flogos%2Fsol-hour-orange-v3-clean.png&amp;w=1080&amp;q=75 1x, /_next/image?url=%2Flogos%2Fsol-hour-orange-v3-clean.png&amp;w=2048&amp;q=75 2x" src="/_next/image?url=%2Flogos%2Fsol-hour-orange-v3-clean.png&amp;w=2048&amp;q=75"/></a><nav class="nav-links"><a href="/">Home</a><a href="/about">About</a><a class="active" href="/how-it-works">How It Works</a><a href="https://leonysol.com/pages/sol-hour" target="_blank" rel="noopener noreferrer">For Venues</a><a href="/login">Log In</a></nav><a class="btn btn-primary nav-cta" href="/signup">Start a Sol Hour</a><button type="button" class="mobile-toggle" aria-label="Open menu" aria-expanded="false"><span></span><span></span></button></div></header><section class="how-hero"><div class="container how-hero-grid"><div data-animate="true"><div class="eyebrow">How it works</div><h1>How a<br/>Sol Hour<br/>unfolds</h1></div><div class="how-hero-image" data-animate="true"><img alt="Sol Hour bottle" width="620" height="550" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2Flanding%2Fhow%2Fhero-bottle.png&amp;w=640&amp;q=75 1x, /_next/image?url=%2Flanding%2Fhow%2Fhero-bottle.png&amp;w=1920&amp;q=75 2x" src="/_next/image?url=%2Flanding%2Fhow%2Fhero-bottle.png&amp;w=1920&amp;q=75"/></div></div></section><section class="steps-section"><div class="container"><div class="steps-list"><article class="wide-step" data-animate="true"><img alt="Set the room" loading="lazy" decoding="async" data-nimg="fill" class="wide-step-bg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;
516color:transparent" sizes="(max-width: 900px) 100vw, 1120px" srcSet="/_next/image?url=%2Flanding%2Fhow%2Fstep-1.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding%2Fhow%2Fstep-1.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding%2Fhow%2Fstep-1.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding%2Fhow%2Fstep-1.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding%2Fhow%2Fstep-1.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding%2Fhow%2Fstep-1.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding%2Fhow%2Fstep-1.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding%2Fhow%2Fstep-1.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding%2Fhow%2Fstep-1.png&amp;w=3840&amp;q=75"/><div class="step-content"><div class="step-number">01</div><h2>You set the room.</h2><p>Pick a vibe. Pick a duration. Snap a photo so you can be the DJ.</p></div></article><article class="wide-step delay-1" data-animate="true"><img alt="Guests join in" loading="lazy" decoding="async" data-nimg="fill" class="wide-step-bg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 900px) 100vw, 1120px" srcSet="/_next/image?url=%2Flanding%2Fhow%2Fstep-2.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding%2Fhow%2Fstep-2.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding%2Fhow%2Fstep-2.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding%2Fhow%2Fstep-2.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding%2Fhow%2Fstep-2.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding%2Fhow%2Fstep-2.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding%2Fhow%2Fstep-2.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding%2Fhow%2Fstep-2.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding%2Fhow%2Fstep-2.png&amp;w=3840&amp;q=75"/><div class="step-content"><div class="step-number">
51602</div><h2>Guests join in.</h2><p>A QR code on the TV. Scan, sign up, request a song.</p></div></article><article class="wide-step delay-2" data-animate="true"><img alt="The night unfolds" loading="lazy" decoding="async" data-nimg="fill" class="wide-step-bg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 900px) 100vw, 1120px" srcSet="/_next/image?url=%2Flanding%2Fhow%2Fstep-3.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding%2Fhow%2Fstep-3.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding%2Fhow%2Fstep-3.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding%2Fhow%2Fstep-3.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding%2Fhow%2Fstep-3.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding%2Fhow%2Fstep-3.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding%2Fhow%2Fstep-3.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding%2Fhow%2Fstep-3.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding%2Fhow%2Fstep-3.png&amp;w=3840&amp;q=75"/><div class="step-content"><div class="step-number">03</div><h2>The night unfolds.</h2><p>Music finds its arc. You appear on the TV as the DJ. You host.</p></div></article><article class="wide-step delay-3 wide-step-tall" data-animate="true"><img alt="A recap arrives" loading="lazy" decoding="async" data-nimg="fill" class="wide-step-bg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 900px) 100vw, 1120px" srcSet="/_next/image?url=%2Flanding%2Fhow%2Fstep-4.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding%2Fhow%2Fstep-4.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding%2Fhow%2Fstep-4.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding%2Fhow%2Fstep-4.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding%2Fhow%2Fstep-4.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding%2Fhow%2Fstep-4.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding%2Fhow%2Fstep-4.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding%2Fhow%2Fstep-4.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding%2Fhow%2Fstep-4.png&amp;w=3840&amp;q=75"/><img alt="Recap phone screen" loading="lazy" width="170" height="360" decoding="async" data-nimg="1" class="recap-phone" style="color:transparent" srcSet="/_next/image?url=%2Flanding%2Fhow%2Frecap-phone.png&amp;w=256&amp;q=75 1x, /_next/image?url=%2Flanding%2Fhow%2Frecap-phone.png&amp;w=384&amp;q=75 2x" src="/_next/image?url=%2Flanding%2Fhow%2Frecap-phone.png&amp;w=384&amp;q=75"/><div class="step-content"><div class="step-number">04</div><h2>A recap arrives.</h2><p>By morning, a short film of the night. Yours to keep.</p></div></article></div></div></section><section class="bottom-cta"><div class="container" data-animate="true"><h2>Throw your own.</h2><p>Free to host. Free to join.</p><a class="btn btn-primary" href="/signup">Start a Sol Hour</a></div></section><footer class="footer"><div class="container footer-inner"><a aria-label="Sol Hour home" href="/"><img alt="Sol Hour" loading="lazy" width="1024" height="386" decoding="async" data-nimg="1" class="footer-logo" style="color:transparent" srcSet="/_next/image?url=%2Flogos%2Fsol-hour-orange-v3-clean.png&amp;w=1080&amp;q=75 1x, /_next/image?url=%2Flogos%2Fsol-hour-orange-v3-clean.png&amp;w=2048&amp;q=75 2x" src="/_next/image?url=%2Flogos%2Fsol-hour-orange-v3-clean.png&amp;w=2048&amp;q=75"/></a><nav class="footer-links" aria-label="Footer"><a href="/about">About</a><a href="/how-it-works">How It Works</a><a href="https://leonysol.com/pages/sol-hour" target="_blank" rel="noopener noreferrer">For Venues</a><a href="/terms">Terms</a><a href="/privacy">Privacy</a></nav><div class="footer-icons"><a href="https://www.instagram.com/leonysoltequila/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"></circle></svg></a><a href="https://music.apple.com" target="_blank" rel="noopener noreferrer" aria-label="Music"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg></a><a href="/how-it-works" target="_blank" rel="noopener noreferrer" aria-label="Hours"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><polyline points="12 7 12 12 15.5 14"></polyline></svg></a></div></div></footer></div><!--$--><!--/$-->
516<section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section>
516<script src="/_next/static/chunks/0yb2wil16uz6h.js" id="_R_" async=""></script>
516<script>(self.__next_f=self.__next_f||[]).push([0])</script>
516<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[24910,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"AppProviders\"]\n3:I[39756,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\n4:I[37457,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\n10:I[68027,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0d.xp1xfcgd_5.css\",\"style\"]\n:HL[\"/_next/static/chunks/0ydkxyci3bafg.css\",\"style\"]\n:HL[\"/_next/static/media/03bda585a99c6450-s.p.0zzh68k1~whtc.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/051742360c26797e-s.p.0f97p8c3305p~.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/3c7c6164b2587822-s.p.0duriy8536ewt.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/7ebf22b5a21034f8-s.p.10_7676vm7pyy.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e41d5df559864f9e-s.p.0gq7fw9.sy_5..woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n5:T3357,"])</script>
516<script>self.__next_f.push([1,"\n  .landing-page {\n    --cream: #F4ECDE;\n    --cream-2: #FBF6EC;\n    --cream-soft: #FBF6EC;\n    --text: #190F0A;\n    --orange: #E68410;\n    --brown: #51341D;\n    --dark: #1A100B;\n    --muted: rgba(25, 15, 10, 0.72);\n    --line: rgba(81, 52, 29, 0.16);\n    --white-soft: #FFFDF8;\n    --radius-lg: 38px;\n    --radius-md: 28px;\n    --radius-sm: 18px;\n    --shadow-soft: 0 28px 60px rgba(26, 16, 11, 0.14);\n    --shadow: 0 22px 45px rgba(26, 16, 11, 0.15);\n    --container: 1220px;\n    font-family: \"Inter\", var(--font-inter), sans-serif;\n    background: var(--cream);\n    color: var(--text);\n    overflow-x: hidden;\n    width: 100%;\n    min-height: 100dvh;\n  }\n\n  .landing-page * { box-sizing: border-box; }\n  .landing-page img { max-width: 100%; display: block; }\n  .landing-page a { color: inherit; text-decoration: none; }\n\n  .landing-page .container {\n    width: min(var(--container), calc(100% - 64px));\n    margin: 0 auto;\n  }\n\n  .landing-page .eyebrow {\n    font-family: \"Inter\", var(--font-inter), sans-serif;\n    font-size: 12px;\n    line-height: 1;\n    font-weight: 500;\n    color: var(--orange);\n    text-transform: uppercase;\n    letter-spacing: 0.55em;\n    margin-bottom: 24px;\n  }\n\n  .landing-page h1,\n  .landing-page h2,\n  .landing-page h3 {\n    font-family: \"Instrument Serif\", var(--font-instrument-serif), Georgia, serif;\n    font-weight: 400;\n    font-style: normal;\n    color: var(--text);\n    letter-spacing: -0.055em;\n    background: none;\n    -webkit-background-clip: initial;\n    background-clip: initial;\n    -webkit-text-fill-color: currentColor;\n    filter: none;\n    margin: 0;\n  }\n\n  .landing-page h1 {\n    font-size: clamp(82px, 10.4vw, 170px);\n    line-height: 0.91;\n    max-width: 620px;\n  }\n  .landing-page h2 {\n    font-size: clamp(54px, 6.2vw, 92px);\n    line-height: 0.96;\n  }\n  .landing-page h3 {\n    font-size: clamp(32px, 3.2vw, 48px);\n    line-height: 1.02;\n  }\n  .landing-page p {\n    font-size: 20px;\n    line-height: 1.7;\n    color: var(--text);\n    font-weight: 400;\n    margin: 0;\n  }\n\n  .landing-page .btn {\n    height: 58px;\n    padding: 0 32px;\n    border-radius: 999px;\n    border: 1px solid transparent;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    font-size: 16px;\n    font-weight: 500;\n    transition: 0.35s ease;\n    cursor: pointer;\n    white-space: nowrap;\n  }\n  .landing-page .btn-primary {\n    background: var(--orange);\n    color: white;\n    box-shadow: 0 14px 24px rgba(230, 132, 16, 0.18);\n  }\n  .landing-page .btn-primary:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 20px 36px rgba(230, 132, 16, 0.28);\n    background: #f08b10;\n    color: white;\n  }\n  .landing-page .btn-secondary {\n    background: rgba(255,255,255,0.44);\n    border-color: rgba(81, 52, 29, 0.18);\n    color: var(--text);\n  }\n  .landing-page .btn-secondary:hover {\n    transform: translateY(-3px);\n    background: #fff;\n    border-color: rgba(230, 132, 16, 0.35);\n  }\n\n  /* Header */\n  .landing-page .site-header {\n    position: fixed;\n    top: 18px;\n    left: 0;\n    width: 100%;\n    z-index: 50;\n    pointer-events: none;\n  }\n  .landing-page .nav-wrap {\n    width: min(1140px, calc(100% - 64px));\n    margin: 0 auto;\n    height: 68px;\n    border-radius: 999px;\n    background: rgba(251, 246, 236, 0.78);\n    border: 1px solid rgba(81, 52, 29, 0.14);\n    box-shadow: 0 8px 24px rgba(26, 16, 11, 0.10);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 24px 0 28px;\n    pointer-events: auto;\n  }\n  .landing-page .logo { width: 130px; height: auto; }\n  .landing-page .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 34px;\n    font-size: 15px;\n    font-weight: 500;\n    color: var(--text);\n  }\n  .landing-page .nav-links a { transition: 0.25s ease; }\n  .landing-page .nav-links a:hover,\n  .landing-page .nav-links a.active { color: var(--orange); }\n  .landing-page .nav-cta {\n    height: 44px;\n    padding: 0 26px;\n    font-size: 15px;\n  }\n  .landing-page .nav-account-group {\n    display: flex;
516\n    align-items: center;\n    gap: 12px;\n  }\n  .landing-page .mobile-toggle {\n    display: none;\n    width: 44px;\n    height: 44px;\n    border-radius: 50%;\n    border: 1px solid var(--line);\n    background: #fff9ef;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    gap: 5px;\n    cursor: pointer;\n  }\n  .landing-page .mobile-toggle span {\n    width: 18px;\n    height: 2px;\n    background: var(--text);\n    border-radius: 10px;\n    display: block;\n  }\n\n  /* Footer */\n  .landing-page .footer {\n    background: var(--cream);\n    padding: 34px 0 36px;\n  }\n  .landing-page .footer-inner {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 40px;\n  }\n  .landing-page .footer-logo { width: 175px; height: auto; }\n  .landing-page .footer-links {\n    display: flex;\n    align-items: center;\n    gap: 30px;\n    font-size: 17px;\n    color: var(--text);\n  }\n  .landing-page .footer-links a { transition: 0.25s ease; }\n  .landing-page .footer-links a:hover { color: var(--orange); }\n  .landing-page .footer-icons {\n    display: flex;\n    align-items: center;\n    gap: 18px;\n    color: var(--orange);\n  }\n  .landing-page .footer-icons a {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--orange);\n    transition: 0.25s ease;\n  }\n  .landing-page .footer-icons a:hover {\n    color: var(--text);\n    transform: translateY(-2px);\n  }\n  .landing-page .footer-icons svg {\n    display: block;\n    width: 22px;\n    height: 22px;\n  }\n\n  /* Reveal-on-scroll */\n  .landing-page [data-animate] {\n    opacity: 0;\n    transform: translateY(34px);\n    transition: opacity 0.8s ease, transform 0.8s ease;\n  }\n  .landing-page [data-animate].show {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  .landing-page .delay-1 { transition-delay: 0.12s; }\n  .landing-page .delay-2 { transition-delay: 0.22s; }\n  .landing-page .delay-3 { transition-delay: 0.32s; }\n  .landing-page .delay-4 { transition-delay: 0.42s; }\n\n  /* Base responsive — container + nav shrinks */\n  @media (max-width: 1100px) {\n    .landing-page .container,\n    .landing-page .nav-wrap {\n      width: min(100% - 40px, var(--container));\n    }\n  }\n\n  @media (max-width: 860px) {\n    .landing-page .nav-links { display: none; }\n    .landing-page .nav-cta { display: none; }\n    .landing-page .nav-account-group { display: none; }\n    .landing-page .mobile-toggle { display: flex; }\n    .landing-page .nav-links.nav-links-open {\n      display: flex;\n      position: absolute;\n      top: 76px;\n      left: 20px;\n      right: 20px;\n      padding: 24px;\n      background: #FBF6EC;\n      border-radius: 24px;\n      flex-direction: column;\n      align-items: flex-start;\n      box-shadow: 0 20px 50px rgba(26,16,11,0.14);\n      gap: 20px;\n    }\n    .landing-page .nav-wrap {\n      height: 62px;\n      padding: 0 16px 0 20px;\n    }\n    .landing-page .logo { width: 115px; }\n    .landing-page .footer-inner {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n    .landing-page .footer-links {\n      flex-wrap: wrap;\n      gap: 18px 24px;\n    }\n  }\n\n  @media (max-width: 560px) {\n    .landing-page .container,\n    .landing-page .nav-wrap {\n      width: calc(100% - 26px);\n    }\n    .landing-page .eyebrow {\n      font-size: 10px;\n      letter-spacing: 0.42em;\n    }\n    .landing-page .footer-logo { width: 150px; }\n  }\n\n  /* How-it-works hero */\n  .landing-page .how-hero {\n    padding: 168px 0 66px;\n    min-height: 600px;\n    background: var(--cream);\n    display: flex;\n    align-items: center;\n  }\n  .landing-page .how-hero-grid {\n    display: grid;\n    grid-template-columns: 1fr 0.92fr;\n    align-items: center;\n    gap: 90px;\n  }\n  .landing-page .how-hero h1 {\n    font-size: clamp(86px, 10.4vw, 164px);\n    line-height: 0.88;\n    max-width: 660px;\n  }\n  .landing-page .how-hero-image {\n    height: 550px;\n    border-radius: 34px;\n    overflow: hidden;\n    box-shadow: var(--shadow);\n    position: relative;\n  }\n  .landing-page .how-hero-image img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n    transition: 0.55s ease;\n  }\n  .landing-page .how-hero-image:hover img {\n    transform: scale(1.045);\n  }\n\n  /* Steps */\n  .landing-page .steps-section {\n    padding: 26px 0 74px;\n    background: var(--cream);\n  }\n  .landing-page .steps-list {\n    display: flex;\n    flex-direction: column;\n    gap: 56px;\n  }\n  .landing-page .wide-step {\n    min-height: 300px;\n    border-radius: 30px;\n    overflow: hidden;\n    position: relative;\n    background: var(--dark);\n    box-shadow: 0 14px 30px rgba(26, 16, 11, 0.10);\n    transition: 0.38s ease;\n  }\n  .landing-page .wide-step:hover {\n    transform: translateY(-6px);\n    box-shadow: 0 24px 46px rgba(26, 16, 11, 0.18);\n  }\n  .landing-page .wide-step-bg {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n    transition: 0.6s ease;\n  }\n  .landing-page .wide-step:hover .wide-step-bg {\n    transform: scale(1.045);\n  }\n  .landing-page .wide-step::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      linear-gradient(90deg, rgba(26,16,11,0.98) 0%, rgba(26,16,11,0.86) 33%, rgba(26,16,11,0.36) 66%, rgba(26,16,11,0.10) 100%),\n      linear-gradient(180deg, rgba(26,16,11,0.15), rgba(26,16,11,0.48));\n    z-index: 1;\n    pointer-events: none;\n  }\n  .landing-page .step-content {\n    position: relative;\n    z-index: 3;\n    padding: 46px 50px;\n    max-width: 610px;\n    color: white;\n  }\n  .landing-page .step-number {\n    font-size: 12px;\n    line-height: 1;\n    letter-spacing: 0.42em;\n    color: var(--orange);\n    font-weight: 600;\n    margin-bottom: 26px;\n  }\n  .landing-page .step-content h2 {\n    color: white;\n    font-size: clamp(44px, 4.5vw, 64px);\n    line-height: 0.95;\n    letter-spacing: -0.045em;\n    margin-bottom: 26px;\n  }\n  .landing-page .step-content p {\n    max-width: 520px;\n    font-size: 18px;\n    line-height: 1.55;\n    color: white;\n  }\n  .landing-page .recap-phone {\n    position: absolute;\n    z-index: 4;\n    top: 18px;\n    left: 51%;\n    width: 170px;\n    height: auto;\n    filter: drop-shadow(0 18px 26px rgba(0,0,0,0.35));\n    transition: 0.45s ease;\n  }\n  .landing-page .wide-step:hover .recap-phone {\n    transform: translateY(-8px);\n  }\n  .landing-page .wide-step-tall { height: 400px; }\n\n  /* Bottom CTA */\n  .landing-page .bottom-cta {\n    background: linear-gradient(180deg, #5533
5161C 0%, #1A100B 100%);\n    padding: 58px 0 52px;\n    text-align: center;\n    color: white;\n  }\n  .landing-page .bottom-cta h2 {\n    color: white;\n    font-size: clamp(44px, 4.6vw, 66px);\n    line-height: 0.95;\n    letter-spacing: -0.045em;\n    margin-bottom: 8px;\n  }\n  .landing-page .bottom-cta p {\n    color: rgba(255,255,255,0.72);\n    font-size: 17px;\n    line-height: 1.4;\n    margin-bottom: 18px;\n  }\n  .landing-page .bottom-cta .btn {\n    min-width: 230px;\n    min-height: 48px;\n  }\n\n  /* How-it-works responsive */\n  @media (max-width: 1100px) {\n    .landing-page .how-hero-grid { gap: 48px; }\n    .landing-page .how-hero h1 { font-size: clamp(78px, 11vw, 130px); }\n  }\n\n  @media (max-width: 900px) {\n    .landing-page .how-hero {\n      padding: 132px 0 58px;\n      min-height: auto;\n    }\n    .landing-page .how-hero-grid { grid-template-columns: 1fr; }\n    .landing-page .how-hero-image { height: 335px; }\n    .landing-page .steps-section { padding-top: 10px; }\n    .landing-page .steps-list { gap: 34px; }\n    .landing-page .wide-step { min-height: 300px; }\n    .landing-page .wide-step::after {\n      background:\n        linear-gradient(90deg, rgba(26,16,11,0.98) 0%, rgba(26,16,11,0.80) 48%, rgba(26,16,11,0.35) 100%),\n        linear-gradient(180deg, rgba(26,16,11,0.12), rgba(26,16,11,0.52));\n    }\n    .landing-page .step-content {\n      padding: 40px 36px;\n      max-width: 560px;\n    }\n    .landing-page .recap-phone {\n      width: 138px;\n      left: auto;\n      right: 42px;\n      top: 34px;\n    }\n  }\n\n  @media (max-width: 560px) {\n    .landing-page .how-hero { padding-top: 118px; }\n    .landing-page .how-hero h1 { font-size: 75px; }\n    .landing-page .how-hero-image {\n      height: 260px;\n      border-radius: 26px;\n    }\n    .landing-page .steps-section { padding-bottom: 54px; }\n    .landing-page .wide-step {\n      min-height: 360px;\n      border-radius: 24px;\n    }\n    .landing-page .wide-step::after {\n      background: linear-gradient(180deg, rgba(26,16,11,0.94) 0%, rgba(26,16,11,0.80) 48%, rgba(26,16,11,0.42) 100%);\n    }\n    .landing-page .step-content { padding: 34px 26px; }\n    .landing-page .step-number { margin-bottom: 20px; }\n    .landing-page .step-content h2 { font-size: 45px; }\n    .landing-page .step-content p {\n      font-size: 15px;\n      max-width: 300px;\n    }\n    .landing-page .recap-phone {\n      width: 120px;\n      right: 24px;\n      top: auto;\n      bottom: 24px;\n    }\n    .landing-page .bottom-cta { padding: 48px 0 44px; }\n    .landing-page .bottom-cta h2 { font-size: 48px; }\n  }\n"])</script>
516<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"how-it-works\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"how-it-works\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0d.xp1xfcgd_5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0ydkxyci3bafg.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0_k62yrztifng.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"data-scroll-behavior\":\"smooth\",\"className\":\"inter_bc220a90-module__m5YftW__variable fraunces_cb49a3b4-module__LeHHTG__variable instrument_serif_1dd02c61-module__1FHk8G__variable jetbrains_mono_85d22c22-module__HuXS2q__variable h-full antialiased\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-full flex flex-col\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"landing-page\",\"children\":[[\"$\",\"style\",null,{\"children\":\"$5\"}],\"$L6\",\"$L7\",\"$L8\",\"$L9\",\"$La\",\"$Lb\"]}],[\"$Lc\"],\"$Ld\"]}],{},null,false,null]},null,false,\"$@e\"]},null,false,null],\"$Lf\",false]],\"m\":\"$undefined\",\"G\":[\"$10\",[\"$L11\",\"$L12\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"6Da1ZfX28Yl4jdRsepjNP\"}\n"])</script>
516<script>self.__next_f.push([1,"13:I[34871,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0qev5gd8jf4~k.js\"],\"HomeHeader\"]\n14:I[5500,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0qev5gd8jf4~k.js\"],\"Image\"]\n15:I[44303,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0qev5gd8jf4~k.js\"],\"StartSolHourLink\"]\n16:I[22016,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0qev5gd8jf4~k.js\"],\"\"]\n17:I[90619,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0qev5gd8jf4~k.js\"],\"HomeReveal\"]\n18:I[97367,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"OutletBoundary\"]\n19:\"$Sreact.suspense\"\n1c:I[97367,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"ViewportBoundary\"]\n1e:I[97367,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"MetadataBoundary\"]\n6:[\"$\",\"$L13\",null,{}]\n7:[\"$\",\"section\",null,{\"className\":\"how-hero\",\"children\":[\"$\",\"div\",null,{\"className\":\"container how-hero-grid\",\"children\":[[\"$\",\"div\",null,{\"data-animate\":true,\"children\":[[\"$\",\"div\",null,{\"className\":\"eyebrow\",\"children\":\"How it works\"}],[\"$\",\"h1\",null,{\"children\":[\"How a\",[\"$\",\"br\",null,{}],\"Sol Hour\",[\"$\",\"br\",null,{}],\"unfolds\"]}]]}],[\"$\",\"div\",null,{\"className\":\"how-hero-image\",\"data-animate\":true,\"children\":[\"$\",\"$L14\",null,{\"src\":\"/landing/how/hero-bottle.png\",\"alt\":\"Sol Hour bottle\",\"width\":620,\"height\":550,\"priority\":true}]}]]}]}]\n"])</script>
516<script>self.__next_f.push([1,"8:[\"$\",\"section\",null,{\"className\":\"steps-section\",\"children\":[\"$\",\"div\",null,{\"className\":\"container\",\"children\":[\"$\",\"div\",null,{\"className\":\"steps-list\",\"children\":[[\"$\",\"article\",\"01\",{\"className\":\"wide-step\",\"data-animate\":true,\"children\":[[\"$\",\"$L14\",null,{\"src\":\"/landing/how/step-1.png\",\"alt\":\"Set the room\",\"fill\":true,\"sizes\":\"(max-width: 900px) 100vw, 1120px\",\"className\":\"wide-step-bg\"}],null,[\"$\",\"div\",null,{\"className\":\"step-content\",\"children\":[[\"$\",\"div\",null,{\"className\":\"step-number\",\"children\":\"01\"}],[\"$\",\"h2\",null,{\"children\":\"You set the room.\"}],[\"$\",\"p\",null,{\"children\":\"Pick a vibe. Pick a duration. Snap a photo so you can be the DJ.\"}]]}]]}],[\"$\",\"article\",\"02\",{\"className\":\"wide-step delay-1\",\"data-animate\":true,\"children\":[[\"$\",\"$L14\",null,{\"src\":\"/landing/how/step-2.png\",\"alt\":\"Guests join in\",\"fill\":true,\"sizes\":\"(max-width: 900px) 100vw, 1120px\",\"className\":\"wide-step-bg\"}],null,[\"$\",\"div\",null,{\"className\":\"step-content\",\"children\":[[\"$\",\"div\",null,{\"className\":\"step-number\",\"children\":\"02\"}],[\"$\",\"h2\",null,{\"children\":\"Guests join in.\"}],[\"$\",\"p\",null,{\"children\":\"A QR code on the TV. Scan, sign up, request a song.\"}]]}]]}],[\"$\",\"article\",\"03\",{\"className\":\"wide-step delay-2\",\"data-animate\":true,\"children\":[[\"$\",\"$L14\",null,{\"src\":\"/landing/how/step-3.png\",\"alt\":\"The night unfolds\",\"fill\":true,\"sizes\":\"(max-width: 900px) 100vw, 1120px\",\"className\":\"wide-step-bg\"}],null,[\"$\",\"div\",null,{\"className\":\"step-content\",\"children\":[[\"$\",\"div\",null,{\"className\":\"step-number\",\"children\":\"03\"}],[\"$\",\"h2\",null,{\"children\":\"The night unfolds.\"}],[\"$\",\"p\",null,{\"children\":\"Music finds its arc. You appear on the TV as the DJ. You host.\"}]]}]]}],[\"$\",\"article\",\"04\",{\"className\":\"wide-step delay-3 wide-step-tall\",\"data-animate\":true,\"children\":[[\"$\",\"$L14\",null,{\"src\":\"/landing/how/step-4.png\",\"alt\":\"A recap arrives\",\"fill\":true,\"sizes\":\"(max-width: 900px) 100vw, 1120px\",\"className\":\"wide-step-bg\"}],[\"$\",\"$L14\",null,{\"src\":\"/landing/how/recap-phone.png\",\"alt\":\"Recap phone screen\",\"width\":170,\"height\":360,\"className\":\"recap-phone\"}],[\"$\",\"div\",null,{\"className\":\"step-content\",\"children\":[[\"$\",\"div\",null,{\"className\":\"step-number\",\"children\":\"04\"}],[\"$\",\"h2\",null,{\"children\":\"A recap arrives.\"}],[\"$\",\"p\",null,{\"children\":\"By morning, a short film of the night. Yours to keep.\"}]]}]]}]]}]}]}]\n"])</script>
516<script>self.__next_f.push([1,"9:[\"$\",\"section\",null,{\"className\":\"bottom-cta\",\"children\":[\"$\",\"div\",null,{\"className\":\"container\",\"data-animate\":true,\"children\":[[\"$\",\"h2\",null,{\"children\":\"Throw your own.\"}],[\"$\",\"p\",null,{\"children\":\"Free to host. Free to join.\"}],[\"$\",\"$L15\",null,{\"className\":\"btn btn-primary\",\"children\":\"Start a Sol Hour\"}]]}]}]\n"])</script>
516<script>self.__next_f.push([1,"a:[\"$\",\"footer\",null,{\"className\":\"footer\",\"children\":[\"$\",\"div\",null,{\"className\":\"container footer-inner\",\"children\":[[\"$\",\"$L16\",null,{\"href\":\"/\",\"aria-label\":\"Sol Hour home\",\"children\":[\"$\",\"$L14\",null,{\"src\":\"/logos/sol-hour-orange-v3-clean.png\",\"alt\":\"Sol Hour\",\"width\":1024,\"height\":386,\"className\":\"footer-logo\"}]}],[\"$\",\"nav\",null,{\"className\":\"footer-links\",\"aria-label\":\"Footer\",\"children\":[[\"$\",\"$L16\",\"About\",{\"href\":\"/about\",\"children\":\"About\"}],[\"$\",\"$L16\",\"How It Works\",{\"href\":\"/how-it-works\",\"children\":\"How It Works\"}],[\"$\",\"a\",\"For Venues\",{\"href\":\"https://leonysol.com/pages/sol-hour\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"For Venues\"}],[\"$\",\"$L16\",\"Terms\",{\"href\":\"/terms\",\"children\":\"Terms\"}],[\"$\",\"$L16\",\"Privacy\",{\"href\":\"/privacy\",\"children\":\"Privacy\"}]]}],[\"$\",\"div\",null,{\"className\":\"footer-icons\",\"children\":[[\"$\",\"a\",\"Instagram\",{\"href\":\"https://www.instagram.com/leonysoltequila/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Instagram\",\"children\":[\"$\",\"svg\",null,{\"width\":\"22\",\"height\":\"22\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"1.9\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"rect\",null,{\"x\":\"3\",\"y\":\"3\",\"width\":\"18\",\"height\":\"18\",\"rx\":\"5\"}],[\"$\",\"circle\",null,{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"4\"}],[\"$\",\"circle\",null,{\"cx\":\"17.5\",\"cy\":\"6.5\",\"r\":\"1\",\"fill\":\"currentColor\",\"stroke\":\"none\"}]]}]}],[\"$\",\"a\",\"Music\",{\"href\":\"https://music.apple.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Music\",\"children\":[\"$\",\"svg\",null,{\"width\":\"22\",\"height\":\"22\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"1.9\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"path\",null,{\"d\":\"M9 18V5l12-2v13\"}],[\"$\",\"circle\",null,{\"cx\":\"6\",\"cy\":\"18\",\"r\":\"3\"}],[\"$\",\"circle\",null,{\"cx\":\"18\",\"cy\":\"16\",\"r\":\"3\"}]]}]}],[\"$\",\"a\",\"Hours\",{\"href\":\"/how-it-works\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Hours\",\"children\":[\"$\",\"svg\",null,{\"width\":\"22\",\"height\":\"22\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"1.9\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",null,{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"9\"}],[\"$\",\"polyline\",null,{\"points\":\"12 7 12 12 15.5 14\"}]]}]}]]}]]}]}]\n"])</script>
516<script>self.__next_f.push([1,"b:[\"$\",\"$L17\",null,{}]\nc:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0qev5gd8jf4~k.js\",\"async\":true,\"nonce\":\"$undefined\"}]\nd:[\"$\",\"$L18\",null,{\"children\":[\"$\",\"$19\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@1a\"}]}]\n1b:[]\ne:\"$W1b\"\nf:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1c\",null,{\"children\":\"$L1d\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1e\",null,{\"children\":[\"$\",\"$19\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L1f\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n11:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0d.xp1xfcgd_5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n12:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0ydkxyci3bafg.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script>
516<script>self.__next_f.push([1,"1d:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
516<script>self.__next_f.push([1,"20:I[27201,[\"/_next/static/chunks/0_k62yrztifng.js\",\"/_next/static/chunks/12bn.ymq6qkoo.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"IconMark\"]\n1a:null\n1f:[[\"$\",\"title\",\"0\",{\"children\":\"How it works · Sol Hour\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Four steps to a Sol Hour — you set the room, guests join in, the night unfolds, a recap arrives.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0ochudwmquamc.ico\",\"sizes\":\"32x32\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/favicon-sol-32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon-sol.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L20\",\"6\",{}]]\n"])</script>
516</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.