/* Lycia AI homepage: one product, connected channels, role-based access. */
.lx{
  --lx-forest:#1a2e1f;
  --lx-deep:#0f1c13;
  --lx-paper:#f3f5f2;
  --lx-ink:#102016;
  --lx-muted:#56645b;
  --lx-line:#d8dfd9;
  --lx-ok:#7fd6a4;
  --lx-ok-ink:#1d7a49;
  --lx-no:#f0b44c;
  --lx-no-ink:#9a5b0c;
  --lx-accent:#6366f1;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--lx-ink);
}
.lx *,.lx *::before,.lx *::after{box-sizing:border-box}
.lx-wrap{max-width:1240px;margin:0 auto;padding:0 40px}
:where(.lx) :where(h1,h2,h3,p,ul,ol){margin:0;padding:0}
:where(.lx) :where(ul,ol){list-style:none}
.lx a:focus-visible,.lx button:focus-visible{outline:2px solid #b9c7ff;outline-offset:3px;border-radius:6px}
.lx-section{padding:120px 0}
.lx-h2{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.032em;line-height:1.1;max-width:20ch}
.lx-lede{font-size:18px;line-height:1.6;color:var(--lx-muted);max-width:60ch;margin-top:18px}

/* Buttons */
.lx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;font-size:16px;font-weight:700;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.lx-btn-primary{background:#fff;color:var(--lx-forest)}
.lx-btn-primary:hover{background:#e3f1e7}
.lx-btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.28)}
.lx-btn-ghost:hover{border-color:rgba(255,255,255,.6)}
.lx-btn-dark{background:var(--lx-forest);color:#fff}
.lx-btn-dark:hover{background:var(--lx-deep)}

/* ============ HERO (scroll story) ============ */
/* Left column stays put; each card on the right is one promise. The section colour follows the card in focus. */
.lx-sh{--lx-glow:#6fe3cf;--lx-glow-rgb:111,227,207;background:var(--lx-forest);color:#fff;position:relative}
.lx-sh::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 32px}
.lx-sh-track{position:relative;max-width:1360px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px}
/* The planes, gull and blimp fly between the nav and the text (18 to 21vh), so the text block starts just under that lane. */
.lx-sh-left{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:max(calc(20.8vh + 30px),196px) 0 40px}
.lx-hero-for{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:22px}
.lx-hero-for::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--lx-glow,var(--lx-ok));box-shadow:0 0 0 4px rgba(var(--lx-glow-rgb,127,214,164),.16)}
.lx-sh h1{font-size:clamp(40px,4.5vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.03;color:#fff;max-width:13ch}
.lx-hero-lede{font-size:18px;line-height:1.62;color:rgba(255,255,255,.72);max-width:50ch;margin-top:24px}
.lx-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* The five promises, as chips under the buttons. They take the text colour of the hour like the lede. */
/* Opens Lucy and asks her for a short summary of Lycia AI (widget-helper.js handles ?open= links). */
.lx-hero-ask{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;margin-top:16px;padding:4px 16px 4px 4px;border-radius:999px;background:rgba(var(--fg),.07);color:rgba(var(--fg),.94);font-size:14.5px;font-weight:650;line-height:1.2;text-decoration:none;transition:background .2s}
.lx-hero-ask:hover{background:rgba(var(--fg),.12)}
.lx-hero-ask img{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover}
.lx-hero-ask small{font-size:13px;font-weight:500;color:rgba(var(--fg),.6)}
/* The sun scene (the sunbathers by day, the moon and the wolf at night) sits just before Summarize for me;
   --sun-y lifts the sun so the scene is centred on the button. */
.lx-hero-ask-row{display:flex;align-items:center;gap:14px;margin-top:16px;container:lx-ask/inline-size}
.lx-hero-ask-row .lx-sh-clock{flex:none;width:52px;height:38px;margin:0;--sun-y:4px}
.lx-hero-ask-row .lx-hero-ask{margin-top:0;align-self:center;white-space:nowrap}
@media (max-width:480px){.lx-hero-ask-row{gap:8px}}
/* Phones: the scene and "Summarize for me" always share one line. The pill tightens in steps as the row narrows,
   and only when even that does not fit does "Lucy, our AI assistant" step aside (thresholds measured per language). */
@container lx-ask (max-width:397px){
  .lx-hero-ask-row .lx-sh-clock{width:50px}
  .lx-hero-ask{gap:8px;padding:4px 14px 4px 4px;font-size:14px}
  .lx-hero-ask img{width:28px;height:28px}
  .lx-hero-ask small{font-size:12.5px}
}
@container lx-ask (max-width:371px){
  .lx-hero-ask{gap:7px;padding:4px 12px 4px 4px;font-size:13px}
  .lx-hero-ask small{font-size:11.5px}
}
@container lx-ask (max-width:349px){html:not([lang=tr]) .lx-hero-ask small{display:none}}
/* The Turkish headline wraps to two lines instead of three, so on desktop /tr gives the buttons, the Summarize row
   and the logos more room. CSS only, so the Turkish markup stays identical to the English. */
@media (min-width:901px){
  [lang=tr] .lx-hero-actions{margin-top:36px}
  [lang=tr] .lx-hero-ask-row{margin-top:24px}
  [lang=tr] .lx-hero-partners{margin-top:36px}
}
/* Partner programs, sliding slowly in a loop like the lx-flow rows. Each logo is a mask painted in the hero's text colour,
   so the row follows the sky from day to night; --h sets the logo's optical height, --r its aspect ratio and --y nudges a
   logo whose ink sits off-centre (the AWS smile hangs below its text). */
.lx-hero-partners{margin-top:26px}
.lx-hero-partners>p{font-size:12px;font-weight:600;letter-spacing:.05em;color:rgba(var(--fg),calc(.5 + .2 * var(--dusk)))}
.lx-partners-viewport{margin-top:10px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lx-partners-viewport:hover .lx-partners-track{animation-play-state:paused}
.lx-partners-track{display:flex;width:max-content;animation:lx-flow 44s linear infinite}
.lx-partners-set{display:flex;gap:36px;margin:0;padding:0 36px 0 0;list-style:none}
.lx-partners-set li{display:flex;flex-direction:column;gap:6px}
.lx-partner-logo{display:block;height:24px;width:calc(var(--h) * var(--r));background:rgba(var(--fg),calc(.72 + .2 * var(--dusk)));-webkit-mask:var(--logo) left calc(50% + var(--y,0px))/auto var(--h) no-repeat;mask:var(--logo) left calc(50% + var(--y,0px))/auto var(--h) no-repeat}
.lx-hero-partners small{font-size:11.5px;font-weight:500;line-height:1;white-space:nowrap;color:rgba(var(--fg),calc(.55 + .2 * var(--dusk)))}
.lx-hero-proof{display:grid;grid-template-columns:repeat(2,max-content);gap:10px 26px;margin-top:34px;font-size:14px;color:rgba(255,255,255,.7)}
.lx-hero-proof li{display:flex;align-items:center;gap:9px}
.lx-hero-proof li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:rgba(127,214,164,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%237fd6a4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}


.lx-sh-right{padding:calc(50vh - 250px) 0 45vh}
.lx-sh-card{min-height:500px;margin-bottom:200px;display:flex;flex-direction:column;background:var(--stage,rgba(255,255,255,.06));transition:background-color .6s,box-shadow .6s;border:1px solid rgba(255,255,255,.11);border-radius:24px;padding:28px 32px 32px;transform-origin:bottom right;will-change:transform,opacity;scroll-margin-top:calc(50vh - 250px)}
.lx-sh-card:last-child{margin-bottom:0}
.lx-sh-visual{flex:1 0 auto;position:relative;min-height:290px;display:flex;flex-direction:column;justify-content:center}
.lx-sh-caption{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.lx-sh-caption h2{font-size:22px;font-weight:750;letter-spacing:-.02em;line-height:1.25;color:#fff}
.lx-sh-caption p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.66);margin-top:8px;max-width:52ch}

/* Light hero: dark ink type on a light page, with the cards as dark product stages.
   A card can switch the whole hero back to dark (data-theme="dark"), e.g. for the night card. */
.lx-sh[data-theme=light]{--lx-mark:#0f766e;color:#0f1418}
.lx-sh[data-theme=light]::before{background-image:radial-gradient(rgba(15,20,24,.07) 1px,transparent 1px)}
.lx-sh[data-theme=light] h1{color:#0f1418}
.lx-sh[data-theme=light] .lx-hero-for::before{background:var(--lx-mark);box-shadow:0 0 0 4px rgba(15,118,110,.14)}
.lx-sh[data-theme=light] .lx-btn-primary{background:#0f1418;color:#fff}
.lx-sh[data-theme=light] .lx-btn-primary:hover{background:#26303a}
.lx-sh[data-theme=light] .lx-btn-ghost{color:#0f1418;border-color:rgba(15,20,24,.28)}
.lx-sh[data-theme=light] .lx-btn-ghost:hover{border-color:rgba(15,20,24,.6)}
.lx-sh[data-theme=light] .lx-sh-card{border-color:transparent;box-shadow:0 40px 90px -20px rgba(15,20,24,.35)}
/* Hero type swaps colour in one frame: a fade would pass through grey on a grey sky.
   --fg is the type colour for the current sky; --dusk (0 to 1, set by home-lycia.js) lifts the
   softer lines to full strength while the sky is in the mid tones, so the text never goes hazy. */
.lx-sh{--fg:255,255,255;--dusk:0}
.lx-sh[data-theme=light]{--fg:15,20,24}
.lx-sh .lx-hero-for{color:rgba(var(--fg),calc(.7 + .3 * var(--dusk)))}
.lx-sh .lx-hero-lede{color:rgba(var(--fg),calc(.8 + .2 * var(--dusk)))}

/* A day with Lycia AI: the index is a clock, a sun walks down it (and turns into the moon at night),
   and a soft light behind the cards follows the time of day. */
@property --sky-glow{syntax:'<color>';inherits:true;initial-value:rgba(0,0,0,0)}
/* Sky colour is painted per scroll frame by home-lycia.js, so it needs no transition. */
/* The sky sticks to the viewport inside a wrapper the exact size of the hero, so it can never outlast the hero and
   drift over the sections below (a negative margin would widen the sticky limits by a screen). */
.lx-sh-skywrap{position:absolute;inset:0;pointer-events:none}
.lx-sh-sky{position:sticky;top:0;height:100vh;height:100svh;pointer-events:none;background:radial-gradient(ellipse 42% 58% at 74% 52%,var(--sky-glow),transparent 72%)}
.lx-sh-track{z-index:1}
.lx-sh[data-theme=dark]::before{background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px)}
/* The sky behind the hero, driven by home-lycia.js: --day and --night (0 to 1) fade the two layers in and out,
   --light-x/--light-y walk the sun across the top, --sun-angle lights the edge of each card that faces it,
   --evening brings out the first star at dusk and --late joins up the constellation once the night card has passed.
   Sunlight is a pale sunlit white: pure white does not show on a near-white sky. */
.lx-sh-sky{overflow:hidden}
.lx-sh-day,.lx-sh-night{position:absolute;inset:0}
.lx-sh-day{opacity:var(--day,0)}
.lx-sh-sun{position:absolute;left:0;top:0;transform:translate(var(--light-x,50vw),var(--light-y,-10vh));will-change:transform}
.lx-sh-sun::before,.lx-sh-sun::after,.lx-sh-sun b{content:"";position:absolute;border-radius:50%}
.lx-sh-sun::before{width:96vmax;height:96vmax;left:-48vmax;top:-48vmax;background:radial-gradient(closest-side,#fffdf6 0,rgba(255,249,232,.95) 9%,rgba(255,249,232,.5) 30%,rgba(255,249,232,0));animation:lx-breathe 9s ease-in-out infinite alternate}
/* Two sets of beams turn against each other at different speeds, so the light shimmers rather than swings. */
.lx-sh-sun::after,.lx-sh-sun b{width:240vmax;height:240vmax;left:-120vmax;top:-120vmax;-webkit-mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.55) 30%,transparent 72%);mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.55) 30%,transparent 72%)}
.lx-sh-sun::after{background:conic-gradient(from 0deg,transparent 0deg 70deg,rgba(255,249,232,0.8) 80deg,transparent 90deg 100deg,rgba(255,249,232,0.6) 107deg,transparent 113deg 124deg,rgba(255,249,232,0.85) 134deg,transparent 145deg 158deg,rgba(255,249,232,0.65) 165deg,transparent 171deg 182deg,rgba(255,249,232,0.8) 193deg,transparent 205deg 214deg,rgba(255,249,232,0.6) 221deg,transparent 227deg 238deg,rgba(255,249,232,0.8) 248deg,transparent 259deg 266deg,rgba(255,249,232,0.6) 274deg,transparent 284deg);animation:lx-rays 26s ease-in-out infinite alternate}
.lx-sh-sun b{background:conic-gradient(from 0deg,transparent 0deg 92deg,rgba(255,249,232,.4) 96deg,transparent 100deg 138deg,rgba(255,249,232,.45) 143deg,transparent 148deg 174deg,rgba(255,249,232,.4) 178deg,transparent 182deg 226deg,rgba(255,249,232,.45) 231deg,transparent 236deg 255deg,rgba(255,249,232,.35) 259deg,transparent 263deg);animation:lx-rays 38s ease-in-out infinite alternate-reverse}
@keyframes lx-rays{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes lx-breathe{from{transform:scale(1)}to{transform:scale(1.06)}}
/* Every 40 seconds or so a few birds cross the day sky above the headline. */
.lx-birds{position:absolute;left:0;top:19vh;opacity:0;animation:lx-flock 40s linear 2s infinite}
.lx-birds b{position:absolute;left:var(--bx);top:var(--by);width:15px;height:7px;opacity:.78;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 10%27%3E%3Cpath d=%27M1 3Q7 0 12 7Q17 0 23 3%27 fill=%27none%27 stroke=%27%230f1418%27 stroke-width=%271.7%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center/contain no-repeat;animation:lx-flap var(--f,.45s) ease-in-out infinite alternate}
@keyframes lx-flock{0%{transform:translate(-4vw,0);opacity:0}2%{opacity:1}45%{opacity:1}47%{transform:translate(104vw,-3vh);opacity:0}100%{transform:translate(104vw,-3vh);opacity:0}}
@keyframes lx-flap{from{transform:scaleY(1)}to{transform:scaleY(-.5)}}
/* Sunlight catches the edge of each card that faces the sun. */
.lx-sh-card{position:relative;background-image:linear-gradient(var(--sun-angle,135deg),rgba(255,249,232,calc(.06 * var(--day,0))),transparent 45%)}
.lx-sh-card::after{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1px;background:linear-gradient(var(--sun-angle,135deg),rgba(255,249,232,.95),rgba(255,249,232,.18) 32%,rgba(255,249,232,0) 58%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--day,0);pointer-events:none}
.lx-sh-night{opacity:var(--night,0)}
.lx-sh-night::before,.lx-sh-night::after{content:"";position:absolute;inset:0;animation:lx-twinkle 5s ease-in-out infinite alternate}
.lx-sh-night::before{background-image:radial-gradient(2px 2px at 37.8% 46.1%,rgba(255,255,255,0.78),transparent),radial-gradient(2px 2px at 20.7% 37.9%,rgba(255,255,255,0.77),transparent),radial-gradient(1.2px 1.2px at 31.7% 56.1%,rgba(255,255,255,0.89),transparent),radial-gradient(1.6px 1.6px at 52.8% 83.0%,rgba(255,255,255,0.62),transparent),radial-gradient(2px 2px at 5.2% 59.9%,rgba(255,255,255,0.79),transparent),radial-gradient(1.2px 1.2px at 46.5% 20.6%,rgba(255,255,255,0.60),transparent),radial-gradient(1.2px 1.2px at 32.2% 37.9%,rgba(255,255,255,0.70),transparent),radial-gradient(1.2px 1.2px at 70.5% 17.1%,rgba(255,255,255,0.58),transparent),radial-gradient(1.2px 1.2px at 86.8% 16.0%,rgba(255,255,255,0.64),transparent),radial-gradient(1.2px 1.2px at 9.6% 69.1%,rgba(255,255,255,0.67),transparent),radial-gradient(1.6px 1.6px at 81.4% 68.5%,rgba(255,255,255,0.66),transparent),radial-gradient(1.6px 1.6px at 45.3% 62.0%,rgba(255,255,255,0.86),transparent),radial-gradient(1.2px 1.2px at 98.3% 1.5%,rgba(255,255,255,0.82),transparent),radial-gradient(1.2px 1.2px at 61.0% 2.8%,rgba(255,255,255,0.76),transparent),radial-gradient(1.2px 1.2px at 68.1% 76.7%,rgba(255,255,255,0.78),transparent),radial-gradient(2px 2px at 50.9% 82.5%,rgba(255,255,255,0.57),transparent),radial-gradient(1.2px 1.2px at 20.1% 74.9%,rgba(255,255,255,0.90),transparent),radial-gradient(1.6px 1.6px at 52.8% 94.2%,rgba(255,255,255,0.97),transparent),radial-gradient(1.2px 1.2px at 1.6% 88.2%,rgba(255,255,255,0.67),transparent),radial-gradient(1.2px 1.2px at 4.3% 60.4%,rgba(255,255,255,0.79),transparent),radial-gradient(2px 2px at 56.9% 51.2%,rgba(255,255,255,0.74),transparent),radial-gradient(1.2px 1.2px at 15.7% 69.0%,rgba(255,255,255,0.71),transparent)}
.lx-sh-night::after{background-image:radial-gradient(1.4px 1.4px at 83.1% 26.9%,rgba(255,255,255,0.76),transparent),radial-gradient(1.4px 1.4px at 85.7% 23.5%,rgba(255,255,255,0.72),transparent),radial-gradient(1.2px 1.2px at 55.1% 56.0%,rgba(255,255,255,0.78),transparent),radial-gradient(1.2px 1.2px at 20.0% 83.9%,rgba(255,255,255,0.58),transparent),radial-gradient(1.8px 1.8px at 21.7% 34.9%,rgba(255,255,255,0.79),transparent),radial-gradient(1.2px 1.2px at 42.8% 13.4%,rgba(255,255,255,0.93),transparent),radial-gradient(1.2px 1.2px at 31.7% 78.9%,rgba(255,255,255,0.59),transparent),radial-gradient(1.8px 1.8px at 13.8% 72.8%,rgba(255,255,255,0.93),transparent),radial-gradient(1.8px 1.8px at 19.5% 64.4%,rgba(255,255,255,0.71),transparent),radial-gradient(1.2px 1.2px at 34.5% 70.2%,rgba(255,255,255,0.88),transparent),radial-gradient(1.8px 1.8px at 2.6% 95.1%,rgba(255,255,255,0.79),transparent),radial-gradient(1.4px 1.4px at 82.4% 26.3%,rgba(255,255,255,0.95),transparent),radial-gradient(1.2px 1.2px at 99.9% 56.6%,rgba(255,255,255,0.90),transparent),radial-gradient(1.8px 1.8px at 13.3% 53.9%,rgba(255,255,255,0.74),transparent),radial-gradient(1.8px 1.8px at 12.0% 57.7%,rgba(255,255,255,0.65),transparent),radial-gradient(1.2px 1.2px at 39.4% 8.6%,rgba(255,255,255,0.56),transparent),radial-gradient(1.4px 1.4px at 63.3% 48.0%,rgba(255,255,255,0.75),transparent),radial-gradient(1.8px 1.8px at 52.3% 66.9%,rgba(255,255,255,0.61),transparent);animation-duration:7s;animation-delay:-3s}
@keyframes lx-twinkle{from{opacity:.35}to{opacity:1}}
/* Shooting stars: a bright head with a fading tail, crossing down and to the left now and then. Once in a while a brighter one. */
.lx-sh-night i{position:absolute;left:var(--x);top:var(--y);width:var(--l,160px);height:1.5px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(220,232,255,.45) 28%,rgba(220,232,255,0));opacity:0;transform-origin:0 50%;animation:lx-meteor var(--t,10s) linear var(--d,0s) infinite}
.lx-sh-night i::before{content:"";position:absolute;left:-1px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(220,232,255,.75)}
.lx-sh-night i.is-bright{height:2px;background:linear-gradient(90deg,#fff,rgba(220,232,255,.6) 24%,rgba(220,232,255,0))}
.lx-sh-night i.is-bright::before{left:-2px;width:5px;height:5px;margin-top:-2.5px;box-shadow:0 0 14px 4px rgba(220,232,255,.8)}
@keyframes lx-meteor{0%{opacity:0;transform:rotate(-28deg) translateX(0) scaleX(.2)}2%{opacity:1}8%{opacity:1}11%{opacity:0;transform:rotate(-28deg) translateX(-520px) scaleX(1)}100%{opacity:0;transform:rotate(-28deg) translateX(-520px) scaleX(1)}}
/* A satellite glides over and fades out as it passes into the Earth's shadow. */
.lx-sat{position:absolute;left:0;top:0;width:2.5px;height:2.5px;border-radius:50%;background:#f1f5fb;box-shadow:0 0 4px 1px rgba(233,238,247,.85);opacity:0;animation:lx-sat 50s linear 3s infinite}
@keyframes lx-sat{0%{transform:translate(-2vw,24vh);opacity:0}3%{opacity:.95}55%{opacity:.95}64%{opacity:0}100%{transform:translate(102vw,12vh);opacity:0}}
/* Behind the cards on the right, the brighter stars join up into the Lycia AI lambda as evening turns to night,
   glimpsed through the gaps between cards, and keep glowing softly once it is complete. */
.lx-sh-lambda{position:absolute;left:60vw;top:42vh;width:min(20vw,280px);overflow:visible}
/* Dashes are in path units (pathLength 100), so the line stays scaled with the drawing. The main stroke draws first;
   the short leg branches off once the main stroke has reached the shoulder, 38% of the way along. */
.lx-sh-lambda path{fill:none;stroke:rgba(220,232,255,.6);stroke-width:.5;transition:stroke .8s;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--late,0) * 100)}
.lx-sh-lambda .lx-leg{stroke-dashoffset:calc(100 - max(0, var(--late,0) - .38) / .62 * 100)}
.lx-sh-lambda circle{fill:#fff;opacity:calc(.6 + .4 * var(--late,0));filter:drop-shadow(0 0 3px rgba(220,232,255,.9))}
.lx-sh.is-joined .lx-sh-lambda path{stroke:rgba(230,240,255,.85)}
.lx-sh.is-joined .lx-sh-lambda circle{animation:lx-star-glow 2.2s ease-in-out infinite alternate}
@keyframes lx-star-glow{to{filter:drop-shadow(0 0 8px rgba(230,240,255,1))}}
/* The evening star comes out first, just after sunset, in the gap beside the headline. */
.lx-sh-evening{position:absolute;left:49vw;top:21vh;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(220,232,255,.75);opacity:var(--evening,0)}
.lx-sh-evening::before,.lx-sh-evening::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:1px;margin:-.5px 0 0 -13px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:lx-glint 4.5s ease-in-out infinite alternate}
.lx-sh-evening::after{animation-name:lx-glint-v}
@keyframes lx-glint{from{transform:scaleX(.55)}to{transform:scaleX(1)}}
@keyframes lx-glint-v{from{transform:rotate(90deg) scaleX(.55)}to{transform:rotate(90deg) scaleX(1)}}
/* On phones the hero ends right after the night card, so the constellation would only ever show half drawn. */
@media (max-width:900px){.lx-sh-lambda{display:none}}
/* Some visitors keep to their own hour, faded in and out by --hour (0 is the 09:00 card, 1 is 11:30, 2 is 15:00,
   3 is 19:30, 4 is 02:15). 09:00: a hot air balloon, as over Cappadocia at dawn, rises slowly in the gap beside the headline. */
.lx-balloon{position:absolute;left:49vw;top:0;opacity:calc(1.2 - var(--hour,0))}
.lx-balloon i{position:absolute;left:-8px;top:0;width:16px;height:23px;animation:lx-ascend 80s linear -30s infinite}
.lx-balloon i::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cpath d='M10 1C4.6 1 1 5 1 9.8c0 4.4 3.4 8 6.4 10.6h5.2C15.6 17.8 19 14.2 19 9.8 19 5 15.4 1 10 1z' fill='%230f1418' fill-opacity='.72'/%3E%3Cpath d='M10 1c-2.4 2.8-3.2 5.8-3.2 9 0 4 1 7.4 1.2 10.4h4c.2-3 1.2-6.4 1.2-10.4 0-3.2-.8-6.2-3.2-9z' fill='%230f766e'/%3E%3Cpath d='M7.8 20.6l1.2 3.6M12.2 20.6L11 24.2' stroke='%230f1418' stroke-opacity='.72' stroke-width='.7'/%3E%3Crect x='8.4' y='24' width='3.2' height='2.8' rx='.6' fill='%230f1418' fill-opacity='.8'/%3E%3C/svg%3E") center/contain no-repeat;animation:lx-sway 6s ease-in-out infinite alternate}
@keyframes lx-ascend{0%{transform:translateY(98vh);opacity:0}4%{opacity:1}92%{opacity:1}100%{transform:translateY(22vh);opacity:0}}
@keyframes lx-sway{from{transform:translateX(-3px) rotate(-3deg)}to{transform:translateX(3px) rotate(3deg)}}
/* Planes, for our airports: one crosses every 20 seconds or so in the morning and around midday, in both directions
   at different heights. They are gone before the mall blimp comes out in the afternoon, so the two never share the sky.
   Hovering one holds it in place and shows where it is going; clicking it opens the airports page.
   They fly below the fixed menu bar (134px), whose box would otherwise catch the click. While a plane waits for its
   first flight it holds its starting point off screen (backwards fill) instead of sitting at the left edge. */
.lx-plane{position:absolute;left:0;top:var(--top);padding:12px 10px;margin:-12px 0 0 -10px;pointer-events:auto;cursor:pointer;opacity:calc((1.35 - var(--hour,0)) * 5);scale:clamp(0, (1.35 - var(--hour,0)) * 100, 1);animation:lx-fly-west var(--t,14s) linear var(--d,0s) infinite backwards}
.lx-plane.is-east{animation-name:lx-fly-east}
.lx-plane i{position:relative;display:block;width:22px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M1.2 4.6c0-.7.9-1.1 2-1.1h13.4L19 .6h1.3l-1.1 3.3c.5.4.5 1.1-.1 1.4H3.2c-1.1 0-2-.3-2-.7zM8.6 3.6L12.4.4h1.5l-2.2 3.2zM8.6 5.2l3.6 2.6h1.5l-2.1-2.6z' fill='%230f1418' fill-opacity='.7'/%3E%3C/svg%3E") center/contain no-repeat}
.lx-plane.is-east i{width:16px;height:6px;transform:scaleX(-1)}
.lx-plane i::after{content:"";position:absolute;left:100%;top:40%;width:30vw;height:1.5px;background:linear-gradient(90deg,rgba(120,138,160,.45),rgba(120,138,160,0))}
@media (max-width:640px){.lx-plane{top:108px}.lx-plane.is-east{top:121px}} /* phones: fly in the gap between the header and the hero eyebrow */
/* The sky sits under the cards, so the label a plane shows on hover is one element in the hero, above them,
   placed under the plane by home-lycia.js. */
.lx-boarding{position:fixed;left:0;top:0;z-index:5;white-space:nowrap;padding:4px 10px;border-radius:999px;background:#0f1418;color:#fff;font-size:12px;font-weight:600;line-height:1.4;opacity:0;transition:opacity .2s;pointer-events:none}
.lx-boarding.is-on{opacity:1}
.lx-boarding.is-night{background:#fff;color:#0f1418}
@keyframes lx-fly-west{0%{transform:translateX(104vw)}55%,100%{transform:translateX(-36vw)}}
@keyframes lx-fly-east{0%{transform:translateX(-36vw)}55%,100%{transform:translateX(104vw)}}
/* The sky sits under the hero columns, so the columns let clicks through everywhere except their own content. */
.lx-sh-track{pointer-events:none}
.lx-sh-left > *,.lx-sh-card{pointer-events:auto}
.lx-sh-sky a:hover,.lx-sh-sky a:hover *,.lx-sh-sky a:hover i::before,.lx-sh-sky a:hover i::after{animation-play-state:paused}
.lx-sh[data-theme=dark] .lx-sh-day a,.lx-sh:not([data-theme=dark]) .lx-redeye,.lx-sh:not([data-theme=dark]) .lx-firework{pointer-events:none}
/* 15:00: a paper plane glides in, loops once in the gap beside the headline and sails off behind the cards. */
.lx-paper{position:absolute;left:49vw;top:21vh;opacity:calc(min(var(--hour,0) - 1, 3 - var(--hour,0)) * 1.6)}
.lx-paper i{position:absolute;left:0;top:0;width:20px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 1.8L19 5.2 6.4 6.2z' fill='%23fff' stroke='%230f1418' stroke-opacity='.7' stroke-width='.8' stroke-linejoin='round'/%3E%3Cpath d='M6.4 6.2L19 5.2 8.6 10.6z' fill='%23dfe5ec' stroke='%230f1418' stroke-opacity='.7' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;offset-path:path("M-520 -6C-380 -26 -200 22 -60 6C10 -2 32 -46 0 -54C-32 -60 -38 -14 0 0C52 20 170 -12 440 -70");offset-rotate:auto;opacity:0;animation:lx-paper 30s linear 3s infinite}
@keyframes lx-paper{0%{offset-distance:0%;opacity:0}2%{opacity:1}34%{opacity:1}36%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@supports not (offset-path:path("M0 0")){.lx-paper{display:none}}
/* 19:30 onwards: a late flight crosses with its strobe blinking twice. It goes to the airports page too. */
.lx-redeye{position:absolute;left:0;top:max(19vh,146px);padding:12px;margin:-12px 0 0 -12px;pointer-events:auto;cursor:pointer;opacity:var(--evening,0);animation:lx-redeye 42s linear 2s infinite backwards}
.lx-redeye i{position:relative;display:block;width:2px;height:2px;border-radius:50%;background:rgba(255,255,255,.55)}
.lx-redeye i::before{content:"";position:absolute;left:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.8);opacity:0;animation:lx-strobe 1.6s steps(1) infinite}
@keyframes lx-redeye{0%{transform:translateX(-2vw)}100%{transform:translateX(102vw)}}
@keyframes lx-strobe{0%{opacity:1}6%{opacity:0}14%{opacity:1}20%,100%{opacity:0}}
@media (max-width:900px){.lx-balloon{left:90vw}}
/* Lycia AI Venues in the sky: each venue type has its own small visitor that links to its page.
   Hotels: by day a couple sunbathes on loungers beside the clock's sun and moves along with it. When the sun turns
   into the moon they get up and walk off the left edge of the screen; home-lycia.js sets the distance (--walk) and
   the time it takes them (--leave-time). */
.lx-sunbathers{position:absolute;left:-36px;top:16px;width:40px;height:13px;pointer-events:auto;cursor:pointer}
.lx-sunbathers i,.lx-sunbathers b{position:absolute;top:0;height:13px}
.lx-sunbathers i{left:0;width:40px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%2014%22%3E%3Cpath%20d%3D%22M22.2%202.4v10.8%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M14.6%204.6C16.4%201%2028%201%2029.8%204.6z%22%20fill%3D%22%230f766e%22%2F%3E%3Cpath%20d%3D%22M19.6%204.6c.6-2.2%204.6-2.2%205.2%200z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.85%22%2F%3E%3Cg%20transform%3D%22translate(0%200)%22%3E%3Cpath%20d%3D%22M1.6%206.8L4.4%2010.6H17%22%20fill%3D%22none%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.2%2010.6v2.6M16.2%2010.6v2.6%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(25%200)%22%3E%3Cpath%20d%3D%22M1.6%206.8L4.4%2010.6H17%22%20fill%3D%22none%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.2%2010.6v2.6M16.2%2010.6v2.6%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(0%200)%22%3E%3Ccircle%20cx%3D%222.6%22%20cy%3D%225.2%22%20r%3D%221.7%22%20fill%3D%22%230f1418%22%20fill-opacity%3D%22.78%22%2F%3E%3Cpath%20d%3D%22M3.6%207.2c1.4%201.6%203%202.4%205.4%202.6l7%20.2v-1.4l-7-.6c-1.8-.2-3.2-1-4.2-2.2z%22%20fill%3D%22%230f1418%22%20fill-opacity%3D%22.78%22%2F%3E%3Cpath%20d%3D%22M6.6%207.9c1%20.7%202%201%203.4%201.2v1l-3.4-.3c-.4-.5-.4-1.3%200-1.9z%22%20fill%3D%22%230f766e%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(25%200)%22%3E%3Ccircle%20cx%3D%222.6%22%20cy%3D%225.2%22%20r%3D%221.7%22%20fill%3D%22%230f1418%22%20fill-opacity%3D%22.78%22%2F%3E%3Cpath%20d%3D%22M3.6%207.2c1.4%201.6%203%202.4%205.4%202.6l7%20.2v-1.4l-7-.6c-1.8-.2-3.2-1-4.2-2.2z%22%20fill%3D%22%230f1418%22%20fill-opacity%3D%22.78%22%2F%3E%3Cpath%20d%3D%22M6.6%207.9c1%20.7%202%201%203.4%201.2v1l-3.4-.3c-.4-.5-.4-1.3%200-1.9z%22%20fill%3D%22%23f2c14e%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;transition:opacity .3s}
.lx-sunbathers b{left:11px;width:18px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2014%22%3E%3Cg%20transform%3D%22translate(1%200)%22%20fill%3D%22%23aab6c6%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%222%22%20r%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M3.6%204h2.8l.4%205.2H3.2z%22%2F%3E%3Cpath%20d%3D%22M3.6%209.2L2.2%2013.6h1.3L5%209.6zM6.4%209.2l1.4%204.4H6.5L5%209.6z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(8%200.6)%22%20fill%3D%22%23aab6c6%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%222%22%20r%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M3.6%204h2.8l.4%205.2H3.2z%22%2F%3E%3Cpath%20d%3D%22M3.8%209.2l-.3%204.4h1.3l.4-4.2zM6.2%209.2l.3%204.4H5.2l-.4-4.2z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(20%200)%22%3E%3Cg%20transform%3D%22translate(1%200)%22%20fill%3D%22%23aab6c6%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%222%22%20r%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M3.6%204h2.8l.4%205.2H3.2z%22%2F%3E%3Cpath%20d%3D%22M3.8%209.2l-.3%204.4h1.3l.4-4.2zM6.2%209.2l.3%204.4H5.2l-.4-4.2z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(8%200.6)%22%20fill%3D%22%23aab6c6%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%222%22%20r%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M3.6%204h2.8l.4%205.2H3.2z%22%2F%3E%3Cpath%20d%3D%22M3.6%209.2L2.2%2013.6h1.3L5%209.6zM6.4%209.2l1.4%204.4H6.5L5%209.6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/200% 100% no-repeat;opacity:0;animation:lx-trot .4s steps(1) infinite}
.lx-sh[data-theme=dark] .lx-sunbathers{pointer-events:none}
.lx-sh[data-theme=dark] .lx-sunbathers i{opacity:0}
.lx-sh[data-theme=dark] .lx-sunbathers b{animation:lx-trot .4s steps(1) infinite,lx-leave var(--leave-time,1.8s) linear forwards}
@keyframes lx-leave{0%{opacity:1;transform:translateX(0)}88%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--walk,60px) * -1 - 30px))}}
/* Once they have gone, a tiny wolf trots in from the left edge of the screen in --walk-time, sits down beside the
   moon and howls at it every few seconds. */
.lx-wolf{position:absolute;left:-18px;top:14px;width:16px;height:17px;opacity:0;transform:translateX(calc(var(--walk,60px) * -1));transition:opacity .3s,transform 0s linear .3s;pointer-events:none}
.lx-sh[data-theme=dark] .lx-wolf{opacity:1;transform:none;transition:opacity .3s calc(var(--leave-time,1.8s) + .2s),transform var(--walk-time,1.6s) linear calc(var(--leave-time,1.8s) + .2s)}
/* Walking: two step frames side by side in one image, swapped every half step, with a small bob. */
.lx-wolf b{position:absolute;left:-3px;top:3px;width:22px;height:14px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2068%2022%22%3E%3Cg%20fill%3D%22%23aab6c6%22%3E%3Cpath%20d%3D%22M8.6%209.6C6%209.2%203.4%207.8%201.8%205.6c-.6-.9.3-1.7%201.1-1.2%201.8%201.1%204%202%206.4%202.3z%22%2F%3E%3Cpath%20d%3D%22M7.6%2010.2C8%207.8%2011%206.6%2015%206.6h6.4l3-1.6%202.6%203.2c.2%202.6-.8%204.6-3%205.6-1.4.6-3%20.8-4.6.8h-6.6c-2.8%200-5.4-1.4-5.2-4.4z%22%2F%3E%3Cellipse%20cx%3D%2227.4%22%20cy%3D%225.4%22%20rx%3D%223.7%22%20ry%3D%223.1%22%2F%3E%3Cpath%20d%3D%22M29.2%204l4.2.4c.7.1.8%201%20.2%201.3l-3.8%201.6z%22%2F%3E%3Cpath%20d%3D%22M24.9%203.6l.1-3.4%202.3%202.6z%22%2F%3E%3Cpath%20d%3D%22M26.9%202.8l.9-3.1%201.6%202.9z%22%2F%3E%3Cpath%20d%3D%22M23.4%2012.6l2.8%208.2h1.9l-2.4-8.8zM20.6%2013.2l-2%207.6h1.9l2.6-7.2zM13.6%2013.4l1.6%207.4h1.9l-1-7.6zM11.2%2012.6l-3.2%208.2h1.9l3.6-7.2z%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2228.4%22%20cy%3D%224.6%22%20r%3D%22.6%22%20fill%3D%22%230f1418%22%2F%3E%3Cg%20transform%3D%22translate(34%200)%22%3E%3Cg%20fill%3D%22%23aab6c6%22%3E%3Cpath%20d%3D%22M8.6%209.6C6%209.2%203.4%207.8%201.8%205.6c-.6-.9.3-1.7%201.1-1.2%201.8%201.1%204%202%206.4%202.3z%22%2F%3E%3Cpath%20d%3D%22M7.6%2010.2C8%207.8%2011%206.6%2015%206.6h6.4l3-1.6%202.6%203.2c.2%202.6-.8%204.6-3%205.6-1.4.6-3%20.8-4.6.8h-6.6c-2.8%200-5.4-1.4-5.2-4.4z%22%2F%3E%3Cellipse%20cx%3D%2227.4%22%20cy%3D%225.4%22%20rx%3D%223.7%22%20ry%3D%223.1%22%2F%3E%3Cpath%20d%3D%22M29.2%204l4.2.4c.7.1.8%201%20.2%201.3l-3.8%201.6z%22%2F%3E%3Cpath%20d%3D%22M24.9%203.6l.1-3.4%202.3%202.6z%22%2F%3E%3Cpath%20d%3D%22M26.9%202.8l.9-3.1%201.6%202.9z%22%2F%3E%3Cpath%20d%3D%22M22.2%2013l.4%207.8h1.9l-.2-8zM20.2%2013.2l.9%207.6h1.9l-.8-7.6zM12.4%2013.2l-.4%207.6h1.9l.4-7.6zM10.6%2012.8l.9%208h1.9l-.7-8z%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2228.4%22%20cy%3D%224.6%22%20r%3D%22.6%22%20fill%3D%22%230f1418%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/200% 100% no-repeat;animation:lx-trot .34s steps(1) infinite,lx-bob .34s ease-in-out infinite;transition:opacity .15s}
.lx-sh[data-theme=dark] .lx-wolf b{opacity:0;transition-delay:calc(var(--leave-time,1.8s) + .2s + var(--walk-time,1.6s))}
.lx-wolf i{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2034%22%3E%3Cg%20fill%3D%22%23aab6c6%22%3E%3Cpath%20d%3D%22M7.5%2030.2C4.4%2031.4%201.4%2029.8%201%2026.6c-.2-1.4%201-2.1%201.9-1%201.2%201.6%203%202.5%205.1%202.3z%22%2F%3E%3Cpath%20d%3D%22M7%2033.4c-3.6%200-4-5.6-1.4-9.4%202.2-3.2%205-5.8%207.6-8.6l7.6-1.8c2%202.4%202.4%206%201.4%209.6l.3%2010.2h-2.4l-.6-5.8c-1.6%201-3.8%201.6-5.8%201.8.8%201.2%201.4%202.6%201.6%204z%22%2F%3E%3Cpath%20d%3D%22M13.6%2010.2l7-1.2%201%206.4-8.2%201.4z%22%2F%3E%3Cellipse%20cx%3D%2218.2%22%20cy%3D%229.2%22%20rx%3D%224.4%22%20ry%3D%223.8%22%20transform%3D%22rotate(-38%2018.2%209.2)%22%2F%3E%3Cpath%20d%3D%22M19.4%206.2l6.2-5c.7-.5%201.5.3%201%201.1L22.8%208.6z%22%2F%3E%3Cpath%20d%3D%22M14.4%208.2L13.2%202.6l4%203.4z%22%2F%3E%3Cpath%20d%3D%22M16.6%205.8l.3-4.8%202.8%204z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M21.6%2010c1.1%202.2%201.9%204.6%201.5%207l-1%20.1.8%201.5-1.2.5.6%201.9-1.5.2c-.8-3.6-1.3-7.2-.5-10.8z%22%20fill%3D%22%23cdd5e0%22%2F%3E%3Cpath%20d%3D%22M18.3%207.9q.8-.7%201.6-.1%22%20fill%3D%22none%22%20stroke%3D%22%230f1418%22%20stroke-width%3D%22.7%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;transform-origin:30% 100%;opacity:0;transition:opacity .15s;animation:lx-howl 7s ease-in-out infinite}
.lx-sh[data-theme=dark] .lx-wolf i{opacity:1;transition-delay:calc(var(--leave-time,1.8s) + .2s + var(--walk-time,1.6s))}
/* "Awoo": two small sound arcs rise from the snout towards the moon while the head is up. */
.lx-wolf i::before,.lx-wolf i::after{content:"";position:absolute;left:10px;top:-3px;width:7px;height:4px;border-top:1.2px solid rgba(220,232,255,.85);border-radius:50% 50% 0 0/100% 100% 0 0;opacity:0;animation:lx-awoo 7s ease-out infinite}
.lx-wolf i::after{animation-delay:.55s}
@keyframes lx-trot{0%{background-position:0 0}50%{background-position:100% 0}}
@keyframes lx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes lx-howl{0%,8%{transform:rotate(0)}16%,52%{transform:rotate(-7deg)}62%,100%{transform:rotate(0)}}
@keyframes lx-awoo{0%,14%{opacity:0;transform:rotate(35deg) translateY(0) scale(.6)}18%{opacity:.85}46%,100%{opacity:0;transform:rotate(35deg) translateY(-9px) scale(1.3)}}
/* Restaurants: around lunch a seagull flies over with a simit in its beak. */
.lx-gull{position:absolute;left:0;top:max(19.6vh,150px);padding:10px;margin:-10px 0 0 -10px;pointer-events:auto;cursor:pointer;opacity:calc(min(var(--hour,0) - .45, 1.7 - var(--hour,0)) * 4);scale:clamp(0, min(var(--hour,0) - .45, 1.7 - var(--hour,0)) * 100, 1);animation:lx-fly-east 30s linear 2s infinite backwards}
.lx-gull i{display:block;width:30px;height:16px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2016%22%3E%3Cpath%20d%3D%22M14.6%208.4C13.6%205%2012%202.4%209.4.8c1%202.6%202.2%205.4%202.8%208z%22%20fill%3D%22%23c3cbd5%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M12.6%208.6C10.6%205%208%202.4%204.4%201.2c2.6%202.4%204.8%205.2%206.2%207.8z%22%20fill%3D%22%23aab4c0%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M4.4%201.2c1.1.3%202%20.8%202.9%201.4L6%202.8z%22%20fill%3D%22%232b333c%22%2F%3E%3Cpath%20d%3D%22M8.8%208.6l-4.4-1.6.5%203.6z%22%20fill%3D%22%23dfe4ea%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%229.2%22%20rx%3D%226.6%22%20ry%3D%222.7%22%20fill%3D%22%23f6f8fa%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2221.4%22%20cy%3D%227.6%22%20r%3D%222.3%22%20fill%3D%22%23f6f8fa%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M23.5%207.3l2.7.6-2.5%201z%22%20fill%3D%22%23e0b23a%22%2F%3E%3Ccircle%20cx%3D%2222.2%22%20cy%3D%227.1%22%20r%3D%22.45%22%20fill%3D%22%230f1418%22%2F%3E%3Ccircle%20cx%3D%2227%22%20cy%3D%229.2%22%20r%3D%222.1%22%20fill%3D%22none%22%20stroke%3D%22%23b97a3c%22%20stroke-width%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M26%207.6h.01M28.2%208.2h.01M27.6%2010.8h.01M25.8%2010h.01%22%20stroke%3D%22%23f3dfb4%22%20stroke-width%3D%22.55%22%20stroke-linecap%3D%22round%22%2F%3E%3Cg%20transform%3D%22translate(30%200)%22%3E%3Cpath%20d%3D%22M8.8%208.6l-4.4-1.6.5%203.6z%22%20fill%3D%22%23dfe4ea%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%229.2%22%20rx%3D%226.6%22%20ry%3D%222.7%22%20fill%3D%22%23f6f8fa%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2221.4%22%20cy%3D%227.6%22%20r%3D%222.3%22%20fill%3D%22%23f6f8fa%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M23.5%207.3l2.7.6-2.5%201z%22%20fill%3D%22%23e0b23a%22%2F%3E%3Ccircle%20cx%3D%2222.2%22%20cy%3D%227.1%22%20r%3D%22.45%22%20fill%3D%22%230f1418%22%2F%3E%3Ccircle%20cx%3D%2227%22%20cy%3D%229.2%22%20r%3D%222.1%22%20fill%3D%22none%22%20stroke%3D%22%23b97a3c%22%20stroke-width%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M26%207.6h.01M28.2%208.2h.01M27.6%2010.8h.01M25.8%2010h.01%22%20stroke%3D%22%23f3dfb4%22%20stroke-width%3D%22.55%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14.6%2010C13.6%2012.6%2012%2014.4%209.6%2015.4c1-2%202-4.2%202.6-6z%22%20fill%3D%22%23c3cbd5%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M12.6%209.8C10.6%2012.4%208%2014.2%204.6%2015c2.4-1.8%204.6-3.8%206-6z%22%20fill%3D%22%23aab4c0%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M4.6%2015c1-.1%202-.4%202.8-.8l-1.2-.6z%22%20fill%3D%22%232b333c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/200% 100% no-repeat;animation:lx-trot .5s steps(1) infinite}
/* Malls: in the afternoon a small blimp drifts over, the kind that circles a mall on opening day. */
.lx-blimp{position:absolute;left:0;top:max(19.8vh,152px);padding:8px;margin:-8px 0 0 -8px;pointer-events:auto;cursor:pointer;opacity:calc(min(var(--hour,0) - 1.4, 2.7 - var(--hour,0)) * 4);scale:clamp(0, min(var(--hour,0) - 1.4, 2.7 - var(--hour,0)) * 100, 1);animation:lx-drift 80s linear -24s infinite}
.lx-blimp i{display:block;width:46px;height:18px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2022%22%3E%3Cpath%20d%3D%22M47%209.5l6-6h2.4l-3.6%207zM47%2012.5l6%206h2.4l-3.6-7z%22%20fill%3D%22%23c9d1db%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cellipse%20cx%3D%2227%22%20cy%3D%2211%22%20rx%3D%2222%22%20ry%3D%228.4%22%20fill%3D%22%23eef1f5%22%20stroke%3D%22%230f1418%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M9.5%206.4h35a21%208%200%200%201%200%209.2h-35a21%208%200%200%201%200-9.2z%22%20fill%3D%22%230f766e%22%2F%3E%3Cpath%20d%3D%22M24.6%209.4h4.8l.5%204.6h-5.8z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M25.8%209.4c0-1.6%202.4-1.6%202.4%200%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M23%2019.2l1-1.4h6l1%201.4z%22%20fill%3D%22%230f1418%22%20fill-opacity%3D%22.7%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;animation:lx-bob 3s ease-in-out infinite}
@keyframes lx-drift{0%{transform:translateX(104vw)}75%,100%{transform:translateX(-12vw)}}
/* Events: on the evening card, fireworks go up beside the headline. Only a burst in the sky can be hovered or clicked. */
.lx-firework{position:absolute;left:var(--x);top:var(--y);pointer-events:auto;cursor:pointer;opacity:calc(min(var(--hour,0) - 2.6, 3.9 - var(--hour,0)) * 3);scale:clamp(0, min(var(--hour,0) - 2.6, 3.9 - var(--hour,0)) * 100, 1)}
.lx-firework i{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;visibility:hidden;animation:lx-fw-show 5.2s var(--d,0s) infinite}
.lx-firework i::before,.lx-firework i::after{content:"";position:absolute;left:34px;top:34px;width:4px;height:4px;border-radius:50%;visibility:visible;opacity:0}
.lx-firework i::before{background:#fff;box-shadow:30.0px 0.0px 0 0px #ffffff,26.0px 15.0px 0 0px #f5d98a,15.0px 26.0px 0 0px #6fe3cf,0.0px 30.0px 0 0px #ffffff,-15.0px 26.0px 0 0px #f5d98a,-26.0px 15.0px 0 0px #6fe3cf,-30.0px 0.0px 0 0px #ffffff,-26.0px -15.0px 0 0px #f5d98a,-15.0px -26.0px 0 0px #6fe3cf,-0.0px -30.0px 0 0px #ffffff,15.0px -26.0px 0 0px #f5d98a,26.0px -15.0px 0 0px #6fe3cf,13.9px 5.7px 0 -1px #ffffff,5.7px 13.9px 0 -1px #f5d98a,-5.7px 13.9px 0 -1px #6fe3cf,-13.9px 5.7px 0 -1px #ffffff,-13.9px -5.7px 0 -1px #f5d98a,-5.7px -13.9px 0 -1px #6fe3cf,5.7px -13.9px 0 -1px #ffffff,13.9px -5.7px 0 -1px #f5d98a;animation:lx-burst 5.2s ease-out var(--d,0s) infinite}
.lx-firework i::after{left:35px;width:2px;height:12px;border-radius:2px;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0));animation:lx-rocket 5.2s ease-out var(--d,0s) infinite}
@keyframes lx-fw-show{0%,21%{visibility:hidden}22%,60%{visibility:visible}61%,100%{visibility:hidden}}
@keyframes lx-burst{0%,20%{opacity:0;transform:scale(.1)}22%{opacity:1;transform:scale(.25)}48%{opacity:.95;transform:scale(1)}62%,100%{opacity:0;transform:translateY(8px) scale(1.08)}}
@keyframes lx-rocket{0%{opacity:0;transform:translateY(64px)}3%{opacity:.9}20%{opacity:.9;transform:translateY(0)}22%,100%{opacity:0;transform:translateY(0)}}
@media (max-width:900px){.lx-firework{left:78vw}}
/* Whatever is out of sight stands still. */
.lx-sh:not([data-theme=dark]) .lx-sh-night *,.lx-sh:not([data-theme=dark]) .lx-sh-night::before,.lx-sh:not([data-theme=dark]) .lx-sh-night::after,.lx-sh:not([data-theme=dark]) .lx-sh-evening::before,.lx-sh:not([data-theme=dark]) .lx-sh-evening::after,.lx-sh:not([data-theme=dark]) .lx-redeye,.lx-sh:not([data-theme=dark]) .lx-redeye i::before,.lx-sh:not([data-theme=dark]) .lx-firework i,.lx-sh:not([data-theme=dark]) .lx-firework i::before,.lx-sh:not([data-theme=dark]) .lx-firework i::after,.lx-sh:not([data-theme=dark]) .lx-wolf i,.lx-sh:not([data-theme=dark]) .lx-wolf i::before,.lx-sh:not([data-theme=dark]) .lx-wolf i::after,.lx-sh:not([data-theme=dark]) .lx-wolf b,.lx-sh[data-theme=dark] .lx-sh-day *,.lx-sh[data-theme=dark] .lx-sh-sun::before,.lx-sh[data-theme=dark] .lx-sh-sun::after,.lx-sh[data-theme=dark] .lx-balloon i::before{animation-play-state:paused}
/* The hero button glides to the Office demo; this keeps its heading clear of the floating nav. */
.lx-demo{scroll-margin-top:40px}
/* Under the chips, the sun (a moon after dark) and its visitors: sunbathers by day, the wolf at night. */
.lx-sh-clock{position:relative;height:30px;margin-top:28px}
.lx-sun{position:absolute;left:36px;top:0;width:13px;height:13px;border-radius:50%;background:#f5b544;box-shadow:0 0 0 4px rgba(245,181,68,.18),0 0 20px rgba(245,181,68,.6);transform:translateY(var(--sun-y,13px));transition:transform .7s cubic-bezier(.3,.7,.2,1),background-color .6s,box-shadow .6s}
.lx-sh[data-theme=dark] .lx-sun{background:transparent;box-shadow:inset -4px -1px 0 0 #e9edf7,0 0 18px rgba(200,215,255,.35)}
.lx-time{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:14px}
.lx-time time{color:#fff;font-variant-numeric:tabular-nums}
.lx-time::before{content:"";width:9px;height:9px;border-radius:50%;background:#f5b544;box-shadow:0 0 10px rgba(245,181,68,.6)}
#lx-card-night .lx-time::before{background:transparent;box-shadow:inset -3px -1px 0 0 #e9edf7}

/* Card 1: every system flows into one core */
/* The logos orbit the Lycia mark. --orbit turns once every 80s while the card is active; each logo sits at its own --deg
   on the oval its line ends on, and the lines turn with the same --orbit, so the labels stay upright and the lines attached. */
@property --orbit{syntax:'<angle>';inherits:true;initial-value:0deg}
.lx-hub{height:300px;animation:lx-orbit 80s linear infinite paused}
.lx-sh-card.is-active .lx-hub{animation-play-state:running}
@keyframes lx-orbit{to{--orbit:360deg}}
.lx-hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lx-hub-lines g{transform-origin:50px 50px;transform:rotate(var(--orbit))}
.lx-hub-lines line{stroke:rgba(255,255,255,.12);stroke-width:1.3;vector-effect:non-scaling-stroke}
.lx-hub-streaks line{stroke:var(--lx-glow);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:16 184;stroke-dashoffset:16;opacity:0}
.lx-sh-card.is-active .lx-hub-streaks line{animation:lx-streak 2.8s cubic-bezier(.5,0,.3,1) infinite;animation-delay:var(--d)}
@keyframes lx-streak{0%{stroke-dashoffset:16;opacity:0}10%{opacity:1}55%{stroke-dashoffset:-100;opacity:1}56%,100%{opacity:0;stroke-dashoffset:-100}}
.lx-hub-node{position:absolute;left:calc(50% + cos(var(--deg) + var(--orbit)) * 38%);top:calc(50% + sin(var(--deg) + var(--orbit)) * 38%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;z-index:1}
.lx-hub-node img,.lx-hub-glyph{width:48px;height:48px;padding:11px;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);object-fit:contain}
.lx-hub-glyph{fill:none;stroke:#1a2e1f;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lx-hub-node b{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.7);white-space:nowrap}
.lx-sh-card.is-active .lx-hub-node img,.lx-sh-card.is-active .lx-hub-glyph{animation:lx-ping 2.8s ease-out infinite;animation-delay:var(--d)}
@keyframes lx-ping{0%,8%{box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 0 rgba(var(--lx-glow-rgb),.55)}30%,100%{box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 10px rgba(var(--lx-glow-rgb),0)}}
.lx-hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.lx-hub-mark{position:relative;display:block;width:84px;height:84px}
.lx-hub-mark img{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 0 9px rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.45)}
.lx-hub-mark::before,.lx-hub-mark::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(var(--lx-glow-rgb),.55);opacity:0}
.lx-sh-card.is-active .lx-hub-mark::before{animation:lx-ring 2.8s ease-out infinite}
.lx-sh-card.is-active .lx-hub-mark::after{animation:lx-ring 2.8s ease-out 1.4s infinite}
@keyframes lx-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}

/* Card 2: one question, two roles */
.lx-roles-mark{align-self:center;width:34px;height:34px;margin-top:14px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.5),0 0 0 6px rgba(255,255,255,.07)}
.lx-q{align-self:center;font-size:17px;font-weight:600;padding:12px 18px;border-radius:14px;background:#fff;color:var(--lx-ink);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.lx-answers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;position:relative}
.lx-answers::before{content:"";position:absolute;left:25%;right:25%;top:-22px;height:16px;border:1.5px solid rgba(255,255,255,.18);border-bottom:0;border-radius:12px 12px 0 0}
.lx-answer{border-radius:16px;padding:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px}
.lx-answer.is-ok{border-color:rgba(127,214,164,.45);background:rgba(127,214,164,.08)}
.lx-answer.is-no{border-color:rgba(240,180,76,.4);background:rgba(240,180,76,.06)}
.lx-person{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75)}
.lx-person b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);font-size:11px;color:#fff}
.lx-answer p{font-size:14px;line-height:1.5;color:#fff}
.lx-file{align-self:flex-start;font-size:12px;font-weight:600;padding:5px 9px 5px 26px;border-radius:7px;background:rgba(127,214,164,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h5l3 3v9H4z' fill='none' stroke='%237fd6a4' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 7px 50%/14px no-repeat;color:#c9f0d8}
.lx-file.is-locked{background:rgba(240,180,76,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.5' y='7' width='9' height='7' rx='1.5' fill='none' stroke='%23f0b44c' stroke-width='1.4'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2' fill='none' stroke='%23f0b44c' stroke-width='1.4'/%3E%3C/svg%3E") 7px 50%/14px no-repeat;color:#f7dcaa}
.lx-redacted{position:relative;display:grid;gap:7px;padding:4px 0}
.lx-redacted i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.18);filter:blur(2px)}
.lx-redacted i:nth-child(2){width:80%}
.lx-redacted i:nth-child(3){width:60%}
.lx-redacted span{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#f7dcaa;text-align:center}
.lx-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:22px}
.lx-badges li{font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.75)}
.lx-sh-card.is-active .lx-answer{animation:lx-rise .6s both}
.lx-sh-card.is-active .lx-answer + .lx-answer{animation-delay:.15s}
@keyframes lx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Card 3: the shared task board */
.lx-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start;justify-content:stretch}
.lx-col{border-radius:14px;background:rgba(0,0,0,.18);padding:10px;min-height:270px;display:flex;flex-direction:column;gap:8px}
.lx-col h3{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:rgba(255,255,255,.7);padding:2px 4px 4px}
.lx-col h3 span{color:rgba(255,255,255,.4)}
.lx-task{border-radius:11px;background:#fff;color:var(--lx-ink);padding:10px 11px;display:flex;flex-direction:column;gap:5px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.lx-task b{font-size:12.5px;font-weight:700;line-height:1.3}
.lx-task small{font-size:11px;color:var(--lx-muted);display:flex;align-items:center;gap:5px}
.lx-ai{width:14px;height:14px;border-radius:50%;flex:none}
.lx-log .lx-ai{width:16px;height:16px;vertical-align:-3px;margin-right:8px}
.lx-task .lx-file{font-size:11px;background-color:#e8f5ec;color:var(--lx-ok-ink);margin-top:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h5l3 3v9H4z' fill='none' stroke='%231d7a49' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lx-task.is-done b{text-decoration:line-through;text-decoration-color:rgba(16,32,22,.35)}
.lx-task.is-live{outline:2px solid #2dd4bf;outline-offset:0}
.lx-steps-live{display:grid;gap:4px;margin-top:4px}
.lx-steps-live li{font-size:11px;color:var(--lx-muted);display:flex;gap:6px;align-items:center}
.lx-steps-live li::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid #cbd5e1;flex:none}
.lx-bar{height:4px;border-radius:4px;background:#ccfbf1;overflow:hidden;margin-top:4px}
.lx-bar i{display:block;height:100%;width:100%;background:#14b8a6;transform-origin:left;transform:scaleX(.15)}
.lx-sh-card.is-active .lx-bar i{animation:lx-bar 6s ease-in-out infinite}
.lx-sh-card.is-active .lx-steps-live li::before{animation:lx-tick 6s infinite}
.lx-sh-card.is-active .lx-steps-live li:nth-child(2)::before{animation-name:lx-tick2}
.lx-sh-card.is-active .lx-steps-live li:nth-child(3)::before{animation-name:lx-tick3}
.lx-sh-card.is-active .lx-arrive{animation:lx-arrive 6s infinite}
@keyframes lx-bar{0%{transform:scaleX(.08)}70%,100%{transform:scaleX(1)}}
@keyframes lx-tick{0%,15%{background:transparent;border-color:#cbd5e1}20%,100%{background:#14b8a6;border-color:#14b8a6}}
@keyframes lx-tick2{0%,40%{background:transparent;border-color:#cbd5e1}45%,100%{background:#14b8a6;border-color:#14b8a6}}
@keyframes lx-tick3{0%,65%{background:transparent;border-color:#cbd5e1}70%,100%{background:#14b8a6;border-color:#14b8a6}}
@keyframes lx-arrive{0%,72%{opacity:0;transform:translateY(-8px) scale(.97)}80%,95%{opacity:1;transform:none}100%{opacity:0}}

/* Card 4: overnight log ending in an approval */
.lx-sky{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;color:rgba(255,255,255,.45);padding:12px 14px 12px 44px;border-radius:12px;background:linear-gradient(90deg,#26314a 0%,#121a2a 45%,#1e2a40 75%,#3b4a5c 100%)}
.lx-moon{position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;box-shadow:inset -5px -2px 0 0 #e9edf7}
.lx-log{display:grid;gap:8px;margin-top:16px;position:relative}
.lx-log li{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.82);padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.lx-log time{font-size:12px;font-weight:700;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.lx-log li.is-approval{grid-template-columns:52px 1fr auto;background:#fff;color:var(--lx-ink);border-color:#fff;font-weight:600}
.lx-log li.is-approval time{color:var(--lx-muted)}
.lx-log em{display:flex;gap:6px;font-style:normal}
.lx-log em i{font-style:normal;font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px;border:1px solid var(--lx-line)}
.lx-log em i + i{background:#0f1418;border-color:#0f1418;color:#fff}
.lx-sh-card.is-active .lx-log li{animation:lx-rise .5s both}
.lx-sh-card.is-active .lx-log li:nth-child(2){animation-delay:.25s}
.lx-sh-card.is-active .lx-log li:nth-child(3){animation-delay:.5s}
.lx-sh-card.is-active .lx-log li:nth-child(4){animation-delay:.8s}
/* What the teammate may do on its own: the permissions you set, shown as rules rather than an approval step. */
.lx-perms{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.5)}
.lx-perms span{margin-right:4px}
.lx-perms b{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.82);font-weight:600}
.lx-perms b::before{content:"\2713";color:var(--lx-glow)}
.lx-perms b.is-off{color:rgba(255,255,255,.5);border-style:dashed}
.lx-perms b.is-off::before{content:"\2715";color:rgba(255,255,255,.45)}
.lx-sh-card.is-active .lx-perms{animation:lx-rise .5s 1.05s both}

/* Card 5: a guest conversation */
.lx-phone{align-self:center;width:min(360px,100%);border-radius:22px;background:#ece5dd;padding:0 0 14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.lx-phone-head{display:flex;align-items:center;gap:9px;padding:12px 14px;background:#075e54;color:#fff;font-size:14px;font-weight:700}
.lx-phone-head img{width:18px;height:18px;filter:brightness(0) invert(1)}
.lx-phone-head small{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:rgba(255,255,255,.75)}
.lx-phone-head small img{filter:none;width:auto;height:15px}
.lx-msg{max-width:78%;margin:10px 12px 0;padding:8px 11px;border-radius:10px;font-size:13.5px;line-height:1.45;color:#111b21;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.lx-msg.is-guest{background:#fff;border-top-left-radius:3px}
.lx-msg.is-ai{background:#d9fdd3;margin-left:auto;border-top-right-radius:3px}
.lx-sh-card.is-active .lx-msg{animation:lx-rise .45s both}
.lx-sh-card.is-active .lx-msg:nth-child(3){animation-delay:.5s}
.lx-sh-card.is-active .lx-msg:nth-child(4){animation-delay:1.1s}
.lx-sh-card.is-active .lx-msg:nth-child(5){animation-delay:1.6s}

/* Evening card: an airport departures board. One gate changes, and every passenger on that flight hears it in their own language. */
.lx-gatechange{justify-content:flex-start}
.lx-board{border-radius:14px;background:#07090c;border:1px solid rgba(255,255,255,.08);padding:10px 16px 4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.lx-board-head{display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.lx-board ol{margin:0;padding:0;list-style:none}
.lx-board li{display:grid;grid-template-columns:52px minmax(0,1fr) 56px 116px;align-items:center;gap:10px;height:30px;margin:0 -8px;padding:0 8px;border-radius:8px;font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:#ffcf5c}
.lx-board li + li{box-shadow:0 -1px 0 rgba(255,255,255,.05)}
.lx-board time{color:rgba(255,207,92,.7)}
.lx-board b{font-weight:700;color:#ffe08a}
.lx-dep{font-size:11.5px;color:rgba(255,207,92,.7)}
.lx-board li.is-change{background:rgba(245,181,68,.12)}
.lx-dep-gate,.lx-dep{display:inline-grid;justify-items:start;perspective:240px}
.lx-dep-gate > span,.lx-dep > span{grid-area:1/1;backface-visibility:hidden}
.lx-board .was{opacity:0}
.lx-dep .now{padding:3px 7px;border-radius:5px;background:#f5b544;color:#0f1418;font-weight:700}
.lx-sent{display:flex;align-items:center;gap:9px;margin:12px 0 8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.78)}
.lx-sent img{width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.lx-notes{display:grid;gap:6px;margin:0;padding:0;list-style:none}
/* A short thread: the AI teammate's notice, the passenger's reply, then an answer that sells the lounge. Shown in English, labelled with the language it was sent in. */
.lx-notes li{width:fit-content;max-width:86%;padding:6px 12px 7px;border-radius:4px 12px 12px 12px;background:#f3f5f8;color:#0f1418;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.lx-notes li.is-guest{justify-self:end;border-radius:12px 4px 12px 12px;background:#2a3441;color:#fff}
.lx-note-meta{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#6b7480}
.lx-note-meta b{font-weight:700;color:#0f1418;margin-right:2px}
.lx-note-meta img{width:14px;height:14px;border-radius:50%}
.lx-notes li.is-guest .lx-note-meta{color:rgba(255,255,255,.55)}
.lx-notes li.is-guest .lx-note-meta b{color:#fff}
.lx-notes p{margin-top:2px;font-size:13px;line-height:1.45}
/* When the card arrives: the gate flips, the row flashes, then the messages go out. The resting state is the last frame. */
.lx-sh-card.is-active .lx-board .was{animation:lx-flip-out 1.6s .3s both}
.lx-sh-card.is-active .lx-board .now{animation:lx-flip-in 1.6s .3s both}
.lx-sh-card.is-active .lx-board li.is-change{animation:lx-row-alert .9s 1.1s 2 both}
.lx-sh-card.is-active .lx-sent{animation:lx-rise .5s 1.5s both}
.lx-sh-card.is-active .lx-notes li{animation:lx-rise .5s var(--d,1.9s) both}
@keyframes lx-flip-out{0%,35%{opacity:1;transform:none}55%,100%{opacity:0;transform:rotateX(90deg)}}
@keyframes lx-flip-in{0%,50%{opacity:0;transform:rotateX(-90deg)}75%,100%{opacity:1;transform:none}}
@keyframes lx-row-alert{0%,100%{background:rgba(245,181,68,.12)}50%{background:rgba(245,181,68,.34)}}
/* The whole card leads to Lycia AI Venues below. */
.lx-card-go{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:15px;font-weight:700;color:#fff;text-decoration:none}
.lx-card-go::after{content:"";position:absolute;inset:0;z-index:2;border-radius:24px}
.lx-card-go svg{width:28px;height:28px;padding:6px;border-radius:50%;background:rgba(255,255,255,.12);transition:transform .3s cubic-bezier(.3,.7,.2,1),background-color .3s}
.lx-sh-card:has(.lx-card-go){cursor:pointer;transition:background-color .6s,box-shadow .6s,border-color .3s}
.lx-sh-card:has(.lx-card-go):hover{border-color:rgba(255,255,255,.26)}
.lx-sh-card:hover .lx-card-go svg,.lx-card-go:focus-visible svg{transform:translateY(3px);background:rgba(255,255,255,.22)}

/* ============ CONTRAST ============ */
.lx-contrast{background:var(--lx-paper)}
/* Two rows flow past each other: the mishaps of separate AI accounts drift left, what Lycia AI does instead drifts right. */
.lx-versus{overflow:hidden}
.lx-versus .lx-h2{max-width:22ch;margin:0 auto;text-align:center}
.lx-versus .lx-lede{margin:18px auto 0;text-align:center}
.lx-compare-cta{margin-top:20px;font-size:15px;font-weight:600}
.lx-compare-cta a{color:var(--lx-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.lx-versus .lx-compare-cta{text-align:center}
.lx-versus-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px auto 0;padding:0;list-style:none}
.lx-versus-tags li{font-size:14px;font-weight:500;line-height:1;padding:9px 14px;border-radius:999px;border:1px solid rgba(15,20,24,.18);color:rgba(15,20,24,.82)}
/* The one real customer result, unnamed: what the work took before, and what it takes now. */
.lx-proof{display:flex;flex-direction:column;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:30px auto 0;padding:18px 28px;border-radius:16px;background:#fff;border:1px solid var(--lx-line);box-shadow:0 2px 10px rgba(16,32,22,.05);text-align:center}
.lx-proof-who{font-size:13px;font-weight:600;color:var(--lx-muted)}
.lx-proof-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;font-size:21px;font-weight:750;letter-spacing:-.015em;line-height:1.25;color:var(--lx-ink)}
.lx-proof-was{font-weight:600;color:var(--lx-muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.lx-proof-arrow{font-weight:500;color:var(--lx-muted)}
.lx-flow-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:36px}
.lx-flow{min-width:0;max-width:100%}
.lx-flow-viewport{overflow:hidden;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lx-flow-viewport:hover .lx-flow-track{animation-play-state:paused}
.lx-flow-track{display:flex;width:max-content;animation:lx-flow var(--t,72s) linear infinite}
.lx-flow.is-with .lx-flow-track{animation-direction:reverse}
.lx-flow-set{display:flex;gap:16px;margin:0;padding:0 16px 0 0;list-style:none}
.lx-flow li{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:15px;font-weight:600;line-height:1;padding:13px 20px 13px 16px;border-radius:12px;background:#fff;border:1px solid var(--lx-line);color:var(--lx-ink);box-shadow:0 1px 3px rgba(16,32,22,.05)}
.lx-flow li img,.lx-flow li i{flex:none;width:20px;height:20px;object-fit:contain}
.lx-flow li i{font-style:normal;font-size:17px;line-height:20px;text-align:center}
/* No label says which row is which: the world without Lycia AI is grey, tilted and jostling; the world with it is colour, straight and evenly spaced. */
.lx-flow.is-without li{font-weight:500;color:var(--lx-muted);background:rgba(255,255,255,.62);border:1px dashed #c3cdc6;box-shadow:none;filter:grayscale(1);transform:rotate(var(--r,0deg)) translateY(var(--y,0px))}
.lx-flow.is-without li:nth-child(8n+1){--r:-2.4deg;--y:2px}
.lx-flow.is-without li:nth-child(8n+2){--r:1.6deg;--y:-3px;margin-left:-10px}
.lx-flow.is-without li:nth-child(8n+3){--r:-1.2deg;--y:4px}
.lx-flow.is-without li:nth-child(8n+4){--r:2.8deg;--y:-1px;margin-left:6px}
.lx-flow.is-without li:nth-child(8n+5){--r:-2deg;--y:-4px;margin-left:-12px}
.lx-flow.is-without li:nth-child(8n+6){--r:1.1deg;--y:3px}
.lx-flow.is-without li:nth-child(8n+7){--r:-3deg;--y:0px;margin-left:-6px}
.lx-flow.is-without li:nth-child(8n+8){--r:2.2deg;--y:-2px;margin-left:8px}
.lx-flow.is-with li{box-shadow:0 2px 8px rgba(16,32,22,.07)}
@keyframes lx-flow{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .lx-flow-viewport{-webkit-mask-image:none;mask-image:none}
  .lx-flow-track{animation:none;width:auto;max-width:1240px;margin:0 auto;padding:0 40px}
  .lx-flow-set{flex-wrap:wrap;padding:0}
  .lx-flow-set[aria-hidden]{display:none}
  .lx-flow li{white-space:normal;line-height:1.3}
  .lx-partners-viewport{-webkit-mask-image:none;mask-image:none}
  .lx-partners-track{animation:none;width:auto}
  .lx-partners-set{flex-wrap:wrap;gap:12px 22px;padding:0}
  .lx-partners-set[aria-hidden]{display:none}
}

/* ============ USPs ============ */
.lx-usp{background:#fff}
.lx-usp .lx-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px}
.lx-usp-head{position:sticky;top:130px;align-self:start}
.lx-usp-list > li{padding:34px 0;border-top:1px solid var(--lx-line)}
.lx-usp-list > li:first-child{border-top:0;padding-top:4px}
.lx-usp-list h3{font-size:22px;font-weight:750;letter-spacing:-.02em;line-height:1.25}
.lx-usp-list p{font-size:16px;line-height:1.65;color:var(--lx-muted);margin-top:10px;max-width:60ch}
.lx-usp-eg{font-size:14px!important;color:var(--lx-ink)!important;margin-top:14px!important;padding-left:14px;border-left:2px solid var(--lx-ok-ink)}
.lx-ask-demo{margin-top:20px;border:1px solid var(--lx-line);border-radius:16px;overflow:hidden}
.lx-ask-q{padding:14px 18px;background:var(--lx-paper);font-size:14px;font-weight:600}
.lx-ask-q span{color:var(--lx-muted);font-weight:500}
.lx-ask-answers{display:grid;grid-template-columns:1fr 1fr}
.lx-ask-answers > div{padding:16px 18px;font-size:14px;line-height:1.5}
.lx-ask-answers > div + div{border-left:1px solid var(--lx-line)}
.lx-ask-answers strong{display:block;font-size:13px;margin-bottom:6px}
.lx-ask-answers .is-ok strong{color:var(--lx-ok-ink)}
.lx-ask-answers .is-no strong{color:var(--lx-no-ink)}
.lx-ask-answers small{display:block;color:var(--lx-muted);font-size:12px;margin-top:6px}

/* ============ HOW IT WORKS (dark, flows into the Office demo) ============ */
.lx-how{background:#111;color:#fff;padding:120px 0 0}
.lx-how .lx-lede{color:#a6a6b1}
.lx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid #2b2d34}
.lx-steps li{padding:28px 32px 0 0;counter-increment:lx-step}
.lx-steps li + li{padding-left:32px;border-left:1px solid #2b2d34}
.lx-steps{counter-reset:lx-step}
.lx-steps li::before{content:counter(lx-step);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid #3d3f48;font-size:13px;font-weight:700;color:#d6d7df;margin-bottom:18px}
.lx-steps h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.lx-steps p{font-size:15px;line-height:1.6;color:#a6a6b1;margin-top:8px}
.home-products.lx-demo .hp-sticky,.home-products.lx-demo.hp-ready .hp-sticky{padding-top:72px}
.home-products.lx-demo .hp-panel-head h2,.home-products.lx-demo.hp-ready .hp-panel-head h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em}

/* ============ INDUSTRIES ============ */
.lx-industries{background:var(--lx-paper);position:relative;overflow:hidden}
.lx-ind-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.lx-ind-cta{text-align:right;padding-bottom:6px}
.lx-ind-cta p{font-size:14px;color:var(--lx-muted);margin-bottom:12px}
.lx-btn-outline{background:transparent;color:var(--lx-ink);box-shadow:inset 0 0 0 1.5px rgba(16,32,22,.26)}
.lx-btn-outline:hover{background:var(--lx-ink);color:#fff;box-shadow:none}
/* One workspace card: pick an industry on the left, the card on the right refills for it. */
.lx-ind{display:grid;grid-template-columns:320px minmax(0,1fr);gap:44px;align-items:stretch;margin-top:48px}
/* The picker: a line icon per industry, one white highlight that glides to the pick, and a thin line that counts down to the next one. */
.lx-ind-pick{position:relative;display:grid;gap:2px;margin:0;padding:0;list-style:none}
.lx-ind-pick::before{content:"";position:absolute;left:0;right:0;top:var(--py,0px);height:var(--ph,0px);border-radius:14px;background:#fff;border:1px solid var(--lx-line);box-shadow:0 14px 34px -20px rgba(16,32,22,.45);opacity:var(--pill,0);transition:top .45s cubic-bezier(.4,0,.2,1),height .45s cubic-bezier(.4,0,.2,1),opacity .2s}
.lx-ind-pick li{position:relative;z-index:1}
.lx-ind-pick a{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:13px 16px 15px;border-radius:14px;color:var(--lx-ink);text-decoration:none;transition:background .2s}
.lx-ind-pick a:hover{background:rgba(255,255,255,.5)}
.lx-ind-pick a[aria-current=true]:hover{background:transparent}
.lx-ind-ico{width:22px;height:22px;margin-top:1px;color:var(--lx-muted);transition:color .25s}
.lx-ind-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lx-ind-pick a[aria-current=true] .lx-ind-ico{color:var(--lx-ink)}
.lx-ind-text{display:block;min-width:0}
.lx-ind-pick b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.lx-ind-pick b small{font-size:11px;font-weight:700;color:var(--lx-ink);margin-left:8px;letter-spacing:.01em}
.lx-ind-text > span{display:block;font-size:13px;line-height:1.4;color:var(--lx-muted);margin-top:2px}
.lx-ind-pick a::after{content:"";position:absolute;left:50px;right:16px;bottom:7px;height:2px;border-radius:2px;background:rgba(16,32,22,.35);transform:scaleX(0);transform-origin:left}
.lx-ind-pick a[aria-current=true]::after{animation:lx-ind-count 6s linear forwards}
.lx-ind-pick.is-manual a::after{animation:none}
@keyframes lx-ind-count{to{transform:scaleX(1)}}
.lx-ind-pick .is-venues{margin-top:10px;padding-top:10px;border-top:1px solid var(--lx-line)}
/* The card: deep forest with a mint glow behind it; the scenes draw on one small palette. */
.lx-ind::before{content:"";position:absolute;inset:-60px -80px -80px 26%;background:radial-gradient(ellipse at 55% 45%,rgba(150,190,235,.38),transparent 62%);pointer-events:none}
.lx-ind-card{--c-row:rgba(255,255,255,.06);--c-line:rgba(255,255,255,.1);--c-muted:#9aa6b2;--c-soft:#d8e0e8;--c-text:#e8edf2;--c-ok:#9cc4f0;--c-ai:#e6eef9;--c-warn:#f0b44c;--c-bad:#f28b82;--c-bad-text:#f7a9a3;position:relative;z-index:1;display:flex;flex-direction:column;min-height:440px;padding:26px 28px 24px;border-radius:24px;background:linear-gradient(165deg,#181d24 0%,#0e1216 100%);color:var(--c-text);border:1px solid rgba(255,255,255,.06);box-shadow:0 40px 80px -40px rgba(10,14,18,.7),inset 0 1px 0 rgba(255,255,255,.07);transform-origin:50% 50%}
.lx-ind-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.lx-ind-head img{width:40px;height:40px;flex:none}
.lx-ind-head div{flex:1;min-width:0}
.lx-ind-head b{display:block;font-size:19px;font-weight:700;letter-spacing:-.015em}
.lx-ind-head span{display:block;font-size:13px;color:var(--c-muted);margin-top:2px}
.lx-ind-head em{flex:none;font-style:normal;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:var(--c-soft)}
.lx-ind-scene{flex:1;margin-top:2px}
.lx-ind-foot{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.lx-ind-foot h3{font-size:12px;font-weight:600;color:var(--c-muted);margin-bottom:8px}
.lx-ind-roles{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lx-ind-roles li{font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--c-line);color:var(--c-soft)}
.lx-ind-more{align-self:flex-start;margin-top:auto;padding-top:22px;font-size:14px;font-weight:700;color:#fff;text-underline-offset:5px}
/* The card's parts slip out and back in, staggered, when the industry changes. */
.lx-ind-head div,.lx-ind-scene,.lx-ind-foot,.lx-ind-more{transition:opacity .22s ease,transform .22s ease}
.lx-ind-foot{transition-delay:.06s}
.lx-ind-more{transition-delay:.1s}
.lx-ind-card.is-out .lx-ind-head div,.lx-ind-card.is-out .lx-ind-scene,.lx-ind-card.is-out .lx-ind-foot,.lx-ind-card.is-out .lx-ind-more{opacity:0;transform:translateY(6px);transition-delay:0s;transition-duration:.14s}
/* Scenes: every industry gets its own picture of the work. Animations restart when a scene is inserted. */
.lxi{display:grid;gap:22px;font-size:13px;line-height:1.45}
.lxi-label{font-size:11.5px;font-weight:600;color:var(--c-muted);margin-bottom:10px}
.lxi .w90{width:90%}.lxi .w80{width:80%}.lxi .w70{width:70%}.lxi .w60{width:60%}.lxi .w50{width:50%}
@keyframes lxi-fade{to{opacity:1;transform:none}}
@keyframes lxi-grow{to{transform:scaleX(1)}}
@keyframes lxi-pop{to{opacity:1;transform:none}}
/* Insurance: the claim file fills in, one document is still missing, the summary writes itself. */
.lxi-ins{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.lxi-check{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.lxi-check li{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 10px;border-radius:9px;background:var(--c-row);opacity:0;transform:translateX(-6px);animation:lxi-fade .35s var(--d) forwards}
.lxi-check li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--c-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23102016' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.lxi-check li.is-missing{background:rgba(240,180,76,.12)}
.lxi-check li.is-missing::before{background:none;border:1.5px dashed #f0b44c;box-sizing:border-box}
.lxi-check li.is-missing em{flex-basis:100%;margin-top:-4px;padding-left:26px;font-style:normal;font-size:11px;color:#f0b44c}
.lxi-ins-sum p{margin:0 0 8px;color:var(--c-soft);opacity:0;transform:translateY(4px);animation:lxi-fade .35s var(--d) forwards}
.lxi-badge{display:inline-block;margin-top:6px;padding:5px 10px;border-radius:999px;background:var(--c-ai);color:#111519;font-size:11.5px;font-weight:700;opacity:0;transform:scale(.9);animation:lxi-pop .3s var(--d) forwards}
/* Accounting: a question in the finance channel, the answer with the numbers, and the spreadsheet behind them. */
.lxi-acc{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}
.lxi-file{display:flex;align-items:center;gap:10px;max-width:100%;background:var(--c-row)!important;border:1px solid var(--c-line);color:var(--c-text)!important}
.lxi-file span{flex:none;padding:7px 7px;border-radius:7px;background:var(--c-ai);color:#111519;font-size:10px;font-weight:800;letter-spacing:.02em}
.lxi-file b{display:block;min-width:0;font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lxi-file em{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--c-muted);margin-top:2px}

/* Legal: risk clauses light up on the page, the notes land in the margin. */
.lxi-law{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.lxi-doc{padding:14px;border-radius:12px;background:#f3f5f2}
.lxi-doc .lxi-label{color:#56645b}
.lxi-lines{display:grid;gap:9px}
.lxi-lines i{display:block;height:8px;border-radius:4px;background:#d8dfd9;position:relative;overflow:hidden}
.lxi-lines i.is-hl::after{content:"";position:absolute;inset:0;border-radius:4px;background:#f0b44c;transform:scaleX(0);transform-origin:left;animation:lxi-grow .45s var(--d) ease-out forwards}
.lxi-lines i.is-red::after{background:var(--c-bad)}
.lxi-notes{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.lxi-notes li{padding:8px 10px 8px 12px;border-left:3px solid #f0b44c;border-radius:0 9px 9px 0;background:var(--c-row);color:var(--c-soft);font-size:12.5px;opacity:0;transform:translateX(6px);animation:lxi-fade .35s var(--d) forwards}
.lxi-notes li b{display:block;font-size:11px;color:#f0b44c;margin-bottom:2px}
.lxi-notes li.is-red{border-color:var(--c-bad)}
.lxi-notes li.is-red b{color:var(--c-bad-text)}
.lxi-notes .lxi-deadline{border-color:var(--c-ok)}
/* Engineering: an environmental impact assessment comes together chapter by chapter, measured against the legal limits. */
.lxi-eng{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.lxi-chapters{margin:0;padding:0;list-style:none;display:grid;gap:6px;counter-reset:none}
.lxi-chapters li{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:9px;background:var(--c-row);opacity:0;transform:translateX(-6px);animation:lxi-fade .35s var(--d) forwards}
.lxi-chapters b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:800;box-sizing:border-box}
.lxi-chapters .is-done b{background:var(--c-ok);color:#102016}
.lxi-chapters .is-live b{border:2px solid #fff;color:#fff}
.lxi-chapters .is-wait b{border:1.5px dashed rgba(255,255,255,.38);color:var(--c-muted)}
.lxi-chapters .is-wait span{color:var(--c-muted)}
.lxi-chapters span{flex:1;min-width:0;font-size:12.5px;font-weight:600;line-height:1.35}
.lxi-chapters em{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--c-muted);margin-top:1px}
.lxi-chapters i{display:block;height:5px;margin-top:7px;border-radius:3px;background:var(--c-line);overflow:hidden}
.lxi-chapters i u{display:block;height:100%;width:var(--w);border-radius:3px;background:#fff;transform:scaleX(0);transform-origin:left;animation:lxi-grow 1.2s 1.3s ease-out forwards}
.lxi-meter{margin-bottom:10px;font-size:11.5px;color:var(--c-muted);opacity:0;animation:lxi-fade .35s var(--d) forwards}
.lxi-meter span{display:block;margin-bottom:5px}
.lxi-meter i{display:block;height:8px;border-radius:4px;background:var(--c-line);overflow:hidden}
.lxi-meter i u{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--c-ok);transform:scaleX(0);transform-origin:left;animation:lxi-grow .6s calc(var(--d) + .15s) ease-out forwards}
.lxi-meter b{display:block;margin-top:5px;font-size:11.5px;font-weight:600;color:var(--c-soft)}
.lxi-meter.is-over i u{background:var(--c-bad)}
.lxi-meter.is-over b{color:var(--c-bad-text)}
.lxi-stamp{margin-top:14px;padding:8px 11px;border-radius:9px;border:1px solid var(--c-line);font-size:11.5px;font-weight:600;color:var(--c-soft);opacity:0;transform:scale(.97);animation:lxi-pop .35s var(--d) forwards}

/* Consulting: one project per client, each with its own teammate that the client can ask directly. */
.lxi-con{gap:12px}
.lxi-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lxi-proj{padding:12px;border-radius:12px;background:var(--c-row);border:1px solid var(--c-line);opacity:0;transform:translateY(8px);animation:lxi-fade .4s var(--d) forwards}
.lxi-proj-head b{display:block;font-size:13px;font-weight:700}
.lxi-proj-head span{display:block;font-size:11px;color:var(--c-muted);margin-top:1px}
.lxi-proj-team{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--c-line);font-size:11.5px;font-weight:600}
.lxi-proj-team img{width:18px;height:18px}
.lxi-proj-team em{flex-basis:100%;font-style:normal;font-size:10.5px;font-weight:500;color:var(--c-muted)}
.lxi-proj-chat{display:grid;gap:5px;margin-top:10px}
.lxi-proj-chat p{margin:0;max-width:94%;padding:6px 9px;border-radius:10px;font-size:11.5px;line-height:1.35;opacity:0;transform:translateY(4px);animation:lxi-fade .3s var(--d) forwards}
.lxi-proj-chat .is-guest{background:rgba(0,0,0,.28);border-bottom-left-radius:3px}
.lxi-proj-chat .is-ai{justify-self:end;background:var(--c-ai);color:#111519;border-bottom-right-radius:3px}

/* Venues: a guest on WhatsApp, the upsell, and the handoff to staff. */
.lxi-ven{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.lxi-chat{padding:12px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);display:grid;gap:7px}
.lxi-chat-head{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--c-muted);margin-bottom:4px}
.lxi-chat p{margin:0;max-width:85%;padding:8px 11px;border-radius:12px;font-size:12.5px;opacity:0;transform:translateY(5px);animation:lxi-fade .3s var(--d) forwards}
.lxi-chat .is-guest{background:var(--c-row);border-bottom-left-radius:4px}
.lxi-chat .is-ai{justify-self:end;background:var(--c-ai);color:#111519;border-bottom-right-radius:4px}
.lxi-side{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.lxi-side li{padding:9px 11px;border-radius:9px;background:var(--c-row);font-size:12.5px;color:var(--c-soft);opacity:0;transform:translateX(6px);animation:lxi-fade .35s var(--d) forwards}
.lxi-side b{display:block;font-size:11px;color:var(--c-muted);margin-bottom:2px}
/* Marketing: a week of content and ads, then the numbers and the budget call. */
.lxi-mkt{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.lxi-timeline{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.lxi-timeline li{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:9px;background:var(--c-row);opacity:0;transform:translateX(-6px);animation:lxi-fade .35s var(--d) forwards}
.lxi-timeline img{flex:none;width:18px;height:18px;margin-top:1px;object-fit:contain}
.lxi-timeline span{flex:1;min-width:0;font-size:12.5px;font-weight:600;line-height:1.35}
.lxi-timeline em{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--c-muted);margin-top:2px}
.lxi-timeline .is-live{border:1px solid var(--c-line);background:transparent}
.lxi-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.lxi-kpi{padding:9px 10px;border-radius:9px;background:var(--c-row);opacity:0;transform:translateY(5px);animation:lxi-fade .35s var(--d) forwards}
.lxi-kpi span{display:block;font-size:10.5px;color:var(--c-muted)}
.lxi-kpi b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.lxi-kpi i{display:inline-block;margin-top:4px;font-style:normal;font-size:10.5px;font-weight:700;color:var(--c-ok)}
.lxi-adset{display:grid;grid-template-columns:58px 1fr 64px;align-items:center;gap:8px;margin-bottom:7px;font-size:11.5px;color:var(--c-muted);opacity:0;animation:lxi-fade .3s var(--d) forwards}
.lxi-adset i{display:block;height:8px;border-radius:4px;background:var(--c-line);overflow:hidden}
.lxi-adset i u{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--c-soft);transform:scaleX(0);transform-origin:left;animation:lxi-grow .5s calc(var(--d) + .1s) ease-out forwards}
.lxi-adset b{text-align:right;font-weight:600;color:var(--c-soft);white-space:nowrap}
.lxi-adset.is-best i u{background:var(--c-ok)}
.lxi-adset.is-best span,.lxi-adset.is-best b{color:#fff;font-weight:700}
.lxi-adset.is-paused i u{background:rgba(255,255,255,.16)}
.lxi-adset.is-paused b{color:var(--c-muted)}

/* E-commerce: one product goes from a raw photo to a live listing on Amazon and Etsy, then the order ships and the week is reported. */
.lxi-ecom{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}
.lxi-ecom-photo{position:relative;height:118px;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 50% 85%,#e9e4da 0,#f7f5f0 62%)}
.lxi-mug{position:absolute;left:50%;top:50%;width:112px;height:84px;transform:translate(-50%,-48%)}
/* The raw phone photo: a dim, warm, blurred layer that wipes away to show the cleaned-up shot. */
.lxi-ecom-raw{position:absolute;inset:0 0 0 auto;width:100%;background:rgba(92,74,58,.5);-webkit-backdrop-filter:blur(2px) saturate(.6);backdrop-filter:blur(2px) saturate(.6);border-left:2px solid #fff;animation:lxi-wipe 1s .5s cubic-bezier(.6,0,.3,1) forwards}
@keyframes lxi-wipe{to{width:0;border-left-width:0}}
.lxi-ecom-photo em{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:999px;background:rgba(15,20,24,.82);color:#fff;font-style:normal;font-size:10.5px;font-weight:600;opacity:0;transform:scale(.92);animation:lxi-pop .3s var(--d) forwards}
.lxi-ecom-title,.lxi-ecom-desc,.lxi-ecom-price,.lxi-ecom-live{opacity:0;transform:translateY(4px);animation:lxi-fade .35s var(--d) forwards}
.lxi-ecom-title{display:block;margin-top:12px;font-size:13.5px;font-weight:700;color:#fff}
.lxi-ecom-desc{margin:3px 0 0;font-size:12px;color:var(--c-muted)}
.lxi-ecom-price{display:flex;align-items:baseline;gap:8px;margin-top:9px}
.lxi-ecom-price b{font-size:17px;font-weight:800;letter-spacing:-.02em;color:#fff}
.lxi-ecom-price span{font-size:11px;color:var(--c-muted)}
.lxi-ecom-live{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lxi-ecom-live span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;border-radius:999px;background:var(--c-row);border:1px solid var(--c-line);font-size:11.5px;font-weight:600;color:var(--c-soft)}
.lxi-ecom-live img{width:16px;height:16px;padding:2px;border-radius:50%;background:#fff;object-fit:contain}
.lxi-ecom .lxi-timeline img,.lxi-ecom .lxi-timeline svg{flex:none;width:18px;height:18px;margin-top:1px}
.lxi-ecom .lxi-timeline img{padding:2px;border-radius:50%;background:#fff;object-fit:contain}
.lxi-ecom .lxi-timeline svg{fill:none;stroke:var(--c-soft);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lxi-ecom .lxi-kpis{margin:10px 0 0}
.lxi-kpi i.is-warn{color:var(--c-warn)}
@media (prefers-reduced-motion:reduce){.lxi *{animation-duration:0s!important;animation-delay:0s!important}}

/* Venues is another world: the card folds into a beam of light, the stars streak past, and the page lands on Lycia AI Venues. */
.lx-warp{position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:0;overflow:hidden}
.lx-warp::before{content:"";position:absolute;inset:0;background:#05070a;opacity:0;transition:opacity .35s}
.lx-warp::after{content:"";position:absolute;inset:0;background:#fff;opacity:0}
.lx-warp.is-on{opacity:1}
.lx-warp.is-on::before{opacity:.66}
.lx-warp i{position:absolute;left:50%;top:50%;width:var(--l,200px);height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);transform-origin:0 50%;transform:rotate(var(--a)) translateX(30px) scaleX(.1);opacity:0}
.lx-warp.is-on i{animation:lx-warp-streak .8s var(--d,0s) cubic-bezier(.55,0,1,.55) forwards}
@keyframes lx-warp-streak{12%{opacity:1}to{transform:rotate(var(--a)) translateX(80vmax) scaleX(1.8);opacity:1}}
.lx-warp.is-land::before{opacity:0}
.lx-warp.is-land i{animation:none;opacity:0}
.lx-warp.is-land::after{animation:lx-land-flash .75s ease-out forwards}
@keyframes lx-land-flash{0%{opacity:1}100%{opacity:0}}
.lx-industries.is-warp .lx-ind-card{animation:lx-warp-card .6s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes lx-warp-card{0%{transform:none}35%{transform:scale(1.03)}100%{transform:scale(.02,1.5);opacity:0;box-shadow:0 0 70px 24px rgba(200,230,255,.9)}}
.lx-venues.is-landed .lx-wrap{animation:lx-land .7s ease-out}
@keyframes lx-land{0%{transform:scale(1.035);opacity:0}100%{transform:none;opacity:1}}

/* ============ VENUES INTRO (dark, flows into the Venues demo) ============ */
.lx-venues{background:#111;color:#fff;padding:120px 0 0}
.lx-venues .lx-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end}
.lx-venues-name{font-size:16px;font-weight:700;color:#fff;margin-bottom:18px}
/* Product lockup: the official logo file followed by the product name. */
.lx-lockup{display:inline-flex;align-items:center;gap:12px}
.lx-lockup img{display:block;width:auto;height:30px}
.lx-lockup span{font-size:22px;font-weight:600;letter-spacing:-.01em;color:#fff;padding-left:12px;border-left:1px solid rgba(255,255,255,.25);line-height:1}
.lx-venues .lx-lede{color:#a6a6b1;margin-top:0}
.lx-venues-link{display:inline-block;margin-top:26px;color:#fff;font-weight:700;font-size:15px;text-underline-offset:5px}

/* ============ SECURITY ============ */
/* The lock from the live site, rebuilt in classes: gold body, steel shackle, indigo glow. Everything centred under it. */
.lx-security{background:#111;color:#fff;text-align:center;position:relative;overflow:clip;padding:104px 0 120px;border-top:1px solid rgba(255,255,255,.06)}
.lx-security::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/60px 60px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/60px 60px}
.lx-security .lx-wrap{position:relative;max-width:1000px}
.lx-security .lx-h2{margin:0 auto;max-width:16ch}
.lx-security .lx-lede{color:rgba(255,255,255,.55);margin:18px auto 0;max-width:52ch}
.lx-lock{--lx-lock-scale:.55;position:relative;width:180px;height:250px;margin:-45px auto -50px}
.lx-lock-3d{position:absolute;inset:0;transform:scale(var(--lx-lock-scale));filter:drop-shadow(0 0 70px rgba(99,102,241,.55))}
.lx-lock i,.lx-lock b{display:block}
.lx-lock-shackle{position:absolute;top:10px;left:38px;width:104px;height:90px;z-index:1;border:20px solid;border-bottom:0;border-color:#b8b8b8 #a0a0a0 transparent #c8c8c8;border-radius:52px 52px 0 0;box-shadow:0 -4px 12px rgba(0,0,0,.3),inset 0 4px 6px rgba(255,255,255,.15),-3px 0 8px rgba(0,0,0,.3),3px 0 8px rgba(0,0,0,.3);background:linear-gradient(90deg,rgba(255,255,255,.1),transparent 30%,transparent 70%,rgba(0,0,0,.1))}
.lx-lock-body{position:absolute;left:0;right:0;bottom:0;height:140px;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3);background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.1) 48%,transparent 52%),radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.2),transparent 60%) 15% 12px/40% 45% no-repeat,linear-gradient(180deg,rgba(255,230,150,.5),transparent 4px),repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.03) 2px 3px),linear-gradient(170deg,#f0d850 0%,#e0b830 8%,#d4a420 16%,#c89818 28%,#d0a420 40%,#c49018 52%,#b88014 64%,#c89818 76%,#d4a820 88%,#c09018 100%)}
.lx-lock-dial{position:absolute;top:44%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#8a6a0a,#6a5208 50%,#4a3a06);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.lx-lock-dial::after{content:"";position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,#0a0a0a 30%,#1a1a1a 60%,#2a2a2a);box-shadow:inset 0 3px 8px rgba(0,0,0,.9)}
.lx-lock-slot{position:absolute;top:55%;left:50%;width:12px;height:24px;transform:translateX(-50%);background:linear-gradient(180deg,#0a0a0a,#1a1a1a);border-radius:0 0 6px 6px;box-shadow:inset 0 3px 6px rgba(0,0,0,.8)}
/* Two rings widen out from the lock, like a quiet radar sweep. */
.lx-lock-ring{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;border:1px solid rgba(99,102,241,.22);animation:lx-sec-pulse 3s ease-out infinite}
.lx-lock-ring + .lx-lock-ring{width:230px;height:230px;margin:-115px 0 0 -115px;border-color:rgba(99,102,241,.12);animation-delay:1.5s}
@keyframes lx-sec-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.lx-sec-tag{display:inline-block;margin:0 0 14px;padding:6px 16px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:600;letter-spacing:.05em;color:rgba(255,255,255,.6)}
.lx-sec-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.lx-sec-chips li{padding:9px 18px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:600;color:rgba(255,255,255,.66)}
.lx-sec-card{max-width:440px;margin:32px auto 0;padding:30px 32px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.lx-sec-card h3{font-size:18px;font-weight:800}
.lx-sec-card p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.45);margin-top:8px}
.lx-sec-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:780px;margin:32px auto 0}
.lx-sec-cards .lx-sec-card{max-width:none;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.lx-sec-badge{display:block;width:120px;height:auto;margin-bottom:16px;filter:invert(1);opacity:.85}
.lx-security-note{font-size:13px;color:rgba(255,255,255,.45);margin-top:28px}
.lx-security-note a{color:rgba(255,255,255,.75)}

/* ============ CTA ============ */
/* Warm paper after the dark lock. One moment of motion: the pen underline draws when the headline arrives. */
.lx-cta{background:linear-gradient(180deg,#f8f6f3,#f0ebe4);text-align:center;position:relative;overflow:hidden;padding:140px 0 110px}
.lx-cta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;background:radial-gradient(circle,#c49018 8px,transparent 8.5px) 0 0/48px 48px}
.lx-cta .lx-wrap{position:relative;max-width:920px}
.lx-cta-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 40px;padding:6px 18px;border:1px solid #d4c9b8;border-radius:100px;background:rgba(255,255,255,.6);font-size:13px;font-weight:600;color:#6b5c4a}
.lx-cta-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#c49018}
.lx-cta .lx-h2{margin:0 auto;max-width:20ch;font-size:clamp(34px,4.5vw,56px);font-weight:900;letter-spacing:-.035em;line-height:1.15;color:#0f172a}
.lx-cta .lx-lede{margin:20px auto 0;max-width:46ch;color:#6b5c4a}
.lx-pen{position:relative;display:inline-block}
.lx-pen svg{position:absolute;left:-2%;bottom:-12px;width:104%;height:18px;overflow:visible;pointer-events:none}
.lx-pen path{fill:none;stroke:#c49018;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.lx-pen-ready .lx-pen path{stroke-dashoffset:1}
.lx-pen-ready .lx-pen.is-drawn path{animation:lx-pen-draw 1s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes lx-pen-draw{to{stroke-dashoffset:0}}
.lx-cta-team{display:flex;justify-content:center;margin-top:40px}
.lx-cta-team img{width:52px;height:52px;border-radius:50%;border:3px solid #f0ebe4;object-fit:cover;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.lx-cta-team img + img{margin-left:-14px}
.lx-cta-team-note{font-size:13px;color:#9a8a76;margin-top:14px}
.lx-cta-actions{display:flex;justify-content:center;gap:12px;margin-top:34px}
.lx-cta-btn{min-height:60px;padding:0 44px;background:#0f172a;color:#fff;font-size:17px;box-shadow:0 4px 20px rgba(0,0,0,.15);transition:transform .3s,box-shadow .3s}
.lx-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.22)}
.lx-cta-line{min-height:60px;padding:0 36px;color:#0f172a;font-size:17px;border:1.5px solid rgba(15,23,42,.28);transition:border-color .3s}
.lx-cta-line:hover{border-color:rgba(15,23,42,.6)}
.lx-cta-sub{font-size:13px;color:#9a8a76;margin-top:16px}
.lx-cta-sub a{color:#6b5c4a;text-underline-offset:3px}
/* Capterra rating: our own pill, not Capterra's badge */
.lx-rating-row{margin:30px 0 0}
.lx-rating{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid #d4c9b8;border-radius:100px;background:rgba(255,255,255,.6);font-size:13px;font-weight:500;color:#6b5c4a;text-decoration:none;transition:border-color .3s,background-color .3s}
.lx-rating:hover{border-color:#b8a68c;background:#fff}
.lx-rating:focus-visible{outline:2px solid #0f172a;outline-offset:3px}
.lx-rating-stars{display:inline-flex;gap:2px;color:#c49018}
.lx-rating-stars svg{display:block;fill:currentColor}
.lx-rating-text strong{font-weight:700;color:#0f172a}
.lx-rating-new{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Hero copy: no pill, just stars and a line in the hero's type colour, so it sits quietly beside Summarize for me
   and drops to its own line when the row runs out of room. */
.lx-hero-ask-row{flex-wrap:wrap;row-gap:2px}
.lx-sh .lx-rating-hero{gap:8px;min-height:44px;padding:0 4px;border:0;border-radius:8px;background:none;font-size:13px;color:rgba(var(--fg),calc(.66 + .3 * var(--dusk)));white-space:nowrap}
.lx-sh .lx-rating-hero:hover{background:none;color:rgb(var(--fg))}
.lx-sh .lx-rating-hero:hover .lx-rating-text{text-decoration:underline;text-underline-offset:3px}
.lx-sh .lx-rating-hero:focus-visible{outline:2px solid rgb(var(--fg));outline-offset:2px;border-radius:8px}
.lx-sh .lx-rating-hero .lx-rating-text strong{color:rgb(var(--fg))}
/* Short laptop screens have no spare line: where the row is wide enough, "Lucy, our AI assistant" steps aside so the
   rating fits beside Summarize for me; otherwise the rating line tightens. */
@media (max-height:780px) and (min-width:901px){
  .lx-hero-ask-row{row-gap:0}
  .lx-sh .lx-rating-hero{min-height:32px}
  @container lx-ask (min-width:540px){.lx-hero-ask small{display:none}}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .lx-sh-track{gap:48px}
}
/* Laptop heights: a tighter rhythm so the label clears the nav and the sun stays above the fold. */
@media (max-height:900px) and (min-width:901px){
  .lx-sh-left{padding-bottom:24px}
  .lx-hero-for{margin-bottom:16px}
  .lx-sh h1{font-size:clamp(40px,4vw,56px)}
  .lx-hero-lede{font-size:16px;line-height:1.55;max-width:54ch;margin-top:18px}
  .lx-hero-actions{margin-top:18px}
  .lx-hero-partners{margin-top:12px}
  .lx-sh-clock{margin-top:18px}
}
@media (max-width:900px){
  .lx-sh-track{grid-template-columns:minmax(0,1fr);gap:12px}
  .lx-sh-left{position:static;height:auto;padding:150px 0 24px}
  .lx-sh h1{max-width:15ch}
  .lx-sh-right{padding:24px 0 72px}
  .lx-sh-card{margin-bottom:96px;scroll-margin-top:90px}
}
@media (max-width:900px){
  .lx-usp .lx-wrap,.lx-venues .lx-wrap{grid-template-columns:1fr;gap:40px}
  .lx-usp-head{position:static}
  .lx-steps{grid-template-columns:1fr}
  .lx-steps li,.lx-steps li + li{padding:24px 0;border-left:0;border-top:1px solid #2b2d34}
  .lx-steps li:first-child{border-top:0}
  .lx-ind-top{grid-template-columns:1fr;gap:22px}
  .lx-ind-cta{text-align:left;padding-bottom:0}
  .lx-ind-cta p{margin-bottom:8px}
  .lx-ind{grid-template-columns:1fr;gap:18px;margin-top:32px}
  .lx-ind-pick{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lx-ind-pick::-webkit-scrollbar{display:none}
  .lx-ind-pick::before,.lx-ind-pick a::after{display:none}
  .lx-ind-pick li{flex:none}
  .lx-ind-pick a{grid-template-columns:18px auto;gap:8px;align-items:center;padding:9px 13px 9px 11px;border-radius:999px;border:1px solid var(--lx-line);background:rgba(255,255,255,.5)}
  .lx-ind-pick a[aria-current=true]{background:#fff;border-color:var(--lx-ink)}
  .lx-ind-ico{width:18px;height:18px;margin:0}
  .lx-ind-ico svg{width:16px;height:16px}
  .lx-ind-pick b{font-size:14px}
  .lx-ind-pick b small{display:none}
  .lx-ind-text > span{display:none}
  .lx-ind-pick .is-venues{margin:0 0 0 6px;padding:0 0 0 8px;border-top:0;border-left:1px solid var(--lx-line)}
  .lx-ind::before{display:none}
  .lx-ind-card{min-height:0;padding:20px 18px 20px;border-radius:18px}
  .lx-ind-head b{font-size:17px}
  .lx-ind-head em{display:none}
  .lxi-ins,.lxi-acc,.lxi-law,.lxi-eng,.lxi-mkt,.lxi-ecom,.lxi-ven{grid-template-columns:1fr}
  .lxi{gap:16px}
  .lxi-projects{grid-template-columns:1fr}
}
@media (max-width:719px){
  .lx-wrap{padding:0 20px}
  .lx-section{padding:84px 0}
  .lx-sh-track{padding:0 20px}
  .lx-sh-left{padding-top:132px}
  .lx-sh-card{min-height:0;padding:20px 18px 22px;border-radius:20px;margin-bottom:72px}
  .lx-sh-visual{min-height:0}
  .lx-sh-caption h2{font-size:19px}
  .lx-sh-caption p{font-size:15px}
  .lx-board{padding:10px 12px 4px}
  .lx-board li{grid-template-columns:minmax(0,1fr) 40px 104px;gap:8px;font-size:12px}
  .lx-board time{display:none}
  .lx-dep{font-size:10.5px}
  .lx-notes li{max-width:92%}
  .lx-hub{height:320px;margin:0 -6px}
  .lx-hub-node img,.lx-hub-glyph{width:40px;height:40px;padding:9px;border-radius:12px}
  .lx-hub-node b{font-size:10px}
  .lx-hub-node{gap:5px}
  .lx-hub-mark{width:64px;height:64px}
  .lx-answers{grid-template-columns:1fr}
  .lx-answers::before{display:none}
  .lx-kanban{grid-template-columns:1fr 1fr}
  .lx-kanban .lx-col:first-child{display:none}
  .lx-col{min-height:0}
  .lx-log li{grid-template-columns:44px 1fr;font-size:13px;padding:10px 12px}
  .lx-log li.is-approval{grid-template-columns:44px 1fr}
  .lx-log em{grid-column:1/-1}
  .lx-hero-lede{font-size:17px}
  .lx-hero-proof{grid-template-columns:1fr}
  .lx-hero-actions .lx-btn{flex:1;padding:0 14px;font-size:15px;white-space:nowrap}
  .lx-flow-rows{margin-top:24px}
  .lx-flow-set{gap:12px;padding-right:12px}
  .lx-flow li{font-size:14px;gap:8px;padding:11px 14px 11px 12px;border-radius:10px}
  .lx-flow li img,.lx-flow li i{width:18px;height:18px}
  .lx-flow li i{font-size:15px;line-height:18px}
  .lx-flow-track{animation-duration:calc(var(--t,72s) * .8)}
  .lx-ask-answers{grid-template-columns:1fr}
  .lx-ask-answers > div + div{border-left:0;border-top:1px solid var(--lx-line)}
  .lx-how,.lx-venues{padding-top:84px}
  .lx-security{padding:84px 0 92px}
  .lx-lock{--lx-lock-scale:.45;margin:-62px auto -66px}
  .lx-sec-chips{gap:6px}
  .lx-sec-chips li{padding:7px 12px;font-size:12px}
  .lx-sec-card{padding:22px 20px}
  .lx-sec-cards{grid-template-columns:1fr;gap:12px}
  .lx-proof{padding:16px 18px}
  .lx-proof-line{font-size:17px}
  .lx-cta{padding:84px 0 72px}
  .lx-cta-pill{margin-bottom:28px}
  .lx-cta .lx-h2{font-size:clamp(30px,8vw,40px)}
  .lx-pen svg{bottom:-8px;height:14px}
  .lx-cta-team{margin-top:30px}
  .lx-cta-team img{width:44px;height:44px}
  .lx-cta-team img + img{margin-left:-10px}
  .lx-cta-actions .lx-btn{flex:1}
  .lx-cta-btn,.lx-cta-line{min-height:54px;padding:0 20px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .lx-lock-ring{display:none}
  .lx-pen-ready .lx-pen path{stroke-dashoffset:0;animation:none}
}
@media (prefers-reduced-motion:reduce){
  .lx-sh{transition:none}
  .lx-birds,.lx-sat,.lx-sh-night i,.lx-balloon,.lx-plane,.lx-paper,.lx-redeye,.lx-gull,.lx-blimp,.lx-firework,.lx-sunbathers b,.lx-wolf b,.lx-wolf i::before,.lx-wolf i::after{display:none}
  .lx-wolf,.lx-wolf i{transition:none!important}
  .lx-wolf{transform:none!important}
  .lx-wolf i{animation:none}
  .lx-sh-night::before,.lx-sh-night::after,.lx-sh-sun::before,.lx-sh-sun::after,.lx-sh-sun b,.lx-sh-evening::before,.lx-sh-evening::after{animation:none}
  .lx-sh-card,.lx-sh-card *{animation:none!important}
  .lx-sh-card .lx-arrive{opacity:1}
  .lx-sh-card .lx-bar i{transform:scaleX(1)}
}

/* ============ HUB PAGES (/venues, /industries) ============ */
.lx-page-hero{background:var(--lx-forest);color:#fff;padding:168px 0 96px;position:relative;overflow:hidden}
.lx-page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 32px}
.lx-page-hero .lx-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.lx-page-hero h1{font-size:clamp(40px,4.6vw,62px);font-weight:800;letter-spacing:-.04em;line-height:1.04;max-width:14ch}
.lx-page-hero .lx-hero-lede{max-width:52ch}
.lx-page-name{font-size:16px;font-weight:700;color:var(--lx-ok);margin-bottom:18px}
.lx-page-hero.is-compact .lx-wrap{grid-template-columns:1fr}
.lx-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.lx-jump a{color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:9px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2)}
.lx-jump a:hover{border-color:rgba(255,255,255,.55)}

/* Venues hero: guests above, staff below, one knowledge base between them. */
.lx-lanes{display:grid;gap:0;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:22px}
.lx-lane{border-radius:16px;padding:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.lx-lane h2{font-size:15px;font-weight:700;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.lx-lane h2 span{font-size:12px;font-weight:600;color:rgba(255,255,255,.55)}
.lx-lane ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lx-lane li{font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.8)}
.lx-lane-q{font-size:14px;color:#fff;margin-top:14px;line-height:1.5}
.lx-lane-a{font-size:13px;margin-top:8px;color:#c9f0d8;line-height:1.5}
.lx-gate{display:flex;align-items:center;gap:10px;padding:10px 6px;font-size:12px;font-weight:600;color:rgba(255,255,255,.6)}
.lx-gate::before{content:"";width:2px;height:22px;margin-left:22px;background:repeating-linear-gradient(to bottom,var(--lx-ok) 0 4px,transparent 4px 8px)}
.lx-gate.is-limited::before{background:repeating-linear-gradient(to bottom,var(--lx-no) 0 4px,transparent 4px 8px)}
.lx-lane-core{background:#fff;color:var(--lx-ink);border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:14px}
.lx-lane-core img{width:auto;height:32px;flex:none}
.lx-lane-core span{display:block;font-size:12.5px;color:var(--lx-muted);padding-left:14px;border-left:1px solid var(--lx-line)}

.lx-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.lx-two > div{background:#fff;border:1px solid var(--lx-line);border-radius:18px;padding:30px}
.lx-two h3{font-size:20px;font-weight:750;letter-spacing:-.015em}
.lx-two h3 small{display:block;font-size:13px;font-weight:600;color:var(--lx-ok-ink);letter-spacing:0;margin-bottom:6px}
.lx-two ul{display:grid;gap:10px;margin-top:16px}
.lx-two li{display:flex;gap:10px;font-size:15px;line-height:1.55;color:var(--lx-muted)}
.lx-two li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lx-ok-ink);margin-top:9px}
.lx-two-note{margin-top:22px;font-size:16px;font-weight:600}

.lx-points{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.lx-points h3{font-size:18px;font-weight:700}
.lx-points p{font-size:15px;line-height:1.6;color:var(--lx-muted);margin-top:8px}

.lx-ind-block{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;padding:64px 0;border-top:1px solid var(--lx-line);scroll-margin-top:90px}
.lx-ind-block:first-child{border-top:0;padding-top:0}
.lx-ind-block h2{font-size:clamp(26px,2.8vw,36px);font-weight:800;letter-spacing:-.03em}
.lx-ind-block > div > p{font-size:16px;line-height:1.6;color:var(--lx-muted);margin-top:12px;max-width:44ch}
.lx-ind-block ol{display:grid;gap:0;counter-reset:none}
.lx-ind-block ol li{padding:16px 0;border-top:1px solid var(--lx-line);font-size:16px;line-height:1.5}
.lx-ind-block ol li:first-child{border-top:0;padding-top:0}
.lx-ind-cta{display:inline-block;margin-top:22px;font-size:15px;font-weight:700;color:var(--lx-ink);text-underline-offset:5px}
.lx-ind-block.is-venues{background:var(--lx-forest);color:#fff;border-radius:22px;padding:48px;border-top:0;margin-top:24px}
.lx-ind-block.is-venues > div > p{color:rgba(255,255,255,.7)}
.lx-ind-block.is-venues ol li{border-color:rgba(255,255,255,.12)}
.lx-ind-block.is-venues a{color:#fff}
.lx-note{font-size:13px;color:var(--lx-muted);margin-top:40px}

@media (max-width:900px){
  .lx-page-hero .lx-wrap,.lx-two,.lx-ind-block{grid-template-columns:1fr;gap:32px}
  .lx-points{grid-template-columns:1fr;gap:28px}
  .lx-ind-block.is-venues{padding:32px 24px}
}
@media (max-width:719px){
  .lx-page-hero{padding:136px 0 64px}
}
/* Marketing: a week of content and ads, then the numbers and the budget call. */
.lxi-mkt{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.lxi-timeline{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.lxi-timeline li{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:9px;background:var(--c-row);opacity:0;transform:translateX(-6px);animation:lxi-fade .35s var(--d) forwards}
.lxi-timeline img{flex:none;width:18px;height:18px;margin-top:1px;object-fit:contain}
.lxi-timeline span{flex:1;min-width:0;font-size:12.5px;font-weight:600;line-height:1.35}
.lxi-timeline em{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--c-muted);margin-top:2px}
.lxi-timeline .is-live{border:1px solid var(--c-line);background:transparent}
.lxi-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.lxi-kpi{padding:9px 10px;border-radius:9px;background:var(--c-row);opacity:0;transform:translateY(5px);animation:lxi-fade .35s var(--d) forwards}
.lxi-kpi span{display:block;font-size:10.5px;color:var(--c-muted)}
.lxi-kpi b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.lxi-kpi i{display:inline-block;margin-top:4px;font-style:normal;font-size:10.5px;font-weight:700;color:var(--c-ok)}
.lxi-adset{display:grid;grid-template-columns:58px 1fr 64px;align-items:center;gap:8px;margin-bottom:7px;font-size:11.5px;color:var(--c-muted);opacity:0;animation:lxi-fade .3s var(--d) forwards}
.lxi-adset i{display:block;height:8px;border-radius:4px;background:var(--c-line);overflow:hidden}
.lxi-adset i u{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--c-soft);transform:scaleX(0);transform-origin:left;animation:lxi-grow .5s calc(var(--d) + .1s) ease-out forwards}
.lxi-adset b{text-align:right;font-weight:600;color:var(--c-soft);white-space:nowrap}
.lxi-adset.is-best i u{background:var(--c-ok)}
.lxi-adset.is-best span,.lxi-adset.is-best b{color:#fff;font-weight:700}
.lxi-adset.is-paused i u{background:rgba(255,255,255,.16)}
.lxi-adset.is-paused b{color:var(--c-muted)}
@media (max-width:900px){.lxi-mkt{grid-template-columns:1fr}.lxi-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}