.workflow-intro{grid-template-columns:1.15fr 1fr;align-items:center;gap:64px;display:grid}.workflow-intro>.section-heading{min-width:0}.workflow-intro h2{font-size:clamp(36px,3.35vw,48px)}.invoice-film{color:#f5f3ee;background:#171e19;border:1px solid #343b34;border-radius:20px;min-width:0;margin:0;overflow:hidden;box-shadow:0 16px 40px #0d0f1210}.film-topbar{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;padding:18px 22px;font-size:11px;display:flex}.film-topbar>span{align-items:center;gap:8px;display:flex}.film-topbar>span:last-child{color:#aeb9ad;font:9px var(--vf-font-mono)}.film-saved{color:#c3f73a;align-items:center;gap:4px;margin-left:10px;display:flex}.film-stage{perspective:1400px;background:radial-gradient(at 54% 46%,#344436 0%,#1c261f 68%);height:492px;position:relative;overflow:hidden}.film-paper{color:#263029;background:#fffefa;border-radius:3px;width:350px;max-width:calc(100% - 60px);min-height:415px;padding:25px 26px;position:absolute;top:40px;left:50%;transform:translate(-47%)rotateX(3deg)rotateY(-6deg)rotate(-3deg);box-shadow:14px 25px 38px #0004,0 2px 3px #0002}.film-outline{z-index:2;color:#29302b;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f5f3eef5;border:1px solid #fff7;border-radius:10px;width:126px;padding:13px;font-size:10px;position:absolute;top:70px;left:18px;box-shadow:0 8px 20px #0002}.film-outline>strong{margin-bottom:8px;font-size:10px;font-weight:550;display:block}.film-outline>span{align-items:center;gap:7px;padding:7px 3px;display:flex}.film-outline>.film-outline-child{border-left:1px solid #0d0f121a;margin-left:6px;padding-left:8px}.film-outline-selected,.film-variable-choice{background:#e6e9df;border-radius:4px}.film-invoice-brand{justify-content:space-between;align-items:center;display:flex}.film-invoice-brand strong{letter-spacing:-1.6px;font-size:28px;line-height:1}.film-invoice-brand strong>span{vertical-align:top;letter-spacing:0;font-size:8px}.film-invoice-brand>span{text-align:right;font-size:7px;line-height:1.5}.film-paper h3{letter-spacing:-1px;margin:20px 0 16px;font-size:25px;font-weight:500;line-height:1.05}.film-invoice-parties{justify-content:space-between;gap:8px;margin-bottom:15px;font-size:7px;display:flex}.film-invoice-parties>div{flex-direction:column;gap:4px;display:flex}.film-invoice-parties>div:last-child{text-align:right}.film-invoice-parties small{color:#758071;font-size:6px}.film-invoice-parties strong{font-weight:500}.film-line-items>div{border-bottom:1px solid #dfe2d8;justify-content:space-between;gap:8px;padding:8px 0;font-size:7px;display:flex}.film-line-items small{color:#758071;font-size:6px}.film-line-items>.film-total{background:#e9eddf;border-bottom:0;margin-top:8px;padding:8px}.film-edit-section{outline:1px solid #a5d42f;min-height:53px;margin-top:14px;padding:10px 8px;position:relative}.film-section-label{color:#637e2b;font-size:6px;position:absolute;top:-10px;left:0}.film-section-plus{z-index:2;background:#f5f3ee;border:1px solid #91978a;border-radius:50%;justify-content:center;align-items:center;width:15px;height:15px;display:flex;position:absolute;top:18px;right:-7px}.film-spacing-padding{pointer-events:none;border:8px solid #0000;border-image:repeating-linear-gradient(135deg,#7fb01e80 0 2px,#7fb01e26 2px 6px) 8;position:absolute;inset:0}.film-spacing-margin{background:repeating-linear-gradient(135deg,#f4643c80 0 2px,#f4643c26 2px 6px);height:7px;position:absolute;bottom:-7px;left:0;right:0}.invoice-film:not([data-scene=blocks]) .film-section-plus{display:none}.film-block-grip{color:#536044;position:absolute;top:12px;left:-15px}.film-edit-text{font-size:8px;line-height:1.6;position:relative}.film-typed-copy{white-space:nowrap;width:100%;display:block;overflow:hidden}.film-note-line{display:block}.film-linked-copy{color:#446535;text-decoration:underline}.film-field,.film-variable-pill{background:#eae7e0;border:1px solid #0d0f1233;border-radius:3px;padding:0 4px;display:inline-block}.film-paper-footer{color:#73816d;justify-content:space-between;margin-top:18px;font-size:5px;display:flex}.film-section-plus{color:#0d0f12;background:#f5f3ee;border:1px solid #0d0f1233;width:22px;height:22px;top:-11px;left:50%;right:auto;transform:translate(-50%);box-shadow:0 1px 3px #0001}.film-edit-section{min-height:55px;margin-top:19px}.film-spacing-padding,.film-spacing-margin{opacity:.65}.film-paper-footer{margin-top:12px}.film-block-picker{z-index:3;color:#0d0f12;width:260px;max-width:calc(100% - 32px);animation:film-picker var(--film-duration) both;background:#f5f3ee;border:1px solid #d1d4ca;border-radius:10px;padding:15px;font-size:11px;position:absolute;top:225px;left:50%;transform:translate(-40%);box-shadow:0 12px 30px #0003}.film-block-picker>strong{font-weight:550}.film-search{color:#6b7466;border:1px solid #ced2c6;border-radius:5px;align-items:center;gap:6px;margin:10px 0;padding:8px;font-size:9px;display:flex}.film-picker-body{grid-template-columns:1fr 1fr;gap:8px;display:grid}.film-picker-body>div:first-child{flex-direction:column;gap:5px;display:flex}.film-picker-body span{border:1px solid #d6d9cf;border-radius:5px;align-items:center;gap:7px;padding:8px;display:flex}.film-picker-text{background:#c3f73a}.film-block-preview{text-align:center;background:#fff;border:1px solid #d6d9cf;border-radius:3px;place-items:center;padding:7px;font-size:8px;display:grid}.film-text-tools{z-index:3;width:332px;max-width:calc(100% - 24px);position:absolute;top:283px;left:50%;transform:translate(-50%)}.film-toolbar-row{color:#0d0f12;background:#f5f3ee;border:1px solid #d7d9d0;border-radius:9px;align-items:center;gap:3px;padding:7px;display:flex;box-shadow:0 5px 20px #0002}.film-toolbar-row>span{border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;height:28px;font-size:11px;display:flex}.film-toolbar-row>.film-font-control{border:1px solid #d7d9d0;flex:1;justify-content:space-between;min-width:55px;padding:0 7px}.film-size-control{border:1px solid #d7d9d0;gap:5px;width:43px}.film-tool{width:27px}.film-toolbar-row>.film-toolbar-divider{background:#0d0f1220;width:1px;height:18px;margin:0 2px}.film-link-tool{animation:film-link-highlight var(--film-duration) both}.film-link-form{color:#0d0f12;background:#f5f3ee;border:1px solid #d7d9d0;border-radius:8px;align-items:center;gap:7px;margin-top:7px;padding:8px;font-size:10px;display:flex;box-shadow:0 5px 20px #0002}.film-url-input{background:#fffefa;border:1px solid #c8ccbf;border-radius:5px;flex:1;min-width:0;padding:8px}.film-url-input>span{white-space:nowrap;display:block;overflow:hidden}.film-apply-link{background:#c3f73a;border-radius:5px;padding:8px 10px;font-weight:500}.film-cursor{z-index:5;color:#0d0f12;stroke:#fff;stroke-width:1.3px;filter:drop-shadow(0 2px 2px #0004);animation:film-block-cursor var(--film-duration) both;transform-origin:4px 3px;position:absolute}.invoice-film[data-scene=text] .film-cursor{animation-name:film-text-cursor}.invoice-film[data-scene=text] .film-typed-copy{animation:1.5s steps(29,end) .9s both film-type-copy}.invoice-film[data-scene=text] .film-linked-copy{animation:film-selected-text var(--film-duration) both}.invoice-film[data-scene=variables] .film-cursor{animation-name:film-variable-cursor}.invoice-film[data-scene=variables] .film-variable-pill{animation:film-insert-variable var(--film-duration) both}.film-caption{color:#c5d0c0;min-height:22px;padding:16px 22px 4px;font-size:12px}.film-controls{align-items:center;gap:12px;padding:17px 20px 20px;display:flex}.film-controls>div{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.film-controls button{color:#aeb9ad;min-height:39px;font:11px var(--vf-font-mono);cursor:pointer;background:#ffffff05;border:1px solid #ffffff18;border-radius:7px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.film-controls button[aria-pressed=true]{color:#f5f3ee;background:#ffffff0b;border-color:#ffffff30}.film-scene-track{background:#ffffff0a;height:2px;position:absolute;bottom:0;left:0;right:0}.film-scene-track>span{transform-origin:0;background:#c3f73a;height:100%;display:block;transform:scaleX(0)}.film-controls button[aria-pressed=true] .film-scene-track>span{animation:film-progress var(--film-duration) linear both}.film-controls .film-playback{border-radius:50%;flex:0 0 32px;width:32px;min-height:32px}.film-controls button:focus-visible{outline-offset:3px;outline:2px solid #c3f73a}.invoice-film[data-playing=false] *{animation-play-state:paused!important}@keyframes film-progress{to{transform:scaleX(1)}}@keyframes film-picker{0%,12%{opacity:0}16%,32%{opacity:1}36%,to{opacity:0}}@keyframes film-insert{0%,35%{opacity:0}39%,to{opacity:1}}@keyframes film-block-selection{0%,52%{outline-color:#0000}56%,to{outline-color:#a5d42f}}@keyframes film-placeholder-selection{0%,68%{background:0 0}74%,to{background:#c9daf3}}@keyframes film-replace-placeholder{0%,8%{opacity:1;background:#c9daf3}9%,to{opacity:0}}@keyframes film-type-copy{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes film-type-url{0%{width:0}to{width:100%}}@keyframes film-show-tools{0%,57%{opacity:0}63%,to{opacity:1}}@keyframes film-show-link-copy{0%,24%{opacity:0}27%,to{opacity:1}}@keyframes film-link-popup{0%,43%{opacity:0}46%,72%{opacity:1}75%,to{opacity:0}}@keyframes film-link-highlight{0%,41%{background:0 0}44%,73%{background:#c3f73a}76%,to{background:0 0}}@keyframes film-selected-text{0%,29%{color:#263029;background:0 0;text-decoration:none}33%,73%{color:#263029;background:#c9daf3;text-decoration:none}76%,to{color:#446535;background:0 0;text-decoration:underline}}@keyframes film-insert-variable{0%,42%{opacity:0}46%,to{opacity:1}}@keyframes film-customer-copy{0%,18%{opacity:0}23%,to{opacity:1}}@keyframes film-block-cursor{0%{top:65%;left:70%}10%,13%{left:var(--cursor-plus-x);top:var(--cursor-plus-y);transform:scale(1)}14%{left:var(--cursor-plus-x);top:var(--cursor-plus-y);transform:scale(.82)}17%{left:var(--cursor-plus-x);top:var(--cursor-plus-y);transform:scale(1)}28%,32%{left:var(--cursor-block-x);top:var(--cursor-block-y);transform:scale(1)}34%{left:var(--cursor-block-x);top:var(--cursor-block-y);transform:scale(.82)}52%{left:var(--cursor-text-x);top:var(--cursor-text-y);transform:scale(1)}55%,57%{left:var(--cursor-text-x);top:var(--cursor-text-y);transform:scale(.82)}59%,68%{left:var(--cursor-text-x);top:var(--cursor-text-y);transform:scale(1)}72%{left:var(--cursor-text-x);top:var(--cursor-text-y);transform:scale(.82)}76%,to{left:var(--cursor-text-x);top:var(--cursor-text-y);transform:scale(1)}}@keyframes film-text-cursor{0%,28%{left:var(--cursor-text-x);top:var(--cursor-text-y)}33%{left:var(--cursor-text-x);top:var(--cursor-text-y);transform:scale(.82)}36%{left:var(--cursor-text-x);top:var(--cursor-text-y);transform:scale(1)}41%,44%{left:var(--cursor-link-x);top:var(--cursor-link-y);transform:scale(1)}45%{left:var(--cursor-link-x);top:var(--cursor-link-y);transform:scale(.82)}48%,61%{left:var(--cursor-url-x);top:var(--cursor-url-y);transform:scale(1)}69%,72%{left:var(--cursor-apply-x);top:var(--cursor-apply-y);transform:scale(1)}73%{left:var(--cursor-apply-x);top:var(--cursor-apply-y);transform:scale(.82)}82%,to{left:var(--cursor-text-x);top:var(--cursor-text-y);transform:scale(1)}}@keyframes film-variable-cursor{0%,15%{left:var(--cursor-text-x);top:var(--cursor-text-y);transform:scale(1)}32%,40%{left:var(--cursor-variable-x);top:var(--cursor-variable-y);transform:scale(1)}42%{left:var(--cursor-variable-x);top:var(--cursor-variable-y);transform:scale(.82)}46%{left:var(--cursor-variable-x);top:var(--cursor-variable-y);transform:scale(1)}64%,84%{left:var(--cursor-text-x);top:var(--cursor-text-y);opacity:1}94%,to{opacity:1;top:65%;left:70%}}@media (max-width:1200px){.workflow-intro{gap:35px}.film-outline{width:112px;font-size:9px;left:12px}}@media (max-width:950px){.workflow-intro{grid-template-columns:1fr;gap:32px}.workflow-intro>.section-heading{order:-1}.invoice-film{justify-self:center;width:100%;max-width:620px}}@media (max-width:520px){.film-stage{height:475px}.film-paper{max-width:calc(100% - 44px);padding:23px 20px;top:38px;transform:translate(-50%)rotateX(3deg)rotateY(-5deg)rotate(-3deg)}.film-outline{width:105px;padding:10px;font-size:8px;top:37px;left:auto;right:12px}.film-outline>strong{font-size:9px}.film-outline>span{padding:5px 2px}.film-paper h3{margin-top:30px;font-size:25px}.film-text-tools{top:290px}.film-toolbar-row{gap:2px;padding:5px}.film-tool{width:24px}.film-block-picker{transform:translate(-50%)}.film-caption{padding:14px 16px 4px;font-size:10px}.film-controls{gap:8px;padding:15px 14px 17px}.film-controls button{font-size:10px}}.invoice-film[data-reduced-motion=true] *{transition:none!important;animation:none!important}.invoice-film[data-reduced-motion=true] .film-block-picker,.invoice-film[data-reduced-motion=true] .film-link-form,.invoice-film[data-reduced-motion=true] .film-cursor{display:none}@media (prefers-reduced-motion:reduce){.invoice-film *{transition:none!important;animation:none!important}.film-block-picker,.film-link-form,.film-cursor{display:none}}.film-field{font-family:var(--vf-font-mono);font-weight:400;line-height:1.4}.film-edit-text{min-height:51px}.film-placeholder-copy{opacity:0;position:absolute;top:0;left:0}.film-customer-line{opacity:0;display:block}.film-outline,.film-text-tools{transition:opacity .25s ease-out}.invoice-film[data-scene=text] .film-outline{opacity:0}.invoice-film[data-scene=blocks] .film-typed-copy,.invoice-film[data-scene=blocks] .film-note-line{visibility:hidden}.invoice-film[data-scene=blocks] .film-placeholder-copy{animation:film-insert var(--film-duration) both, film-placeholder-selection var(--film-duration) both}.invoice-film[data-scene=blocks] .film-text-tools{animation:film-show-tools var(--film-duration) both}.invoice-film[data-scene=blocks] .film-link-form,.invoice-film[data-scene=variables] .film-link-form{display:none}.invoice-film[data-scene=blocks] .film-link-tool,.invoice-film[data-scene=variables] .film-link-tool{animation:none}.invoice-film[data-scene=text] .film-placeholder-copy{animation:film-replace-placeholder var(--film-duration) both}.invoice-film[data-scene=text] .film-note-line{animation:film-show-link-copy var(--film-duration) both}.invoice-film[data-scene=variables] .film-text-tools{opacity:0}.invoice-film[data-scene=variables] .film-customer-line{animation:film-customer-copy var(--film-duration) both}.invoice-film[data-reduced-motion=true] .film-placeholder-copy{display:none}.invoice-film[data-reduced-motion=true][data-scene=blocks] .film-placeholder-copy{opacity:1;display:inline}.invoice-film[data-reduced-motion=true][data-scene=variables] .film-customer-line{opacity:1}.invoice-film[data-scene=text] .film-link-form{animation:film-link-popup var(--film-duration) both}.invoice-film[data-scene=text] .film-url-input>span{animation:1.4s steps(26,end) 4.6s both film-type-url}.film-text-selection{width:max-content;max-width:100%;margin-bottom:6px;display:block;position:relative}.film-text-selection:before{content:"";outline-offset:1px;opacity:0;pointer-events:none;outline:1px solid #a5d42f;position:absolute;inset:0}.film-text-selection:after{content:"";opacity:0;pointer-events:none;background:repeating-linear-gradient(135deg,#f4643c80 0 2px,#f4643c26 2px 6px);height:5px;position:absolute;top:calc(100% + 1px);left:-1px;right:-1px}.invoice-film[data-scene=blocks] .film-primary-text .film-typed-copy{display:none}.invoice-film[data-scene=blocks] .film-primary-text .film-placeholder-copy{position:relative}.invoice-film[data-scene=blocks] .film-primary-text:before,.invoice-film[data-scene=blocks] .film-primary-text:after{animation:film-select-inserted-text var(--film-duration) both}.invoice-film[data-scene=text] .film-primary-text:before,.invoice-film[data-scene=text] .film-primary-text:after{animation:film-select-primary-text var(--film-duration) both}.invoice-film[data-scene=text] .film-note-line:before,.invoice-film[data-scene=text] .film-note-line:after{animation:film-select-linked-text var(--film-duration) both}.invoice-film[data-scene=variables] .film-customer-line:before,.invoice-film[data-scene=variables] .film-customer-line:after{opacity:1}@keyframes film-select-inserted-text{0%,52%{opacity:0}56%,to{opacity:1}}@keyframes film-select-primary-text{0%,29%{opacity:1}33%,to{opacity:0}}@keyframes film-select-linked-text{0%,29%{opacity:0}33%,to{opacity:1}}
