/* LinkLedger self-playing product demo - every class prefixed lld- */
.lld{--n:#0B2B33;--n2:#123B45;--br:#2DD4C8;--tl:#17A398;--pp:#F4F8F7;--eg:#E1EAE9;
  --ink:#12262B;--mut:#7C9195;--bad:#B4262A;--good:#0F6B42;
  font-family:Inter,system-ui,-apple-system,sans-serif;position:relative;}
.lld *{box-sizing:border-box;}
.lld q{quotes:none;}
.lld q:before,.lld q:after{content:"";}

.lld-win{background:var(--pp);border-radius:12px;overflow:hidden;position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.22),0 26px 60px rgba(0,0,0,.42);}
.lld-tb{background:#0A2229;display:flex;align-items:center;gap:8px;padding:9px 12px;}
.lld-tb i{width:9px;height:9px;border-radius:50%;background:#2F4A51;flex:none;}
.lld-tb span{flex:1;min-width:0;background:#123B45;border-radius:5px;height:19px;display:flex;align-items:center;
  padding:0 9px;font-size:10px;color:#7FA3A2;letter-spacing:.02em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.lld-live{flex:none;display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;
  letter-spacing:.14em;color:#6FE0D5;text-transform:uppercase;}
.lld-live b{width:6px;height:6px;border-radius:50%;background:#2DD4C8;animation:lldblink 1.6s infinite;}
@keyframes lldblink{0%,100%{opacity:1}50%{opacity:.25}}

.lld-wb{display:flex;height:452px;}

/* sidebar */
.lld-side{width:150px;flex:none;background:var(--n);padding:12px 0;overflow:hidden;}
.lld-brand{color:#fff;font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:10.5px;
  letter-spacing:.11em;padding:0 13px 2px;}
.lld-brand small{display:block;font-size:6.5px;letter-spacing:.22em;color:var(--br);font-weight:500;}
.lld-nav{margin:13px 0 0;}
.lld-nr{display:flex;align-items:center;gap:8px;padding:6px 13px;font-size:11px;color:#9CBDBC;white-space:nowrap;
  transition:background .28s,color .28s;position:relative;}
.lld-nr u{width:11px;height:11px;border-radius:3px;background:#2C5760;flex:none;text-decoration:none;
  transition:background .28s;}
.lld-nr.on{background:var(--n2);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--br);}
.lld-nr.on u{background:var(--br);}
.lld-nr i{margin-left:auto;font-style:normal;background:#1C4E57;color:#BFE9E5;border-radius:999px;
  font-size:8.5px;font-weight:700;padding:1px 5px;}
.lld-nr i.bad{background:#5A1F22;color:#FFC9CB;}
.lld-sub{padding-left:13px;}
.lld-sub .lld-nr{font-size:10.5px;padding-left:13px;}
.lld-gh{padding:7px 13px;font-size:11px;color:#CFE3E1;font-weight:600;display:flex;align-items:center;gap:8px;}
.lld-gh u{width:11px;height:11px;border-radius:3px;background:#2C5760;text-decoration:none;flex:none;}

/* main */
.lld-main{flex:1;min-width:0;padding:12px 14px;position:relative;overflow:hidden;}
.lld-top{display:flex;align-items:center;gap:9px;margin:0 0 11px;}
.lld-search{flex:1;min-width:0;background:#fff;border:1px solid var(--eg);border-radius:6px;height:27px;
  display:flex;align-items:center;padding:0 9px;font-size:10.5px;color:#93A6A9;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.lld-kbd{margin-left:auto;border:1px solid var(--eg);border-radius:4px;padding:0 4px;font-size:8.5px;color:#93A6A9;}
.lld-av{width:23px;height:23px;border-radius:50%;background:var(--tl);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;}

.lld-scene{position:absolute;left:14px;right:14px;top:50px;bottom:12px;
  opacity:0;transform:translateY(9px);pointer-events:none;
  transition:opacity .42s ease,transform .42s ease;}
.lld-scene.on{opacity:1;transform:none;}

/* tiles */
.lld-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.lld-tile{background:#fff;border:1px solid var(--eg);border-radius:8px;padding:8px 9px;}
.lld-tile k{display:block;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:700;}
.lld-tile b{display:block;font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:14.5px;
  color:var(--n);margin:3px 0 0;font-variant-numeric:tabular-nums;}
.lld-tile b.bad{color:var(--bad);}
.lld-tile s{display:block;text-decoration:none;font-size:8.5px;color:#93A6A9;margin:1px 0 0;}

/* generic panel + rows */
.lld-pan{background:#fff;border:1px solid var(--eg);border-radius:8px;margin:9px 0 0;overflow:hidden;}
.lld-ph{padding:8px 11px;border-bottom:1px solid var(--eg);font-family:Poppins,Inter,sans-serif;
  font-weight:600;font-size:11px;color:var(--n);}
.lld-rw{display:flex;align-items:center;gap:9px;padding:6.5px 11px;border-bottom:1px solid #F2F6F5;font-size:10.5px;}
.lld-rw:last-child{border-bottom:0;}
.lld-rw em{font-style:normal;font-weight:600;color:var(--n);width:96px;flex:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.lld-rw span{color:#53696E;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.lld-rw b{color:var(--n);font-variant-numeric:tabular-nums;font-weight:600;}
.lld-chip{border-radius:999px;padding:1px 7px;font-size:8.5px;font-weight:700;flex:none;}
.lld-chip.paid{background:#DDF1E7;color:var(--good);}
.lld-chip.due{background:#FDE7E7;color:#9E2226;}
.lld-chip.open{background:#DFF0EE;color:#0E6A63;}
.lld-chip.draft{background:#EDF1F1;color:#5F7378;}

/* document */
.lld-doc{background:#fff;border:1px solid var(--eg);border-radius:8px;padding:12px 14px;height:100%;
  display:flex;flex-direction:column;}
.lld-dh{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  border-bottom:2px solid var(--n);padding:0 0 8px;}
.lld-dl{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:11px;letter-spacing:.07em;color:var(--n);}
.lld-dl small{display:block;font-size:6.5px;letter-spacing:.2em;color:var(--tl);font-weight:500;}
.lld-dr{text-align:right;}
.lld-dr b{font-family:Poppins,Inter,sans-serif;font-size:12px;color:var(--n);letter-spacing:.05em;display:block;}
.lld-dr s{text-decoration:none;display:block;font-size:9px;color:var(--mut);margin:1px 0 0;
  font-variant-numeric:tabular-nums;}
.lld-dm{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:9px 0 0;font-size:9.5px;color:#53696E;line-height:1.55;}
.lld-dm k{display:block;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  font-weight:700;margin:0 0 2px;}
.lld-cursorline{border-right:1.5px solid var(--tl);animation:lldcaret .8s step-end infinite;}
@keyframes lldcaret{50%{border-color:transparent}}

.lld-lines{margin:9px 0 0;flex:1;}
.lld-lh{display:flex;gap:8px;font-size:8px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);font-weight:700;padding:0 0 4px;border-bottom:1px solid #EFF4F3;}
.lld-li{display:flex;gap:8px;font-size:10px;padding:5px 0;border-bottom:1px solid #F5F8F8;
  color:#3F565B;opacity:0;transform:translateX(-8px);transition:opacity .34s,transform .34s;}
.lld-li.on{opacity:1;transform:none;}
.lld-li d{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.lld-li q{width:26px;text-align:right;flex:none;font-variant-numeric:tabular-nums;quotes:none;}
.lld-li p{width:62px;text-align:right;flex:none;margin:0;font-variant-numeric:tabular-nums;
  color:var(--n);font-weight:600;}
.lld-lh d{flex:1}.lld-lh q{width:26px;text-align:right;flex:none}.lld-lh p{width:62px;text-align:right;flex:none;margin:0}

.lld-tot{display:flex;justify-content:flex-end;margin:8px 0 0;}
.lld-tot table{border-collapse:collapse;font-size:10px;min-width:190px;}
.lld-tot td{padding:2.5px 0;color:#53696E;}
.lld-tot td+td{text-align:right;color:var(--n);font-weight:600;font-variant-numeric:tabular-nums;}
.lld-tot tr.g td{border-top:1px solid var(--eg);padding-top:5px;font-size:12px;font-weight:700;color:var(--n);}

/* action rail inside the doc scene */
.lld-acts{display:flex;gap:7px;margin:10px 0 0;flex-wrap:wrap;}
.lld-act{border:1px solid var(--eg);background:#fff;border-radius:6px;padding:5px 10px;
  font-size:10px;font-weight:600;color:#3F565B;position:relative;overflow:hidden;}
.lld-act.p{background:var(--tl);border-color:var(--tl);color:#fff;}
.lld-act.hit:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.75),transparent 62%);
  animation:lldripple .6s ease-out;}
@keyframes lldripple{from{transform:scale(.2);opacity:.9}to{transform:scale(2.4);opacity:0}}

/* p&l bars */
.lld-bars{display:flex;align-items:flex-end;gap:8px;height:96px;padding:10px 11px 0;}
.lld-bars b{flex:1;background:linear-gradient(180deg,#2DD4C8,#17A398);border-radius:3px 3px 0 0;
  height:4%;transition:height .8s cubic-bezier(.22,1,.36,1);}
.lld-bl{display:flex;gap:8px;padding:5px 11px 9px;}
.lld-bl s{flex:1;text-align:center;text-decoration:none;font-size:8px;color:#93A6A9;}

/* cursor + toast */
.lld-cur{position:absolute;width:14px;height:14px;left:0;top:0;z-index:9;pointer-events:none;
  opacity:0;transition:transform .72s cubic-bezier(.4,0,.2,1),opacity .3s;}
.lld-cur svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));}
.lld-cur.show{opacity:1;}
.lld-cur.tap:before{content:"";position:absolute;left:-9px;top:-9px;width:32px;height:32px;
  border-radius:50%;border:2px solid var(--br);animation:lldtap .55s ease-out;}
@keyframes lldtap{from{transform:scale(.25);opacity:.95}to{transform:scale(1);opacity:0}}


.lld-banner{display:none;align-items:center;gap:8px;margin:9px 0 0;background:#E4F6F1;
  border:1px solid #9BDDD1;border-radius:7px;padding:6px 11px;font-size:10.5px;font-weight:600;
  color:#0F6B42;opacity:0;transform:translateY(-4px);transition:opacity .32s,transform .32s;}
.lld-banner.on{display:flex;opacity:1;transform:none;}
.lld-banner u{width:14px;height:14px;border-radius:50%;background:#17A398;color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;text-decoration:none;}

/* chapter strip */
.lld-steps{list-style:none;display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0;padding:0;}
.lld-steps li{font-size:11px;font-weight:600;color:#7FA3A2;border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:5px 12px;display:flex;align-items:center;gap:7px;
  transition:color .3s,border-color .3s,background .3s;}
.lld-steps li u{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;
  text-decoration:none;color:#9FC4C2;transition:background .3s,color .3s;}
.lld-steps li.on{color:#fff;border-color:rgba(45,212,200,.55);background:rgba(45,212,200,.10);}
.lld-steps li.on u{background:var(--br);color:#04252B;}
.lld-hint{font-size:11.5px;color:#7FA3A2;margin:10px 0 0;}

@media(max-width:1000px){
  .lld-wb{height:436px;}
  .lld-side{width:120px;}
}
@media(max-width:560px){
  .lld-wb{height:412px;}
  .lld-side{width:0;padding:0;}
  .lld-tiles{grid-template-columns:repeat(2,1fr);}
  .lld-dm{grid-template-columns:1fr;}
  .lld-steps li{font-size:10px;padding:4px 9px;}
  .lld-live{display:none;}
  .lld-kbd{display:none;}
  .lld-rw{gap:6px;}
  .lld-rw em{width:auto;font-size:9px;}
  .lld-rw span{font-size:9.5px;}
  .lld-li{font-size:9.5px;}
  .lld-li p{width:54px;}
  .lld-dr b{font-size:11px;}
  .lld-tile b{font-size:13px;}
}
@media(prefers-reduced-motion:reduce){
  .lld-cur{display:none;}
  .lld-scene,.lld-li,.lld-bars b,  .lld-live b{animation:none;}
}

/* ---- the homepage section that holds the demo ---- */
.pl-ll{background:linear-gradient(160deg,#0B2B33 0%,#123B45 58%,#0E5F5C 100%);color:#fff;
  padding:64px 0;max-width:none;width:100%;margin-left:0;margin-right:0;position:relative;overflow:hidden;}
.pl-ll:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(45,212,200,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(45,212,200,.07) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(130% 100% at 72% 45%,#000 6%,transparent 66%);
  mask-image:radial-gradient(130% 100% at 72% 45%,#000 6%,transparent 66%);}
.pl-ll-in{max-width:1180px;margin:0 auto;padding:0 22px;display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:42px;align-items:center;
  position:relative;z-index:2;}
.pl-ll-eyebrow{display:inline-block;border:1px solid rgba(45,212,200,.45);color:#2DD4C8;
  border-radius:999px;padding:5px 14px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;}
.pl-ll h2{color:#fff!important;font-family:Poppins,Inter,sans-serif;font-weight:700;
  font-size:clamp(23px,2.7vw,33px);line-height:1.18;margin:16px 0 0;max-width:16ch;}
.pl-ll p.pl-ll-lead{color:#CFE3E1;font-size:16px;line-height:1.66;margin:15px 0 0;max-width:46ch;}
.pl-ll-btns{display:flex;gap:11px;flex-wrap:wrap;margin:24px 0 0;}
.pl-ll-btns a{display:inline-block;border-radius:7px;padding:12px 22px;font-weight:700;
  font-size:15px;text-decoration:none;}
.pl-ll-a{background:#2DD4C8;color:#04252B;}
.pl-ll-a:hover{background:#5BE5DB;}
.pl-ll-b{border:1px solid rgba(255,255,255,.34);color:#fff;font-weight:600;}
.pl-ll-b:hover{border-color:#2DD4C8;color:#2DD4C8;}
.pl-ll-note{color:#8FB3B2;font-size:12.5px;margin:16px 0 0;}
@media(max-width:980px){.pl-ll-in{grid-template-columns:1fr;gap:30px;}
  .pl-ll h2{max-width:22ch;} .pl-ll p.pl-ll-lead{max-width:60ch;}}
