/* ---------------------------------------------------------------- Lyrion -- */
:root{
  --ly-ink:#262626; --ly-mute:#525252; --ly-line:rgba(0,0,0,.08);
  --ly-paper:#FBFAF8; --ly-card:#FFFFFF;
  --ly-sans:"Geist","Geist Placeholder",-apple-system,sans-serif;
  --ly-serif:"Hedvig Letters Serif","Hedvig Letters Serif Placeholder",serif;
  --ly-max:1280px;
  /* how much room the announcement banner takes at the top of the viewport,
     its own height plus the gap above it. Defaulted here so the nav is in the
     right place on the FIRST paint; banner() then measures the real height and
     overwrites it, which matters once the line wraps. */
  --ly-bnr:54px;
}

/* ---- announcement banner ------------------------------------------------
   His brief, second round: like Intercom's. Seamless, so you notice it less.
   That means a FLUSH full-width band at the very top, no rounding, no side
   margin, no shadow, one hairline under it, in the site's own paper tone and
   the site's own type. The first version was a floating black card, which
   read as a second pill parked above the nav pill ("deux trucs cote a cote").
   The member logos are the real ones, cut from the alliance's press-kit sheet
   (_parts/osaia_logos.py): five names in type disappear into the sentence,
   five logos are what makes it read as an announcement at a glance.
   Everything fixed BELOW the band (the Framer nav on desktop, the injected
   pill everywhere else) is pushed down by --ly-bnr, minus that bar's own top
   offset, so the gap under the band is identical on every page and width.

   THIRD ROUND, his two corrections and they are the whole point:
   1. the SAME colour as the site, not a near miss. The band was #efedea, half
      a step darker than the pages, which is exactly what made it read as a
      separate strip. It is now #f6f4f1, the literal page background set in
      PAGE_HEAD's body rule, so the band and the page are one surface.
   2. because the colour no longer separates it, a BLACK rule marks it out
      ("tu le surlignes avec un surligneur noir, sur les edges"). The band is
      full bleed at the top, so the bottom edge is the only one on screen: one
      solid #171717 line, not a grey hairline.
   And the type is now the nav's type exactly, Geist 14/500 at -.01em in
   #3a3632, the same declaration .ly-np-links a carries, so nothing about the
   band reads as a different system from the site.

   FOURTH ROUND, THE NOTCH. It is no longer a full-bleed strip. It hangs from
   the top edge like the notch on a Mac or the island on a phone: it stops
   before both side edges, and its two BOTTOM corners are rounded while the top
   stays square against the edge of the screen ("au lieu de la finir, tu la
   finis avant les rebords"). The black rule now runs the three visible sides,
   which is what draws the shape. Width is content width, capped so it can
   never reach the edges. */
.ly-bnr{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:998;
  display:flex;align-items:center;justify-content:center;
  width:max-content;max-width:calc(100vw - 56px);
  padding:11px 26px 12px;background:#f6f4f1;
  border:1px solid #171717;border-top:0;border-radius:0 0 20px 20px;
  font-family:var(--ly-sans);-webkit-backdrop-filter:none}
.ly-bnr-in{display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;max-width:1280px;row-gap:8px}
/* the sentence and the logos are one group, printed twice; the second copy is
   the ticker's tail and only exists on phones (see the phone block) */
