/* Recovered outbound-invoicing story. Scoped to its application page. */

.invoice-story{
  --paper:#fff; --paper-2:#f4f5f7; --ink:#131417; --ink-soft:#50545b; --ink-faint:#626873;
  --rule:#dfe2e7; --rule-2:#cbd0d7;
  --indigo:#2450e8; --indigo-deep:#131417; --cobalt:#1740c7; --carbon:#fff252;
  --dark:#131417; --dark-2:#212328; --dark-rule:#45484f;
  --maxw:1440px; --measure:66ch;
}
.invoice-story *{box-sizing:border-box}
.invoice-story{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){.invoice-story{scroll-behavior:auto}}
.invoice-story{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.62;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.invoice-story ::selection{background:rgba(68,84,155,.2)}
.invoice-story a{color:inherit}
.invoice-story a:focus-visible,.invoice-story button:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.invoice-story .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.invoice-story h1,.invoice-story h2,.invoice-story h3{font-family:var(--sans);font-weight: 800;margin:0;letter-spacing: -.055em;font-optical-sizing:auto;text-wrap:balance}
.invoice-story h2{font-size:clamp(28px,3.5vw,42px);line-height:1.08}
.invoice-story h3{font-size:20px;line-height:1.25;font-weight:500}
.invoice-story p{margin:0 0 1.05em;text-wrap:pretty}
.invoice-story em{font-style:italic}
.invoice-story strong{font-weight:700;color:var(--ink)}
.invoice-story .mono{font-family:var(--mono)}
.invoice-story .kick{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.invoice-story .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.invoice-story .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.invoice-story .rv{opacity:1;transform:none;transition:none}}
.invoice-story .hero{background:var(--dark);color:#d5daea;position:relative;overflow:hidden}
.invoice-story .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--dark-rule)}
.invoice-story .hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,88px);align-items:center;
  padding-top:clamp(72px,11vh,130px);padding-bottom:clamp(72px,11vh,130px)}
