/* StressInvoice — main stylesheet (moved out of index.html so a strict Content-Security-Policy is possible). */
:root{--bg:#090909;--paper:#f3eee6;--acid:#caff4d;--rose:#ff657d;--violet:#a896ff;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}[hidden]{display:none!important}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:#090909;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
body:before{content:"";position:fixed;inset:-20vh -40vw auto;height:70vh;z-index:-2;background:radial-gradient(circle at 45% 30%,rgba(255,93,120,.24),transparent 42%),radial-gradient(circle at 70% 25%,rgba(183,167,255,.17),transparent 33%);filter:blur(12px);pointer-events:none}
body:after{content:"";position:fixed;inset:0;z-index:-1;opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
button,input,select{font:inherit}
button{appearance:none;-webkit-appearance:none;touch-action:manipulation;cursor:pointer}
.app{width:min(100%,560px);margin:auto;padding:0 18px calc(105px + env(safe-area-inset-bottom))}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;background:linear-gradient(to bottom,rgba(9,9,9,.96),rgba(9,9,9,.76),rgba(9,9,9,0));backdrop-filter:blur(14px)}
.brand{font-weight:950;letter-spacing:-.04em;color:#fff;text-decoration:none}.brand i{font-style:normal;color:var(--acid)}
.micro{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#807d78}

/* Hero */
.hero{min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center;padding:2vh 0 12vh}
.kicker{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#9d9993;margin-bottom:15px}.kicker:before{content:"";width:28px;height:1px;background:var(--acid)}
h1{font-size:clamp(56px,15vw,86px);line-height:.87;letter-spacing:-.078em;margin:0;font-weight:950}
.whatDid{display:block;color:#070707;-webkit-text-stroke:1.6px rgba(255,255,255,.98);text-shadow:0 0 16px rgba(255,255,255,.06)}
.costGradient{display:block;background:linear-gradient(100deg,#ff3b5c 0%,#ff7a18 34%,#ffd84d 68%,#caff4d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(255,122,24,.14)) drop-shadow(0 0 12px rgba(202,255,77,.10))}
.sub{font-size:16px;line-height:1.45;color:#aaa7a1;margin:23px 0 24px;max-width:430px}
.choice2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.relation{border:1px solid var(--line);background:rgba(20,20,20,.72);backdrop-filter:blur(10px);color:#fff;border-radius:18px;padding:16px;text-align:left;min-height:80px;transition:.16s}
.relation strong{display:block;font-size:15px}.relation small{display:block;color:#87847f;font-size:11px;line-height:1.3;margin-top:5px}
.relation.active{background:var(--paper);border-color:var(--paper);color:#111;transform:translateY(-1px)}.relation.active small{color:#706a64}
.primary{width:100%;border:0;border-radius:18px;background:var(--acid);color:#0c0c0c;font-weight:950;padding:17px 18px;margin-top:10px;display:flex;align-items:center;justify-content:space-between}
.hint{text-align:center;font-size:10px;color:#66615b;margin-top:10px}

/* Sample invoice */
.exampleWrap{margin-top:18px}.exampleEyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8b877f;margin:0 0 10px}
.sampleInvoice{position:relative;background:#f3eee6;color:#111;border-radius:26px;padding:18px 16px 20px;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,.28)}
.sampleInvoice:before{content:"";display:block;height:6px;margin:-18px -16px 16px;background:#d9decf}
.sampleTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid #cfd3c5}
.sampleTitle{font-size:38px;line-height:.9;letter-spacing:-.06em;font-weight:950}
.sampleStamp{border:2px solid #b24b3b;color:#b24b3b;border-radius:8px;padding:8px 10px;text-align:center;font-size:10px;font-weight:950;line-height:1.05;transform:rotate(-6deg);white-space:nowrap}
.sampleMeta{padding:14px 0 12px}.sampleMetaLabel{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#706c63;margin-bottom:8px}
.sampleMetaValue{font-size:16px;font-weight:900;line-height:1.35}
.sampleHeadRow{display:grid;grid-template-columns:1fr auto;background:#dde2d3;color:#68655d;border-radius:0;padding:12px 12px 11px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}
.sampleRow{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px 6px 14px 0;border-bottom:2px dashed #cfd3c5}
.sampleRowTitle{font-size:16px;font-weight:900;line-height:1.16}.sampleRowSub{font-size:11px;color:#757067;line-height:1.45;margin-top:6px}
.sampleRateNote{margin-top:7px}
.sampleAmt{font-size:15px;font-weight:500;letter-spacing:.02em;white-space:nowrap;padding-top:10px}
.sampleTotal{display:flex;justify-content:space-between;align-items:flex-end;padding:22px 2px 14px}
.sampleTotalLabel{font-size:13px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}.sampleTotalValue{font-size:46px;font-weight:950;letter-spacing:-.06em}
.sampleFoot{padding-top:14px;border-top:2px solid #cfd3c5;text-align:center;color:#57544d}
.sampleFootMain{font-size:12px;line-height:1.55;letter-spacing:.06em}.sampleFootSub{font-size:11px;margin-top:6px;font-weight:900}
.exampleCTA{margin-top:14px}.exampleMicro{text-align:center;font-size:11px;color:#8f8a84;margin-top:9px;line-height:1.4}

/* Wizard */
.wizard{display:none}.wizard.open{display:block}.hero.closed{display:none}
.progressBox{position:sticky;top:64px;z-index:40;padding:8px 0 12px;background:linear-gradient(to bottom,rgba(9,9,9,.98),rgba(9,9,9,.88),rgba(9,9,9,0))}
.progressTop{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#77736d;margin-bottom:7px}
.track{height:4px;background:#222;border-radius:99px;overflow:hidden}
.bar{height:100%;width:25%;background:linear-gradient(90deg,var(--rose),var(--violet),var(--acid));transition:width .25s}
.stage{display:none;padding-top:8px}.stage.active{display:block;animation:up .22s ease both}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sectionNo{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--acid);margin-bottom:10px}
.stage h2{font-size:39px;line-height:.96;letter-spacing:-.055em;margin:0 0 9px}
.lede{font-size:13px;line-height:1.45;color:#908d87;margin:0 0 16px}
.paper{background:var(--paper);color:#111;border-radius:24px;padding:17px}
.label{display:block;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#716b65;margin:2px 0 7px}
.plainInput{width:100%;border:1px solid #d4cdc2;background:#fff;border-radius:14px;padding:14px;color:#111;outline:0;font-size:16px}
.miniLead{font-size:10px;color:#817b74;margin-top:7px}.miniLead.spaced{margin-bottom:10px}
.divider{height:1px;background:#d4cdc2;margin:16px 0}

/* Cards */
.list{display:grid;gap:8px}
.item,.chaos{border:1px solid transparent;border-radius:19px;padding:14px;user-select:none;-webkit-user-select:none}
.item{background:var(--paper);color:#111}.item.selected{background:#fff;border-color:#111}
.itemToggle{display:block;width:100%;border:0;background:transparent;color:inherit;padding:0;margin:0;text-align:left;border-radius:12px}
.head{display:flex;gap:11px;align-items:flex-start;width:100%}
.check{width:26px;height:26px;border-radius:8px;border:1.5px solid #2b2b2b;background:transparent;display:grid;place-items:center;flex:0 0 auto}
.selected .check{background:#111;color:#fff}.selected .check:after{content:"✓";font-size:13px;font-weight:950}
.copy{flex:1;min-width:0}.title{display:block;font-size:14px;font-weight:900}
.desc{display:block;font-size:10.5px;color:#77716b;line-height:1.35;margin-top:3px}
.sideTag{font-size:9px;color:#8b857f;font-weight:900;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.detail{display:none;margin:11px 0 0 37px}.selected .detail{display:block}
.inputWrap{display:flex;align-items:center;border:1px solid #d4cdc2;background:#fff;border-radius:14px;overflow:hidden}
.inputWrap input{border:0;outline:0;background:transparent;min-width:0;width:100%;padding:14px;color:#111;font-size:16px}
.inputWrap span{padding:0 12px 0 6px;font-size:10px;color:#78736d;white-space:nowrap}
.inputWrap.dark{background:#171717;border-color:#393939}.inputWrap.dark input{color:#fff}.inputWrap.dark span{color:#8d8982}
.chaosIcon{font-size:21px;width:26px;flex:0 0 auto}
.chaos{background:linear-gradient(145deg,rgba(22,22,22,.90),rgba(15,15,15,.90));border-color:#282828;backdrop-filter:blur(12px)}
.chaos.selected{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid) inset}
.chaos .check{border-color:#4b4944}.chaos.selected .check{background:var(--acid);border-color:var(--acid);color:#111}
.chaos .desc{color:#85827d}.chaos .sideTag{color:#7d7973}
.darkInput{width:100%;background:#171717;border:1px solid #393939;color:#fff;border-radius:12px;padding:12px;outline:0;font-size:16px}
.severity{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.severity button{border:1px solid #333;background:#131313;color:#8e8b85;border-radius:13px;padding:10px 4px;font-size:10px;font-weight:900}
.severity button.active{background:var(--paper);color:#111;border-color:var(--paper)}
.custom{border:1px dashed #41403c;border-radius:18px;padding:14px;margin-top:9px}
.custom strong{font-size:13px}.custom p{font-size:10px;color:#77746f;margin:4px 0 9px}
.customGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:7px;margin-top:7px}
.customEntry{border-top:1px solid #292929;padding-top:10px;margin-top:10px}
.customEntry:first-child{border-top:0;padding-top:0;margin-top:0}
.customEntryTop{display:flex;gap:8px;align-items:center}.customEntryTop .customDesc{flex:1}
.removeCustom{border:0;background:transparent;color:#77746f;font-size:10px;font-weight:900;padding:8px 2px;white-space:nowrap}
.removeCustom.ghosted{visibility:hidden}
.addCustom{width:100%;margin-top:10px;border:1px solid #3d4039;background:#151714;color:#caff4d;border-radius:12px;padding:11px;font-size:10px;font-weight:950;letter-spacing:.03em}
.hourValue{display:flex;align-items:center;border:1px solid #d4cdc2;background:#fff;border-radius:14px;overflow:hidden}
.hourValue .prefix{font-weight:950;padding-left:13px;color:#111}
.hourValue input{border:0;outline:0;min-width:0;width:100%;padding:14px 7px;color:#111;background:transparent;font-size:16px}
.hourValue .suffix{padding-right:13px;color:#77716b;font-size:11px;white-space:nowrap}

/* Validation */
.invalid,.inputWrap:has(.invalid),.hourValue:has(.invalid){border-color:#e0405c!important;box-shadow:0 0 0 2px rgba(224,64,92,.25)}
.fieldError{display:none;color:#e0405c;font-size:10.5px;font-weight:800;margin-top:6px}.fieldError.show{display:block}

.navButtons{display:grid;grid-template-columns:.34fr 1fr;gap:8px;margin:14px 0 26px}.navButtons.single{grid-template-columns:1fr}
.back,.next{border-radius:16px;padding:15px;font-weight:900}
.back{border:1px solid #333;background:#111;color:#aaa6a0}.next{border:0;background:var(--acid);color:#111}

/* Invoice */
.invoiceWrap{position:relative}
.invoice{background:var(--paper);color:#111;border-radius:24px;padding:18px;overflow:hidden}
.invoice:before{content:"";display:block;height:5px;margin:-18px -18px 15px;background:linear-gradient(90deg,var(--rose),var(--violet),var(--acid))}
.invTop{display:flex;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid #cec7bd}
.invBrand{font-size:10px;letter-spacing:.13em;font-weight:950}.invTitle{font-size:25px;letter-spacing:-.045em;font-weight:950;margin-top:4px}
.stamp{border:1.4px solid #111;border-radius:8px;padding:5px 7px;font-size:8px;font-weight:950;transform:rotate(4deg);text-align:center}
.meta{font-size:9px;color:#6c675f;padding:11px 0}
.row{display:grid;grid-template-columns:1fr auto;gap:8px;border-bottom:1px dashed #d0c9bf;padding:10px 0;font-size:10px}
.row b{font-size:10px}.row small{display:block;color:#858078;margin-top:2px}
.amount{font-size:10px;font-weight:950}
.invoice.locked .amount,.invoice.locked .totalMoney{filter:blur(7px);user-select:none}
.total{display:flex;justify-content:space-between;align-items:flex-end;padding-top:14px}
.total span:first-child{font-size:10px;letter-spacing:.08em;font-weight:950}
.totalMoney{font-size:31px;font-weight:950;letter-spacing:-.055em}
.invNote{font-size:8px;color:#777067;margin-top:10px;line-height:1.4}
.lock{position:absolute;right:14px;bottom:14px;background:rgba(10,10,10,.94);border:1px solid #2e2e2e;border-radius:999px;color:#fff;padding:8px 10px;font-size:9px;font-weight:900}

/* Paywall */
.paywall{margin-top:10px;border:1px solid #282828;background:linear-gradient(155deg,rgba(23,23,23,.92),rgba(13,13,13,.94));backdrop-filter:blur(12px);border-radius:23px;padding:16px}
.payTop{display:flex;justify-content:space-between;gap:12px}.payTop h3{font-size:26px;line-height:1;letter-spacing:-.045em;margin:0}
.price{font-size:27px;font-weight:950;color:var(--acid)}
.paywall p{font-size:11px;color:#88857f;line-height:1.4}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}
.benefit{border:1px solid #292929;border-radius:11px;padding:8px 9px;font-size:9px;color:#b9b5ae}
.payButton{width:100%;border:0;background:var(--acid);color:#111;border-radius:14px;padding:15px;margin-top:9px;font-weight:950}
.payButton:disabled{opacity:.6;cursor:wait}
.error{display:none;border:1px solid rgba(255,101,125,.45);background:rgba(255,101,125,.1);color:#ffb3c0;border-radius:12px;padding:10px 12px;font-size:11px;line-height:1.45;margin-bottom:10px}.error.show{display:block}
.notice{display:none;border:1px solid rgba(202,255,77,.28);background:rgba(202,255,77,.08);color:#dfe9c7;border-radius:12px;padding:10px 12px;font-size:11px;line-height:1.45;margin-bottom:10px}.notice.show{display:block}
.secure{text-align:center;font-size:8px;color:#5f5c57;margin-top:7px;line-height:1.5}

/* After unlock */
.after{display:none;margin-top:10px}.after.show{display:block}
.afterTitle{font-size:24px;font-weight:950;letter-spacing:-.04em}
.shareGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.shareBtn{border:1px solid #d5cec4;background:#fff;color:#111;border-radius:14px;padding:12px;font-size:10px;font-weight:900;min-height:54px}
.receiptShare{padding:0;overflow:hidden;text-align:left;background:#111;border-color:#111;min-height:132px;position:relative;grid-column:1/-1}
.receiptShare .textPreview{display:block;width:100%;height:96px;object-fit:cover;object-position:top;background:#ebe5dc}
.receiptShare .shareLabel{display:flex;align-items:center;justify-content:space-between;color:#fff;padding:10px 12px;font-size:11px;font-weight:950}
.receiptShare .shareLabel:after{content:'↗';color:var(--acid);font-size:14px}
.channelShare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.channelBtn{border:0;border-radius:14px;min-height:48px;padding:12px 10px;font-weight:950;font-size:10px;display:flex;align-items:center;justify-content:center;gap:7px}
.channelBtn.insta{color:#fff;background:linear-gradient(120deg,#833ab4,#fd1d1d,#fcb045)}
.channelBtn.tiktok{color:#fff;background:linear-gradient(135deg,#25f4ee 0%,#111 45%,#fe2c55 100%)}
.channelBtn .channelIcon{font-size:15px}
.copyLink{display:block;width:100%;border:0;background:transparent;color:#69645e;padding:12px 4px 2px;font-size:9px;font-weight:900;text-decoration:underline;text-underline-offset:3px}
.sharePrivacy{margin-top:12px;border:1px solid #d8d0c5;background:#fbf8f2;border-radius:13px;padding:11px;color:#111}
.sharePrivacy label{display:flex;align-items:flex-start;gap:9px;font-size:11px;font-weight:900;line-height:1.3}
.sharePrivacy input{margin-top:1px;accent-color:#111}
.sharePrivacy small{display:block;color:#777067;margin:5px 0 0 25px;font-size:9px;line-height:1.35}
.friendCTA{margin-top:13px}.friendHint{text-align:center;color:#777067;font-size:9px;margin-top:6px}
.legal{font-size:8.5px;color:#57544f;line-height:1.45;margin:18px 2px 0}

/* Fine print + footer */
.finePrint{margin-top:56px;padding:38px 0 12px;border-top:1px solid rgba(202,255,77,.20)}
.fineEyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--acid);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin-bottom:28px}
.fineTitle{font-size:clamp(42px,12vw,64px);line-height:.98;letter-spacing:-.06em;font-weight:950;margin:0 0 22px}
.fineCopy{font-size:17px;line-height:1.65;color:#8f918a;margin:0 0 30px}
.faq{border-top:1px solid #31362e}.faq details{border-bottom:1px solid #31362e}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-size:18px;line-height:1.3;color:#f3f0e9;display:flex;align-items:center;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:23px;line-height:1;color:#a5a69f;font-weight:300;transition:.18s}
.faq details[open] summary:after{content:'–';color:var(--acid)}
.faqAnswer{padding:0 30px 20px 0;font-size:14px;line-height:1.65;color:#8f918a}
.siteFooter{margin-top:54px;padding:30px 0 18px;border-top:1px solid #31362e;display:grid;grid-template-columns:1fr auto;gap:32px 20px;align-items:start}
.footerBrand{font-size:28px;font-weight:950;letter-spacing:-.06em}
.footerTag{font-size:12px;color:#8d8f88;text-align:right;align-self:center}
.footerLink{font-size:12px;color:#8d8f88;text-decoration:none}
.footerNote{font-size:12px;color:#8d8f88;text-align:right}
.footerLinks{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.footerSupport{font-size:12px;color:#b4b5ae;text-decoration:none}
.footerLegalLine{grid-column:1/-1;font-size:10px;line-height:1.6;color:#656760;border-top:1px solid #272b25;padding-top:18px}
.footerLink:hover,.footerSupport:hover{color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
@media(max-width:440px){.siteFooter{grid-template-columns:1fr 1fr}.footerTag,.footerNote{font-size:11px}.fineTitle{font-size:46px}.faq summary{font-size:16px}.footerLinks{gap:7px 11px}}

/* Floating share bar + toast */
.socialFooter.flowHidden{display:none}
.socialFooter{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));z-index:80;width:min(calc(100% - 28px),532px);display:flex;gap:8px;padding:8px;background:rgba(15,15,15,.80);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.11);border-radius:18px;box-shadow:0 14px 50px rgba(0,0,0,.38)}
.socialFooter button{flex:1;border:0;border-radius:11px;background:#202020;color:#d9d6d0;padding:11px 6px;font-size:10px;font-weight:850}
.socialFooter .brandShare{background:var(--paper);color:#111;font-size:9px;line-height:1.05}
.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,20px);background:#fff;color:#111;padding:9px 12px;border-radius:999px;font-size:10px;font-weight:900;opacity:0;pointer-events:none;transition:.2s;z-index:100;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}