.ly-bnr-mq{display:flex;align-items:center;min-width:0}
.ly-bnr-track{display:flex;align-items:center}
.ly-bnr-grp{display:flex;align-items:center;gap:16px}
.ly-bnr-dup{display:none}
.ly-bnr-t{margin:0;font-size:14px;line-height:1.35;letter-spacing:-.01em;
  font-weight:500;color:#3a3632;text-align:center}
.ly-bnr-t b{font-weight:500;color:#171717}
.ly-bnr-logos{display:flex;align-items:center;gap:20px}
.ly-bnr-logos img{height:15px;width:auto;display:block;flex:0 0 auto}
.ly-bnr-lk{display:inline-flex;align-items:center;gap:5px;color:#171717;
  font-size:14px;font-weight:500;letter-spacing:-.01em;text-decoration:none;
  white-space:nowrap;border-bottom:1px solid rgba(0,0,0,.28);padding-bottom:1px}
.ly-bnr-lk:hover{border-bottom-color:#171717}
.ly-bnr-lk svg{width:12px;height:12px;flex:0 0 auto;transition:transform .18s ease}
.ly-bnr-lk:hover svg{transform:translateX(3px)}
.ly-bnr-s{display:none}                 /* the shorter phone wording */
/* the dismiss X. Quiet until you go near it: it is an escape hatch, not a
   second call to action next to the link. */
.ly-bnr-cl{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin:-4px -8px -4px 2px;padding:0;flex:0 0 auto;
  background:transparent;border:0;border-radius:999px;color:#8a827a;
  cursor:pointer;transition:color .16s,background .16s}
.ly-bnr-cl:hover{color:#171717;background:rgba(0,0,0,.06)}
.ly-bnr-cl svg{width:12px;height:12px;display:block}
/* dismissed: set by the inline guard before first paint, and by the click */
html.ly-bnr-off{--ly-bnr:0px}
html.ly-bnr-off .ly-bnr{display:none}
/* PHONES, and this took three goes. Two loose rows at 61px was "a bit thick",
   roughly a sixth of the screen. Dropping the logos bought one line at 35px,
   and he refused that trade: the logos are the point. Two tight rows at 47px
   brought them back and he refused that too.

   FOURTH GO, and this is the one. Two rows was "vraiment pas
   beau, ça prend deux places", and the inset notch left the homepage's flower
   video showing in the two top corners beside it, which is what he means by
   "l'animation de la fleur qui continue tout à droite et tout à gauche".
   So on a phone it is FULL BLEED again: it touches both edges and the top, no
   corner of video beside it, and only the two bottom corners are rounded, the
   way a sheet coming down from the top of the screen behaves.
   And it is ONE row, 35px, that still shows the logos: the sentence and the
   logo row occupy the SAME grid cell and cross-fade, so nothing is dropped and
   nothing is stacked. The arrow and the X sit outside that cell and never move
   while the middle changes. Reduced motion gets the sentence, held. */
@media (max-width:809px){
  :root{--ly-bnr:35px}
  .ly-bnr{left:0;right:0;transform:none;width:auto;max-width:none;
    padding:8px 14px 9px;border-left:0;border-right:0;
    border-radius:0 0 18px 18px}
  .ly-bnr-in{display:grid;grid-template-columns:1fr auto auto;
    align-items:center;gap:0 10px;width:100%;max-width:none}
  /* the ticker: one window, a track of two identical groups, sliding by half
     its own width forever. The logos are on screen within the first second
     instead of five seconds in, which was the whole complaint. */
  .ly-bnr-mq{grid-area:1/1;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 16px),transparent 100%)}
  /* 18s -> 14s -> 10s, two asks. One group is ~555px, so this is about 55px a
     second: the logos come round roughly twice as often as they first did. */
  .ly-bnr-track{animation:lyBnrMq 10s linear infinite}
  .ly-bnr-grp{gap:12px;padding-right:26px}
  .ly-bnr-dup{display:flex}
  .ly-bnr-t{font-size:12px;line-height:1.4;white-space:nowrap}
  .ly-bnr-logos{gap:11px;flex:0 0 auto}
  .ly-bnr-logos img{height:12px}
  .ly-bnr-lk{grid-area:1/2;font-size:12px;gap:4px;border-bottom:0;padding-bottom:0}
  .ly-bnr-lk svg{width:13px;height:13px}
  .ly-bnr-cl{grid-area:1/3;margin:-4px -4px -4px 0}
  /* the middle cell carries the message, so the link is the arrow alone */
  .ly-bnr-x,.ly-bnr-s{display:none}
}
/* half the track is exactly one group including its trailing space, so the
   loop point is invisible */
@keyframes lyBnrMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* the bar must never eat a tap meant for the pill under it: only its two real
   controls (the announcement link and the X) are interactive. Also kill the
   300ms double-tap delay on everything tappable in the top bars: Safari waits
   on elements without touch-action, and that wait reads as a dead button. */
.ly-bnr{pointer-events:none}
.ly-bnr a,.ly-bnr button{pointer-events:auto}
.ly-cta,.ly-np-burger,.ly-np-links a,.ly-np-brand,.ly-bnr a,.ly-bnr button,
.ly-hcta{touch-action:manipulation}
@media (prefers-reduced-motion:reduce){
  .ly-bnr-track{animation:none}
}
/* ---- the phone hero owns the whole first screen -------------------------
   His screenshot next to the original: on lyrion.io the flower stopped short
   and the customer logo strip was already showing, and moving, at the bottom
   of the very first screen, before he had scrolled anything. On aeth's own
   site the flower runs to the bottom edge.
   The template sizes the hero in vh. On iOS the page paints BEHIND Safari's
   floating toolbar, and that strip of screen is outside the vh box, so
   whatever follows the hero shows through it. lvh is the large viewport, the
   full screen, toolbar included, which is the box that actually needs filling.
   A browser without lvh drops these declarations and keeps the vh ones, so
   this is safe to state plainly. The strip below also gets its air back
   (the original's is 80px tall, ours had compressed to 44). */
@media (max-width:809px){
  [data-framer-name="Hero Section"]{height:100lvh}
  [data-framer-name="Hero Section"] [data-framer-name="BG Container"]{
    height:100lvh;top:calc(50% - 50lvh)}
  /* the CTA pair stacks on a phone, but the template's button slot is a fixed
     36px (the fix must hit the framer container INSIDE the slot too, not just
     the slot) and the white card clips at its own height, so the second button
     was cut in half (his "ca va hors"). Free the whole chain and let the card
     grow; the pair becomes two full-width rows. */
  [data-framer-name="Hero Section"] [data-framer-name="Button Container"],
  [data-framer-name="Hero Section"] [data-framer-name="Button Container"]>div{
    height:auto!important;width:100%!important}
  [data-framer-name="Hero Section"] .ly-heroctas{height:auto!important;
    flex-direction:column;align-items:stretch;width:100%!important;max-width:none}
  [data-framer-name="Hero Section"] .ly-hcta{justify-content:center}
  [data-framer-name="Hero Section"] [data-framer-name="Content"]{
    height:auto!important;max-height:none!important;padding-bottom:26px}
  [data-framer-name="Logos Section"] [data-framer-name="Container"]{
    padding-top:26px;padding-bottom:26px}
}

/* the narrow ones (SE, mini): same band, a hair smaller so it never clips */
@media (max-width:369px){
  .ly-bnr{padding:8px 12px 9px}
  .ly-bnr-t{font-size:11.5px}
  .ly-bnr-logos{gap:9px}
  .ly-bnr-logos img{height:11px}
}
/* the phone menu sheet drops from the very top, so the banner steps aside
   while it is open rather than floating on top of it */
html:has(.ly-navpill.ly-np-open) .ly-bnr{display:none}

/* ly-bare: the letter page. No marketing nav on top of a letter, and no bar
   pointing at the thing you are already reading. build.py skips the bar
   injection for it; this kills the pill lyrion.js builds at runtime. */
html.ly-bare .ly-navpill,html.ly-bare .ly-bnr{display:none!important}

/* The hero news badge now opens the Series A piece (his ask: make it read
   more, and show that permanently rather than only on hover). The anchor
   itself still takes no pointer events, because ITS hover is a Framer variant
   that slides an arrow in on a re-render and no CSS can stop it. So the click
   is carried by a plain overlay anchor sitting on top, as a SIBLING: pointer
   events never enter the badge's own subtree, so React never sees a hover. */
a[data-ly-news],a[data-ly-news] *{cursor:default!important;text-decoration:none!important}
.ly-news-wrap{position:relative}
.ly-news-hit{position:absolute;inset:-2px;z-index:6;display:block;cursor:pointer;
  border-radius:999px}
.ly-news-more{display:inline-flex;align-items:center;gap:5px;margin-left:9px;
  font-family:var(--ly-sans);font-size:13px;font-weight:500;color:#262626;
  white-space:nowrap;line-height:1}
.ly-news-more svg{width:13px;height:13px;flex:0 0 auto;
  transition:transform .18s ease}
.ly-news-wrap:hover .ly-news-more svg{transform:translateX(3px)}
/* the template swaps in a hover VARIANT that slides an arrow in, which is a
   React re-render, not a style we can override. Killing pointer events on the
   badge is what actually stops it: no hover, no arrow, no click. */
a[data-ly-news]{pointer-events:none!important}
a[data-ly-news]:hover,a[data-ly-news]:hover *,
a[data-ly-news]:focus,a[data-ly-news]:focus *{
  text-decoration:none!important;opacity:1!important}

/* leaving the page: the half-second-long hard cut between two real page loads
   becomes a short fade. The arrival half lives in the pages' own CSS. */
html.ly-leaving{opacity:0;transition:opacity .13s ease-in}
@media (prefers-reduced-motion:reduce){html.ly-leaving{opacity:1;transition:none}}

/* the Framer badge is not part of this site */
#__framer-badge-container,[data-framer-badge],a[href*="framer.com/?via"],
a[href^="https://www.framer.com/"][target="_blank"]{display:none!important}

/* ---- the Lyrion mark, over the template's own logo slots ----------------
   Done in CSS, not by replacing the node: React re-renders the mark component
   and puts its own SVG straight back. .framer-EOjP0 is the mark in the nav and
   the footer, .framer-VmBrV the one on the two dark tiles, .framer-hcsc7 the
   watermark at the foot of the page. */
[data-framer-name="Logo"] > .framer-EOjP0,
[data-framer-name="Logo"] > .framer-VmBrV,
[data-framer-name="Logo"].framer-hcsc7{
  background-image:url(/_lyrion-b650bae728/brand/lyrion-mark-dark.png)!important;
  background-size:contain!important;background-repeat:no-repeat!important;
  background-position:center!important;background-color:transparent!important;
  /* the template masks this box into its old flower glyph, which was clipping
     our mark into a flower shape. Drop the mask so the real logo shows. */
  -webkit-mask:none!important;mask:none!important}
/* the nav and footer slot is 14x13 for a wide glyph. The Lyrion mark is
   square, so square the box off rather than stretching it. */
[data-framer-name="Logo"] > .framer-EOjP0{width:22px!important;height:22px!important}
/* the dark tiles need the light (white) mark, and it must beat the !important
   dark rule above, so it carries !important too. The mark sat small in the black
   tile, so size it up a little, it is the brand on that panel. */
[data-framer-name="Logo"] > .framer-VmBrV{
  background-image:url(/_lyrion-b650bae728/brand/lyrion-mark-light.png)!important;
  width:44px!important;height:44px!important}
[data-framer-name="Logo"] > .framer-EOjP0 *,
[data-framer-name="Logo"] > .framer-VmBrV *,
[data-framer-name="Logo"].framer-hcsc7 *{visibility:hidden!important}
/* the DARK nav bar ("Desktop / Dark", swaps in over the dark deep-dive
   section) reuses the dark-tile logo class .framer-VmBrV, so the 44px tile
   rule above blew its mark up into a giant badge; and the injected CTAs
   arrived dark-on-dark. Scope all three for the dark bar. */
nav[data-framer-name="Desktop / Dark"] [data-framer-name="Logo"] > .framer-VmBrV{
  width:22px!important;height:22px!important}
nav[data-framer-name="Desktop / Dark"] .ly-cta--ghost{
  color:#f5f5f5!important;border-color:rgba(255,255,255,.34)!important;background:transparent!important}
nav[data-framer-name="Desktop / Dark"] .ly-cta--solid{
  background:#f5f5f5!important;border-color:#f5f5f5!important;color:#171717!important}

/* ---- nav: logo left, links centred, two calls to action right -----------
   In CSS, not inline styles. Framer re-renders the bar as you scroll and puts
   the absolutely centred link row back, which is what dropped the links on top
   of the wordmark. */
@media (min-width:810px){
  /* a compact pill that hugs its contents and centres, like the Aeth original.
     Centre it via margin:auto on the nav inside a full-width wrapper, NOT via a
     transform on the wrapper: Framer sets its own transform on the bar as you
     scroll, which was wiping the translateX and throwing the pill off-centre.
     margin:auto is immune to that. */
  /* margin-top, not top: Framer owns the inline top (48px) and rewrites it on
     scroll, and the phone variant carries its own transform, so a margin is the
     only offset here that nothing else fights over. The 48px subtracted is that
     inline top, 14px is the gap left under the banner. */
  div:has(> nav[data-framer-name^="Desktop"]){
    left:0!important;right:0!important;width:100%!important;
    margin:max(0px,calc(var(--ly-bnr) + 14px - 48px)) 0 0!important}
  nav[data-framer-name^="Desktop"]{width:-moz-fit-content!important;width:fit-content!important;
    max-width:calc(100vw - 48px)!important;margin-left:auto!important;margin-right:auto!important}
  /* equal breathing room on both sides: logo -> links == blog -> buttons */
  nav [data-framer-name="Container"]{display:flex!important;align-items:center!important;
    justify-content:flex-start!important;width:auto!important;gap:30px!important;
    padding-right:6px!important}
  nav [data-framer-name="Links"]{position:static!important;transform:none!important;
    left:auto!important;top:auto!important;flex:0 0 auto!important;
    display:flex!important;align-items:center!important;gap:24px!important}
  nav [data-framer-name="Button Container"]{margin-left:0!important}
}
/* the native Framer bar is RETIRED (his ask 2026-08-03: no Download now, and a
   new link set the Framer bar cannot carry). The injected pill is THE nav on
   every page now. ALL variants, ALL widths: Framer swaps in "Tablet / Light"
   between ~810 and 1200, which is the second bar he saw behind the pill on a
   shortened window. Never scope this to ^="Desktop" again. */
nav[data-framer-name]{display:none!important}
div:has(> nav[data-framer-name]){display:none!important}
/* ---- hero card: his ask, the headline must sit on THREE lines and the sub
   was "super narrow" (369px heading, 208px sub). Widen the card itself; the
   heading and sub follow. Desktop only, the phone hero already fills. */
@media (min-width:810px){
  /* :has(> Heading...) pins this to the hero CARD alone. Without it the rule
     also caught Content nodes inside the pinned-reveal mock and squeezed the
     dashboard to 620px, which is the misalignment he flagged. */
  header[data-framer-name="Hero Section"] [data-framer-name="Content Container"]
    > [data-framer-name="Content"]:has(> [data-framer-name="Heading and supporting text"]){
    width:620px!important;max-width:calc(100vw - 48px)!important}
  header[data-framer-name="Hero Section"] [data-framer-name="Heading and supporting text"],
  header[data-framer-name="Hero Section"] [data-framer-name="Heading"],
  header[data-framer-name="Hero Section"] [data-framer-name="Heading"] h1{width:100%!important}
  header[data-framer-name="Hero Section"] [data-framer-name="Supporting text"]{
    width:100%!important;max-width:470px!important;margin:0 auto!important}
  header[data-framer-name="Hero Section"] [data-framer-name="Supporting text"] p{
    width:100%!important;max-width:none!important}
}
/* a bigger wordmark next to the mark */
[data-framer-name="Logo"] [data-framer-name="Logo Name"] p{font-size:18px!important}
.ly-cta{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ly-sans);font-size:14px;font-weight:500;letter-spacing:-.01em;
  height:36px;padding:0 15px;border-radius:999px;white-space:nowrap;
  text-decoration:none;cursor:pointer;transition:background .18s ease,border-color .18s ease;
}
.ly-cta--solid{background:#171717;color:#fff;border:1px solid #171717}
.ly-cta--solid:hover{background:#000}
.ly-cta--ghost{background:transparent;color:#262626;border:1px solid rgba(0,0,0,.16)}
.ly-cta--ghost:hover{border-color:rgba(0,0,0,.34)}
.ly-navcta{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:34px}
@media (max-width:809px){
  .ly-navcta{gap:6px;margin-left:10px}
  .ly-cta{height:32px;padding:0 11px;font-size:13px}
}

/* ---- injected nav pill, for pages where Framer hands the header to a hidden
   tablet/phone variant (the blog, and the standalone contact + download pages).
   Matches the homepage pill: light glass bar, logo left, links, two CTAs. ---- */
.ly-navpill{margin-top:max(0px,calc(var(--ly-bnr) + 14px - 20px));
  position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1000;
  display:flex;align-items:center;gap:8px;height:52px;padding:0 10px 0 16px;
  border-radius:10px;background:rgba(244,244,243,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -24px rgba(0,0,0,.4);
  border:1px solid rgba(0,0,0,.06);font-family:var(--ly-sans);max-width:calc(100vw - 32px)}
.ly-np-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:#171717;font-weight:600;font-size:18px;letter-spacing:-.02em;padding-right:8px}
.ly-np-mark{width:22px;height:22px;background:url(/_lyrion-b650bae728/brand/lyrion-mark-dark.png) center/contain no-repeat;display:inline-block}
.ly-np-links{display:flex;align-items:center;gap:2px}
.ly-np-links a{text-decoration:none;color:#3a3632;font-size:14px;font-weight:500;
  letter-spacing:-.01em;padding:8px 12px;border-radius:8px;transition:background .16s,color .16s;white-space:nowrap}
.ly-np-links a:hover{background:rgba(0,0,0,.05);color:#171717}
.ly-np-mcs{display:none}      /* menu-only Contact sales, phones (see below) */
.ly-np-cta{display:inline-flex;align-items:center;gap:8px;margin-left:10px}
/* the hamburger, shown on phones only */
.ly-np-burger{display:none;width:38px;height:38px;padding:0;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(0,0,0,.16);border-radius:999px;color:#262626;cursor:pointer}
.ly-np-burger:hover{border-color:rgba(0,0,0,.32)}
@media (min-width:810px) and (max-width:1020px){
  /* narrow desktop: the pill is the ONLY nav now, so the links must FIT
     rather than vanish. Tighter type and padding down to 810. */
  .ly-np-links a{font-size:13px;padding:8px 7px}
  .ly-np-brand{font-size:16px;padding-right:2px}
  .ly-np-cta .ly-cta{height:32px;padding:0 12px;font-size:13px}
}
@media (max-width:809px){
  /* ONE clean bar on phones: hide Framer's own nav so it stops sitting behind
     our pill (that overlap was the "weird extension" he flagged). */
  nav[data-framer-name]{display:none!important}
  /* full-width pill, brand left, actions right */
  .ly-navpill{top:12px;left:12px;right:12px;transform:none;width:auto;max-width:none;
    height:52px;justify-content:space-between;padding:0 10px 0 15px;
    margin-top:max(0px,calc(var(--ly-bnr) + 10px - 12px))}
  .ly-np-cta{margin-left:0;gap:8px}
  .ly-np-dl{display:none}                 /* no Download now on mobile */
  .ly-np-burger{display:inline-flex}
  /* THE MENU IS A FULL SHEET NOW, not a dropdown (his reference: the powder
     template). The translucent panel let the page read through it, which he
     called liquidy. This one covers the screen in solid carbon, drops from
     the top, and holds the links centred with the CTA under a hairline. The
     pill's own bar stays on top of it, so its logo and the burger (now an X)
     sit exactly where they were before it opened. */
  .ly-np-links{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100dvh;
    flex-direction:column;align-items:center;justify-content:center;gap:0;
    background:#0d0c0b;border:0;border-radius:0;padding:0 24px;
    box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    display:none;z-index:999;overscroll-behavior:contain}
  .ly-np-links.open{display:flex;
    animation:lyMenuIn .42s cubic-bezier(.22,.9,.26,1) both}
  @keyframes lyMenuIn{
    from{clip-path:inset(0 0 100% 0)}
    to{clip-path:inset(0 0 0 0)}}
  .ly-np-links a{padding:17px 8px;font-size:24px;font-weight:400;
    letter-spacing:-.02em;line-height:1.2;text-align:center;border-radius:0;
    color:rgba(250,249,247,.86);
    animation:lyMenuRow .44s cubic-bezier(.22,.9,.26,1) both}
  .ly-np-links a:nth-child(1){animation-delay:.10s}
  .ly-np-links a:nth-child(2){animation-delay:.15s}
  .ly-np-links a:nth-child(3){animation-delay:.20s}
  .ly-np-links a:nth-child(4){animation-delay:.25s}
  .ly-np-links a:nth-child(5){animation-delay:.32s}
  @keyframes lyMenuRow{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .ly-np-links a:active{background:transparent;color:#fff}
  /* the one action, a pill under a hairline, exactly like the reference */
  .ly-np-links .ly-np-mcs{position:relative;display:block;margin-top:34px;
    padding:15px 40px!important;font-size:17px!important;font-weight:500;
    color:#faf9f7!important;border:1px solid rgba(250,249,247,.24);
    border-radius:999px;background:transparent}
  .ly-np-mcs::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
    top:-34px;width:172px;height:1px;background:rgba(250,249,247,.18)}
  .ly-np-mcs:active{background:rgba(250,249,247,.08)}
  /* while the sheet is open the bar rides on top of it: transparent, white
     mark and wordmark, and the burger becomes the X */
  .ly-navpill.ly-np-open{background:transparent;border-color:transparent;
    box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:1001}
  /* the sheet is a fixed child of the bar, so without this it paints over the
     bar's own logo and X, which are the only two things that must stay */
  .ly-navpill.ly-np-open .ly-np-brand,
  .ly-navpill.ly-np-open .ly-np-cta{position:relative;z-index:1000}
  .ly-navpill.ly-np-open .ly-np-brand{color:#faf9f7}
  .ly-navpill.ly-np-open .ly-np-mark{
    background-image:url(/_lyrion-b650bae728/brand/lyrion-mark-light.png)}
  .ly-navpill.ly-np-open .ly-navcta,
  .ly-navpill.ly-np-open .ly-np-cta > .ly-cta{display:none}
  .ly-np-burger{transition:color .2s,border-color .2s}
  /* the two bars have to cross at the icon's exact centre. transform-origin
     in px on an SVG path resolves against the PATH's own box, not the view
     box, so 12px 12px landed off centre. Each bar turns about its own middle
     after it has slid to the centre line, which is dead on. */
  .ly-np-burger svg .lyb{transition:transform .3s cubic-bezier(.22,.9,.26,1),opacity .2s;
    transform-box:fill-box;transform-origin:center}
  .ly-np-burger[aria-expanded="true"]{color:#faf9f7;border-color:rgba(250,249,247,.3)}
  .ly-np-burger[aria-expanded="true"] .lyb-t{transform:translateY(5px) rotate(45deg)}
  .ly-np-burger[aria-expanded="true"] .lyb-m{opacity:0}
  .ly-np-burger[aria-expanded="true"] .lyb-b{transform:translateY(-5px) rotate(-45deg)}
  .ly-np-burger[aria-expanded="true"]{background:#17100e;border-color:#17100e;color:#fdfcfa}
}
/* Download now is a desktop-only CTA: a tablet in landscape gets Framer's own
   nav, so kill it there as well (his ask: no Download now on a phone) */
@media (max-width:980px){
  .ly-navcta .ly-cta--solid{display:none}
}

/* ---- client logos in the trusted-by ticker ------------------------------ */
.ly-logo{display:flex;align-items:center;justify-content:center;height:28px;padding:0 26px}
.ly-logo img{height:22px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1) contrast(.15) brightness(.62);opacity:.85}
.ly-logo .ly-word{font-family:var(--ly-sans);font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:#8a8a8a}
.ly-logo .ly-lockup{display:flex;align-items:center;gap:7px}
.ly-logo .ly-lockup img{height:20px;filter:grayscale(1) brightness(.7)}
/* the same mark sitting on a dark quote tile rather than on paper. The ticker
   centres its marks in a fixed slot, which on a tile leaves a short wordmark
   ("Coda") floating in from the left edge while a long one ("TravelPerk")
   fills it: his "the Coda logo is a bit off-centered". On a tile the mark
   hangs off the same left edge as the quote under it. */
.ly-logo--onart{justify-content:flex-start;padding:0}
.ly-logo--onart .ly-word{color:rgba(255,255,255,.82)}
.ly-logo--onart img{filter:brightness(0) invert(1);opacity:.82}

/* ---- the proof marquee tiles: artwork, a headline figure, company name --- */
.ly-tilecap{position:absolute;left:0;right:0;bottom:0;top:0;z-index:3;
  padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  background:linear-gradient(180deg,rgba(15,12,10,0) 24%,rgba(15,12,10,.44) 58%,rgba(15,12,10,.82) 100%);
  border-radius:inherit;pointer-events:none}
.ly-tilestat b{display:block;font-family:'Hedvig Letters Serif',serif;font-weight:400;
  font-size:clamp(34px,3.5vw,46px);line-height:1.02;letter-spacing:-.02em;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.55)}
.ly-tilestat .sub{display:block;margin-top:8px;max-width:230px;font-family:var(--ly-sans);
  font-size:13.5px;line-height:1.4;font-weight:500;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.ly-tilename{font-family:var(--ly-sans);font-size:15px;font-weight:600;
  letter-spacing:.01em;color:rgba(255,255,255,.72);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.ly-hide{display:none!important}

/* ---- a shared shell for the injected band ------------------------------- */
.ly-section{position:relative;width:100%;display:flex;justify-content:center;
  padding:110px 20px;box-sizing:border-box;overflow:clip;font-family:var(--ly-sans)}
.ly-inner{width:100%;max-width:var(--ly-max);position:relative;z-index:2}
.ly-eyebrow{font-family:var(--ly-sans);font-size:14px;font-weight:400;
  letter-spacing:0;color:var(--ly-mute);margin:0 0 16px}
.ly-h2{font-family:var(--ly-serif);font-size:36px;line-height:44px;
  letter-spacing:-.02em;font-weight:400;color:var(--ly-ink);margin:0}
.ly-h2 span{color:#a3a3a3}
.ly-lede{font-family:var(--ly-sans);font-size:16px;line-height:26px;
  color:var(--ly-mute);max-width:560px;margin:18px 0 0}
@media (max-width:809px){
  .ly-section{padding:76px 18px}
  .ly-h2{font-size:32px;line-height:40px}
}

/* ---- before / after, INSIDE the hero's native pinned reveal -------------
   4810's hero is kept exactly as the template ships it: arrive on the flower,
   scroll, the heading holds, the panel slides up with the scroll. Only the
   panel's CONTENT is ours: it arrives showing the manual BEFORE dashboard and
   a little more scroll wipes it to the agent-run AFTER. The template's own
   mock stays in the DOM (it is what gives the panel its size and the reveal
   its target), blanked by CSS; our stage overlays it. */
/* his ask (images 15-17): a before/after SLIDER with a visible round handle,
   not a wipe. It arrives fully on BEFORE (handle at the far left), and as you
   scroll the handle sweeps LEFT->RIGHT, revealing the AFTER (Lyrion) side. The
   Before/After labels live OUTSIDE the dashboard, in the left gutter. The
   Lyrion mark shows ONLY on the AFTER side, never on the messy BEFORE. */
[data-ly-ba="1"]{position:relative;overflow:visible}
[data-ly-ba="1"]>*:not(.ly-hba-stage):not(.ly-hba-side){opacity:0!important;pointer-events:none!important}
.ly-hba-stage{position:absolute;inset:0;z-index:4;background:#fff;overflow:hidden;
  border-radius:inherit;isolation:isolate}
.ly-hba-layer{position:absolute;inset:0;background:#fff;overflow:hidden}
.ly-hba-layer img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
/* BEFORE (the messy manual dashboard) fills the panel underneath; AFTER (the
   agent-run Lyrion view) rides on top and is clipped from the right, so the
   handle position IS how much AFTER is revealed. */
.ly-hba-before{z-index:1}
/* promoted to its own compositor layer so re-clipping the wipe repaints only
   this layer (its already-rasterised SVG), not the whole panel each frame */
.ly-hba-after{z-index:2;will-change:clip-path;transform:translateZ(0);backface-visibility:hidden}
/* the Lyrion mark is overlaid EXACTLY on top of the source's 19x19 cube glyph
   (native x9 y9.5 in the 1140x624 art), so it REPLACES it rather than sitting
   awkwardly beside it. Percent units track the layer as it scales. It lives
   inside the clipped AFTER layer, so it only shows once the handle uncovers the
   corner; the BEFORE side keeps its neutral cube (don't brand the mess). */
.ly-hba-mk{position:absolute;left:.79%;top:1.52%;width:1.67%;aspect-ratio:1;z-index:3;
  background:#17171A;border-radius:23%;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.ly-hba-mk img{width:66%;height:66%;object-fit:contain;filter:brightness(0) invert(1)}
/* the divider line + the round drag handle (his image 17) */
.ly-hba-seam{position:absolute;top:0;bottom:0;width:2px;z-index:5;margin-left:-1px;
  background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 0 20px 3px rgba(0,0,0,.16)}
.ly-hba-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;color:#171717;
  display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.16);
  transition:transform .12s,box-shadow .12s}
.ly-hba-knob:hover{transform:translate(-50%,-50%) scale(1.06)}
.ly-hba-knob:active{cursor:grabbing}
.ly-hba-knob svg{width:22px;height:22px}
/* the state labels, OUTSIDE the dashboard in the left gutter (his image 16) */
.ly-hba-side{position:absolute;top:50%;left:-22px;transform:translate(-100%,-50%);z-index:6;
  display:flex;flex-direction:column;gap:11px;pointer-events:none}
.ly-hba-side span{font-family:var(--ly-sans);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 13px;border-radius:999px;white-space:nowrap;text-align:center;
  background:#fff;border:1px solid rgba(0,0,0,.08);color:#b3aaa0;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.34);transition:color .2s,border-color .2s,background .2s}
.ly-hba-side span[data-on="1"]{color:#171717;border-color:rgba(0,0,0,.2);background:#fff}
@media (max-width:1200px){.ly-hba-side{display:none}}

/* ---- integration logo lanes --------------------------------------------- */
.ly-lanes{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;
  width:100%;padding:4px 0}
.ly-lane{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
/* the track is moved by rAF in JS, so no CSS animation here on purpose */
.ly-lane-track{display:flex;gap:10px;width:max-content;will-change:transform}
.ly-chip{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  font-family:var(--ly-sans);font-size:13.5px;letter-spacing:-.01em;color:#2f2f2f;
  white-space:nowrap}
.ly-chip img{width:16px;height:16px;object-fit:contain}

/* ---- toolkit: the four REAL Operator dashboards, light theme, one per tab ---
   Each tab shows an actual Operator product screen (chat/Muse, voice call,
   workflow graph, automation audit), pulled from :4801 and recoloured to the
   Lyrion light theme. The tabs are a clean row above the painting card (the
   original Aeth position), and the dashboard floats on the painting like an
   app window. Switching is self-contained, so Framer's tab strip can never
   blank it. */
/* ---- the whole tab, on one screen -------------------------------------
   His clearest note of the 29th pass, and it applies to all four tabs: "it
   should fit in the screen, each one you have to scroll a bit. Look how clean
   the original was." Measured on 4810 at 1440x900: its tab row is 59px and the
   painting is 1216x770, so tabs + painting = 829px, and the dashboard window
   inside it is 960x584 with an even painting border all round.
   So the composition is sized from the VIEWPORT HEIGHT, not from a fixed
   width: --ly-dd-h is what is left for the shot once the tab row and the
   painting border are paid for, and the shot takes its width from that height
   and its own aspect (--ly-ar, per tab, from dash_words). The stage keeps that
   height on every tab, so the painting never jumps between tabs either. */
.ly-tk-wrap{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  font-family:var(--ly-sans);
  --ly-dd-pad:clamp(26px,7.6vh,68px);
  --ly-dd-h:clamp(330px,calc(90vh - 88px - 2*clamp(26px,7.6vh,68px)),700px)}
/* the 4810 tab row: icon + label in the site font, spread evenly across the
   width, active tab is just brighter type with a hairline underline. No pill. */
.ly-tk-tabrow{display:flex;justify-content:space-between;gap:10px;width:100%;
  max-width:1040px;margin:0 auto 26px;border-bottom:1px solid rgba(255,255,255,.14)}
.ly-tk-tab2{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ly-sans);font-size:15px;font-weight:500;letter-spacing:-.01em;
  color:rgba(255,255,255,.56);padding:12px 8px 15px;border:0;background:transparent;
  cursor:pointer;position:relative;transition:color .18s}
.ly-tk-tab2 svg{width:17px;height:17px;flex:0 0 17px;opacity:.62}
.ly-tk-tab2:hover{color:rgba(255,255,255,.85)}
.ly-tk-tab2[data-on="1"]{color:#fff}
.ly-tk-tab2[data-on="1"] svg{opacity:1}
.ly-tk-tab2[data-on="1"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;
  height:2px;background:#fff;border-radius:2px}
.ly-tk-card{position:relative;border-radius:24px;overflow:hidden;
  padding:var(--ly-dd-pad) clamp(22px,3.5vw,56px);
  box-shadow:0 60px 120px -60px rgba(0,0,0,.7)}
.ly-tk-cardbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);z-index:0}
.ly-tk-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(130% 100% at 50% 0%,rgba(255,255,255,.06),rgba(18,13,9,.30))}
.ly-tk-stage{position:relative;z-index:2;width:100%}
.ly-tk-panel{display:none;position:relative}
.ly-tk-panel[data-on="1"]{display:block;animation:lyTkFade .4s ease}
@keyframes lyTkFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (min-width:810px){
  .ly-tk-stage{height:var(--ly-dd-h)}
  .ly-tk-panel[data-on="1"]{display:flex;align-items:center;justify-content:center;height:100%}
}
.ly-tk-shot{width:100%;display:block;border-radius:12px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.12)}
/* the dashboards are baked screenshots, so the chat one carries a crisp SVG
   overlay that rebrands "AI chat agent" as Muse, mapped 1:1 onto the image */
.ly-tk-shotwrap{position:relative;display:block}
.ly-tk-over{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  border-radius:12px}
/* the dashboards are live crisp HTML now, each in a white app window floating on
   the painted card (the baked Operator screenshots with the cube logo are gone) */
.ly-tk-app{position:relative;width:100%;aspect-ratio:1140/650;background:#fff;
  border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.12)}
.ly-tk-app .ly-d{height:100%}
@media (max-width:809px){.ly-tk-app{aspect-ratio:auto;height:520px}}
.ly-tk-caps{position:relative;min-height:42px;margin-top:20px}
.ly-tk-cap{display:none;text-align:center;max-width:720px;margin:0 auto;
  font-size:14px;line-height:1.5;color:#a9a39b}
.ly-tk-cap[data-on="1"]{display:block}
.ly-tk-cap b{color:#efece7;font-weight:600}

/* ---- the 4810 deep-dive cards: a small white card floating on the flower ---
   Adapted 1:1 from 4810's four tabs (workflow / leads / chatbot / backlog),
   the copy changed to Lyrion, the UI kept. Each panel centres one white card
   over the painting and carries a dark glass caption chip bottom-left, exactly
   like 4810's "Smart workflows / Manage marketing work..." chip. */
.ly-c4{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(468px,94%);background:#fff;border-radius:16px;overflow:hidden;
  font-family:var(--ly-sans);color:#211f1c;
  box-shadow:0 50px 100px -45px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.14)}
.ly-c4 *{box-sizing:border-box}
.ly-c4--wide{width:min(760px,96%)}
.ly-c4-bar{display:flex;align-items:center;justify-content:center;gap:7px;
  background:#171717;color:#fff;font-size:12px;font-weight:500;padding:11px 14px;letter-spacing:-.01em}
.ly-c4-bar svg{width:13px;height:13px;opacity:.85;flex:0 0 auto}
.ly-c4-cap{position:absolute;left:26px;bottom:26px;z-index:4;max-width:330px;
  background:rgba(18,15,12,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:16px;padding:17px 19px}
.ly-c4-cap b{display:block;font-family:var(--ly-sans);font-size:15px;font-weight:600;color:#fff;
  margin-bottom:5px;letter-spacing:-.01em}
.ly-c4-cap p{font-family:var(--ly-sans);font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.8);margin:0}
@media (max-width:640px){.ly-c4-cap{display:none}}

/* ================= Deep-dive: the FOUR dashboards ARE his own Intercom
   screenshots (_parts/refs/dash-{board,reports,inbox,console}.png). They are
   not reproduced and not reinterpreted: _parts/cut_dash.py cuts them off
   Intercom's decorative backdrop, _parts/erase_dash.py wipes the old words out
   of the pixels, and the new words are laid back over the image here as
   absolutely-positioned Geist text, sized in cqw so it scales with the shot.
   Everything else in the picture is untouched. Word map: dash_words.py. */
.ly-ov--im{display:flex;align-items:center;justify-content:center}
.ly-ov--im img{width:100%;height:100%;object-fit:contain}
/* the shot takes its width from the height budget and its own aspect, so the
   full window plus the painting around it lands inside one screen */
.ly-fin{position:relative;width:min(100%,calc(var(--ly-dd-h,700px)*var(--ly-ar,1.62)));
  max-width:1140px;margin:0 auto;
  border-radius:18px;overflow:hidden;
  container-type:inline-size;font-family:var(--ly-sans);color:#20242b}
.ly-fin *{box-sizing:border-box}
.ly-fin-shot{display:block;width:100%;height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.38)) drop-shadow(0 3px 9px rgba(0,0,0,.14))}
/* one wiped word, put back. r = [left, top, width, height] in % of the shot */
.ly-ov{position:absolute;display:flex;flex-direction:column;justify-content:flex-start;
  align-items:center;overflow:hidden;pointer-events:none}
.ly-ov--c{justify-content:center}
.ly-ovt{display:block;width:100%;font-family:var(--ly-sans);font-weight:400;
  text-align:left;white-space:normal}
.ly-ovt--sf{font-family:var(--ly-serif)}
/* the board's micro-labels are set in a monospace in his shot, so the words
   put back there have to be too, or they read as a different UI */
.ly-ovt--mo{font-family:ui-monospace,"SFMono-Regular","SF Mono",Menlo,"Roboto Mono",monospace}
.ly-ovt--el{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the inline tool chip inside a reading instruction */
.ly-ovp{font-style:normal;background:#d9d4dd;border-radius:.5cqw;
  padding:.05cqw .35cqw;white-space:nowrap}
.ly-ovmk{display:block;width:100%;height:auto}
/* a shot that ran off the bottom of his screenshot runs off the bottom of the
   flower card too: bottom-anchored past the card's padding, the card's own
   overflow:hidden makes the cut edge invisible */
.ly-fin--down{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(-1*clamp(22px,3.5vw,56px) - 18px);width:100%;margin:0}
/* ---- the deep dive on a PHONE ------------------------------------------
   Three tries at this. A 2400px screenshot squeezed into a 290px column was
   unreadable ("super bad"); drawing it at a readable size and panning it
   sideways was readable but cut an element in half at BOTH edges on every
   tab, which is what he called completely out of page.
   What it does now, which is what 4810 does: each tab shows ONE COMPLETE
   REGION of its screen, framed, at a size you can read, and nothing scrolls.
   The region is `m` in dash_words ([x, y, w, h] as fractions of the shot);
   finImg hands it down as custom properties and the frame takes its own
   aspect from it (cw * ar / ch), which lands every tab almost square.
   .ly-fin-pan stays display:contents on desktop, so the DOM up there behaves
   exactly as before. */
.ly-fin-pan{display:contents}
.ly-fin-hint{display:none}
@media (max-width:809px){
  .ly-fin-pan{display:block;position:relative;overflow:hidden;
    border-radius:14px;background:#fff;
    aspect-ratio:calc(var(--m-w,1) * var(--ly-ar,1.62) / var(--m-h,1))}
  /* the shot is drawn 1/cw of the frame wide and slid so the crop's top left
     corner lands on the frame's. translate % resolves against the ELEMENT's
     own box, which is what makes one rule serve four different crops. */
  .ly-fin{position:absolute;top:0;left:0;margin:0;border-radius:0;
    width:calc(100% / var(--m-w,1));max-width:none!important;
    transform:translate(calc(var(--m-x,0) * -100%),calc(var(--m-y,0) * -100%))}
  .ly-fin--down{position:absolute;bottom:auto}
  /* a drop shadow inside a cropped frame only paints a dark edge */
  .ly-fin-shot{filter:none}
  /* the panel hugged a 600px minimum, which left the huge empty flower field
     under the shot */
  .ly-tk-panel{min-height:0}
  .ly-tk-card{padding:13px;border-radius:18px}
  /* four tabs have to fit 390px: drop the icons, tighten the type */
  .ly-tk-tabrow{gap:0;margin-bottom:20px}
  /* flex:1 1 0 from the base rule gave every tab an EQUAL column and centred
     the label inside it, so the visible gaps followed the label lengths: a
     hairline between "Muse at work" and "What's running" and a canyon before
     "Reports". Sizing each tab to its own text lets space-between hand out
     one identical gap. */
  .ly-tk-tab2{font-size:11.5px;gap:0;padding:10px 2px 12px;white-space:nowrap;
    flex:0 1 auto}
  .ly-tk-tab2 svg{display:none}
  .ly-tk-tab2[data-on="1"]::after{left:4px;right:4px}
}

/* ---- 31st pass: the phone overflows in the template's own sections -------
   Everything below is his live phone walkthrough. None of it is our markup,
   it is the Aeth template's desktop geometry surviving into a 390px screen. */
@media (max-width:809px){
  /* the deep dive's own heading broke as "Deep dive into the / work.",
     leaving one word alone on a line. Balanced, it reads as two even lines. */
  .ly-tk-sec h1,.ly-tk-sec h2,.ly-tk-sec h3{text-wrap:balance}

  /* THE headline bug. This is the heading inside every feature card and it
     carries a hard 440px width, so on a phone the last words of "Open a run
     and see exactly what happened", "Deep dive into the work" and half the
     integration rows were simply painted off the right of the card. */
  .framer-1jr9yhp{max-width:100%!important}

  /* the hero news badge: "Read more" was set larger than the news itself,
     so the pill read back to front. The two that carry the story go up, the
     affordance comes down to sit under them. */
  a[data-ly-news] p{font-size:13px!important;line-height:1.35!important}
  .ly-news-more{font-size:12px!important}
  .ly-news-more svg{width:12px;height:12px}

  /* "Muse reports back before you ask": the illustration is a 530px-wide
     composition of TWO cards inside a 302px slot, so the chat was cut down
     the middle and the second card hung outside the section entirely (his
     "Muse takes the rest of the overnight, and then we can't see"). On a
     phone the second card goes and the chat sits alone in the slot. The
     composition is anchored by left AND right, so both have to be re-set,
     and its transform carries Framer's own translate: never overwrite it. */
  [data-framer-name="Frame 2147240654"]{width:260px!important;
    left:21px!important;right:auto!important}
  /* SCOPED, and it must stay scoped: "Frame 2147240646" is also the name of
     the "Agents on this account" card and the "Reading the thread" card in
     Company intelligence, and an unscoped rule hid both of them on a phone. */
  [data-framer-name="Frame 2147240654"] [data-framer-name="Frame 2147240646"]{
    display:none!important}
  /* the message rows inside it are fixed at 329px, so the chat still ran off
     its own panel. Let them take the width the panel actually has. */
  [data-framer-name="Frame 2147240654"] [data-framer-name="Frame 2147240642"],
  [data-framer-name="Frame 2147240654"] [data-framer-name="Frame 2147240639"]{
    width:auto!important;min-width:0!important;max-width:100%!important;
    flex:1 1 auto!important}
  /* and each message is a leaf set white-space:pre at its natural 257px, so
     it still ran past the panel edge. Only the message rows are unpinned,
     never every <p>: the "Run 412, overnight support queue" pill and the
     "approved the run" chip are fixed-size lozenges and wrapping breaks them. */
  [data-framer-name="Frame 2147240654"] [data-framer-name="Frame 2147240639"] > div,
  [data-framer-name="Frame 2147240654"] [data-framer-name="Frame 2147240639"] > div > p{
    width:auto!important;min-width:0!important;max-width:100%!important;
    white-space:normal!important;flex:1 1 auto!important;text-align:left!important}
  [data-framer-name="Frame 2147240654"] [data-framer-name="Frame 2147240639"]{
    align-items:flex-start!important;justify-content:flex-start!important}
  [data-framer-name="Frame 2147240654"],
  [data-framer-name="Frame 2147240645"]{height:auto!important}
  /* the floating "@Muse" mention chip is an annotation pinned to the wide
     composition. In a 260px panel it lands on top of the message. */
  .framer-1l58y5m{display:none!important}

  /* "Open a run": the run header row is a fixed 272px of content sitting in
     the 224px the card has left beside the avatar, so the green status chip
     fell off the right edge. Let the row take the space it actually has and
     wrap the chip under the line rather than shrinking the type. */
  .framer-1b0lik9-container{width:auto!important;min-width:0!important;
    flex:1 1 auto!important}
  .framer-a1kldh{flex-wrap:wrap!important;row-gap:5px!important;
    width:auto!important;min-width:0!important;max-width:100%!important}

}

/* ---- light toolkit: 4810's comfy flowery panel, not the black section -------
   The template ships this section dark (#171717); 4810 shows it as a light
   flower panel with a dashboard floating on it. lightenToolkitSection() paints
   the flower over the dark section and adds .ly-tk-light, which flips the tabs,
   card and caption from white-on-dark to dark-on-light. */
.ly-tk-secbg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover}
.ly-tk-secbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(243,240,235,.32),rgba(243,240,235,.5))}
.ly-tk-light .ly-tk-tabrow{border-bottom-color:rgba(0,0,0,.12)}
.ly-tk-light .ly-tk-tab2{color:rgba(43,39,34,.52)}
.ly-tk-light .ly-tk-tab2:hover{color:rgba(43,39,34,.85)}
.ly-tk-light .ly-tk-tab2[data-on="1"]{color:#1f1c19}
.ly-tk-light .ly-tk-tab2[data-on="1"] svg{opacity:1}
.ly-tk-light .ly-tk-tab2[data-on="1"]::after{background:#1f1c19}
.ly-tk-light .ly-tk-card{box-shadow:none;padding:0;border-radius:0;background:transparent}
.ly-tk-light .ly-tk-cardbg{display:none}
.ly-tk-light .ly-tk-card::after{display:none}
.ly-tk-light .ly-tk-cap{color:#6b6560}
.ly-tk-light .ly-tk-cap b{color:#211f1c}

/* ---- the dashboard kit: one product app, Intercom-clean ------------------
   Every tab renders inside the same app shell: a light icon rail carrying the
   Lyrion mark, a flat top bar, hairline borders, one green. No emoji and no
   invented chrome; the four panels should read like screens of one product
   that Intercom's inbox could have shipped. */
.ly-d{font-family:var(--ly-sans);color:#211f1c;box-sizing:border-box;height:100%;
  font-size:12.5px;-webkit-font-smoothing:antialiased}
.ly-d *{box-sizing:border-box}
.ly-d-shell{display:grid;grid-template-columns:54px 1fr;height:100%}
/* the icon rail */
.ly-d-rail{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 0;border-right:1px solid #eceae5;background:#fbfaf8}
.ly-d-rail .ly-d-mk{width:26px;height:26px;border-radius:7px;background:#171717;
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex:0 0 auto}
.ly-d-rail .ly-d-mk img{width:15px;height:15px;filter:brightness(0) invert(1)}
.ly-d-ni{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;color:#8f897f;flex:0 0 auto}
.ly-d-ni svg{width:16px;height:16px}
.ly-d-ni--on{background:#eceae4;color:#211f1c}
.ly-d-av{margin-top:auto;width:26px;height:26px;border-radius:50%;background:#e7e0d6;
  color:#6f6659;font-size:10px;font-weight:600;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
/* main column and its flat top bar */
.ly-d-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.ly-d-top{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:48px;
  padding:0 16px;border-bottom:1px solid #eceae5}
.ly-d-top .t{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ly-d-top .s{font-size:11.5px;color:#a19a91;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ly-d-top .r{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ly-d-body{flex:1 1 auto;min-height:0}
/* shared atoms */
.ly-d-btn{font-size:11.5px;font-weight:500;padding:6px 12px;border-radius:8px;
  border:1px solid #e3dfd8;color:#4a4640;background:#fff;line-height:1.2;white-space:nowrap}
.ly-d-btn--dark{background:#171717;color:#fff;border-color:#171717}
.ly-d-lbl{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#a19a91;margin:0 0 10px}
.ly-d-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#0e9f6e}
.ly-d-live i{width:6px;height:6px;border-radius:50%;background:#0e9f6e;animation:ly-blink 1.4s infinite}
.ly-pill-ok{font-size:10px;font-weight:600;color:#0e9f6e;background:rgba(14,159,110,.09);
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.ly-pill-run{font-size:10px;font-weight:600;color:#b45309;background:rgba(217,119,6,.09);
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.ly-pill-hi{font-size:10px;font-weight:600;color:#0e9f6e;background:rgba(14,159,110,.1);
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.ly-pill-med{font-size:10px;font-weight:600;color:#b45309;background:rgba(217,119,6,.1);
  padding:3px 8px;border-radius:999px;white-space:nowrap}
@keyframes ly-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* Muse chat: the three-pane inbox (conversations, thread, context) */
.ly-in{display:grid;grid-template-columns:25% 45% 30%;height:100%}
.ly-in>div{min-width:0;min-height:0;overflow:hidden}
.ly-in-list{border-right:1px solid #eceae5;padding:12px 10px;display:flex;
  flex-direction:column;gap:2px;background:#fbfaf8}
.ly-d-search{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #e8e4dd;
  border-radius:8px;color:#a19a91;font-size:11.5px;background:#fff;margin-bottom:8px}
.ly-d-search svg{width:13px;height:13px;flex:0 0 auto}
.ly-in-item{display:flex;gap:9px;padding:9px 10px;border-radius:9px;align-items:flex-start}
.ly-in-item--on{background:#eceae4}
.ly-in-av{width:26px;height:26px;border-radius:50%;flex:0 0 auto;background:#e7e0d6;color:#6f6659;
  font-size:9.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.ly-in-txt{min-width:0;flex:1 1 auto}
.ly-in-nm{font-size:12px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.ly-in-nm span{font-weight:400;color:#a19a91;font-size:10.5px;flex:0 0 auto}
.ly-in-pv{font-size:11px;color:#8f897f;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ly-in-mid{border-right:1px solid #eceae5;display:flex;flex-direction:column}
.ly-in-th{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-bottom:1px solid #f0ede8}
.ly-in-th .ly-d-mk{width:26px;height:26px;border-radius:50%;background:#171717;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ly-in-th .ly-d-mk img{width:14px;height:14px;filter:brightness(0) invert(1)}
.ly-in-th .t{font-size:12.5px;font-weight:600}
.ly-in-th .s{font-size:11px;color:#a19a91}
.ly-chat-log{flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:14px}
.ly-chat-day{align-self:center;font-size:10.5px;color:#a19a91;background:#f2efe9;
  padding:3px 10px;border-radius:999px}
.ly-msg{max-width:84%;font-size:12px;line-height:1.5;padding:8px 12px;border-radius:14px}
.ly-msg--in{align-self:flex-start;background:#f2efe9;color:#33302c;border-bottom-left-radius:5px}
.ly-msg--out{align-self:flex-end;background:#171717;color:#fff;border-bottom-right-radius:5px}
.ly-msg-who{font-size:10.5px;color:#a19a91;margin:0 0 3px}
.ly-chat-in{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin:0 14px 14px;
  padding:9px 12px;border:1px solid #e8e4dd;border-radius:10px;color:#b3ada6;font-size:12px}
.ly-chat-in .ly-send{margin-left:auto;width:24px;height:24px;border-radius:7px;
  background:#171717;color:#fff;display:flex;align-items:center;justify-content:center}
.ly-chat-in .ly-send svg{width:12px;height:12px}
.ly-typing{display:flex;gap:4px;align-self:flex-start;width:fit-content;padding:10px 13px;background:#f2efe9;border-radius:14px}
.ly-typing span{width:6px;height:6px;border-radius:50%;background:#c3bdb5;animation:ly-blink 1.2s infinite}
.ly-typing span:nth-child(2){animation-delay:.2s}.ly-typing span:nth-child(3){animation-delay:.4s}
/* the inline approval card in the Muse thread: the product story in one
   element, Muse shows the draft and waits for the yes */
.ly-apr{align-self:flex-start;max-width:88%;background:#fff;border:1px solid #eceae5;
  border-radius:12px;box-shadow:0 10px 24px -18px rgba(28,25,23,.4);overflow:hidden}
.ly-apr-h{display:flex;align-items:center;gap:7px;padding:8px 12px;background:#fbfaf8;
  border-bottom:1px solid #f0ede8;font-size:10.5px;font-weight:600;color:#8f897f}
.ly-apr-h svg{width:12px;height:12px;flex:0 0 auto}
.ly-apr-b{padding:10px 12px;font-size:11.5px;line-height:1.5;color:#4a4640}
.ly-apr-b b{display:block;color:#211f1c;font-size:12px;margin-bottom:3px}
.ly-apr-f{display:flex;gap:8px;padding:0 12px 11px}
.ly-apr-f .ok{flex:1;font-family:var(--ly-sans);font-size:11px;font-weight:600;color:#fff;
  background:#171717;border:0;border-radius:8px;padding:7px 10px;text-align:center}
.ly-apr-f .no{font-family:var(--ly-sans);font-size:11px;font-weight:500;color:#4a4640;
  background:#fff;border:1px solid #e2ddd4;border-radius:8px;padding:7px 12px}
.ly-sent{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:600;color:#0e9f6e}
.ly-sent svg{width:12px;height:12px}
.ly-in-side{padding:14px 16px;overflow:hidden}
.ly-cfg-row{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:12px;
  border-top:1px solid #f0ede8}
.ly-cfg-row:first-of-type{border-top:0}
.ly-cfg-ic{width:24px;height:24px;border-radius:7px;background:#f2efe9;color:#8f897f;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.ly-cfg-ic svg{width:12px;height:12px}
.ly-cfg-nm{color:#33302c;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ly-cfg-ty{margin-left:auto;color:#a19a91;font-size:10.5px;flex:0 0 auto;padding-right:2px}
.ly-tool{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;
  border:1px solid #eceae5;margin-top:8px;background:#fff}
.ly-tool img{width:18px;height:18px;object-fit:contain;flex:0 0 auto}
.ly-tool>div{min-width:0}
.ly-tool .ly-tool-nm{font-size:12px;font-weight:500;color:#211f1c}
.ly-tool .ly-tool-ds{font-size:10.5px;color:#a19a91;margin-top:1px;line-height:1.35}
.ly-tool .ly-sw{margin-left:auto;width:28px;height:17px;border-radius:999px;background:#0e9f6e;
  position:relative;flex:0 0 auto}
.ly-tool .ly-sw::after{content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;
  border-radius:50%;background:#fff}

/* Workflows: the node canvas */
.ly-wf{position:relative;height:100%;background-color:#fbfaf8;
  background-image:radial-gradient(#e6e2da 1px,transparent 1px);background-size:18px 18px}
.ly-wf-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* the connectors carry a slow running dash, the workflow is alive */
.ly-wf-svg path{stroke-dasharray:5 5;animation:lyDash 1.1s linear infinite}
@keyframes lyDash{to{stroke-dashoffset:-10}}
.ly-node .ly-node-t img{width:14px;height:14px;border-radius:3px;object-fit:contain}
.ly-wf-run{position:absolute;left:14px;bottom:12px;z-index:3;display:inline-flex;align-items:center;
  gap:7px;font-size:10.5px;font-weight:500;color:#4a4640;background:rgba(255,255,255,.92);
  border:1px solid #e6e2da;border-radius:999px;padding:5px 11px}
.ly-wf-run i{width:6px;height:6px;border-radius:50%;background:#0e9f6e;animation:ly-blink 1.4s infinite}
.ly-node{position:absolute;z-index:2;background:#fff;border-radius:10px;
  border:1px solid #e6e2da;box-shadow:0 8px 20px -14px rgba(28,25,23,.28);padding:10px 12px}
.ly-node .ly-node-k{font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.ly-node .ly-node-t{font-size:12px;font-weight:600;color:#211f1c;margin:3px 0 0;
  display:flex;align-items:center;gap:6px}
.ly-node .ly-node-m{font-size:10.5px;color:#a19a91;margin-top:5px;line-height:1.4}
.ly-node .ly-node-f{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;
  border-top:1px solid #f0ede8;font-size:10px;color:#8f897f}
.ly-node .ly-node-f .ly-d-dot{width:6px;height:6px;border-radius:50%;background:#0e9f6e}
.ly-k-trig{color:#6f6a63}.ly-k-proc{color:#4f46e5}.ly-k-act{color:#b45309}.ly-k-note{color:#0e9f6e}

/* Voice: caller, live transcript, actions */
.ly-vc{display:flex;flex-direction:column;height:100%}
.ly-vc-grid{flex:1 1 auto;display:grid;grid-template-columns:26% 42% 32%;min-height:0}
.ly-vc-col{padding:14px 16px;overflow:hidden;min-height:0}
.ly-vc-col+.ly-vc-col{border-left:1px solid #eceae5}
.ly-vc-time{color:#a19a91;font-variant-numeric:tabular-nums;font-size:12px}
.ly-vc-end{font-size:11px;font-weight:600;color:#fff;background:#e11d48;
  padding:6px 12px;border-radius:8px;line-height:1.2}
.ly-vc-who{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ly-vc-av{width:32px;height:32px;border-radius:50%;background:#e7e0d6;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#6f6659}
.ly-vc-nm{font-size:12.5px;font-weight:600;color:#211f1c}
.ly-vc-sub{font-size:11px;color:#a19a91;margin-top:1px}
.ly-vc-kv{display:flex;justify-content:space-between;font-size:12px;padding:8px 0;
  border-top:1px solid #f0ede8}
.ly-vc-kv span{color:#a19a91}.ly-vc-kv b{color:#33302c;font-weight:500}
.ly-vc-rec{display:inline-flex;align-items:center;gap:5px;color:#e11d48;font-weight:600}
.ly-vc-rec span{width:6px;height:6px;border-radius:50%;background:#e11d48;animation:ly-blink 1.4s infinite}
.ly-vc-day{text-align:center;font-size:10.5px;color:#a19a91;background:#f2efe9;
  padding:3px 10px;border-radius:999px;margin:0 auto 10px;width:fit-content}
.ly-vc-t{font-size:12px;line-height:1.45;padding:8px 11px;border-radius:12px;margin-bottom:8px;max-width:92%}
.ly-vc-t b{display:block;font-size:10px;color:#a19a91;font-weight:600;margin-bottom:2px}
.ly-vc-t--a{background:#f2efe9;color:#33302c;border-bottom-left-radius:5px}
.ly-vc-t--u{background:#171717;color:#fff;margin-left:auto;border-bottom-right-radius:5px}
.ly-vc-t--u b{color:rgba(255,255,255,.55)}
/* Muse speaking as sound, not typing dots: a small live equaliser */
.ly-eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:14px}
.ly-eq span{width:3px;border-radius:2px;background:#0e9f6e;height:5px;
  animation:lyEq 1s ease-in-out infinite}
.ly-eq span:nth-child(2){animation-delay:.12s}.ly-eq span:nth-child(3){animation-delay:.24s}
.ly-eq span:nth-child(4){animation-delay:.36s}.ly-eq span:nth-child(5){animation-delay:.48s}
@keyframes lyEq{0%,100%{height:4px}50%{height:13px}}
.ly-vc-speak{display:flex;align-items:center;gap:8px;font-size:11px;color:#8f897f;margin-top:2px}
.ly-vc-done{color:#0e9f6e;font-weight:600;margin-left:6px;font-size:10.5px}
.ly-vc-act{border:1px solid #eceae5;border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#fff}
.ly-vc-act-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;
  font-weight:600;color:#211f1c}
.ly-vc-act-m{font-size:10.5px;color:#a19a91;margin-top:4px;line-height:1.4}

/* Audit: ranked manual work + the report */
.ly-ar{display:grid;grid-template-columns:34% 66%;height:100%}
.ly-ar-list{padding:14px;overflow:hidden;border-right:1px solid #eceae5;background:#fbfaf8}
.ly-ar-item{border:1px solid #eceae5;border-radius:10px;padding:11px 12px;margin-bottom:8px;background:#fff}
.ly-ar-item--on{border-color:#211f1c;box-shadow:0 6px 16px -12px rgba(28,25,23,.4)}
.ly-ar-it-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;
  font-weight:600;color:#211f1c}
.ly-ar-it-m{font-size:10.5px;color:#a19a91;margin-top:4px;line-height:1.4}
.ly-ar-report{padding:16px 20px;overflow:hidden;display:flex;flex-direction:column}
.ly-ar-rh{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.ly-ar-rt{font-size:15px;font-weight:600;color:#211f1c;letter-spacing:-.01em}
.ly-ar-rs{font-size:11.5px;color:#8f897f;margin-top:3px;line-height:1.45;max-width:400px}
.ly-ar-rh .ly-d-btn{margin-left:auto;flex:0 0 auto}
.ly-ar-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.ly-ar-tile{border:1px solid #eceae5;border-radius:10px;padding:10px 12px;background:#fbfaf8}
.ly-ar-tile .k{font-size:10px;color:#a19a91}
.ly-ar-tile .v{font-size:20px;font-weight:600;color:#211f1c;margin-top:3px;letter-spacing:-.02em}
.ly-ar-plan{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #f0ede8}
.ly-ar-pl{flex:1 1 auto;min-width:0}
.ly-ar-pn{font-size:12px;font-weight:600;color:#211f1c}
.ly-ar-pd{font-size:10.5px;color:#a19a91;margin-top:2px;line-height:1.4}
.ly-ar-agent{font-size:10.5px;font-weight:500;color:#4a4640;border:1px solid #e3dfd8;
  border-radius:999px;padding:3px 10px;flex:0 0 auto;background:#fff}
@media (max-width:809px){
  .ly-d-shell{grid-template-columns:1fr}
  .ly-d-rail{display:none}
  .ly-in{grid-template-columns:1fr;overflow:auto}
  .ly-in-list{display:none}
  .ly-vc-grid{grid-template-columns:1fr;overflow:auto}
  .ly-vc-col+.ly-vc-col{border-left:0;border-top:1px solid #eceae5}
  .ly-ar{grid-template-columns:1fr;overflow:auto}
  .ly-ar-tiles{grid-template-columns:repeat(2,1fr)}
}

/* ---- connections event pills, coloured by outcome ----------------------- */
/* the text stays the template's own black, it was unreadable in colour over
   the artwork. Only the tick in front of it carries the outcome. */
.ly-ev-good svg,.ly-ev-good svg *{fill:#059669!important;color:#059669!important}
.ly-ev-wait svg,.ly-ev-wait svg *{fill:#D97706!important;color:#D97706!important}
.ly-ev-good{border-color:rgba(5,150,105,.3)!important}
.ly-ev-wait{border-color:rgba(217,119,6,.3)!important}

/* ---- sources connected to company memory -------------------------------- */
.ly-srcs{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  width:100%;box-sizing:border-box;
  margin:0;padding:11px 16px;border-top:1px solid rgba(0,0,0,.07);
  background:#fff;border-radius:0 0 12px 12px;
  font-family:var(--ly-sans)}
.ly-srcs .ly-srcs-label{font-size:12px;color:#737373;letter-spacing:.01em;
  margin-right:2px}
.ly-srcs img{width:17px;height:17px;object-fit:contain}
.ly-srcs .ly-srcs-dot{width:5px;height:5px;border-radius:50%;background:#059669;
  margin-left:auto;box-shadow:0 0 0 3px rgba(5,150,105,.15)}

/* ---- portraits: framed on the face, not on the chin --------------------- */
.ly-portrait{object-fit:cover!important;object-position:50% 26%!important}

/* ---- case study cards + overlay ----------------------------------------- */
.ly-cs-mark{display:flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:10px;background:rgba(255,255,255,.93);
  backdrop-filter:blur(8px);box-shadow:0 8px 24px -12px rgba(0,0,0,.35)}
.ly-cs-mark img{height:22px;width:auto;max-width:150px;object-fit:contain}
.ly-cs-mark .ly-word{font-family:var(--ly-sans);font-size:17px;font-weight:600;
  letter-spacing:-.02em;color:#171717}
.ly-cs-mark .ly-lockup{display:flex;align-items:center;gap:7px}
.ly-cs-mark .ly-lockup img{height:20px}
/* top right, opposite the Case study chip. The card title runs along the
   bottom of the artwork, so a bottom-left mark lands on top of it. */
.ly-cs-float{position:absolute;right:16px;top:16px;z-index:3;padding:8px 13px}

.ly-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;
  justify-content:center;padding:24px;box-sizing:border-box;font-family:var(--ly-sans)}
.ly-modal[data-open="1"]{display:flex}
.ly-modal-bg{position:absolute;inset:0;background:rgba(20,18,16,.55);backdrop-filter:blur(4px)}
.ly-modal-card{position:relative;z-index:2;width:100%;max-width:900px;max-height:88vh;
  overflow:auto;background:#fff;border-radius:18px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  animation:ly-rise .28s cubic-bezier(.2,.7,.3,1)}
@keyframes ly-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ly-modal-hero{position:relative;height:190px;overflow:hidden;background:#f2efe9}
.ly-modal-hero img{width:100%;height:100%;object-fit:cover}
/* the whole portrait, contained on a blurred copy of itself */
.ly-mh-bg{position:absolute;inset:0;display:none;transform:scale(1.3);
  filter:blur(38px) saturate(.85);opacity:.55}
.ly-modal-hero[data-face="1"]{height:280px}
.ly-modal-hero[data-face="1"] .ly-mh-img{position:relative;object-fit:contain}
.ly-modal-hero .ly-cs-mark{position:absolute;left:28px;bottom:22px;z-index:2;
  padding:12px 18px;border-radius:10px;background:rgba(255,255,255,.94)}
.ly-modal-hero .ly-cs-mark img{height:24px;max-width:160px;object-fit:contain}
.ly-modal-hero .ly-cs-mark .ly-word{font-size:18px}
.ly-modal-body{padding:30px 34px 36px}
.ly-modal-body h3{font-family:var(--ly-serif);margin:0 0 6px;font-size:30px;
  line-height:1.18;letter-spacing:-.02em;font-weight:400;color:var(--ly-ink)}
.ly-modal-body .ly-role{font-size:13.5px;color:var(--ly-mute);margin:0 0 22px}
.ly-modal-body blockquote{margin:0 0 24px;padding:0 0 0 18px;
  border-left:2px solid rgba(0,0,0,.14);font-size:18px;line-height:1.5;
  letter-spacing:-.015em;color:var(--ly-ink)}
.ly-modal-body p{margin:0 0 14px;font-size:15px;line-height:1.62;color:#404040}
.ly-modal-body ul{margin:6px 0 20px;padding:0;list-style:none;display:grid;gap:10px}
.ly-modal-body li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:#404040}
.ly-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:7px}
.ly-dot--green{background:#059669}
.ly-modal-close{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;
  border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.92);
  font-size:18px;line-height:1;color:#171717;display:flex;align-items:center;justify-content:center}
.ly-modal-close:hover{background:#fff}
@media (max-width:809px){
  .ly-modal{padding:12px}
  .ly-modal-body{padding:24px 20px 28px}
  .ly-modal-body h3{font-size:24px}
  .ly-modal-hero{height:140px}
  .ly-modal-hero[data-face="1"]{height:200px}
}

/* ---- blog: our own hero, then the Aeth-style painting cards -------------- */
.ly-blog{width:100%;display:flex;flex-direction:column;align-items:center;
  /* breathing room between the last card row and the footer, his ask */
  padding:118px 20px 84px;box-sizing:border-box;font-family:var(--ly-sans)}
.ly-blog-head{width:100%;max-width:640px;margin:0 auto;text-align:center;padding:24px 0 46px}
.ly-blog-pill{display:inline-block;font-family:var(--ly-sans);font-size:13px;font-weight:500;
  color:#6b6560;background:#efece7;padding:6px 14px;border-radius:999px}
.ly-blog-h1{font-family:var(--ly-serif);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(34px,5vw,54px);line-height:1.05;color:#211f1c;margin-top:22px}
.ly-blog-sub{font-family:var(--ly-sans);font-size:17px;line-height:1.55;color:#6b6560;
  max-width:500px;margin:18px auto 0}
.ly-blog-grid{width:100%;max-width:var(--ly-max);display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
/* the closing testimonial band (his image 9): centred serif quote, small
   avatar, name and role, giving the grid room before the footer */
.ly-blog-quote{width:100%;max-width:770px;margin:112px auto 12px;text-align:center;padding:0 20px}
.ly-blog-quote blockquote{font-family:var(--ly-serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(23px,3vw,33px);line-height:1.34;color:#211f1c;margin:0}
.ly-blog-quote-who{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:9px}
.ly-blog-quote-av{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 28%;
  background:#e7e0d6}
.ly-blog-quote-nm{font-family:var(--ly-sans);font-size:14px;font-weight:600;color:#211f1c}
.ly-blog-quote-rl{font-family:var(--ly-sans);font-size:13px;color:#8f897f;margin-top:-3px}
/* a light footer to close the page, since the replace drops the template one */
.ly-blog-foot{width:100%;background:#141210;color:#a49f98;margin-top:96px;padding:52px 20px 40px}
.ly-blog-foot-in{max-width:var(--ly-max);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:22px 40px;align-items:center;justify-content:space-between}
.ly-blog-foot-brand{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:600;
  font-size:19px;letter-spacing:-.02em}
.ly-blog-foot-brand span{width:24px;height:24px;display:inline-block;
  background:url(/_lyrion-b650bae728/brand/lyrion-mark-light.png) center/contain no-repeat}
.ly-blog-foot a{color:#a49f98;text-decoration:none;font-size:14px;margin-left:20px;transition:color .15s}
.ly-blog-foot a:hover{color:#fff}
.ly-post{position:relative;display:block;aspect-ratio:1/1;border-radius:18px;
  overflow:hidden;text-decoration:none;background:#efece7;
  transition:transform .25s ease,box-shadow .25s ease}
.ly-post:hover{transform:translateY(-3px);box-shadow:0 26px 50px -28px rgba(0,0,0,.4)}
.ly-post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.ly-post:hover img{transform:scale(1.04)}
.ly-post::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,15,12,0) 38%,rgba(20,15,12,.72) 100%)}
.ly-post .ly-kicker{position:absolute;left:20px;top:20px;z-index:2;
  font-size:11px;font-weight:600;letter-spacing:.06em;color:#3a3632;
  background:rgba(255,255,255,.92);padding:5px 11px;border-radius:999px;
  backdrop-filter:blur(6px)}
.ly-post h3{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;
  font-family:var(--ly-serif);margin:0;font-size:23px;line-height:1.2;
  letter-spacing:-.015em;font-weight:400;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.35)}
@media (max-width:520px){.ly-post h3{font-size:20px}}

/* ------------- hero CTA pair (repositioning 2026-08-03) ------------------ */
/* width:max-content: the template's button slot is ~214px wide, and a
   percentage there wraps the pair into a stack. Sized to content, the row
   escapes the slot and centres on it; the max-width keeps phones wrapping. */
.ly-heroctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  width:max-content;max-width:calc(100vw - 56px)}
.ly-hcta{display:inline-flex;align-items:center;height:40px;padding:0 18px;
  border-radius:6px;font-family:'Geist',sans-serif;font-size:13px;font-weight:500;
  text-decoration:none;white-space:nowrap}
.ly-hcta--solid{background:#262626;color:#fff}
.ly-hcta--solid:hover{background:#404040}
.ly-hcta--ghost{background:rgba(255,255,255,.85);color:#262626;border:1px solid #d9d5cf}
.ly-hcta--ghost:hover{background:#fff}

/* ------------- injected credibility bands -------------------------------- */
/* Template type, measured off the native bands: Hedvig Letters Serif 36/44 at
   -.02em in #262626 for headings, Geist for body, hairline #eceae5 cards. */
.ly-band{padding:96px 20px}
.ly-band-in{max-width:1216px;margin:0 auto}
.ly-eyebrow{display:inline-block;font:500 12px/1 'Geist',sans-serif;color:#525252;
  background:rgba(38,38,38,.06);border-radius:3px;padding:7px 11px}
.ly-band h2{font-family:'Hedvig Letters Serif',serif;font-weight:400;font-size:36px;
  line-height:44px;letter-spacing:-.02em;color:#262626;max-width:640px;margin:18px 0 0}
.ly-band-sub{font:400 15px/23px 'Geist',sans-serif;color:#737373;max-width:560px;
  margin:16px 0 0}
.ly-band-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
@media (max-width:520px){.ly-band{padding:64px 20px}
  .ly-band h2{font-size:29px;line-height:36px}}
/* who we build for */
.ly-inds{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.ly-inds span{font:500 13px/1 'Geist',sans-serif;color:#404040;background:#fff;
  border:1px solid #e3e0da;border-radius:99px;padding:10px 16px}
.ly-band-count{display:flex;align-items:center;gap:8px;margin-top:26px;
  font:500 13px/1 'Geist',sans-serif;color:#404040}
.ly-band-count::before{content:"";width:7px;height:7px;border-radius:99px;
  background:#0e9f6e}
/* the systems grid */
/* min 420px a column so desktop settles at 2x2, never a 3+1 orphan row */
.ly-sys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:18px;margin-top:44px}
.ly-sys article{background:#fff;border:1px solid #eceae5;border-radius:8px;
  padding:28px 26px}
.ly-sys h3{font-family:'Hedvig Letters Serif',serif;font-weight:400;font-size:22px;
  line-height:28px;letter-spacing:-.01em;color:#262626;margin:0}
.ly-sys p{font:400 13px/20px 'Geist',sans-serif;color:#737373;margin:14px 0 0}
.ly-sys p b{font-weight:500;color:#262626}
/* the four steps */
.ly-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;margin-top:44px}
.ly-step{background:#fff;border:1px solid #eceae5;border-radius:8px;padding:24px 22px}
.ly-step b{display:block;font:500 12px/1 'Geist',sans-serif;color:#0e9f6e;
  letter-spacing:.05em}
.ly-step h3{font:500 15px/22px 'Geist',sans-serif;color:#262626;margin:10px 0 0}
.ly-step p{font:400 13px/20px 'Geist',sans-serif;color:#737373;margin:8px 0 0}
/* why lyrion */
.ly-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;margin-top:44px}
.ly-why article{background:#fff;border:1px solid #eceae5;border-radius:8px;
  padding:28px 26px}
.ly-why h3{font:500 15px/22px 'Geist',sans-serif;color:#262626;margin:0}
.ly-why p{font:400 13px/21px 'Geist',sans-serif;color:#737373;margin:10px 0 0}