.invoice-page { --invoice-surface: color-mix(in srgb, var(--bg-secondary) 92%, transparent); --invoice-muted: var(--text-secondary); --invoice-line: color-mix(in srgb, var(--searche-blue) 20%, transparent); }
.invoice-page h1, .invoice-page h2, .invoice-page h3 { letter-spacing: -.035em; }
.invoice-hero { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 4rem; padding: 5rem 0; position: relative; }
.invoice-hero::before { content: ""; position: absolute; width: 28rem; height: 28rem; left: -22rem; top: 8rem; border-radius: 50%; background: var(--searche-blue); opacity: .16; filter: blur(70px); pointer-events: none; }
.invoice-kicker { display: inline-flex; align-items: center; gap: .65rem; color: var(--searche-green); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.invoice-kicker::before { content: ""; width: 1.7rem; height: 2px; background: currentColor; }
.invoice-hero h1 { font-size: clamp(2.5rem, 3.5vw, 3.25rem); line-height: 1.12; margin-bottom: 1.5rem; max-width: 15ch; }
.invoice-hero h1 span { color: var(--searche-blue); }
.invoice-lead { font-size: 1.12rem; color: var(--invoice-muted); max-width: 39rem; }
.invoice-actions { display: flex; align-items: center; gap: 1.5rem; margin: 2rem 0; flex-wrap: wrap; }
.invoice-text-link { font-weight: 700; text-decoration: none; color: var(--text-primary); }
.invoice-text-link:hover { color: var(--searche-blue); }
.invoice-proof-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; color: var(--invoice-muted); font-size: .9rem; }
.invoice-proof-list span { color: var(--searche-green); font-weight: 800; margin-right: .3rem; }

