/* LumiCloud product page (body.lc). The brand from Melk's Figma (Agência NEXA, node 2201-2): a pastel set of
   lilac, rose, sky and lime over paper, with soft gradients between neighbours, and the mark of lines converging.
   Pastels carry no text, so reading is done in a plum ink and the action in a violet derived from the lilac.
   Type: Sora (geometric, bold/light like "Lumi"/"cloud"), Instrument Serif italic for the accent word, Plex Mono for data. */
body.lc {
  --lc-lilac: #d2bcfa; --lc-rose: #f092ce; --lc-sky: #b8dffc; --lc-lime: #ddfe93; --lc-paper: #f6f2ef; --lc-paper2: #efe9f3;
  --lc-ink: #2b2433; --lc-ink2: #1d1724; --lc-violet: #5b3fc4; --lc-text2: #5d5466; --lc-line: rgba(43,36,51,.12);
  --lc-ok: #2f6b1f; --lc-ok-bg: #ecffc8; --lc-late: #a3245f; --lc-late-bg: #fde3f1;
  --lc-spectrum: linear-gradient(90deg, var(--lc-lilac), var(--lc-rose) 36%, var(--lc-sky) 68%, var(--lc-lime));
  --lc-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --lc-serif: "Instrument Serif", Georgia, serif;
  --lc-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --lc-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --lc-sec: clamp(72px, 9vw, 128px);
  --lc-ease: cubic-bezier(.4, 0, .2, 1);
  background: var(--lc-paper); color: var(--lc-ink);
}
.lc-sec { padding-block: var(--lc-sec); }
.lc-paper2 { background: var(--lc-paper2); }
.lc-ink { background: var(--lc-ink); color: var(--lc-paper); position: relative; isolation: isolate; overflow: hidden; }

/* the aura: the four colours blended as in the palette's round swatches, blurred behind the content */
.lc-aura { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.lc-aura::before, .lc-aura::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; }
.lc-aura::before { width: 52vw; height: 52vw; max-width: 760px; max-height: 760px; right: -12vw; top: -18vw; background: conic-gradient(from 200deg, var(--lc-lilac), var(--lc-rose), var(--lc-sky), var(--lc-lime), var(--lc-lilac)); }
.lc-aura::after { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: -10vw; bottom: -14vw; background: radial-gradient(circle, var(--lc-sky), transparent 70%); opacity: .55; }
@media (prefers-reduced-motion: no-preference) { .lc-aura::before { animation: lc-turn 40s linear infinite; } }
@keyframes lc-turn { to { transform: rotate(360deg); } }

/* type */
.lc-eyebrow { font: 500 12.5px/1.2 var(--lc-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lc-violet); }
.lc-ink .lc-eyebrow { color: var(--lc-lime); }
.lc-eyebrow.dark { color: var(--lc-violet); }
.lc-h1 { font: 700 clamp(42px, 5.6vw, 84px)/1 var(--lc-display); letter-spacing: -0.045em; margin: 0; text-wrap: balance; }
.lc-h2 { font: 600 clamp(32px, 4.2vw, 58px)/1.04 var(--lc-display); letter-spacing: -0.04em; margin: 0; text-wrap: balance; }
.lc-h1 em, .lc-h2 em { font: italic 400 1.08em/1 var(--lc-serif); letter-spacing: -0.01em; color: var(--lc-violet); }
.lc-ink .lc-h2 em { color: var(--lc-lilac); }
.lc-p { font: 400 clamp(16px, 1.2vw, 18px)/1.6 var(--lc-body); color: var(--lc-text2); margin: 0; max-width: 58ch; }
.lc-ink .lc-p { color: rgba(246,242,239,.76); }
.lc-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4.5vw, 56px); }
@media (min-width: 960px) { .lc-head.split { grid-template-columns: 1.15fr 1fr; align-items: end; column-gap: 48px; } }
.lc-note, .lc-fine { margin: 18px 0 0; font: 400 12px/1.4 var(--lc-mono); color: var(--lc-text2); }
.lc-tag { font: 500 11px/1.2 var(--lc-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lc-text2); }
.lc .tag-ex { font: 500 10.5px/1 var(--lc-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 100px; background: var(--lc-paper2); color: var(--lc-text2); }

/* buttons: plum ink with paper text; the line button for secondary actions */
.lc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 100px; text-decoration: none; font: 600 15px/1 var(--lc-display); letter-spacing: -0.01em; transition: translate .4s var(--lc-ease), background .3s, box-shadow .3s; }
.lc-btn.ink { background: var(--lc-ink); color: var(--lc-paper); }
.lc-btn.ink:hover { background: var(--lc-violet); }
.lc-btn.line { color: var(--lc-ink); box-shadow: inset 0 0 0 1.5px rgba(43,36,51,.3); }
.lc-btn.line:hover { box-shadow: inset 0 0 0 1.5px var(--lc-ink); }
.lc-btn:hover { translate: 0 -2px; }

