/* LiveNotate on the studio pages (home and Our work): a small window into
   the LiveNotate page's look, set inside the studio layout. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/livenotate/fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations"), url("/assets/livenotate/fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/livenotate/fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2-variations"), url("/assets/livenotate/fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.ln-feature {
  --ln-serif: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-areas: "media copy";
  gap: 52px;
  align-items: center;
  margin-top: 76px;
  padding: 40px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 80% at 22% 30%, rgba(86, 214, 210, .16), transparent 70%),
    linear-gradient(150deg, #0e132e 0%, #112647 55%, #0d3b50 100%);
  border: 1px solid rgba(200, 228, 236, .16);
  overflow: hidden;
}
.ln-feature-copy { grid-area: copy; min-width: 0; }
.ln-feature-copy .eyebrow { margin-bottom: 18px; color: #c7c9e6; }
.ln-feature h3 { margin: 0 0 12px; font: 600 clamp(2.125rem, 3.6vw, 2.75rem)/1 var(--ln-serif); letter-spacing: -.012em; color: #fbf8ef; }
.ln-feature h3 a { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.ln-feature h3 a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ln-feature h3 img { width: 48px; height: 48px; border-radius: 11px; flex: 0 0 48px; box-shadow: 0 8px 20px rgba(3, 5, 22, .5); }
.ln-feature-lead { margin: 0 0 14px; font: italic 500 1.375rem/1.35 var(--ln-serif); color: #f1ecdf; }
.ln-feature-copy > p:not(.eyebrow):not(.ln-feature-lead):not(.fine-print) { margin: 0; color: #b9bcd6; font-size: 1rem; }
.ln-feature .actions { margin-top: 24px; }
.ln-feature .button { padding-inline: 18px; gap: 12px; }
.ln-feature .button:not(.secondary) { background: #f4f1e8; color: #1a1b2e; }
.ln-feature .button:not(.secondary):hover { background: #fffbef; }
.ln-feature .button.secondary { border-color: rgba(200, 228, 236, .3); }
.ln-feature .fine-print { margin: 14px 0 0; color: #9ea2c4 !important; }
.ln-feature-media { grid-area: media; display: block; min-width: 0; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(200, 228, 236, .18); box-shadow: 0 26px 60px rgba(3, 5, 22, .55); }
.ln-feature-media video, .ln-feature-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #0a1022; }
.ln-feature-media video { cursor: pointer; }
@media (max-width: 800px) {
  .ln-feature { grid-template-columns: 1fr; grid-template-areas: "copy" "media"; gap: 30px; padding: 28px 24px; margin-top: 56px; }
}
@media (max-width: 480px) {
  .ln-feature { padding: 24px 18px; margin-top: 44px; border-radius: 16px; }
  .ln-feature .actions { flex-direction: column; align-items: stretch; }
}