/* heyluna.com. The landing page is ported from the "Landing" board of the
   Luna design canvas: its markup keeps the board's inline styles, and the
   rules below are the board's own (keyframes and container queries). */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-600-italic.woff2') format('woff2');
}

body { margin: 0; font-family: 'Source Sans 3', system-ui, sans-serif; background: #fcf7ed; color: #221f19; }
a { color: #245a72; } a:hover { color: #1b4457; }
:focus-visible { outline: 2px solid #245a72; outline-offset: 3px; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 10; padding: 10px 14px; border-radius: 8px; background: #241f18; color: #fdf9f1; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fdf9f1; }

@keyframes lnVProblem { 0%, 1% { opacity: 0; transform: translateY(10px) scale(0.98); } 3.25%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lnVChatX { 0%, 5% { transform: translateX(104%); opacity: 1; } 8%, 93% { transform: none; opacity: 1; } 97%, 100% { transform: none; opacity: 0; } }
@keyframes lnVChatY { 0%, 5% { transform: translateY(104%); opacity: 1; } 8%, 93% { transform: none; opacity: 1; } 97%, 100% { transform: none; opacity: 0; } }
@keyframes lnVB1 { 0%, 9% { opacity: 0; transform: translateY(10px) scale(0.98); } 11.25%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lnVB2 { 0%, 13.5% { opacity: 0; transform: translateY(10px) scale(0.98); } 14.75%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lnVListening { 0% { opacity: 1; } 8.1% { opacity: 1; } 8.5% { opacity: 0; } 13% { opacity: 0; } 13.4% { opacity: 1; } 20.6% { opacity: 1; } 21% { opacity: 0; } 27.5% { opacity: 0; } 27.9% { opacity: 1; } 41.1% { opacity: 1; } 41.5% { opacity: 0; } 48% { opacity: 0; } 48.4% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lnVSpeaking { 0% { opacity: 0; } 8.5% { opacity: 0; } 8.9% { opacity: 1; } 12.6% { opacity: 1; } 13% { opacity: 0; } 23.5% { opacity: 0; } 23.9% { opacity: 1; } 27.1% { opacity: 1; } 27.5% { opacity: 0; } 44% { opacity: 0; } 44.4% { opacity: 1; } 47.6% { opacity: 1; } 48% { opacity: 0; } 100% { opacity: 0; } }
@keyframes lnVThinking { 0% { opacity: 0; } 21% { opacity: 0; } 21.4% { opacity: 1; } 23.1% { opacity: 1; } 23.5% { opacity: 0; } 41.5% { opacity: 0; } 41.9% { opacity: 1; } 43.6% { opacity: 1; } 44% { opacity: 0; } 100% { opacity: 0; } }
@keyframes lnVMayaTalks { 0% { opacity: 0; } 14% { opacity: 0; } 14.4% { opacity: 1; } 19.6% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
@keyframes lnVType { 0%, 14.5% { clip-path: inset(-20% 100% -20% 0); } 19.5%, 100% { clip-path: inset(-20% 0 -20% 0); } }
@keyframes lnOrbBlink { 0%, 92% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } 96%, 100% { transform: scaleY(1); } }
@keyframes lnOrbDot { 0%, 60%, 100% { opacity: 0.45; transform: none; } 30% { opacity: 1; transform: translateY(-25%); } }
@keyframes lnOrbBar { from { transform: scaleY(0.55); } to { transform: scaleY(1.2); } }
@keyframes lnOrbRing { 0% { opacity: 0.72; transform: scale(0.96); } 70%, 100% { opacity: 0; transform: scale(1.48); } }
@keyframes lnOrbHear { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes lnStatusPulse { 0%, 100% { opacity: 0.5; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes lnVB3 { 0%, 24% { opacity: 0; transform: translateY(10px) scale(0.98); } 26.25%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lnVW1 { 0%, 27% { clip-path: inset(-20% 100% -20% 0); opacity: 1; } 32%, 93% { clip-path: inset(-20% 0 -20% 0); opacity: 1; } 97%, 100% { clip-path: inset(-20% 0 -20% 0); opacity: 0; } }
@keyframes lnVW2 { 0%, 33% { clip-path: inset(-20% 100% -20% 0); opacity: 1; } 40%, 93% { clip-path: inset(-20% 0 -20% 0); opacity: 1; } 97%, 100% { clip-path: inset(-20% 0 -20% 0); opacity: 0; } }
@keyframes lnVUnder { 0%, 40.5% { clip-path: inset(-20% 100% -20% 0); opacity: 1; } 42.5%, 93% { clip-path: inset(-20% 0 -20% 0); opacity: 1; } 97%, 100% { clip-path: inset(-20% 0 -20% 0); opacity: 0; } }
@keyframes lnVPen1 { 0%, 26.5% { opacity: 0; } 27%, 32% { opacity: 1; } 32.5%, 100% { opacity: 0; } }
@keyframes lnVPen2 { 0%, 32.5% { opacity: 0; } 33%, 40% { opacity: 1; } 40.5%, 100% { opacity: 0; } }
@keyframes lnVPenMove1 { 0%, 27% { left: 0%; } 32%, 100% { left: 100%; } }
@keyframes lnVPenMove2 { 0%, 33% { left: 0%; } 40%, 100% { left: 100%; } }
@keyframes lnVB4 { 0%, 44% { opacity: 0; transform: translateY(10px) scale(0.9); } 46.25%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lnVConfetti { 0%, 62.5% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 63.25% { opacity: 1; } 76% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes lnVEndTap { 0%, 51% { transform: none; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 52.5% { transform: scale(0.86); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35); } 54.5%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes lnVReport { 0%, 55% { transform: translateY(100%); opacity: 1; } 59%, 93% { transform: none; opacity: 1; } 97%, 100% { transform: none; opacity: 0; } }
@keyframes lnVRHero { 0%, 58% { opacity: 0; transform: translateY(10px) scale(0.97); } 61%, 100% { opacity: 1; transform: none; } }
@keyframes lnVRBadge { 0%, 60% { opacity: 0; transform: scale(0.4); } 63% { opacity: 1; transform: scale(1.14); } 64.5%, 100% { opacity: 1; transform: none; } }
@keyframes lnVRText { 0%, 62.5% { opacity: 0; transform: translateY(6px); } 65%, 100% { opacity: 1; transform: none; } }
@keyframes lnVRGoal { 0%, 66% { opacity: 0; transform: translateY(10px); } 69%, 100% { opacity: 1; transform: none; } }
@keyframes lnVRDone { 0%, 70% { opacity: 0; transform: translateY(8px); } 73%, 100% { opacity: 1; transform: none; } }
@keyframes lnHFlash { 0%, 15.56% { opacity: 0; } 17.22%, 19.44% { opacity: 1; } 21.11%, 100% { opacity: 0; } }
@keyframes lnHPaper { 0%, 17.78% { opacity: 0; transform: translate(0, 0) rotate(-4deg) scale(0.6); } 23.33% { opacity: 1; transform: translate(0, 0) rotate(-4deg) scale(1.04); } 26.11%, 40.0% { opacity: 1; transform: translate(0, 0) rotate(-4deg) scale(1); } 48.89%, 93% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(0.62); } 97%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(0.62); } }
@keyframes lnHThink { 0%, 52.22% { opacity: 0; transform: translateY(10px) scale(0.98); } 57.22%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lnHDrop { 0%, 47.78% { opacity: 0; } 50.0%, 53.33% { opacity: 1; } 55.56%, 100% { opacity: 0; } }
@keyframes lnRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lnDot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
@keyframes lnWave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes lnHGlow { 0%, 6% { transform: scale(1); opacity: 0; } 7.5% { transform: scale(1); opacity: 0.45; } 15%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes lnHPress { 0%, 13.5% { transform: none; } 15% { transform: scale(0.9); } 17%, 100% { transform: none; } }
@keyframes lnTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes lnSlide { to { transform: translateX(-50%); } }
@keyframes lnPhaseLabel { 0%, 3% { opacity: 0; transform: translateY(6px); } 8%, 30% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes lnBar { 0%, 5% { transform: scaleX(0); } 28%, 92% { transform: scaleX(1); } 98%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes lnPop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lnPhase { 0% { opacity: 0.18; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0.18; } }
@keyframes lnNudge { 0%, 4% { opacity: 0; transform: translateY(-12px) scale(0.98); } 10%, 44% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes lnTodayDone { 0%, 52% { opacity: 0; transform: scale(0.4); } 57% { opacity: 1; transform: scale(1.18); } 61%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes lnStreakIn { 0%, 58% { opacity: 0; transform: scale(0.85); } 64%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes lnFlick { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.05, 0.94); } 50% { transform: scale(0.96, 1.06); } 75% { transform: scale(1.02, 0.97); } }
.ln-marquee:hover .ln-track { animation-play-state: paused; }
.ln-legal a:hover { color: #221f19 !important; }
.ln-v-chat { animation: lnVChatX 20.0s cubic-bezier(0.2, 0, 0, 1) infinite both; }
.ln-device { position: relative; max-width: 1040px; margin: 0 auto; }
.ln-device-screen { position: relative; box-sizing: border-box; margin: 0 6.5%; padding: 12px 12px 16px; border-radius: 20px 20px 4px 4px; background: #1d1d1f; box-shadow: 0 0 0 1.5px #c9cacf, 0 0 0 3px #a5a6ab; }
.ln-device-cam { position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 999px; background: #3a3a3d; }
.ln-device-btn { display: none; position: absolute; border-radius: 2px; background: #a5a6ab; }
.ln-device-stand { display: block; position: relative; height: 18px; border-radius: 3px 3px 16px 16px; background: linear-gradient(180deg, #eeeff2 0%, #d5d6da 50%, #a9aaaf 100%); box-shadow: 0 0 0 1px #b9babf, 0 22px 36px rgba(34, 31, 25, 0.2); }
.ln-device-neck { display: block; width: 15%; height: 7px; margin: 0 auto; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #b1b2b7, #cacbd0); }
.ln-device-foot { display: none; }
@keyframes lnVCursor { 0%, 7.5% { opacity: 0; transform: translate(11em, -3.5500000000000003em); } 9.5%, 27% { opacity: 1; transform: translate(11em, -3.95em); } 32%, 33% { opacity: 1; transform: translate(11em, -1.75em); } 40%, 48% { opacity: 1; transform: translate(11em, 0.35em); } 50%, 100% { opacity: 0; transform: translate(11em, 0.35em); } }
@keyframes lnVCursorS { 0%, 7.5% { opacity: 0; transform: translate(9.6em, -1.85em); } 9.5%, 27% { opacity: 1; transform: translate(9.6em, -2.25em); } 32%, 33% { opacity: 1; transform: translate(9.6em, -1.3em); } 40%, 48% { opacity: 1; transform: translate(9.6em, 0.4em); } 50%, 100% { opacity: 0; transform: translate(9.6em, 0.4em); } }
@keyframes lnVPing { 0%, 43.5% { opacity: 0; transform: scale(0.5); } 44.5% { opacity: 0.45; transform: scale(0.7); } 48%, 100% { opacity: 0; transform: scale(1.6); } }
.ln-v-cursor { animation: lnVCursor 20.0s ease-in-out infinite both; }
@container lnv (max-width: 640px) {
  .ln-v-body { flex-direction: column; }
  .ln-v-board { flex: 1 1 42% !important; }
  .ln-v-chat { width: 100% !important; border-left: none !important; border-top: 1px solid #e0d2b9; animation-name: lnVChatY; flex: 1 1 58% !important; }
  .ln-v-tools { display: none !important; }
  .ln-v-work { left: 4cqi !important; right: 4cqi !important; top: 3.5cqi !important; gap: 3.5cqi !important; }
  .ln-v-problem { max-width: none !important; font-size: 12px !important; }
  .ln-v-hand { font-size: 20px !important; }
  .ln-v-pen { width: 16px !important; height: 16px !important; }
  .ln-v-under { height: 3px !important; bottom: -3px !important; }
  .ln-v-cursor { animation-name: lnVCursorS; }
}
@container lnroot (max-width: 1199px) {
  .ln-device { max-width: 780px; }
  .ln-device-screen { margin: 0; padding: 18px; border-radius: 36px; box-shadow: 0 0 0 2px #c9cacf, 0 0 0 3.5px #a5a6ab, 0 30px 70px rgba(34, 31, 25, 0.2); }
  .ln-device-cam { top: 7px; width: 6px; height: 6px; margin-left: -3px; }
  .ln-device-stand { display: none; }
  .ln-btn-top { display: block; top: -4.5px; right: 14%; width: 9%; height: 3px; }
  .ln-video { aspect-ratio: 1194 / 834 !important; border-radius: 18px !important; }
}
@container lnroot (max-width: 760px) {
  .ln-two { grid-template-columns: minmax(0, 1fr) !important; }
  .ln-device { max-width: 300px; }
  .ln-device-screen { padding: 10px; border-radius: 52px; box-shadow: 0 0 0 2px #b6b7bc, 0 0 0 3.5px #8d8e93, 0 30px 70px rgba(34, 31, 25, 0.22); }
  .ln-device-cam, .ln-btn-top { display: none; }
  .ln-btn-action, .ln-btn-volup, .ln-btn-voldn { display: block; left: -5.5px; width: 3px; }
  .ln-btn-action { top: 17%; height: 5%; }
  .ln-btn-volup { top: 25%; height: 8.5%; }
  .ln-btn-voldn { top: 35.5%; height: 8.5%; }
  .ln-btn-power { display: block; right: -5.5px; top: 28%; width: 3px; height: 13%; }
  .ln-video { aspect-ratio: 9 / 19.5 !important; border-radius: 42px !important; }
  .ln-v-island, .ln-v-home { display: block !important; }
  .ln-v-bar { height: auto !important; padding-top: 32px !important; padding-bottom: 8px !important; }
  .ln-v-foot { padding-bottom: 18px !important; }
}
@container lnroot (max-width: 640px) {
  .ln-how { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* Privacy, Terms and Support: the canvas's Privacy screen type (title 27/32,
   meta 13, section titles 17/22, body 14/21) in a 720px column. */
.legal { max-width: 720px; margin: 0 auto; box-sizing: border-box; padding: clamp(24px, 4cqi, 48px) clamp(16px, 4cqi, 40px) clamp(48px, 6cqi, 88px); display: flex; flex-direction: column; gap: 24px; }
.legal-head { display: flex; flex-direction: column; gap: 6px; }
.legal h1 { margin: 0; font-size: 27px; line-height: 32px; font-weight: 600; letter-spacing: -0.4px; color: #221f19; }
.legal-meta { margin: 0; font-size: 13px; color: #6a6255; }
.legal section { display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 24px; }
.legal h2 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.2px; color: #221f19; }
.legal h3 { margin: 8px 0 0; font-size: 15px; line-height: 21px; font-weight: 600; color: #221f19; }
.legal p, .legal li, .legal td { font-size: 14px; line-height: 21px; color: #5a5348; }
.legal p, .legal ul, .legal ol { margin: 0; }
.legal ul, .legal ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal strong, .legal th { color: #221f19; font-weight: 600; }
.legal .caps { text-transform: uppercase; font-size: 13px; letter-spacing: 0.2px; }
.legal code { font-size: 13px; }
.table-scroll { overflow-x: auto; border: 1px solid #e0d2b9; border-radius: 14px; background: #ffffff; }
.legal table { width: 100%; border-collapse: collapse; }
.legal th, .legal td { padding: 10px 12px; border-bottom: 1px solid #eee3d0; text-align: left; vertical-align: top; font-size: 14px; line-height: 21px; }
.legal th { background: #f5ede0; }
.legal tr:last-child td { border-bottom: 0; }
.not-found { max-width: 720px; margin: 0 auto; box-sizing: border-box; padding: clamp(64px, 10cqi, 140px) clamp(16px, 4cqi, 40px); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.not-found h1 { margin: 0; font-size: 27px; line-height: 32px; font-weight: 600; letter-spacing: -0.4px; }
.not-found p { margin: 0; font-size: 17px; line-height: 26px; color: #5a5348; }