.invoice-story .hero .kick{color:var(--carbon)}
.invoice-story .hero h1{color:#f2f3f7;font-size:clamp(38px,5.6vw,68px);line-height:1.03;letter-spacing: -.055em;margin:22px 0 0;max-width:15ch;font-weight:500}
.invoice-story .hero h1 em{color:var(--carbon)}
.invoice-story .hero .sub{font-size:clamp(16.5px,1.8vw,19px);line-height:1.55;color:#a3abc4;max-width:46ch;margin:26px 0 0}
.invoice-story .hero .sub b{color:#e6e9f3;font-weight:600}
.invoice-story .hero .cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.invoice-story .btn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 24px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:.18s;border:1px solid transparent}
.invoice-story .btn.prim{background:var(--carbon);color:var(--indigo-deep);font-weight:600}
.invoice-story .btn.prim:hover{background:#a5b1e0}
.invoice-story .btn.ghost{background:transparent;border-color:var(--dark-rule);color:#d5daea}
.invoice-story .btn.ghost:hover{border-color:var(--carbon);color:#fff}
.invoice-story .hero .ea{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7c86a8;display:inline-flex;align-items:center;gap:9px}
.invoice-story .hero .ea .d{width:7px;height:7px;background:var(--carbon);flex:none}
.invoice-story .trail{border:1px solid var(--dark-rule);background:var(--dark-2);padding:clamp(24px,2.6vw,32px)}
.invoice-story .trail .tr-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a93b5;
  border-bottom:1px solid var(--dark-rule);padding-bottom:18px;margin-bottom:6px}
.invoice-story .trail .tr-head b{color:#e2e6f2;font-weight:600}
.invoice-story .trail .row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;
  font-family:var(--mono);font-size:12px;line-height:1.5;padding:13px 0;border-bottom:1px dashed rgba(141,154,209,.18)}
.invoice-story .trail .row .st{color:var(--carbon);white-space:nowrap}
.invoice-story .trail .row .ev{color:#c3c9dd;overflow-wrap:anywhere}
.invoice-story .trail .row .sub2{display:block;color:#6f7899;font-size:11px;margin-top:3px}
.invoice-story .trail .stamp{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo-deep);
  background:var(--carbon);display:inline-block;padding:8px 14px;font-weight:600}
.invoice-story .trail .tr-note{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#606a8c;margin:18px 0 0}
.invoice-story .js .trail .row,.invoice-story .js .trail .stamp{opacity:0;transform:translateY(8px)}
.invoice-story .js .trail.play .row,.invoice-story .js .trail.play .stamp{animation:writein .6s ease forwards}
.invoice-story .js .trail.play .row:nth-child(2){animation-delay:.3s}
.invoice-story .js .trail.play .row:nth-child(3){animation-delay:.9s}
.invoice-story .js .trail.play .row:nth-child(4){animation-delay:1.5s}
.invoice-story .js .trail.play .row:nth-child(5){animation-delay:2.1s}
.invoice-story .js .trail.play .stamp{animation-delay:2.8s}
@keyframes writein{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.invoice-story .js .trail .row,.invoice-story .js .trail .stamp{opacity:1;transform:none;animation:none}}
@media(max-width:900px){.invoice-story .hero .wrap{grid-template-columns:1fr}.invoice-story .trail{max-width:560px}}
.invoice-story .head{padding:clamp(64px,9vw,110px) 0 clamp(28px,3vw,40px)}
.invoice-story .head .kick{color:var(--cobalt)}
.invoice-story .head h2{font-size:clamp(30px,4.2vw,50px);margin-top:18px;max-width:24ch}
.invoice-story .head .lede{margin-top:24px;max-width:var(--measure);font-size:19px;line-height:1.6;color:var(--ink-soft)}
.invoice-story .meta{display:flex;gap:34px;flex-wrap:wrap;margin-top:40px;border-top:1px solid var(--ink);padding-top:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.invoice-story .meta b{display:block;color:var(--ink);font-family:var(--sans);text-transform:none;font-size:14px;letter-spacing:0;margin-top:6px;font-weight:600}
@media(max-width:620px){.invoice-story .meta{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}}

.invoice-story section.s{padding:clamp(60px,8vw,100px) 0;border-top:1px solid var(--rule)}
.invoice-story .lead-rule{width:46px;height:2px;background:var(--cobalt);margin:0 0 26px}
.invoice-story .shead{display:flex;align-items:baseline;gap:16px;margin-bottom:34px}
.invoice-story .shead .num{font-family:var(--mono);font-size:13px;color:var(--cobalt);font-weight:500}
.invoice-story .gridn{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(30px,5vw,64px);align-items:start}
@media(max-width:880px){.invoice-story .gridn{grid-template-columns:1fr}}
.invoice-story .gridn h2{max-width:22ch}
.invoice-story .gridn>div>p{max-width:var(--measure)}
.invoice-story .rail{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.invoice-story .rail .note{border-top:2px solid var(--ink);padding-top:14px;margin-bottom:28px}
.invoice-story .rail .note .lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:6px}
.invoice-story .pq{font-family:var(--sans);font-style:italic;font-weight:500;font-size:clamp(23px,3vw,31px);line-height:1.28;color:var(--indigo);
  border-left:2px solid var(--cobalt);padding:6px 0 6px 28px;margin:42px 0;max-width:28ch}
.invoice-story .drudge{border:1px solid var(--rule);background:var(--paper-2);margin-top:40px}
.invoice-story .drudge .dr{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;padding:26px 30px;border-bottom:1px solid var(--rule)}
.invoice-story .drudge .dr:last-child{border-bottom:0}
@media(max-width:680px){.invoice-story .drudge .dr{grid-template-columns:1fr;gap:8px;padding:24px 26px}}
.invoice-story .drudge .dr .k{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--cobalt);font-weight:500}
.invoice-story .drudge .dr .v{font-size:15px;line-height:1.55;color:var(--ink-soft)}
.invoice-story .drudge .dr .v b{color:var(--ink);font-weight:600}
.invoice-story .loop{border:1px solid var(--rule);background:var(--paper-2);padding:clamp(26px,3.4vw,40px);margin-top:44px}
.invoice-story .loop .l-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.invoice-story .loop .l-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media(max-width:640px){.invoice-story .loop .l-inputs{grid-template-columns:1fr}}
.invoice-story .loop .in{border:1px solid var(--rule);background:var(--paper);padding:22px 24px}
.invoice-story .loop .in .sys{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);font-weight:500}
.invoice-story .loop .in .what{font-size:13.5px;line-height:1.5;color:var(--ink);margin-top:8px}
.invoice-story .loop .conn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0;color:var(--ink-faint)}
.invoice-story .loop .conn .line{height:22px;border-left:1px solid var(--rule-2)}
.invoice-story .loop .conn .ct{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-align:center;max-width:44ch;padding:0 12px}
.invoice-story .loop .band{border:1px solid var(--rule-2);background:var(--paper);padding:24px 28px}
.invoice-story .loop .band+.band{border-top:0}
.invoice-story .loop .band .nm{font-family:var(--sans);font-weight:500;font-size:19px;line-height:1.2;color:var(--ink)}
.invoice-story .loop .band .ds{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin-top:7px;max-width:70ch}
.invoice-story .loop .band.act{background:var(--indigo);border-color:var(--indigo)}
.invoice-story .loop .band.act .nm{color:#eef0f8}
.invoice-story .loop .band.act .ds{color:#e7edff}
.invoice-story .loop .band.act .ds b{color:#e6e9f3;font-weight:600}
.invoice-story .loop .l-note{font-size:13px;line-height:1.55;color:var(--ink-soft);border-top:1px solid var(--rule);margin-top:26px;padding-top:20px;max-width:64ch}
.invoice-story .prims{margin:42px 0 0;border-top:1px solid var(--ink)}
.invoice-story .prims .prim{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;padding:28px 0;border-bottom:1px solid var(--rule)}
@media(max-width:680px){.invoice-story .prims .prim{grid-template-columns:1fr;gap:8px;padding:24px 0}}
.invoice-story .prims .prim dt{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--indigo);font-weight:500;margin:0}
.invoice-story .prims .prim dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:62ch}
.invoice-story .prims .prim dd b{color:var(--ink);font-weight:600}
.invoice-story .receipts{background:var(--dark);color:#c3c9dd;padding:clamp(70px,10vw,120px) 0}
.invoice-story .receipts .kick{color:var(--carbon)}
.invoice-story .receipts h2{color:#f2f3f7;font-weight: 800;max-width:22ch;margin-top:18px}
.invoice-story .receipts h2 em{color:var(--carbon)}
.invoice-story .receipts .lede{font-size:17px;line-height:1.6;color:#a3abc4;max-width:60ch;margin:24px 0 0}
.invoice-story .receipts .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);margin-top:44px}
@media(max-width:760px){.invoice-story .receipts .cols{grid-template-columns:1fr}}
.invoice-story .receipts .col{border-top:1px solid var(--dark-rule);padding-top:24px}
.invoice-story .receipts .col h3{color:#eef0f8;font-weight:800}
.invoice-story .receipts .col p{font-size:15px;line-height:1.6;color:#9aa3c0;margin:12px 0 0;max-width:52ch}
.invoice-story .receipts .stub{margin-top:48px;border:1px dashed var(--dark-rule);padding:clamp(26px,3vw,36px);max-width:640px}
.invoice-story .receipts .stub .sk{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a93b5}
.invoice-story .receipts .stub .sl{display:flex;justify-content:space-between;gap:18px;font-family:var(--mono);font-size:12px;color:#c3c9dd;padding:11px 0;border-bottom:1px dashed rgba(141,154,209,.16)}
.invoice-story .receipts .stub .sl:last-of-type{border-bottom:0}
.invoice-story .receipts .stub .sl .k2{color:#7c86a8}
.invoice-story .receipts .stub .sfoot{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#606a8c}
.invoice-story .closing{padding:clamp(72px,10vw,130px) 0;border-top:1px solid var(--rule)}
.invoice-story .closing .kick{color:var(--cobalt)}
.invoice-story .closing h2{font-size:clamp(30px,4.4vw,52px);max-width:20ch;margin-top:18px}
.invoice-story .closing h2 em{color:var(--cobalt)}
.invoice-story .closing p{font-size:18px;color:var(--ink-soft);max-width:52ch;margin:22px 0 0}
.invoice-story .closing .cta{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}
.invoice-story .closing .btn.prim{background:var(--indigo);color:#f0f1f7}
.invoice-story .closing .btn.prim:hover{background:var(--cobalt)}
.invoice-story .closing .btn.ghost{border-color:var(--rule-2);color:var(--ink)}
.invoice-story .closing .btn.ghost:hover{border-color:var(--cobalt);color:var(--indigo)}
.invoice-story .closing .ea-note{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}


.invoice-story { padding-top: var(--header-height); }
.invoice-story .rv { opacity: 1; transform: none; }
.invoice-story .hero h1 { font-size: clamp(48px,5.75vw,86px); font-weight: 800; letter-spacing: -.055em; }
.invoice-story em { font-style: normal; }
.invoice-story h2 { font-size:clamp(38px,4vw,58px); line-height:1.14; letter-spacing: -.055em; font-weight: 800; }
.invoice-story .hero .wrap { padding-block:64px; }
.invoice-story .head { padding-top:64px; }
.invoice-story section.s, .invoice-story .receipts, .invoice-story .closing { padding-block:64px; }
.invoice-story .btn { border-radius:999px; padding:14px 23px; font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:14px; min-height:44px; }
.invoice-story .hero .ea, .invoice-story .trail .tr-note { color:#b0b8d0; }
.invoice-story .trail .row .sub2, .invoice-story .trail .tr-head, .invoice-story .receipts .stub .sk, .invoice-story .receipts .stub .sl .k2, .invoice-story .receipts .stub .sfoot { color:#adb6d3; }
@media(max-width:680px){.invoice-story .hero .wrap { padding-block:44px; }.invoice-story section.s, .invoice-story .receipts, .invoice-story .closing {padding-block:44px;}.invoice-story .trail .row{grid-template-columns:1fr;gap:4px;}.invoice-story .gridn h2 {max-width:none;}.invoice-story .hero .sub {font-size:17px;}}

html[data-theme="dark"] .invoice-story { --paper:#131417; --paper-2:#212328; --ink:#f7f8fa; --ink-soft:#dfe4ed; --ink-faint:#bbc1cb; --rule:#45484f; --rule-2:#6a7280; --cobalt:#a2b7ff; --indigo:#9dafea; }
html[data-theme="dark"] .invoice-story .loop .band.act { background:#2b3560; }
html[data-theme="dark"] .invoice-story .closing .btn.prim { background:#9dafea; color:#151827; }