/* <lunair-demo-uses> and the card's placeholder. Loaded by the page's <head> (lunair-demo-v3.css)
   so the list and the card's space look right on first paint, before the widget script arrives;
   the script injects the same text, so this file is the one source. */
lunair-demo-uses { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; column-gap:32px; flex:1 1 auto; width:100%; max-width:34rem; }
/* align-self:center: an item keeps its own height inside its stretched row, so the bar sits right under the phrase. */
lunair-demo-uses [data-use] { all:unset; box-sizing:border-box; position:relative; display:flex; align-items:center; align-self:center; gap:12px; min-height:42px;
  padding:6px 0 8px; cursor:pointer; font-family:inherit; text-align:left; }
/* A play mark on every phrase says "click to watch"; it fills in on hover and on the one playing. */
lunair-demo-uses .ldu-play { flex:none; width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1.5px rgba(22,24,29,.2); color:#4b4560; transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
lunair-demo-uses .ldu-play svg { width:50%; height:50%; margin-left:6%; }
lunair-demo-uses [data-use] strong { font-size:1.08rem; line-height:1.25; font-weight:500; color:#4b4560; transition:color .15s ease; }
lunair-demo-uses [data-use]:hover strong { color:#16181d; }
lunair-demo-uses [data-use]:hover .ldu-play { box-shadow:inset 0 0 0 1.5px #16181d; color:#16181d; transform:scale(1.06); }
lunair-demo-uses [data-use].is-on strong { color:#16181d; font-weight:600; }
lunair-demo-uses [data-use].is-on .ldu-play { background:#efe6ff; color:#8008fe; box-shadow:inset 0 0 0 1.5px rgba(128,8,254,.35); }
lunair-demo-uses [data-use]:focus-visible { outline:2px solid #8008fe; outline-offset:4px; border-radius:6px; }
/* The playing example: its lavender play circle fills with purple from the bottom, a small wave on top,
   over the time until the next example (--ldu-ms). A white copy of the triangle (::after) is revealed
   with the fill, so the triangle turns white where the purple has reached it. Picked by hand (no
   rotation): the circle is simply full. */
lunair-demo-uses .ldu-play { position:relative; overflow:hidden; isolation:isolate; }
lunair-demo-uses .ldu-play svg { position:relative; z-index:1; }
lunair-demo-uses .ldu-play::before { content:""; position:absolute; left:0; right:0; bottom:0; height:115%; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Cpath d='M0 3Q5 0 10 3T20 3V6H0Z' fill='%238008fe'/%3E%3C/svg%3E") 0 0 / 14px 5px repeat-x,
    linear-gradient(#8008fe, #8008fe) 0 4.5px / 100% 100% no-repeat;
  transform:translateY(105%); }
lunair-demo-uses .ldu-play::after { content:""; position:absolute; inset:0; z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6.5 18 12 8 17.5z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") 56% 50% / 50% 50% no-repeat;
  clip-path:inset(100% 0 0 0); }
lunair-demo-uses .is-on .ldu-play::before { transform:translateY(0); }
lunair-demo-uses .is-on .ldu-play::after { clip-path:inset(0 0 0 0); }
lunair-demo-uses .is-on.is-auto .ldu-play::before { animation:ldu-rise var(--ldu-ms, 7000ms) linear both, ldu-wave .9s linear infinite; }
lunair-demo-uses .is-on.is-auto .ldu-play::after { animation:ldu-reveal var(--ldu-ms, 7000ms) linear both; }
@keyframes ldu-rise { from { transform:translateY(105%); } to { transform:translateY(0); } }
@keyframes ldu-reveal { from { clip-path:inset(100% 0 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes ldu-wave { to { background-position:14px 0, 0 4.5px; } }
lunair-demo-uses .ldu-bar { display:none; }
/* The description stays in the page for search engines; the list shows the phrase only. */
lunair-demo-uses [data-use] span:not([class]) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:479px) { lunair-demo-uses { column-gap:16px; } lunair-demo-uses [data-use] strong { font-size:.95rem; }
  lunair-demo-uses .ldu-play { width:24px; height:24px; } }
/* Until the widget script defines <lunair-demo>, hold the card's place with a blank white card. */
lunair-demo:not(:defined) { display:block; width:100%; max-width:520px; margin:0 auto; aspect-ratio:519 / 650;
  border-radius:24px; background:#fff; box-shadow:0 40px 100px rgba(40,20,80,.4); }
@media (max-width:479px) { lunair-demo:not(:defined) { aspect-ratio:343 / 497; } }  /* the card is relatively taller on phones */

/* lunair.ai Home hero layout (Webflow classes). Here rather than in Webflow, so it can change without
   editing the site: the list column ends exactly at the card's bottom, and on desktop the card takes
   92% of its column, pushed right, for more air between the text and the card. */
.hero_grid{align-items:stretch!important}
.hero_grid>.hero_content.grid{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important}
.hero_grid>.hero_content.grid>*{align-self:flex-start}
.hero_grid>.hero_content.grid>.w-embed:first-child{text-align:left}
.hero_grid>.hero_content.grid>.button-wrapper,.hero_grid>.hero_content.grid>.hide{display:none!important}
.hero_grid>.hero_content.demo{align-self:start!important}
.hero_grid>.hero_content.grid>.w-embed:has(>lunair-demo-uses){flex:1 1 auto;display:flex!important;align-self:stretch;width:100%}
@media (min-width:992px){.hero_grid>.hero_content.demo lunair-demo{width:92%!important;margin:0 0 0 auto!important}}
@media (max-width:991px){.hero_grid>.hero_content.demo{grid-area:auto!important}.hero_grid>.hero_video{display:none!important}}
/* Stacked layouts: the list comes after the hero's subtitle, right above the card; the subtitle is left-aligned like the heading and the list. */
@media (max-width:991px){.hero_grid>.hero_content.grid>.w-embed:has(>lunair-demo-uses){order:1}.hero_grid>.hero_content.grid>.hero_header_subtext{text-align:left}}
/* Phones: Webflow sizes the heading at 4rem but its line height at 10.5vw, so the lines overlapped.
   The font follows the same 10.5vw the line height was meant for. */
@media (max-width:479px){.hero_header_text{font-size:10.5vw!important;line-height:1.05!important}}