/* ---------- hero ---------- */
.lc-hero { position: relative; overflow: hidden; padding-block: clamp(28px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.lc-hero .wrap { position: relative; z-index: 1; }
.lc-hero .crumbs { color: var(--lc-text2); margin: 0 0 clamp(32px, 5vw, 64px); }
.lc-hero .crumbs a { color: inherit; }
.lc-hero-grid { display: grid; gap: clamp(48px, 6vw, 72px); align-items: center; }
@media (min-width: 1040px) { .lc-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.lc-hero-copy { display: grid; gap: 24px; justify-items: start; }
.lc-logo { height: clamp(44px, 4.4vw, 60px); width: auto; display: block; }

/* the flow: the machine on the left, the cloud on the right, the four views travelling along the brand's lines */
.lc-flow { position: relative; aspect-ratio: 7 / 5; border-radius: 28px; background: rgba(255,255,255,.55); backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(91,63,196,.16), inset 0 0 0 1px rgba(255,255,255,.7); }
.lc-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.lc-lines path { fill: none; stroke: url(#lcg); stroke-width: 7; stroke-linecap: round; opacity: .9; }
.lc-machine, .lc-cloud { position: absolute; top: 50%; translate: 0 -50%; display: grid; gap: 6px; width: 34%; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(43,36,51,.1); }
.lc-machine { left: 5%; } .lc-cloud { right: 5%; }
.lc-mem, .lc-cloud b { font: 700 clamp(26px, 2.6vw, 36px)/1 var(--lc-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.lc-bar { display: block; height: 8px; border-radius: 8px; background: var(--lc-paper2); overflow: hidden; }
.lc-bar i { display: block; height: 100%; width: calc(var(--m, 92) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--lc-lime), var(--lc-rose)); transition: width 1.2s var(--lc-ease); }
.lc-machine small, .lc-cloud small { font: 400 12px/1.3 var(--lc-body); color: var(--lc-text2); }
.lc-cloud b { font-size: clamp(20px, 1.9vw, 28px); }
.lc-ok { justify-self: start; font: 500 11px/1 var(--lc-mono); font-style: normal; padding: 6px 9px; border-radius: 100px; background: var(--lc-ok-bg); color: var(--lc-ok); opacity: .35; transition: opacity .5s; }
.lc-flow.is-done .lc-ok { opacity: 1; }
.lc-views span { position: absolute; left: 0; top: 0; offset-rotate: 0deg; padding: 6px 8px; border-radius: 8px; background: var(--lc-ink); color: var(--lc-paper); font: 500 10.5px/1 var(--lc-mono); letter-spacing: .04em; opacity: 0; }
.lc .now { display: none; }
.lc .is-done .was { display: none; }
.lc .is-done .now { display: inline; }

/* ---------- film ---------- */
.lc-film { display: grid; gap: 18px; }
.lc-window { border-radius: 22px; overflow: hidden; background: var(--lc-ink); box-shadow: 0 40px 90px rgba(91,63,196,.18), 0 0 0 1px rgba(43,36,51,.08); }
.lc-window-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; font: 400 12px/1 var(--lc-mono); color: rgba(246,242,239,.55); }
.lc-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(246,242,239,.2); }
.lc-window-bar span { margin-left: 12px; }
.lc-window .film-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lc-paper); }
.lc-window .film-cam { width: 100%; height: 100%; will-change: transform; }
.lc-window .film-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc .film-play { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--lc-lime); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(43,36,51,.25); }
.lc .film-play::before { content: ""; width: 0; height: 0; border-left: 12px solid var(--lc-ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.lc .playing .film-play::before { width: 12px; height: 14px; border: 0; margin: 0; background: linear-gradient(90deg, var(--lc-ink) 0 4px, transparent 4px 8px, var(--lc-ink) 8px 12px); }
.lc .film-chapters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lc .film-chapters::-webkit-scrollbar { display: none; }
.lc .film-chapters button { --p: 0; flex: 1 0 auto; position: relative; overflow: hidden; border: 0; cursor: pointer; padding: 14px 18px; border-radius: 100px; background: #fff; color: var(--lc-text2); font: 500 14px/1 var(--lc-display); box-shadow: inset 0 0 0 1px var(--lc-line); transition: background .3s, color .3s; }
.lc .film-chapters button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 100%); background: var(--lc-spectrum); }
.lc .film-chapters button[aria-current="true"] { background: var(--lc-ink); color: var(--lc-paper); box-shadow: none; }

@media (max-width: 640px) {
  .lc-btn { min-height: 50px; padding: 0 22px; font-size: 14px; }
  .lc-hero .lc-actions { width: 100%; }
  .lc-hero .lc-actions .lc-btn { flex: 1 1 auto; }
  .lc-flow { aspect-ratio: 1 / 1; }
  .lc-machine, .lc-cloud { width: 40%; padding: 12px; }
  .lc-window { border-radius: 16px; }
}