/* ZNEP: what Tailwind does not generate (gradient, fields, details). Inspired by the Stripe style, without its brand. */
:root { --blurple: #635BFF; --ink: #0A2540; --slate: #425466; --bg: #F6F9FC; --line: #E3E8EE; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "cv11", "ss01"; color: var(--ink); }
h1, h2, h3, .font-display { letter-spacing: -0.02em; }
.tabular-nums, td, .num { font-variant-numeric: tabular-nums; }

/* the gradient band (skewed), on the home page, the authentication pages and the final CTA */
.zg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.zg::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: -40%; height: 120%;
  transform: skewY(-12deg); transform-origin: 0;
  background:
    radial-gradient(40% 60% at 15% 65%, #7C6CFF 0%, rgba(124,108,255,0) 70%),
    radial-gradient(35% 55% at 45% 40%, #22D3EE 0%, rgba(34,211,238,0) 70%),
    radial-gradient(35% 60% at 72% 70%, #F472B6 0%, rgba(244,114,182,0) 70%),
    radial-gradient(30% 50% at 92% 35%, #FBBF24 0%, rgba(251,191,36,0) 70%),
    linear-gradient(120deg, #635BFF, #8B5CF6 45%, #EC4899 80%, #F59E0B);
  background-size: 160% 160%; animation: zgMove 18s ease-in-out infinite alternate;
}
.zg.zg-soft::before { opacity: .9; }
@keyframes zgMove { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .zg::before { animation: none; } }
.zg-strip { position: absolute; inset: auto 0 0 0; height: 140px; transform: skewY(-12deg); transform-origin: 100%; background: var(--bg); }

/* app: fields, buttons, details */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { transition: box-shadow .15s, border-color .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blurple) !important; box-shadow: 0 0 0 3px rgba(99,91,255,.18) !important; }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font-size: 11px; color: #697386; background: #fff; }
.z-menu { display: none; }
details[open] > .z-menu { display: block; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.z-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .z-scroll::-webkit-scrollbar-thumb { background: #C1C9D2; border-radius: 999px; }
.z-code { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.7; }
.z-code .k { color: #FF7AB2; } .z-code .s { color: #7EE787; } .z-code .n { color: #79C0FF; } .z-code .c { color: #8792A2; } .z-code .p { color: #C9D1D9; }
.zjs .z-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.zjs .z-reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .z-reveal { opacity: 1; transform: none; transition: none; } }
@media print { .z-noprint, aside, header { display: none !important; } }
/* hero: the gradient band ends obliquely (lower on the left), the content stays entirely on the gradient */
.zg.zg-hero::before { top: -80%; height: 168%; transform-origin: 100% 0; }
.zg.zg-flat::before { transform: none; top: 0; height: 100%; left: 0; right: 0; }

/* ---- public pages after the Stripe Invoicing page: column guides, angled band, buttons, pills ---- */
:root { --guide: rgba(66,71,112,.10); }
.z-page { position: relative; overflow-x: clip; }
.z-wrap { width: calc(100% - 40px); max-width: 1080px; margin: 0 auto; }
.z-guides { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(100% - 40px); max-width: 1080px; transform: translateX(-50%); z-index: 1; pointer-events: none;
  background-image: linear-gradient(var(--guide), var(--guide)), linear-gradient(to bottom, var(--guide) 50%, transparent 0), linear-gradient(to bottom, var(--guide) 50%, transparent 0), linear-gradient(to bottom, var(--guide) 50%, transparent 0), linear-gradient(var(--guide), var(--guide));
  background-size: 1px 100%, 1px 8px, 1px 8px, 1px 8px, 1px 100%; background-repeat: no-repeat, repeat-y, repeat-y, repeat-y, no-repeat;
  background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0; }
@media (max-width: 1023px) { .z-guides { background-size: 1px 100%, 0 0, 1px 8px, 0 0, 1px 100%; } }
@media (max-width: 639px) { .z-guides { background-size: 1px 100%, 0 0, 0 0, 0 0, 1px 100%; } }
.z-dash-b { background-image: linear-gradient(to right, var(--guide) 50%, transparent 0); background-size: 8px 1px; background-repeat: repeat-x; background-position: 0 100%; }
/* the accent line of the column titles sits on the guide (the columns have 16px padding) */
.z-bar { position: relative; }
.z-bar::before { content: ""; position: absolute; left: -16px; top: .2em; bottom: .2em; width: 1px; background: var(--blurple); }
.z-bar-dark::before { background: #A8A3FF; }
/* hero: light background, the band rises to the right, white below it */
.z-hero { position: relative; overflow: hidden; background: var(--bg); }
.z-band { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; transform: skewY(-12deg); transform-origin: 0 100%; z-index: 2; }
.z-band::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(40% 80% at 12% 60%, #7C6CFF 0%, rgba(124,108,255,0) 70%), radial-gradient(30% 90% at 40% 40%, #22D3EE 0%, rgba(34,211,238,0) 70%), radial-gradient(35% 90% at 68% 65%, #F472B6 0%, rgba(244,114,182,0) 70%), radial-gradient(30% 90% at 92% 40%, #FBBF24 0%, rgba(251,191,36,0) 70%), linear-gradient(100deg, #635BFF, #8B5CF6 40%, #EC4899 75%, #F59E0B);
  background-size: 160% 160%; animation: zgMove 18s ease-in-out infinite alternate; }
.z-band::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1400px; background: #fff; }
@media (max-width: 1023px) { .z-band { height: 130px; } .z-auth .z-band { height: 110px; } }
@media (prefers-reduced-motion: reduce) { .z-band::before { animation: none; } }
/* developers: navy, with the oblique top edge */
.z-dev { background: #0A2540; clip-path: polygon(0 120px, 100% 0, 100% 100%, 0 100%); margin-top: -40px; }
@media (max-width: 1023px) { .z-dev { clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%); } }
/* pill buttons with the arrow */
.z-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px 0 16px; border-radius: 999px; background: var(--blurple); color: #fff; font-size: 15px; font-weight: 600; transition: background .15s; white-space: nowrap; }
.z-btn:hover { background: var(--ink); }
.z-btn-lg { height: 42px; padding: 0 18px 0 20px; font-size: 16px; }
.z-btn-light { background: #fff; color: var(--ink); }
.z-btn-light:hover { background: #E3E8EE; }
.z-link { display: inline-flex; align-items: center; color: var(--blurple); font-weight: 600; font-size: 15px; white-space: nowrap; }
.z-link:hover { color: var(--ink); }
.z-arr { margin-left: 7px; stroke: currentColor; stroke-width: 2; fill: none; overflow: visible; }
.z-arr .l { opacity: 0; transition: opacity .15s; }
.z-arr .h { transition: transform .15s; }
a:hover .z-arr .l { opacity: 1; }
a:hover .z-arr .h { transform: translateX(3px); }
/* checks, pills and duotone icons */
.z-ok { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; border-radius: 999px; display: inline-grid; place-items: center; background: #ECEAFF; color: var(--blurple); font-size: 11px; }
.z-ok-full { margin-top: 0; background: var(--blurple); color: #fff; }
.z-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.z-pill-ok { background: #D7F7C2; color: #05690D; } .z-pill-warn { background: #FCEDB9; color: #A82C00; } .z-pill-bad { background: #FFE7F2; color: #B3093C; }
.z-pill-info { background: #CFF5F6; color: #0055BC; } .z-pill-gray { background: #EEF2F7; color: #4F566B; }
.z-ico { font-size: 36px; line-height: 1; display: inline-block; -webkit-background-clip: text; background-clip: text; color: transparent; }
.z-g1 { background-image: linear-gradient(135deg, #635BFF 30%, #22D3EE); } .z-g2 { background-image: linear-gradient(135deg, #8B5CF6 30%, #F472B6); }
.z-g3 { background-image: linear-gradient(135deg, #EC4899 25%, #FBBF24); } .z-g4 { background-image: linear-gradient(135deg, #22D3EE 20%, #635BFF); }

/* ---- app pages: one visual system over the older markup (radii, labels, titles, fields, tables), as on the home page ---- */
.z-app .rounded-2xl, .z-app .rounded-xl { border-radius: 8px; }
.z-app button.rounded-xl, .z-app a.rounded-xl, .z-app input.rounded-xl, .z-app select.rounded-xl, .z-app textarea.rounded-xl, .z-app button.rounded-lg, .z-app a.rounded-lg { border-radius: 6px; }
.z-app input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .z-app select, .z-app textarea { border-color: #D5DBE1; font-size: 14px; }
.z-app .font-bold, .z-app .font-extrabold { font-weight: 600; }
.z-app .uppercase { text-transform: none; letter-spacing: 0; }
.z-app label.uppercase, .z-app div.uppercase, .z-app span.uppercase, .z-app p.uppercase { font-size: 13px; font-weight: 500; color: #3C4257; }
.z-app thead th, .z-app thead td { font-size: 13px; font-weight: 600; color: #1A1F36; text-transform: none; letter-spacing: 0; }
.z-app thead tr, .z-app thead { background: transparent; }
.z-app h1.text-\[22px\], .z-app h1.text-xl, .z-app h1.text-\[24px\] { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.z-app h2.font-display, .z-app h3.font-display { font-weight: 600; }
.z-app .bg-emerald-600 { box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.z-app .efld { border-radius: 6px; border-color: #D5DBE1; font-size: 14px; }
.z-app .elbl { font-size: 13px; font-weight: 500; color: #3C4257; }
.z-app .esec { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
/* shared components: fields, labels, buttons (auth pages, public invoice link, forms) */
.z-lbl { display: block; font-size: 14px; font-weight: 500; color: #3C4257; }
.z-in { display: block; width: 100%; height: 40px; margin-top: 6px; padding: 0 12px; border-radius: 6px; background: #fff; border: 1px solid #D5DBE1; font-size: 15px; color: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.z-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 6px; background: var(--blurple); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 1px 1px rgba(0,0,0,.12); transition: background .15s; }
.z-b:hover { background: #5147E8; }
.z-alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; font-size: 14px; }
.z-alert-bad { background: #FFE7F2; color: #B3093C; } .z-alert-ok { background: #D7F7C2; color: #05690D; }
/* auth pages: light, with the guides and the band at the bottom */
.z-auth { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
.z-auth .z-band { top: auto; bottom: -40px; height: 200px; transform-origin: 0 100%; }
.z-auth .z-band::after { display: none; }
.z-app .fld, .z-app .lin-input { border-radius: 6px; border-color: #D5DBE1; font-size: 14px; color: var(--ink); }
.z-app .lin-input { background: #fff; }
.z-app .lbl { font-size: 13px; font-weight: 500; color: #3C4257; }
.z-app .seclbl { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--ink); }