/* Native product story: DOM text and shapes, no video or canvas. */
.ci-promo{--ci-ink:#0f172a;--ci-purple:#505acf;--ci-muted:#53627a;--ci-mint:#74c59a;--ci-line:#dde2ef;container-type:inline-size;position:relative;width:100%;max-width:1024px;margin:0 auto;text-align:left;color:var(--ci-ink);background:#f8fafc;border:1px solid #dce1ed;border-radius:20px;box-shadow:0 24px 70px -35px #24316545;overflow:hidden;isolation:isolate}
.ci-promo *{box-sizing:border-box}.ci-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ci-promo__header{height:90px;height:9cqw;margin:0 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--ci-line)}
.ci-promo__header img{width:138px;width:14cqw;height:auto}.ci-promo__header>span{font-size:12px;font-size:1.3cqw;font-weight:600;color:var(--ci-muted);letter-spacing:.11em;text-transform:uppercase}
.ci-promo__stage{position:relative;height:475px;height:47cqw;overflow:hidden}.ci-scene{position:absolute;inset:0;padding:4% 6%;opacity:0;visibility:hidden}.ci-scene--invoice{opacity:1;visibility:visible}
.ci-promo h2{margin:0;color:var(--ci-ink);font-size:58px;font-size:6cqw;line-height:1.06;letter-spacing:-.055em;font-weight:650}.ci-promo h2 em{font-style:normal;color:var(--ci-purple)}
.ci-eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-size:1.25cqw;font-weight:650;color:var(--ci-purple)}
.ci-intro{position:relative}.ci-dot{display:block;background:var(--ci-mint);width:12px;height:12px;border-radius:50%;margin-bottom:18px;margin-bottom:1.7cqw}
.ci-prompt{margin-top:3.7cqw;background:#fff;border:1px solid #b8beea;border-radius:12px;padding:2cqw 2.2cqw}.ci-prompt__line{font-size:23px;font-size:2.3cqw;letter-spacing:-.02em;line-height:1.35;margin-top:1.3cqw;min-height:1.35em}.ci-caret{display:inline-block;height:1em;width:2px;margin-left:3px;background:var(--ci-purple);vertical-align:-.08em}
.ci-prompt__bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:2cqw;font-size:12px;font-size:1.2cqw;color:var(--ci-muted)}.ci-generate{white-space:nowrap;padding:1cqw 1.6cqw;background:var(--ci-purple);color:white;border-radius:50px;font-weight:600}.ci-generate>span{margin-left:6px}
.ci-scene--invoice{display:grid;grid-template-columns:1.05fr 1fr;gap:4%}.ci-invoice-copy{padding-top:1cqw}.ci-invoice-copy h2{font-size:5.2cqw;margin-top:2cqw}.ci-swatches{display:flex;gap:10px;margin-top:3.6cqw}.ci-swatches i{display:block;width:2.7cqw;height:2.7cqw;border:2px solid #f8fafc;outline:1px solid var(--ci-line);border-radius:50%;background:var(--ci-purple)}.ci-swatches i:nth-child(2){background:var(--ci-mint)}.ci-swatches i:nth-child(3){background:var(--ci-ink)}.ci-features{display:flex;gap:1.4cqw;font-size:1.5cqw;font-weight:550;margin-top:2.2cqw}
.ci-paper{align-self:start;position:relative;padding:2.2cqw;background:#fff;border:1px solid var(--ci-line);border-radius:12px}.ci-paper__brand{display:flex;align-items:center;gap:10px;font-size:1.6cqw;line-height:1.1}.ci-vertex{display:flex;align-items:center;justify-content:center;flex:none;width:4cqw;height:4cqw;border-radius:8px;background:var(--ci-purple);color:#fff;font-size:2.6cqw;font-weight:650;letter-spacing:-.07em}.ci-paper__label{margin-left:auto;letter-spacing:.13em;font-size:1.2cqw;text-transform:uppercase;color:var(--ci-purple);font-weight:650}.ci-paper__meta{display:flex;justify-content:space-between;gap:8px;border-top:2px solid var(--ci-purple);padding-top:1cqw;margin-top:1.6cqw;font-size:1.05cqw;color:var(--ci-muted)}.ci-paper__customer{margin-top:1.7cqw;display:grid;gap:3px}.ci-paper__customer>span{font-size:1cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--ci-muted)}.ci-paper__customer>strong{font-size:1.8cqw}
.ci-paper__columns{display:flex;justify-content:space-between;border-bottom:1px solid var(--ci-line);padding-bottom:.8cqw;margin-top:1.8cqw;font-size:.95cqw;letter-spacing:.04em;text-transform:uppercase;color:var(--ci-muted)}.ci-paper__item{display:flex;justify-content:space-between;gap:10px;font-size:1.25cqw;margin-top:1cqw}.ci-paper__item strong{font-weight:600}.ci-paper__note{font-size:1cqw;color:var(--ci-muted);margin:.4cqw 0 0}.ci-paper__total{display:flex;justify-content:space-between;align-items:center;padding:1.2cqw;margin-top:1.7cqw;background:#f0f1fa;border-radius:8px;color:var(--ci-purple);font-size:1.25cqw}.ci-paper__total strong{font-size:2cqw;letter-spacing:-.03em}.ci-paper__thanks{font-size:1cqw;margin-top:1.3cqw;color:var(--ci-muted)}.ci-ready{width:max-content;margin:1.2cqw 0 -3.5cqw auto;border:2px solid #f8fafc;border-radius:50px;padding:.8cqw 1.3cqw;background:var(--ci-mint);font-size:1.25cqw;font-weight:650}
.ci-scene--email h2{font-size:5.8cqw}.ci-mail{position:relative;width:77%;margin:2.8cqw auto 0;padding:1.8cqw 2.2cqw;background:#fff;border:1px solid #b8beea;border-radius:12px}.ci-mail__subject{display:flex;justify-content:space-between;gap:10px;padding-bottom:1.2cqw;border-bottom:1px solid var(--ci-line);font-size:1.05cqw;letter-spacing:.07em;text-transform:uppercase;color:var(--ci-muted)}.ci-mail__sender{display:flex;align-items:center;gap:12px;margin-top:1.3cqw;font-size:1.5cqw}.ci-mail__sender>div>span{display:block;color:var(--ci-purple);font-size:1.25cqw;margin-top:3px}.ci-mail__sender small{margin-left:auto;font-size:1.2cqw;color:var(--ci-muted)}.ci-mail__body{font-size:1.55cqw;line-height:1.5;margin:1.5cqw 0}.ci-attachment{display:flex;align-items:center;gap:12px;padding:1.1cqw;background:#f0f1fa;border-radius:8px;font-size:1.25cqw}.ci-pdf{background:var(--ci-purple);color:white;font-size:1cqw;padding:1.2cqw .6cqw;border-radius:4px;font-weight:650}.ci-attachment>div>span{display:block;font-size:1cqw;color:var(--ci-muted);margin-top:4px}.ci-attachment__amount{margin-left:auto;color:var(--ci-purple);font-size:1.6cqw;white-space:nowrap}.ci-sent{width:max-content;margin:1.4cqw -4cqw -3.4cqw auto;background:var(--ci-mint);border:2px solid #f8fafc;border-radius:50px;padding:1cqw 1.5cqw;font-size:1.4cqw;font-weight:650}
.ci-scene--brand{display:flex;align-items:center;justify-content:space-between;gap:5%;padding-bottom:7%}.ci-scene--brand h2{font-size:7.5cqw;line-height:1.12}.ci-scene--brand h2>*{display:block}
.ci-promo__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;margin:0 6%;border-top:1px solid var(--ci-line)}.ci-chapters{display:flex;gap:22px;font-size:12px;color:var(--ci-muted);font-weight:500}.ci-chapters>span{position:relative;padding:20px 0}.ci-chapters>span.is-current{color:var(--ci-purple)}.ci-chapters>span.is-current:before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--ci-purple)}.ci-playback{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 0 8px 12px;border:0;background:none;color:var(--ci-muted);font:inherit;font-size:12px;cursor:pointer}.ci-playback[hidden]{display:none}.ci-playback:hover{color:var(--ci-purple)}.ci-playback:focus-visible{outline:2px solid var(--ci-purple);outline-offset:3px;border-radius:4px}
@media(max-width:600px){
.ci-promo{border-radius:16px}.ci-promo__header{height:72px;margin:0 6%}.ci-promo__header img{width:112px}.ci-promo__header>span{font-size:9px;max-width:108px;line-height:1.5;text-align:right}.ci-promo__stage{height:570px}.ci-scene{padding:28px 6%}.ci-promo h2{font-size:clamp(36px,10cqw,58px)}.ci-eyebrow{font-size:10px}.ci-dot{width:10px;height:10px;margin-bottom:20px}.ci-prompt{margin-top:35px;padding:22px 18px}.ci-prompt__line{font-size:20px;min-height:108px;margin-top:20px;line-height:1.4}.ci-prompt__bottom{align-items:flex-start;flex-direction:column;gap:18px;margin-top:20px;font-size:12px}.ci-generate{padding:12px 18px;align-self:flex-end}.ci-scene--invoice{display:block;padding-top:22px}.ci-invoice-copy{padding-top:0}.ci-invoice-copy h2{font-size:8.5cqw;margin-top:10px;line-height:1.02}.ci-invoice-copy h2 br:first-of-type{display:none}.ci-swatches{position:absolute;right:7%;top:100px;gap:7px}.ci-swatches i{width:18px;height:18px}.ci-features{font-size:12px;gap:14px;margin-top:12px}.ci-paper{margin:22px auto 0;padding:20px;width:100%;max-width:390px}.ci-paper__brand{font-size:15px}.ci-vertex{width:36px;height:36px;font-size:24px;border-radius:6px}.ci-paper__label{font-size:10px}.ci-paper__meta{padding-top:9px;margin-top:12px;font-size:10px}.ci-paper__customer{margin-top:12px;gap:2px}.ci-paper__customer>span{font-size:9px}.ci-paper__customer>strong{font-size:17px}.ci-paper__columns{margin-top:12px;padding-bottom:8px;font-size:9px}.ci-paper__item{font-size:11px;margin-top:9px;gap:8px}.ci-paper__note{font-size:10px;margin-top:4px}.ci-paper__total{padding:12px;margin-top:14px;font-size:12px}.ci-paper__total strong{font-size:20px}.ci-paper__thanks{font-size:9px;margin-top:10px}.ci-ready{font-size:11px;padding:8px 14px;margin:10px 0 -34px auto}.ci-scene--email h2{font-size:10cqw;max-width:90%;line-height:1.1}.ci-mail{width:100%;margin:32px 0 0;padding:22px 18px}.ci-mail__subject{font-size:10px;line-height:1.5;padding-bottom:14px}.ci-mail__sender{margin-top:18px;gap:10px;font-size:15px;flex-wrap:wrap}.ci-mail__sender>div>span{font-size:12px}.ci-mail__sender small{font-size:11px;width:100%;margin:0 0 0 46px}.ci-mail__body{font-size:15px;margin:22px 0}.ci-attachment{position:relative;gap:10px;padding:14px 10px 43px;font-size:12px}.ci-pdf{font-size:9px;padding:14px 7px}.ci-attachment>div>span{font-size:10px;line-height:1.4}.ci-attachment__amount{position:absolute;bottom:14px;right:14px;font-size:17px}.ci-sent{font-size:12px;padding:12px 15px;margin:18px -5px -40px auto}.ci-scene--brand{flex-direction:column;align-items:flex-start;justify-content:center;padding-bottom:50px;gap:32px}.ci-scene--brand h2{font-size:12cqw}.ci-promo__footer{min-height:64px}.ci-chapters{gap:13px;font-size:11px}.ci-playback{font-size:11px;gap:5px;padding-left:5px}
}
@media(prefers-reduced-motion:reduce){.ci-promo{scroll-behavior:auto}}

/* Closing illustration: the same branded invoice, held in a dimensional envelope. */
.ci-scene--brand h2 { font-size: 6.8cqw; }
.ci-brand-art { position: relative; flex: 0 0 35%; height: 31cqw; isolation: isolate; }
.ci-brand-art__shadow { position: absolute; left: 9%; right: 1%; bottom: 0; height: 8%; border-radius: 50%; background: #26326b24; filter: blur(12px); }
.ci-brand-art__envelope-back { position: absolute; left: 5%; bottom: 7%; width: 90%; height: 60%; background: #424cba; clip-path: polygon(0 32%, 50% 0, 100% 32%, 100% 100%, 0 100%); border-radius: 10px; }
.ci-brand-art__invoice { position: absolute; left: 16%; top: 0; width: 72%; height: 80%; padding: 2cqw; border: 1px solid #dce1ed; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px #26326b1c; transform-origin: 50% 90%; }
.ci-brand-art__identity { display: flex; gap: .9cqw; align-items: center; font-size: 1.2cqw; line-height: 1.1; }
.ci-brand-art__identity > span { display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 6px; background: var(--ci-purple); color: #fff; font-size: 2.1cqw; font-weight: 650; }
.ci-brand-art__invoice-label { display: flex; justify-content: space-between; margin-top: 1.5cqw; padding-top: .9cqw; border-top: 2px solid var(--ci-purple); color: var(--ci-purple); font-size: .85cqw; letter-spacing: .07em; font-weight: 600; }
.ci-brand-art__client { display: grid; gap: .2cqw; margin-top: 1cqw; font-size: .9cqw; color: var(--ci-muted); }
.ci-brand-art__client strong { font-size: 1.4cqw; color: var(--ci-ink); }
.ci-brand-art__lines { display: grid; gap: .5cqw; margin-top: 1cqw; }
.ci-brand-art__lines i { height: 3px; width: 85%; background: #e6e9f4; border-radius: 2px; }
.ci-brand-art__lines i:nth-child(2) { width: 65%; }
.ci-brand-art__lines i:nth-child(3) { width: 74%; }
.ci-brand-art__envelope-front { position: absolute; left: 5%; bottom: 7%; width: 90%; height: 41%; border-radius: 0 0 10px 10px; background: #5964d8; clip-path: polygon(0 0, 50% 33%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 -2px 0 #3944a04d; }
.ci-brand-art__envelope-front::before { content: ''; position: absolute; inset: 0; background: #6470e0; clip-path: polygon(0 100%, 50% 33%, 100% 100%); }
.ci-brand-art__envelope-front > span { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; font-size: 1cqw; color: #fff; letter-spacing: .13em; font-weight: 600; }
.ci-brand-art__seal { position: absolute; right: 0; bottom: 5%; display: grid; place-items: center; width: 6cqw; height: 6cqw; border: 4px solid #f8fafc; border-radius: 50%; background: var(--ci-mint); box-shadow: 0 5px 12px #28473c20; color: #173c2a; font-size: 3cqw; font-weight: 600; }
/* Slight paper elevation carries through the two preceding product shots. */
.ci-paper { box-shadow: 0 10px 24px -14px #28346b38; }
.ci-mail { box-shadow: 0 15px 32px -20px #28346b45; }
.ci-attachment { border: 1px solid #e0e3f2; box-shadow: 0 2px 0 #e4e7f2; }
@media (max-width: 600px) {
    .ci-scene--brand { gap: 22px; padding-top: 26px; padding-bottom: 24px; justify-content: flex-start; }
    .ci-scene--brand h2 { font-size: 11.4cqw; }
    .ci-brand-art { flex: none; width: 82%; max-width: 300px; height: 270px; align-self: center; }
    .ci-brand-art__invoice { padding: 17px; }
    .ci-brand-art__identity { gap: 9px; font-size: 12px; }
    .ci-brand-art__identity > span { width: 30px; height: 30px; font-size: 20px; }
    .ci-brand-art__invoice-label { margin-top: 12px; padding-top: 8px; font-size: 8px; }
    .ci-brand-art__client { margin-top: 9px; gap: 2px; font-size: 9px; }
    .ci-brand-art__client strong { font-size: 14px; }
    .ci-brand-art__lines { gap: 5px; margin-top: 9px; }
    .ci-brand-art__envelope-front > span { font-size: 10px; }
    .ci-brand-art__seal { width: 52px; height: 52px; font-size: 25px; }
}