/* Loamist Trade Finance: "How a Letter of Credit works" explainer, ported inline from
   site/lc-explainer.html (16:9, .lcx--wide) and site/lc-explainer-mobile.html (9:16, .lcx--tall).
   Production CSP forbids frames, so the explainer lives in the page. Every class is prefixed lcx-
   and scoped under .lcx so nothing leaks into or out of the site styles. Rules are verbatim. */
.lcx{--gold:#AD7F00;--gold-soft:#FBF3DC;--ink:#1c1917;--ink2:#3a352f;--muted:#6b6660;--bone:#faf9f7;--bone2:#f3f1ec;--card:#fff;--line:#e7e2da;
  --display:var(--font-display);--sans:var(--font-sans);--mono:var(--font-mono);
  --ease:cubic-bezier(0.16,1,0.3,1);--red:#b3261e;--green:#2e7d32;
  color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;position:relative;overflow:hidden;margin:0 auto;aspect-ratio:16/9;max-width:1600px;width:100%}
.lcx *{box-sizing:border-box}
.lcx--tall{max-width:560px;aspect-ratio:9/16}
@keyframes lcx-blink{50%{opacity:0}}
.lcx .lcx-stage{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;background:var(--card)}
.lcx .lcx-frame{position:absolute;inset:14px;border:2px solid var(--ink)}
.lcx .lcx-frame::after{content:"";position:absolute;inset:16px;border:1px solid var(--ink)}
.lcx .lcx-ticks{position:absolute;font:500 13px var(--mono);color:var(--muted)}
.lcx .lcx-ticks.lcx-top,.lcx .lcx-ticks.lcx-bot{left:30px;right:30px;height:16px;display:grid;grid-template-columns:repeat(4,1fr)}
.lcx .lcx-ticks.lcx-top{top:15px}
.lcx .lcx-ticks.lcx-bot{bottom:15px}
.lcx .lcx-ticks.lcx-top span,.lcx .lcx-ticks.lcx-bot span{text-align:center;border-left:1px solid var(--ink)}
.lcx .lcx-ticks.lcx-top span:first-child,.lcx .lcx-ticks.lcx-bot span:first-child{border-left:0}
.lcx .lcx-ticks.lcx-l,.lcx .lcx-ticks.lcx-r{top:30px;bottom:30px;width:16px;display:grid;grid-template-rows:repeat(3,1fr)}
.lcx .lcx-ticks.lcx-l{left:15px}
.lcx .lcx-ticks.lcx-r{right:15px}
.lcx .lcx-ticks.lcx-l span,.lcx .lcx-ticks.lcx-r span{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--ink)}
.lcx .lcx-ticks.lcx-l span:first-child,.lcx .lcx-ticks.lcx-r span:first-child{border-top:0}
.lcx .lcx-prompt{position:absolute;left:62px;right:62px;top:58px;height:132px;border:2px solid var(--ink);display:flex;align-items:center;gap:28px;padding:0 34px;background:var(--card)}
.lcx .lcx-prompt .lcx-tag{font:500 15px var(--mono);letter-spacing:.14em;color:var(--muted);writing-mode:horizontal-tb;flex:none}
.lcx .lcx-prompt .lcx-text{font:500 42px/1.22 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.lcx .lcx-slot{background:var(--gold-soft);color:var(--gold);padding:0 .18em;border-radius:3px;font-weight:600}
.lcx .lcx-caret{display:inline-block;width:3px;height:1em;background:var(--ink);vertical-align:-0.12em;margin-left:3px;animation:lcx-blink 1s steps(1) infinite}
.lcx .lcx-panels{position:absolute;left:62px;right:62px;top:222px;height:520px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.lcx .lcx-panel{border:2px solid var(--ink);display:flex;flex-direction:column;background:var(--card);opacity:.28;transform:translateY(14px);
    transition:opacity .6s var(--ease),transform .6s var(--ease)}
.lcx .lcx-panel.lcx-on{opacity:1;transform:none}
.lcx .lcx-panel.lcx-done{opacity:.55;transform:none}
.lcx .lcx-ph{display:flex;align-items:stretch;border-bottom:2px solid var(--ink);height:76px}
.lcx .lcx-ph .lcx-letter{width:66px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--card);font:600 34px var(--display);transition:background .4s var(--ease)}
.lcx .lcx-panel.lcx-on .lcx-ph .lcx-letter{background:var(--gold)}
.lcx .lcx-ph .lcx-h{margin:0;display:flex;align-items:center;padding:0 20px;font:600 36px/1.05 var(--display);letter-spacing:-.015em}
.lcx .lcx-pb{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 12px 0}
.lcx .lcx-pb svg{width:100%;height:auto;max-height:290px;overflow:visible}
.lcx .lcx-cap{padding:0 22px 26px;font:500 25px/1.25 var(--sans);color:var(--ink2);min-height:94px}
.lcx .lcx-ln{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lcx .lcx-node{fill:var(--card);stroke:var(--ink);stroke-width:2.5}
.lcx .lcx-lab{font:500 18px var(--mono);fill:var(--ink);letter-spacing:.06em}
.lcx .lcx-sub{font:500 15px var(--mono);fill:var(--muted)}
.lcx .lcx-g{transition:fill .4s var(--ease),stroke .4s var(--ease)}
.lcx .lcx-panel.lcx-on .lcx-gfill{fill:var(--gold-soft);stroke:var(--gold)}
.lcx .lcx-panel.lcx-on .lcx-gstroke{stroke:var(--gold)}
.lcx .lcx-panel.lcx-on .lcx-gtext{fill:var(--gold)}
.lcx .lcx-panel.lcx-on .lcx-ok{stroke:var(--green)}
.lcx .lcx-panel.lcx-on .lcx-okt{fill:var(--green)}
.lcx .lcx-mover{transition:transform 1.4s var(--ease)}
.lcx .lcx-panel.lcx-on .lcx-mv-lc,.lcx .lcx-panel.lcx-done .lcx-mv-lc{transform:translate(-112px,0)}
.lcx .lcx-panel.lcx-on .lcx-mv-ship,.lcx .lcx-panel.lcx-done .lcx-mv-ship{transform:translate(120px,0)}
.lcx .lcx-panel.lcx-on .lcx-mv-docs,.lcx .lcx-panel.lcx-done .lcx-mv-docs{transform:translate(0,-62px)}
.lcx .lcx-stats{position:absolute;left:62px;right:62px;top:222px;height:520px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto;gap:22px 22px;
    opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.lcx .lcx-stats.lcx-on{opacity:1;transform:none}
.lcx .lcx-sc{border:2px solid var(--ink);border-top-width:2px;padding:0 32px 26px;display:flex;flex-direction:column;gap:10px;background:var(--card)}
.lcx .lcx-sc .lcx-hd{margin:0 -32px 8px;padding:14px 32px;font:700 30px/1 var(--display);letter-spacing:-.01em;text-transform:none;border-bottom:2px solid var(--ink)}
.lcx .lcx-sc.lcx-bad{background:#fbf0ef;border-color:var(--red)}
.lcx .lcx-sc.lcx-good{background:#eff7f0;border-color:var(--green)}
.lcx .lcx-sc .lcx-hd{display:flex;align-items:center;gap:14px;color:#fff;border-bottom:0}
.lcx .lcx-sc.lcx-bad .lcx-hd{background:var(--red)}
.lcx .lcx-sc.lcx-good .lcx-hd{background:var(--green)}
.lcx .lcx-sc .lcx-hd svg{width:30px;height:30px;flex:none}
.lcx .lcx-sc.lcx-bad{border-top-color:var(--red)}
.lcx .lcx-sc.lcx-good{border-top-color:var(--green)}
.lcx .lcx-sc .lcx-big{font:700 100px/1 var(--display);letter-spacing:-.03em}
.lcx .lcx-sc.lcx-bad .lcx-big{color:var(--red)}
.lcx .lcx-sc.lcx-good .lcx-big{color:var(--green)}
.lcx .lcx-sc .lcx-what{font:600 31px/1.2 var(--sans)}
.lcx .lcx-sc .lcx-why{font:500 23px/1.3 var(--sans);color:var(--ink2)}
.lcx .lcx-sc .lcx-delay{margin-top:auto;font:500 23px/1.3 var(--sans);color:var(--ink2);border-top:1px dashed var(--red);padding-top:12px}
.lcx .lcx-sc .lcx-delay span{display:block;font:600 15px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.lcx .lcx-sc.lcx-good .lcx-why{margin-top:auto;border-top:1px dashed var(--green);padding-top:12px}
.lcx .lcx-lm{grid-column:1/-1;background:var(--gold-soft);border:2px solid var(--gold);padding:18px 30px;font:500 32px/1.2 var(--sans)}
.lcx .lcx-lm b{color:var(--gold);font-weight:700}
.lcx .lcx-src{grid-column:1/-1;font:500 14px var(--mono);color:var(--muted);margin-top:-10px}
.lcx .lcx-tb{position:absolute;left:62px;right:62px;bottom:52px;height:76px;border:2px solid var(--ink);display:grid;grid-template-columns:1fr 210px 210px}
.lcx .lcx-tb > div{display:flex;flex-direction:column;justify-content:center;padding:0 20px;border-left:1px solid var(--ink)}
.lcx .lcx-tb > div:first-child{border-left:0}
.lcx .lcx-tb small{font:500 12px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.lcx .lcx-tb b{font:600 25px var(--display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcx .lcx-tb .lcx-mono{font:500 20px var(--mono)}
.lcx .lcx-fade{transition:opacity .5s var(--ease)}
.lcx .lcx-fade.lcx-out{opacity:0}
/* Portrait stage, one panel at a time */
.lcx--tall .lcx-stage{width:900px;height:1600px}
.lcx--tall .lcx-ticks{font-size:16px}
.lcx--tall .lcx-ticks.lcx-top,.lcx--tall .lcx-ticks.lcx-bot{grid-template-columns:repeat(3,1fr)}
.lcx--tall .lcx-ticks.lcx-l,.lcx--tall .lcx-ticks.lcx-r{grid-template-rows:repeat(5,1fr)}
.lcx--tall .lcx-prompt{left:50px;right:50px;top:56px;height:300px;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:0 36px}
.lcx--tall .lcx-prompt .lcx-tag{font-size:20px}
.lcx--tall .lcx-prompt .lcx-text{font-size:64px;line-height:1.18}
.lcx--tall .lcx-steps{position:absolute;left:50px;right:50px;top:388px;height:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lcx--tall .lcx-steps span{border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:600 32px var(--display);color:var(--muted);background:var(--card);transition:background .4s var(--ease),color .4s var(--ease)}
.lcx--tall .lcx-steps span.lcx-done{background:var(--bone2);color:var(--ink)}
.lcx--tall .lcx-steps span.lcx-on{background:var(--gold);color:#fff;border-color:var(--gold)}
.lcx--tall .lcx-panels{left:50px;right:50px;top:484px;height:900px;display:block}
.lcx--tall .lcx-panel{position:absolute;inset:0;opacity:0}
.lcx--tall .lcx-panel.lcx-on{opacity:1}
.lcx--tall .lcx-panel.lcx-done{opacity:0}
.lcx--tall .lcx-ph{height:130px}
.lcx--tall .lcx-ph .lcx-letter{width:120px;font-size:64px}
.lcx--tall .lcx-ph .lcx-h{font-size:64px;padding:0 30px}
.lcx--tall .lcx-pb{padding:20px 30px 0}
.lcx--tall .lcx-pb svg{max-height:520px}
.lcx--tall .lcx-cap{font-size:46px;line-height:1.22;padding:0 36px 44px;min-height:0}
.lcx--tall .lcx-stats{left:50px;right:50px;top:388px;height:1030px;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:16px}
.lcx--tall .lcx-sc{padding:0 32px 24px;gap:8px}
.lcx--tall .lcx-sc .lcx-hd{margin:0 -32px 4px;padding:13px 32px;font-size:38px}
.lcx--tall .lcx-sc .lcx-hd svg{width:40px;height:40px}
.lcx--tall .lcx-sc .lcx-big{font-size:104px}
.lcx--tall .lcx-sc .lcx-what{font-size:34px}
.lcx--tall .lcx-sc .lcx-delay,.lcx--tall .lcx-sc.lcx-good .lcx-why{font-size:27px}
.lcx--tall .lcx-sc .lcx-delay span,.lcx--tall .lcx-sc.lcx-good .lcx-why span{font-size:19px!important}
.lcx--tall .lcx-lm{font-size:33px;padding:16px 28px}
.lcx--tall .lcx-src{font-size:15px;line-height:1.45;margin-top:-4px}
.lcx--tall .lcx-tb{left:50px;right:50px;bottom:52px;height:112px;grid-template-columns:1fr 190px}
.lcx--tall .lcx-tb > div:nth-child(2){display:none}
.lcx--tall .lcx-tb small{font-size:16px}
.lcx--tall .lcx-tb b{font-size:36px}
.lcx--tall .lcx-tb .lcx-mono{font-size:30px}
@media (prefers-reduced-motion: reduce){.lcx .lcx-caret{animation:none}}