.product-window { border: 1px solid var(--invoice-line); border-radius: 1.15rem; background: #f7f9fc; box-shadow: 0 2rem 5rem rgba(0,0,0,.28); overflow: hidden; color: #172033; }
.product-window-hero { transform: perspective(1100px) rotateY(-4deg) rotateX(1deg); position: relative; }
.product-window-hero::after { content: ""; position: absolute; inset: auto 10% -3rem; height: 5rem; background: var(--searche-blue); filter: blur(50px); opacity: .25; z-index: -1; }
.window-bar { height: 2.5rem; display: flex; align-items: center; gap: .42rem; padding: 0 1rem; background: #fff; border-bottom: 1px solid #e7ebf3; color: #697386; font-size: .7rem; }
.window-bar span { width: .52rem; height: .52rem; border-radius: 50%; background: #d6dce8; }
.window-bar strong { margin-le5ft: auto; margin-right: auto; transform: translateX(-1.2rem); font-weight: 600; }
.app-shell { min-height: 26rem; display: grid; grid-template-columns: 3.8rem 1fr; }
.app-sidebar { background: #171b31; display: flex; align-items: center; flex-direction: column; padding: 1rem .7rem; gap: 1rem; }
.app-mark { display: grid; place-items: center; width: 2rem; height: 2rem; color: #101728; background: linear-gradient(135deg,#04ade1,#90be6d); border-radius: .55rem; font-weight: 900; margin-bottom: 1.1rem; }
.app-sidebar i { width: 1.55rem; height: .45rem; background: #333953; border-radius: 1rem; }
.app-sidebar i.active { background: #7c7df2; }
.app-canvas { padding: 1.5rem; background: #f5f7fb; }
.mock-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }
.mock-heading div { display:grid; gap:.18rem; }.mock-heading small,.form-title small { color:#7c7df2; font-size:.58rem; font-weight:800; letter-spacing:.13em; }.mock-heading strong { font-size:1.05rem; }.mock-heading > span { color:#fff; background:#6466d9; padding:.55rem .75rem; border-radius:.5rem; font-size:.62rem; font-weight:700; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.metric-grid > div { background:#fff; border:1px solid #e6eaf2; border-radius:.75rem; padding:.9rem; display:grid; gap:.25rem; }.metric-grid small { color:#7b8497; font-size:.57rem; }.metric-grid strong { font-size:1rem; }.metric-grid em { color:#159b70; font-size:.53rem; font-style:normal; }.metric-grid em.neutral{color:#f09a34;}
.chart-card { margin-top:.8rem; background:#fff; border:1px solid #e6eaf2; border-radius:.75rem; padding:1rem; }
.chart-title { display:flex; justify-content:space-between; align-items:center; font-size:.65rem; }.chart-title small{color:#8b94a5;}
.bar-chart { height:10.5rem; display:flex; align-items:end; gap:5%; border-bottom:1px solid #dfe4ee; padding:.8rem .6rem 0; background:repeating-linear-gradient(to bottom, transparent 0, transparent 32%, #edf0f5 33%); }
.bar-chart i { width:8%; height:var(--bar); display:block; background:linear-gradient(#7c7df2,#58b9df); border-radius:.3rem .3rem 0 0; }

.invoice-intro, .feature-showcase, .steps-section, .pricing-section { padding: 7rem 0; }
.pricing-section-early { padding-top: 4rem; }
.invoice-intro { text-align:center; }.invoice-intro > h2,.pricing-heading h2 { max-width:18ch; margin:0 auto 1rem; font-size:2.25rem; }.invoice-intro > p,.pricing-heading > p { color:var(--invoice-muted); max-width:44rem; margin:0 auto; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3rem; text-align:left; }.benefit-grid article { padding:2rem; border:1px solid var(--invoice-line); border-radius:1rem; background:var(--invoice-surface); }.benefit-number { color:var(--searche-green); font-size:.75rem; font-weight:800; letter-spacing:.1em; }.benefit-grid h3 { color:var(--text-primary); font-size:1.3rem; margin:.8rem 0 .6rem; }.benefit-grid p { color:var(--invoice-muted); margin:0; font-size:.94rem; }
.section-heading { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:end; margin-bottom:5rem; }.section-heading h2 { font-size:2.25rem; margin:0; }.section-heading > p { color:var(--invoice-muted); margin:0 0 .5rem; }.section-heading.compact { grid-template-columns:1fr; margin-bottom:3rem; }
.feature-row { display:grid; grid-template-columns:.78fr 1.22fr; gap:5rem; align-items:center; margin:0 0 8rem; }.feature-row.reverse { grid-template-columns:1.22fr .78fr; }.feature-row.reverse .feature-copy { order:2; }.feature-copy h3 { font-size:1.75rem; color:var(--text-primary); margin:1rem 0; }.feature-copy p { color:var(--invoice-muted); }.feature-copy ul { padding:0; list-style:none; }.feature-copy li { padding:.5rem 0 .5rem 1.6rem; position:relative; }.feature-copy li::before { content:"✓"; position:absolute; left:0; color:var(--searche-green); font-weight:800; }.feature-tag { color:var(--searche-blue); font-weight:800; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.compact-window { box-shadow:0 1.5rem 4rem rgba(0,0,0,.2); }.invoice-form-mock,.list-mock { padding:1.6rem; min-height:22rem; }.form-title { display:flex; justify-content:space-between; align-items:start; margin-bottom:1.3rem; }.form-title div { display:grid; gap:.25rem; }.form-title strong{font-size:1.05rem}.form-title b{font-size:.58rem;color:#91610f;background:#fff1cf;padding:.35rem .55rem;border-radius:2rem}.field-row{display:grid;grid-template-columns:1.4fr 1fr;gap:.7rem;margin-bottom:1rem}.field-row label{font-size:.58rem;color:#7b8497}.field-row label span{display:block;color:#31394a;background:#fff;border:1px solid #dfe4ec;border-radius:.45rem;padding:.65rem;margin-top:.3rem}.line-table{font-size:.62rem;border:1px solid #e2e6ee;border-radius:.55rem;overflow:hidden}.line-table>div{display:grid;grid-template-columns:2fr .55fr 1fr;gap:.5rem;padding:.7rem;background:#fff;border-bottom:1px solid #edf0f5}.line-table>div:first-child{background:#f0f2f7;color:#737d90}.line-table>div:last-child{border:0}.form-total{text-align:right;margin-top:1.4rem}.form-total small{display:block;color:#7b8497;font-size:.58rem}.form-total strong{font-size:1.25rem}.list-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}.list-toolbar span{border:1px solid #dfe4ec;color:#9aa2b1;background:#fff;border-radius:.45rem;padding:.5rem 1rem;font-size:.58rem}.list-head,.list-mock>div:not(.list-toolbar){display:grid;grid-template-columns:.85fr 1.25fr .75fr .75fr;align-items:center;gap:.5rem;padding:.85rem .55rem;font-size:.58rem;border-bottom:1px solid #e6eaf1}.list-head{color:#7c8495}.list-mock em{font-style:normal;color:#b17217;background:#fff1cf;padding:.3rem .45rem;border-radius:1rem;text-align:center}.list-mock em.paid{color:#167c5c;background:#dff6ed}
.steps-section { border-top:1px solid var(--invoice-line); border-bottom:1px solid var(--invoice-line); }.steps-grid { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }.steps-grid li>span { width:2.6rem;height:2.6rem;display:grid;place-items:center;border:1px solid var(--searche-blue);border-radius:50%;color:var(--searche-blue);font-weight:800; }.steps-grid h3{font-size:1.25rem;color:var(--text-primary);margin:1.2rem 0 .5rem}.steps-grid p{color:var(--invoice-muted);margin:0;font-size:.94rem}
.pricing-heading { text-align:center; margin-bottom:3rem; }.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch; }.price-card { border:1px solid var(--invoice-line);border-radius:1.25rem;padding:2rem;background:var(--invoice-surface);display:flex;flex-direction:column;position:relative; }.price-card.featured { border-color:var(--searche-blue);transform:translateY(-.7rem);box-shadow:0 1.5rem 4rem rgba(4,173,225,.12)}.recommended{position:absolute;right:1rem;top:1rem;color:#101728;background:linear-gradient(135deg,var(--searche-blue),var(--searche-green));border-radius:2rem;padding:.35rem .6rem;font-size:.65rem;font-weight:800}.price-card-head>span{color:var(--invoice-muted);font-size:.75rem}.price-card h3{font-size:2rem;color:var(--text-primary);margin:.55rem 0 1rem}.price-card-head strong{font-size:1.35rem;display:block;padding-bottom:1.5rem;border-bottom:1px solid var(--invoice-line)}.price-card-head small{display:block;font-weight:400;color:var(--invoice-muted);font-size:.73rem;margin-top:.2rem}.price-card ul{list-style:none;padding:1rem 0;flex-grow:1}.price-card li{padding:.48rem 0 .48rem 1.5rem;position:relative;color:var(--invoice-muted);font-size:.88rem}.price-card li::before{content:"✓";position:absolute;left:0;color:var(--searche-green);font-weight:900}.price-cta{display:flex;justify-content:space-between;align-items:center;color:var(--text-primary);font-weight:800;text-decoration:none;border-top:1px solid var(--invoice-line);padding-top:1.2rem}.price-cta span{color:var(--searche-blue);font-size:1.3rem}.price-cta:hover{color:var(--searche-blue)}.pricing-note{text-align:center;color:var(--invoice-muted);font-size:.85rem;margin-top:1.5rem}
.invoice-cta { margin:3rem 0 7rem;padding:3.5rem 4rem;border-radius:1.5rem;background:linear-gradient(125deg,#121f3b,#172c46);display:flex;align-items:center;justify-content:space-between;gap:3rem;position:relative;overflow:hidden;color:#fff}.invoice-cta::after{content:"";position:absolute;width:16rem;height:16rem;border-radius:50%;background:var(--searche-blue);filter:blur(70px);opacity:.2;right:5%;top:-8rem}.invoice-cta>div{max-width:45rem;position:relative;z-index:1}.invoice-cta h2{font-size:2.25rem;color:#fff;margin:0 0 1rem}.invoice-cta p{color:#cad4e7;margin:0}.invoice-cta .btn{position:relative;z-index:1;flex-shrink:0}
@media (max-width: 991px) { .invoice-hero{grid-template-columns:1fr;padding-top:4rem}.product-window-hero{transform:none}.feature-row,.feature-row.reverse{grid-template-columns:1fr;gap:2.5rem}.feature-row.reverse .feature-copy{order:0}.pricing-grid{grid-template-columns:1fr}.price-card.featured{transform:none}.section-heading{grid-template-columns:1fr;gap:1rem}.invoice-cta{align-items:flex-start;flex-direction:column}.app-shell{min-height:22rem} }
@media (max-width: 767px) { .invoice-hero{padding:3.5rem 0 5rem;gap:2.5rem}.invoice-hero h1{font-size:2.35rem}.benefit-grid,.steps-grid{grid-template-columns:1fr}.invoice-intro,.feature-showcase,.steps-section,.pricing-section{padding:5rem 0}.feature-row{margin-bottom:5rem}.metric-grid{grid-template-columns:1fr}.metric-grid>div:nth-child(n+2){display:none}.app-canvas{padding:1rem}.bar-chart{height:8rem}.app-shell{grid-template-columns:3rem 1fr;min-height:18rem}.invoice-form-mock,.list-mock{padding:1rem;min-height:18rem}.field-row{grid-template-columns:1fr}.list-head,.list-mock>div:not(.list-toolbar){grid-template-columns:.9fr 1.2fr .8fr}.list-head>*:nth-child(3),.list-mock>div>*:nth-child(3){display:none}.invoice-cta{padding:2.5rem 1.5rem}.window-bar strong{font-size:.65rem}.price-card{padding:1.5rem} }
@media (prefers-reduced-motion: reduce) { .product-window-hero{transform:none} }


.product-shot { margin: 0; border: 1px solid var(--invoice-line); border-radius: 1.15rem; background: #f7f9fc; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.22); overflow: hidden; }
.product-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-shot-hero { aspect-ratio: 1897 / 867; transform: perspective(1100px) rotateY(-4deg) rotateX(1deg); }
.product-shot-overview { aspect-ratio: 1897 / 867; }
.product-shot-create { aspect-ratio: 8 / 5; position: relative; }
.product-shot-create img { width: 145%; max-width: none; object-position: right 20%; transform: translateX(-31%); }
@media (max-width: 991px) { .product-shot-hero { transform: none; } }
@media (max-width: 767px) { .product-shot-create { aspect-ratio: 4 / 3; } .product-shot-create img { width: 175%; transform: translateX(-43%); } }