.invoice-story { --invoice-ink:#171d1a; --invoice-paper:#f2f1e9; --invoice-orange:#ff6b35; --invoice-ease:cubic-bezier(.22,.8,.2,1); font-family:Arial,Helvetica,sans-serif; }
.invoice-story em { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.invoice-story .invoice-hero { background:var(--invoice-ink); color:var(--invoice-paper); padding:34px var(--edge,5vw) 68px; }
.invoice-hero-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:50px; }
.invoice-hero-top .text-link { color:#bec8b7; font-size:11px; }
.invoice-hero-top .story-kicker { font:9px/1.5 Consolas,"Liberation Mono",monospace; letter-spacing:.1em; color:#a6b39e; margin:0; }
.invoice-story .invoice-hero-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; max-width:1450px; margin:0 auto; }
.invoice-hero-grid > * { min-width:0; }
.invoice-hero .story-copy > .story-kicker { font:9px/1.5 Consolas,"Liberation Mono",monospace; letter-spacing:.08em; color:#b0bfaa; margin-bottom:25px; }
.invoice-hero h1 { margin:0; font-size:clamp(53px,5.9vw,94px); line-height:.99; letter-spacing:-.067em; font-weight:500; }
.invoice-hero h1 em { color:var(--invoice-orange); }
.invoice-lede { max-width:38ch; font-size:15px; line-height:1.7; color:#bcc6b5; margin:28px 0 0; }
.invoice-hero-actions { display:flex; align-items:center; gap:23px; flex-wrap:wrap; margin-top:28px; }
.invoice-hero-actions .text-link { font-size:11px; }
.invoice-hero-note { margin-top:28px; font:10px/1.4 Consolas,"Liberation Mono",monospace; color:#8f9f86; }
.invoice-story .invoice-experiment { padding:0; min-width:0; border:none; background:none; color:var(--invoice-paper); --received-width:80%; --difference-width:20%; }
.invoice-experiment *, .invoice-experiment *::before, .invoice-experiment *::after { box-sizing:border-box; }
.invoice-experiment-top { display:flex; justify-content:space-between; gap:12px; padding:15px 0; border-top:1px solid #f2f1e92f; border-bottom:1px solid #f2f1e92f; font:9px/1.4 Consolas,"Liberation Mono",monospace; letter-spacing:.08em; color:#b4c0ad; }
.invoice-experiment-top > span:first-child::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; background:var(--invoice-orange); }
.invoice-canvas { position:relative; height:355px; margin-top:21px; }
.invoice-source-row { position:absolute; inset:0; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.invoice-source { position:relative; width:31.5%; min-width:0; padding:16px 13px 15px; height:200px; background:var(--invoice-paper); color:var(--invoice-ink); box-shadow:4px 7px 0 #a3ad99,0 17px 24px #0003; transform:translateY(var(--source-y,0)) rotate(var(--source-angle,0deg)) scale(var(--source-scale,1)); transition:transform .9s var(--invoice-ease),opacity .7s ease; }
.invoice-source--order { --source-y:25px; --source-angle:-4deg; }
.invoice-source--receipt { --source-y:4px; --source-angle:1deg; }
.invoice-source--bill { --source-y:28px; --source-angle:4deg; }
.invoice-source-code { display:flex; justify-content:space-between; font:8px/1.4 Consolas,"Liberation Mono",monospace; color:#737e6a; letter-spacing:.04em; }
.invoice-source-code > span { color:var(--invoice-ink); font-size:14px; line-height:.8; }
.invoice-source > p { margin:18px 0 13px; font-size:11px; line-height:1.2; letter-spacing:-.02em; white-space:nowrap; }
.invoice-source > strong { display:block; font-size:clamp(38px,4.7vw,62px); font-weight:500; letter-spacing:-.075em; line-height:1; font-variant-numeric:tabular-nums; }
.invoice-source-unit { display:block; margin-top:5px; font:8px/1.4 Consolas,"Liberation Mono",monospace; color:#59664f; }
.invoice-source-bottom { display:flex; justify-content:space-between; gap:3px; padding-top:13px; margin-top:16px; border-top:1px solid #cbd1c0; font:7px/1.2 Consolas,"Liberation Mono",monospace; }
.invoice-source-bottom > span { color:#77836d; }
.invoice-comparison { position:absolute; left:4%; right:4%; top:250px; opacity:0; transform:translateY(8px); transition:opacity .65s ease,transform .8s var(--invoice-ease); }
.invoice-bar-label { display:flex; justify-content:space-between; font:9px/1.2 Consolas,"Liberation Mono",monospace; color:#b3c0a9; }
.invoice-bar-label b { color:var(--invoice-paper); font-weight:400; }
.invoice-quantity-bar { display:flex; width:100%; height:21px; margin-top:10px; background:#3c4937; }
.invoice-received-bar { display:block; width:var(--received-width); height:100%; background:#c6d0b8; transition:width .55s var(--invoice-ease); }
.invoice-difference-bar { display:block; width:var(--difference-width); height:100%; background:var(--invoice-orange); transition:width .55s var(--invoice-ease); }
.invoice-scale { display:flex; justify-content:space-between; margin-top:7px; font:8px/1.2 Consolas,"Liberation Mono",monospace; color:#819176; }
.invoice-difference-label { display:flex; align-items:center; gap:5px; margin-top:15px; font:10px/1.3 Consolas,"Liberation Mono",monospace; }
.invoice-difference-label b { font-weight:400; }
.invoice-signal-square { display:inline-block; width:6px; height:6px; background:var(--invoice-orange); margin-right:2px; }
.invoice-decision { position:absolute; left:11%; top:73px; width:79%; min-height:244px; padding:20px 22px 15px; background:var(--invoice-paper); border-top:6px solid var(--invoice-orange); color:var(--invoice-ink); box-shadow:0 20px 35px #0004; opacity:0; transform:translateY(20px) rotate(4deg) scale(.94); transition:opacity .55s ease,transform .9s var(--invoice-ease),border-color .4s ease; }
.invoice-decision-label { display:flex; align-items:center; gap:7px; font:9px/1.3 Consolas,"Liberation Mono",monospace; letter-spacing:.05em; }
.invoice-decision-symbol { display:grid; place-items:center; width:17px; height:17px; color:var(--invoice-ink); background:var(--invoice-orange); font-weight:bold; }
.invoice-decision-quantity { display:flex; align-items:center; gap:17px; margin-top:15px; }
.invoice-decision-quantity > strong { font-size:76px; line-height:1; letter-spacing:-.075em; font-weight:500; font-variant-numeric:tabular-nums; }
.invoice-decision-quantity > span { font-size:15px; line-height:1.2; letter-spacing:-.03em; }
.invoice-evidence-links { display:flex; gap:6px; margin-top:9px; }
.invoice-evidence-links > span { padding:5px 8px; border:1px solid #c6cebc; font:8px/1 Consolas,"Liberation Mono",monospace; color:#59664f; }
.invoice-evidence-links b { font-weight:400; }
.invoice-decision > p { max-width:37ch; margin:14px 0; font-size:10px; line-height:1.6; color:#55634c; }
.invoice-human-line { padding-top:10px; border-top:1px solid #c6cebc; font:8px/1.4 Consolas,"Liberation Mono",monospace; }
.invoice-story .invoice-status { min-height:35px; padding:0 0 11px; margin:0; color:#c0cbb8; font-size:11px; line-height:1.5; }
.invoice-current-action { margin:0 0 13px; max-width:57ch; color:#99aa8c; font-size:10px; line-height:1.6; }
.invoice-current-action > span { color:#c0cbb8; margin-right:4px; }
.invoice-story .invoice-stage-controls { display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid #f2f1e92f; padding:10px 0 0; }
.invoice-stage-buttons { display:flex; gap:4px; }
.invoice-experiment button { appearance:none; background:transparent; color:#a8b79e; border:1px solid transparent; min-height:40px; padding:0 9px; font:11px/1.2 Arial,Helvetica,sans-serif; cursor:pointer; touch-action:manipulation; }
.invoice-stage-buttons button > span { font:8px/1.2 Consolas,"Liberation Mono",monospace; color:#819176; margin-right:5px; }
.invoice-stage-buttons button[aria-pressed="true"] { border-color:#f2f1e959; color:var(--invoice-paper); background:#f2f1e907; }
.invoice-stage-buttons button[aria-pressed="true"] > span { color:var(--invoice-orange); }
.invoice-experiment button:hover:not(:disabled) { color:var(--invoice-paper); background:#f2f1e912; }
.invoice-experiment button:disabled { cursor:default; color:#7c8a72; }
.invoice-experiment button:focus-visible, .invoice-experiment input:focus-visible { outline:2px solid var(--invoice-orange); outline-offset:4px; }
.invoice-quantity-control { margin-top:24px; padding-top:18px; border-top:1px solid #f2f1e92f; }
.invoice-quantity-control > label { font-size:12px; color:var(--invoice-paper); }
.invoice-inputs { display:flex; align-items:center; gap:12px; margin-top:12px; }
.invoice-inputs input[type="range"] { flex:1; min-width:0; height:25px; accent-color:var(--invoice-orange); cursor:pointer; }
.invoice-inputs input[type="number"] { width:55px; padding:7px 6px; border:1px solid #748267; border-radius:0; color:var(--invoice-paper); background:transparent; font:12px/1.2 Consolas,"Liberation Mono",monospace; }
.invoice-inputs > span { font:9px/1.3 Consolas,"Liberation Mono",monospace; color:#93a487; }
.invoice-quantity-control > p { font-size:9px; line-height:1.6; margin:10px 0 0; color:#93a487; }
.invoice-experiment[data-step="sources"] .invoice-comparison { opacity:1; transform:none; }
.invoice-experiment[data-step="compare"] .invoice-source { --source-y:4px; --source-angle:0deg; --source-scale:.92; }
.invoice-experiment[data-step="compare"] .invoice-comparison { opacity:1; transform:translateY(-19px); }
.invoice-experiment[data-step="compare"] .invoice-source--receipt { outline:2px solid var(--invoice-orange); outline-offset:5px; }
.invoice-experiment[data-step="decide"] .invoice-source { --source-y:-19px; --source-angle:0deg; --source-scale:.77; opacity:.5; }
.invoice-experiment[data-step="decide"] .invoice-decision { opacity:1; transform:translateY(0) rotate(-1deg) scale(1); }
.invoice-experiment[data-matched="true"] .invoice-decision { border-color:#859573; }
.invoice-experiment[data-matched="true"] .invoice-decision-symbol, .invoice-experiment[data-matched="true"] .invoice-signal-square { background:#aabc98; }
.invoice-story .story-section { padding:85px var(--edge,5vw); }
.invoice-section-intro { display:grid; grid-template-columns:1fr 2.1fr; gap:40px; max-width:1320px; margin:0 auto 38px; }
.invoice-section-intro .story-section-label { padding-top:10px; font:9px/1.5 Consolas,"Liberation Mono",monospace; letter-spacing:.09em; color:#73806a; }
.invoice-story .story-section-heading { margin:0; font-size:clamp(36px,4.9vw,72px); font-weight:500; line-height:1.04; letter-spacing:-.055em; }
.invoice-story .story-body { max-width:59ch; font-size:14px; line-height:1.75; margin:23px 0 0; color:#66715e; }
.invoice-film, .invoice-screen { margin:0 auto; max-width:1320px; }
.invoice-film video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:var(--invoice-ink); }
.invoice-film figcaption, .invoice-screen figcaption { display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; padding:15px 0; font:9px/1.7 Consolas,"Liberation Mono",monospace; color:#717c67; }
.invoice-film figcaption a, .invoice-screen figcaption a { color:var(--invoice-ink); text-decoration:none; }
.invoice-story .invoice-prototype-section { background:#e4e7dc; }
.invoice-screen { padding:14px; background:#d2d9c5; }
.invoice-screen > a, .invoice-screen img { display:block; width:100%; height:auto; }
.invoice-screen figcaption { padding:15px 5px 2px; }
.invoice-verification { display:grid; grid-template-columns:1fr 1.25fr; gap:60px; max-width:1320px; margin:40px auto 0; padding-top:30px; border-top:1px solid #bac4ae; }
.invoice-verification h3 { margin:0; font-size:26px; font-weight:500; line-height:1.2; letter-spacing:-.045em; max-width:20ch; }
.invoice-verification p { margin:0; font-size:12px; line-height:1.8; color:#5c6953; }
.invoice-verification .invoice-limitation { margin-top:20px; padding-left:15px; border-left:2px solid #829374; font-size:11px; }
.invoice-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:1320px; margin:50px auto 0; border-top:1px solid #b8c1ae; }
.invoice-benefits article { padding:28px 28px 28px 0; }
.invoice-benefits article + article { border-left:1px solid #b8c1ae; padding-left:28px; }
.invoice-benefits article > span { font:9px/1.3 Consolas,"Liberation Mono",monospace; letter-spacing:.07em; color:#79866f; }
.invoice-benefits h3 { font-size:27px; line-height:1.15; font-weight:500; letter-spacing:-.045em; margin:32px 0 15px; }
.invoice-benefits p { font-size:12px; line-height:1.8; color:#647159; max-width:34ch; margin:0; }
.invoice-transcript { max-width:1320px; margin:48px auto 0; padding:23px 0; border-top:1px solid #b8c1ae; border-bottom:1px solid #b8c1ae; }
.invoice-transcript summary { display:flex; align-items:center; justify-content:space-between; font-size:13px; cursor:pointer; list-style:none; }
.invoice-transcript summary::-webkit-details-marker { display:none; }
.invoice-transcript summary > span { font-size:23px; }
.invoice-transcript[open] summary > span { transform:rotate(45deg); }
.invoice-transcript > p, .invoice-transcript li { font-size:12px; line-height:1.8; color:#66745b; }
.invoice-transcript > p { margin-top:25px; }
.invoice-transcript ol { max-width:85ch; padding-left:20px; }
.invoice-transcript li + li { margin-top:13px; }
.invoice-story .invoice-walkthrough { display:block; padding:70px var(--edge,5vw) 80px; color:var(--invoice-paper); background:var(--invoice-ink); }
.invoice-walkthrough > .story-kicker { font:9px/1.5 Consolas,"Liberation Mono",monospace; color:#b4c2a8; letter-spacing:.05em; }
.invoice-walkthrough h2 { font-size:clamp(46px,6.8vw,104px); max-width:14ch; font-weight:500; line-height:1; letter-spacing:-.064em; margin:35px 0 25px; }
.invoice-walkthrough h2 em { color:var(--invoice-orange); }
.invoice-walkthrough > p { max-width:55ch; font-size:14px; line-height:1.8; color:#b6c3a8; }
.invoice-walkthrough > .invoice-contact-note { font-size:10px; margin-top:26px; color:#8fa07f; }
.invoice-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; }
.invoice-experiment[data-reduced-motion="true"] *, .invoice-experiment[data-reduced-motion="true"] *::before, .invoice-experiment[data-reduced-motion="true"] *::after { transition:none !important; animation:none !important; }
@media(max-width:1000px) { .invoice-story .invoice-hero-grid { gap:30px; } .invoice-source { padding:14px 10px; } .invoice-source > p { font-size:10px; } .invoice-source-code { font-size:7px; } .invoice-source-bottom { font-size:6px; } .invoice-stage-buttons { gap:1px; } .invoice-experiment button { padding:0 7px; font-size:10px; } .invoice-decision { left:8%; width:84%; padding:17px; } .invoice-decision-quantity > strong { font-size:69px; } .invoice-decision-quantity > span { font-size:13px; } }
@media(max-width:800px) { .invoice-story .invoice-hero { padding-top:25px; padding-bottom:47px; } .invoice-hero-top { margin-bottom:35px; } .invoice-story .invoice-hero-grid { grid-template-columns:1fr; gap:48px; } .invoice-hero h1 { font-size:clamp(56px,10vw,84px); max-width:12ch; } .invoice-lede { font-size:14px; max-width:46ch; } .invoice-experiment { max-width:620px; width:100%; margin:0 auto; } .invoice-source { padding:16px 13px 15px; } .invoice-source > p { font-size:12px; } .invoice-source > strong { font-size:58px; } .invoice-source-code { font-size:8px; } .invoice-source-bottom { font-size:7px; } .invoice-decision { left:11%; width:79%; padding:20px 22px 15px; } .invoice-decision-quantity > strong { font-size:76px; } .invoice-stage-buttons { gap:4px; } .invoice-experiment button { padding:0 9px; font-size:11px; } .invoice-story .story-section { padding-top:58px; padding-bottom:58px; } .invoice-section-intro { grid-template-columns:1fr; gap:20px; margin-bottom:30px; } .invoice-section-intro .story-section-label { padding-top:0; } .invoice-story .story-section-heading { font-size:48px; } .invoice-verification { gap:30px; } .invoice-benefits h3 { font-size:23px; } .invoice-benefits article { padding-right:20px; } .invoice-benefits article + article { padding-left:20px; } .invoice-story .invoice-walkthrough { padding-top:53px; padding-bottom:58px; } }
@media(max-width:500px) { .invoice-hero-top > .story-kicker { font-size:7px; } .invoice-hero-top .text-link { font-size:10px; } .invoice-hero .story-copy > .story-kicker { font-size:8px; } .invoice-hero h1 { font-size:57px; } .invoice-hero-actions { gap:18px; } .invoice-hero-actions .button { padding:14px 16px; gap:13px; font-size:11px; } .invoice-hero-actions .text-link { font-size:10px; } .invoice-experiment-top { font-size:8px; letter-spacing:.04em; } .invoice-canvas { height:316px; margin-top:18px; } .invoice-source { height:174px; padding:12px 9px; box-shadow:3px 5px 0 #a3ad99,0 14px 20px #0003; } .invoice-source > p { font-size:9px; margin-top:17px; margin-bottom:12px; } .invoice-source > strong { font-size:40px; } .invoice-source-code { font-size:6px; } .invoice-source-code > span { font-size:11px; } .invoice-source-unit { font-size:6px; } .invoice-source-bottom { font-size:5px; padding-top:11px; margin-top:14px; } .invoice-comparison { top:214px; left:3%; right:3%; } .invoice-bar-label { font-size:8px; } .invoice-quantity-bar { height:19px; } .invoice-difference-label { font-size:9px; margin-top:14px; } .invoice-decision { left:6%; top:63px; width:89%; min-height:233px; padding:17px 18px 14px; } .invoice-decision-label { font-size:8px; } .invoice-decision-quantity > strong { font-size:67px; } .invoice-decision-quantity > span { font-size:13px; } .invoice-decision > p { font-size:9px; } .invoice-stage-buttons { gap:1px; } .invoice-experiment button { font-size:10px; padding:0 7px; } .invoice-stage-buttons button > span { font-size:7px; margin-right:3px; } .invoice-story .invoice-status { font-size:10px; min-height:43px; } .invoice-quantity-control { margin-top:18px; padding-top:15px; } .invoice-quantity-control > label { font-size:11px; } .invoice-quantity-control > p { font-size:8px; } .invoice-story .story-section-heading { font-size:38px; } .invoice-story .story-body { font-size:12px; } .invoice-film figcaption, .invoice-screen figcaption { font-size:8px; } .invoice-screen { padding:7px; } .invoice-verification { grid-template-columns:1fr; gap:20px; margin-top:29px; } .invoice-verification h3 { font-size:26px; max-width:26ch; } .invoice-benefits { grid-template-columns:1fr; margin-top:30px; } .invoice-benefits article, .invoice-benefits article + article { padding:25px 0; border-left:0; border-bottom:1px solid #b8c1ae; } .invoice-benefits h3 { font-size:28px; margin-top:20px; } .invoice-benefits p { max-width:43ch; } .invoice-transcript { margin-top:31px; } .invoice-transcript summary { font-size:12px; } .invoice-story .invoice-walkthrough h2 { font-size:49px; } .invoice-walkthrough > p { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .invoice-experiment *, .invoice-experiment *::before, .invoice-experiment *::after { transition:none !important; animation:none !important; } }