/* LazyBrief waitlist page. Layout only: every colour, radius, space and type value comes from tokens.css,
   and every component class (.lb-btn, .lb-card, .lb-input, .lb-chip, .lb-mesh) from components.css. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); overflow-x: hidden; }
img { max-width: 100%; }
.wl-wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--margin-tablet); padding-right: var(--margin-tablet); }
.wl-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; margin: 0; }
.wl-h2 { font-size: clamp(40px, 5.2vw, 72px); line-height: 0.98; }
.wl-lede { font: 400 20px/30px var(--font-sans); margin: 0; }
.wl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Navigation */
.wl-top { position: sticky; top: 12px; z-index: 10; padding: 12px var(--margin-tablet) 0; max-width: calc(var(--container) + 64px); margin: 0 auto; box-sizing: border-box; }

/* Page ground: one gradient from top to bottom */
.wl-page { margin-top: -88px; padding-top: 88px;
  background-color: var(--grad-lilac);
  background-image:
    radial-gradient(900px 720px at 0% 0%, var(--grad-mint) 0, transparent 100%),
    radial-gradient(820px 620px at 100% 0%, var(--grad-orchid) 0, transparent 100%),
    radial-gradient(760px 600px at 100% 780px, var(--grad-orange) 0, transparent 100%),
    linear-gradient(180deg, var(--grad-lilac) 0%, var(--grad-sky) 30%, var(--grad-mint) 46%, var(--grad-lilac) 64%, var(--grad-orchid) 84%, var(--grad-pink) 100%);
}

/* Hero */
.wl-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: center; padding-top: var(--space-20); padding-bottom: var(--space-24); }
.wl-hero h1 { font-size: clamp(64px, 10.5vw, 152px); line-height: 0.88; letter-spacing: -0.03em; }
.wl-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.wl-hero__art { position: relative; min-height: 600px; }
.wl-hero__photo { position: absolute; inset: 0 0 56px 56px; border-radius: var(--radius-2xl); overflow: hidden; }
.wl-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.wl-hero__sticker { position: absolute; top: 28px; left: 0; }
.wl-hero__doc { position: absolute; left: 0; bottom: 0; width: min(320px, 78%); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-2); }

/* Waitlist form */
.wl-form { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--space-3); }
.wl-form__row { display: flex; gap: var(--space-2); padding: 6px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-md); }
.wl-form__row .lb-input { border: 0; background: transparent; border-radius: var(--radius-pill); min-height: var(--control-lg); padding-left: var(--space-5); box-shadow: none; }
.wl-form__row .lb-input:focus { outline-offset: -2px; }
.wl-form__row .lb-btn { flex: none; }
.wl-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wl-form legend { float: left; margin-right: var(--space-2); padding: 0; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.wl-form .lb-chip { position: relative; }
.wl-form .lb-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wl-form .lb-chip:has(input:checked) { background: var(--action); color: var(--on-action); border-color: var(--action); }
.wl-form .lb-chip:has(input:focus-visible) { outline: var(--border-width-strong) solid var(--accent); outline-offset: 2px; }
.wl-form__note { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.wl-form__msg:empty { display: none; }
.wl-form__msg { margin: 0; font: 500 14px/20px var(--font-sans); color: var(--danger); }
.wl-hp { position: absolute; left: -9999px; }
.wl-done { display: none; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); max-width: 560px; }
.wl-done img { width: 56px; height: 56px; flex: none; }
.wl-done strong { display: block; font: 400 28px/1.1 var(--font-serif); }
.wl-done span { font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }
.wl-form.is-done { display: none; }
.wl-form.is-done + .wl-done { display: flex; }

/* Sections */
.wl-section { padding-bottom: var(--space-24); }
.wl-hero > *, .wl-voice > *, .wl-doc > *, .wl-cta > * { min-width: 0; }
.wl-head { display: flex; flex-direction: column; gap: var(--space-5); max-width: 760px; margin-bottom: var(--space-10); }
.wl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.wl-step { padding: var(--space-10); border-radius: var(--radius-2xl); display: flex; flex-direction: column; gap: var(--space-3); min-height: 380px; }
.wl-step__n { font: 400 168px/0.8 var(--font-serif); }
.wl-step h3 { font: 400 40px/1 var(--font-serif); margin: auto 0 0; }
.wl-step p { margin: 0; font-size: 18px; line-height: 28px; }
.wl-step--mint { background: var(--grad-mint); }
.wl-step--sun { background: var(--sun); color: #111014; }
.wl-step--ink { background: var(--action); color: var(--on-action); }

.wl-voice { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: center; padding: var(--space-16); border-radius: var(--radius-2xl); background: var(--surface); }
.wl-voice__demo { padding: var(--space-10); border-radius: var(--radius-2xl); background: linear-gradient(160deg, var(--grad-mint) 0%, var(--grad-sky) 35%, var(--grad-lilac) 70%, var(--grad-orchid) 100%); display: flex; flex-direction: column; gap: var(--space-6); }
.wl-voice__bar { display: flex; align-items: center; gap: var(--space-5); }
.wl-voice__bar .lb-wave { flex: 1; height: 72px; gap: 5px; }
.wl-voice__bar .lb-wave i { width: 6px; border-radius: 3px; }
.wl-voice__text { margin: 0; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); font: 400 22px/34px var(--font-sans); }
/* Words land one by one, then the line resets and loops (timed in src/waitlist/behaviour.ts). */
.wl-word { display: inline-block; opacity: 0; transform: translateY(var(--space-1)); transition: opacity 0.34s ease, transform 0.34s ease; }
.wl-word.is-on { opacity: 1; transform: none; }

.wl-doc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: center; }
.wl-doc__page { transform: rotate(-1.5deg); }
.wl-doc__keys { display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; }

.wl-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.wl-way { position: relative; overflow: hidden; padding: var(--space-12); border-radius: var(--radius-2xl); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-height: 520px; color: #111014; }
.wl-way h3 { font: 400 clamp(52px, 6vw, 88px)/0.92 var(--font-serif); letter-spacing: -0.02em; margin: 0; }
.wl-way p { margin: 0; max-width: 300px; font-size: 18px; line-height: 28px; }
.wl-way__face { position: absolute; right: -36px; bottom: -36px; width: 280px; height: 280px; border-radius: 50%; overflow: hidden; }
.wl-way__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-way--peach { background: #fdb089; }
.wl-way--lilac { background: #d6d2fa; }

.wl-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wl-chips span { display: inline-flex; align-items: center; height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); background: var(--surface); font: 500 16px/24px var(--font-sans); }
.wl-chips span:first-child { background: var(--action); color: var(--on-action); }

.wl-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.wl-faq > div { padding: var(--space-8) var(--space-10); border-radius: var(--radius-xl); background: var(--surface-glass); }
.wl-faq h3 { font: 400 30px/1.1 var(--font-serif); margin: 0 0 var(--space-2); }
.wl-faq p { margin: 0; font-size: 17px; line-height: 26px; }

.wl-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-10); align-items: center; padding: var(--space-16); border-radius: var(--radius-2xl); background: var(--sun); color: #111014; }
.wl-cta h2 { font-size: clamp(64px, 11vw, 168px); line-height: 0.86; letter-spacing: -0.03em; }
.wl-cta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.wl-cta__face { width: 100%; max-width: 380px; justify-self: center; }
.wl-cta .wl-form__note, .wl-cta .wl-form legend { color: #111014; }

.wl-foot { background: #111014; color: #fffcea; padding: var(--space-12) 0; }
.wl-foot .wl-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.wl-foot img { height: 34px; display: block; }
.wl-foot nav { display: flex; gap: var(--space-8); font: 500 14px/20px var(--font-sans); }
.wl-foot a { color: #fffcea; text-decoration: none; }
.wl-foot a:hover { text-decoration: underline; }
.wl-foot small { font: 400 14px/20px var(--font-sans); color: #beb5ca; }

.wl-foot__link { background: none; border: 0; padding: 0; color: #fffcea; font: inherit; cursor: pointer; }
.wl-foot__link:hover { text-decoration: underline; }

/* Cookie control */
.wl-cookie { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 20; width: min(440px, calc(100vw - 48px)); box-sizing: border-box; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.wl-cookie[hidden] { display: none; }
.wl-cookie h2 { font-size: 28px; line-height: 1.1; }
.wl-cookie p { margin: 0; font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }
.wl-cookie__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.wl-cookie__actions .lb-btn { flex: 1; }

/* Tablet */
@media (max-width: 1023px) {
  .wl-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-top: var(--space-12); padding-bottom: var(--space-16); }
  .wl-hero__art { min-height: 520px; max-width: 560px; }
  .wl-steps { grid-template-columns: 1fr; }
  .wl-step { min-height: 0; flex-direction: row; align-items: center; gap: var(--space-8); padding: var(--space-8); }
  .wl-step__n { font-size: 120px; width: 64px; flex: none; }
  .wl-step h3 { margin: 0 0 var(--space-1); font-size: 34px; }
  .wl-voice, .wl-doc, .wl-cta { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .wl-voice { padding: var(--space-10); }
  .wl-cta__face { max-width: 220px; justify-self: start; order: -1; }
  .wl-section { padding-bottom: var(--space-16); }
}

/* Mobile */
@media (max-width: 767px) {
  .wl-wrap { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
  .wl-section { padding-bottom: var(--space-12); }
  .wl-top { padding: 8px var(--margin-mobile) 0; top: 8px; }
  .wl-top .lb-nav { height: 56px; padding: 0 6px 0 var(--space-4); }
  .wl-top .lb-nav__logo { height: 24px; }
  .wl-lede { font-size: 17px; line-height: 26px; }
  .wl-hero { padding-top: var(--space-10); padding-bottom: var(--space-12); gap: var(--space-10); }
  .wl-top .lb-nav__links { display: none; }
  .wl-top .lb-btn { height: var(--control-md); padding: 0 var(--space-4); font-size: 14px; }
  .wl-voice__bar { gap: var(--space-3); }
  .wl-voice__bar .lb-rec { width: 56px; height: 56px; }
  .wl-voice__bar .lb-wave { height: 48px; overflow: hidden; }
  .wl-voice__bar .lb-wave i:nth-child(n+12) { display: none; }
  /* Phone order: eyebrow, headline, photo, body copy, form */
  .wl-hero { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .wl-hero__copy { display: contents; }
  .wl-hero__copy > .lb-sticker { order: 1; align-self: flex-start; }
  .wl-hero__copy > h1 { order: 2; }
  .wl-hero__art { order: 3; min-height: 440px; max-width: none; margin: var(--space-2) 0; }
  .wl-hero__copy > .wl-lede { order: 4; }
  .wl-hero__copy > .wl-form { order: 5; max-width: none; }
  .wl-hero__copy > .wl-done { order: 6; max-width: none; }
  .wl-hero__photo { inset: 0 0 48px 32px; border-radius: var(--radius-xl); }
  .wl-form__row { flex-direction: column; border-radius: var(--radius-xl); padding: var(--space-2); }
  .wl-form__row .lb-btn { width: 100%; }
  .wl-form legend { float: none; width: 100%; margin-bottom: var(--space-1); }
  .wl-step { padding: var(--space-6); gap: var(--space-5); border-radius: var(--radius-xl); }
  .wl-step__n { font-size: 96px; width: 48px; }
  .wl-step h3 { font-size: 28px; }
  .wl-step p { font-size: 16px; line-height: 24px; }
  .wl-voice { padding: var(--space-6); border-radius: var(--radius-xl); }
  .wl-voice__demo { padding: var(--space-5); border-radius: var(--radius-xl); }
  .wl-voice__text { font-size: 18px; line-height: 28px; padding: var(--space-5); }
  .wl-doc__page { transform: none; }
  .wl-doc__page.lb-doc { padding: var(--space-6); }
  .wl-doc__page .lb-doc__title { font-size: 32px; }
  .wl-ways, .wl-faq { grid-template-columns: 1fr; gap: var(--space-3); }
  .wl-way { padding: var(--space-8) var(--space-6); min-height: 440px; border-radius: var(--radius-xl); }
  .wl-way p { max-width: 240px; font-size: 16px; line-height: 24px; }
  .wl-way__face { width: 180px; height: 180px; }
  .wl-chips { gap: var(--space-2); }
  .wl-chips span { height: 44px; padding: 0 18px; font-size: 15px; }
  .wl-faq > div { padding: var(--space-6); border-radius: var(--radius-lg); }
  .wl-faq h3 { font-size: 26px; }
  .wl-faq p { font-size: 16px; line-height: 24px; }
  .wl-cta { padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); }
  .wl-foot .wl-wrap { flex-direction: column; align-items: flex-start; }
  .wl-foot nav { flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
  .wl-cookie { left: var(--margin-mobile); right: var(--margin-mobile); bottom: var(--margin-mobile); width: auto; padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }