@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --ink: #111827;
  --muted: #5f6b85;
  --line: #dde2ec;
  --soft: #f6f7fb;
  --purple: #6541e8;
  --purple-dark: #4b28c7;
  --purple-soft: #eee9ff;
  --orange: #ff9d2e;
  --green: #0ba86b;
  --blue: #3374e0;
  --night: #17132d;
  --paper: #fff;
  --shell: min(1240px, calc(100% - 48px));
  --radius: 22px;
  --shadow: 0 28px 70px rgba(34, 27, 72, .14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; overflow-x: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 'DM Sans', system-ui, sans-serif; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.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; }
.section-shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: fixed; z-index: 100; top: 14px; left: 50%; width: min(1280px, calc(100% - 28px)); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 10px 12px 10px 18px;
  border: 1px solid rgba(218, 217, 230, .82); border-radius: 18px; background: rgba(255, 255, 255, .86); box-shadow: 0 10px 36px rgba(27, 22, 60, .06); backdrop-filter: blur(18px);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.scrolled { background: rgba(255, 255, 255, .96); box-shadow: 0 12px 42px rgba(27, 22, 60, .12); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: Manrope, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.brand b { color: var(--purple); font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 10px; background: var(--purple); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav > a:not(.nav-cta) { padding: 9px 12px; border-radius: 9px; color: #4a556f; font-size: 14px; font-weight: 600; transition: background .2s ease, color .2s ease; }
.site-nav > a:not(.nav-cta):hover { color: var(--ink); background: var(--soft); }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 11px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.nav-cta { margin-left: 4px; padding: 10px 16px; background: var(--ink); color: #fff; font-size: 14px; }
.nav-cta:hover, .button:hover { transform: translateY(-2px); }
.nav-cta svg, .button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.language-menu { position: relative; }
.language-button { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; color: #4a556f; font-size: 13px; font-weight: 700; }
.language-button:hover { background: var(--soft); }
.language-button svg:first-child { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.language-button svg:last-child { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.language-popover { position: absolute; top: calc(100% + 10px); right: 0; width: 190px; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(25, 20, 56, .16); }
.language-popover button { display: grid; grid-template-columns: 30px 1fr 18px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.language-popover button:hover { background: var(--soft); }
.language-popover b { color: var(--purple); font-size: 12px; }
.language-popover i { color: var(--purple); opacity: 0; font-style: normal; }
.language-popover [aria-selected="true"] { background: var(--purple-soft); }
.language-popover [aria-selected="true"] i { opacity: 1; }
.menu-button { display: none; width: 42px; height: 42px; padding: 10px; border: 0; border-radius: 10px; background: var(--soft); cursor: pointer; }
.menu-button > span:not(.sr-only) { display: block; width: 20px; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--ink); }

.hero { position: relative; min-height: 700px; padding: 186px 0 45px; }
.hero::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -3; background: linear-gradient(180deg, #fbfaff 0%, #fff 92%); }
.hero-orb { position: absolute; z-index: -2; border-radius: 999px; filter: blur(4px); opacity: .65; }
.hero-orb-one { top: 110px; right: -60px; width: 460px; height: 460px; background: radial-gradient(circle, #dfd5ff 0, rgba(223, 213, 255, 0) 69%); }
.hero-orb-two { top: 390px; left: 24%; width: 420px; height: 420px; background: radial-gradient(circle, #ffecd2 0, rgba(255, 236, 210, 0) 70%); }
.hero-copy { position: relative; z-index: 3; max-width: 1160px; margin: 0 auto; text-align: left; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--purple-dark); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px var(--purple-soft); }
.eyebrow.plain { display: block; margin-bottom: 14px; }
.eyebrow.light { color: #cfc2ff; }
h1, h2, h3 { margin: 0; font-family: Manrope, sans-serif; letter-spacing: -.045em; }
h1 { margin-top: 24px; font-size: clamp(52px, 6.2vw, 88px); line-height: .99; font-weight: 800; }
h1 em, h2 em { color: var(--purple); font-style: normal; }
.hero-copy > p { max-width: 680px; margin: 28px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.6; }
.hero-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 52px; padding: 14px 22px; }
.button-primary { background: var(--purple); color: #fff; box-shadow: 0 12px 30px rgba(101, 65, 232, .25); }
.button-primary:hover { background: var(--purple-dark); box-shadow: 0 16px 34px rgba(101, 65, 232, .3); }
.button-secondary { border: 1px solid var(--line); background: rgba(255, 255, 255, .78); }
.button-secondary:hover { background: #fff; box-shadow: 0 10px 25px rgba(30, 25, 61, .08); }
.hero-proof { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hero-proof > span { padding: 6px 9px; border: 1px solid #e4defb; border-radius: 7px; background: rgba(255,255,255,.76); color: #6e5caa; font-size: 11px; font-weight: 800; }
.hero-proof small { margin-left: 4px; color: #7b8498; }
.hero-product { position: relative; z-index: 2; width: min(1160px, 96%); margin: 70px auto 0; }
.hero-real-screenshot { display: block; width: 100%; height: auto; border-radius: 0 0 15px 15px; }
.hero-dashboard-window > .hero-dashboard-art,
.hero-dashboard-window > .hero-dashboard-viz,
.hero-product > .hero-peek { display: none; }
.product-window { overflow: hidden; padding: 8px; border: 1px solid rgba(212, 207, 232, .85); border-radius: 24px; background: rgba(255, 255, 255, .8); box-shadow: var(--shadow); backdrop-filter: blur(12px); transform: perspective(1400px) rotateX(2deg); }
.window-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-bottom: 1px solid #e5e7ed; color: #8790a5; }
.window-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #d8dce6; }
.window-bar > span:first-child { background: #ff927f; }.window-bar > span:nth-child(2) { background: #ffc46a; }.window-bar > span:nth-child(3) { background: #75d3a8; }
.window-bar small { margin-left: 7px; font-size: 11px; }
.hero-app-window { background: rgba(255,255,255,.92); }
.hero-app { display: grid; grid-template-columns: 145px 1fr; height: 520px; overflow: hidden; border-radius: 0 0 17px 17px; background: #f7f8fc; color: #17213a; font-family: 'DM Sans', sans-serif; }
.mock-sidebar { display: flex; flex-direction: column; gap: 7px; padding: 20px 13px; border-right: 1px solid #e6e9f1; background: #fff; }
.mock-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13px; }.mock-logo i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg,#7b55f4,#4e2bcd); color: #fff; font-style: normal; font-weight: 800; }.mock-sidebar > span { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 9px; border-radius: 7px; color: #60708e; font-size: 10px; }.mock-sidebar > span.is-current { background: #f0ecff; color: var(--purple); }.mock-sidebar > small { margin: 14px 7px 2px; color: #8f9ab0; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.mock-workspace { min-width: 0; padding: 14px; }
.mock-plan { display: grid; grid-template-columns: 1.3fr 90px .7fr .7fr; align-items: end; gap: 10px; padding: 14px 16px; border: 1px solid #e0e5ef; border-radius: 13px; background: #fff; box-shadow: 0 5px 14px rgba(40,44,72,.04); }.mock-plan > div { display: flex; gap: 9px; align-items: center; grid-column: 1; }.mock-plan b { font-size: 11px; }.mock-plan span { color: #65718b; font-size: 8px; }.mock-plan > i { grid-column: 1; width: 72%; height: 4px; margin-top: -7px; overflow: hidden; border-radius: 9px; background: linear-gradient(90deg,var(--purple) 12%,#e4e7ee 12%); }.mock-plan button { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 8px; border: 0; border-radius: 6px; background: #eef0f5; color: #69738a; font-size: 8px; }.mock-plan label { grid-row: 1 / 3; color: #7d879d; font-size: 7px; }.mock-plan label strong { display: block; margin-top: 5px; padding: 8px 9px; border: 1px solid #e0e5ef; border-radius: 7px; color: #17213a; font-size: 8px; }
.mock-quick { margin-top: 12px; padding: 13px; border: 1px solid #e0e5ef; border-radius: 13px; background: #fff; }.mock-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }.mock-section-title b { font-size: 11px; }.mock-section-title span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #e1e5ed; border-radius: 6px; font-size: 8px; }.mock-quick-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }.mock-quick-grid article { min-width: 0; min-height: 110px; padding: 12px; border: 1px solid #e0e5ef; border-radius: 10px; }.mock-quick-grid article > i { float: left; display: grid; place-items: center; width: 28px; height: 28px; margin-right: 9px; border-radius: 9px; background: var(--purple); color: #fff; font-style: normal; font-size: 12px; }.mock-quick-grid article > i.amber { background: #f5a300; }.mock-quick-grid article div { min-height: 50px; }.mock-quick-grid article b { display: block; padding-top: 2px; font-size: 9px; white-space: nowrap; }.mock-quick-grid article span { display: block; margin-top: 3px; color: #728099; font-size: 7px; line-height: 1.35; }.mock-quick-grid article em { display: inline-block; margin: 9px 0 0 37px; padding: 6px 8px; border: 1px solid #e0e5ef; border-radius: 6px; font-size: 7px; font-style: normal; font-weight: 700; }
.mock-orders { margin-top: 12px; overflow: hidden; border: 1px solid #e0e5ef; border-radius: 12px; background: #fff; }.mock-orders nav { display: flex; gap: 28px; padding: 10px 14px; border-bottom: 1px solid #e4e7ee; color: #69758e; font-size: 8px; }.mock-orders nav b { color: var(--purple); }.mock-toolbar { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px; }.mock-toolbar span { padding: 8px 10px; border: 1px solid #e0e5ef; border-radius: 7px; color: #8290a8; font-size: 8px; }.mock-toolbar button, .mock-row button { border: 1px solid #e0e5ef; border-radius: 6px; background: #fff; font-size: 7px; font-weight: 700; }.mock-toolbar button { padding: 0 14px; }.mock-table { padding: 0 10px 10px; }.mock-row { display: grid; grid-template-columns: .75fr 1.4fr .7fr .8fr 1.4fr; align-items: center; min-height: 46px; padding: 0 8px; border-top: 1px solid #e7eaf0; font-size: 8px; }.mock-row > b small { display: inline-block; margin-left: 5px; padding: 3px 4px; border-radius: 4px; background: #dff7e9; color: #078751; font-size: 6px; }.mock-row > span small { display: block; color: #7a879e; font-size: 6px; }.mock-row .status { justify-self: start; padding: 3px 5px; border-radius: 4px; background: #ffe9e6; color: #d24e3e; }.mock-row span:last-child { display: flex; gap: 5px; }.mock-row button { padding: 5px 7px; }.mock-head { min-height: 28px; color: #6f7990; font-size: 7px; }
.hero-peek { position: absolute; z-index: 3; width: 290px; padding: 7px; overflow: hidden; border: 1px solid rgba(212, 207, 232, .9); border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 22px 55px rgba(29,23,62,.19); }
.hero-peek > span { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 7px; }.hero-peek i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--purple-soft); color: var(--purple); font-size: 9px; font-style: normal; font-weight: 800; }.hero-peek b { font-size: 11px; }
.hero-peek-design { left: -34px; bottom: -38px; transform: rotate(-1.2deg); }.hero-peek-automation { top: 62px; right: -28px; width: 228px; transform: rotate(1.2deg); }
.peek-document { position: relative; height: 145px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.peek-document header { display: flex; justify-content: space-between; padding: 10px; background: var(--purple); color: #fff; font-size: 8px; }.peek-document header i { width: 12px; height: 12px; border-radius: 3px; background: #fff; }.peek-document p { width: 42%; height: 4px; margin: 10px 0 0; border-radius: 3px; background: #e1e5ed; }.peek-document > div { height: 5px; margin-top: 11px; border-radius: 3px; background: #eef0f5; }.peek-document strong { position: absolute; right: 18px; bottom: 15px; color: var(--purple); font-size: 10px; }
.peek-rules { padding: 12px 10px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.peek-rules > b,.peek-rules > small { display: block; }.peek-rules > b { font-size: 10px; }.peek-rules > small { margin: 3px 0 8px; color: var(--muted); font-size: 7px; }.peek-rules label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 7px 2px; border-top: 1px solid #eceef3; font-size: 8px; font-weight: 700; }.peek-rules label i { width: 7px; height: 7px; border-radius: 2px; background: #32b774; }.peek-rules label em { padding: 3px 5px; border-radius: 99px; background: #e4f7ef; color: #078751; font-size: 6px; font-style: normal; }
.hero-peek-quote { right: 30px; bottom: -50px; width: 225px; transform: rotate(.8deg); }.peek-quote { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.peek-quote header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid #eceef3; }.peek-quote header b,.peek-quote header small { display: block; }.peek-quote header b { font-size: 8px; }.peek-quote header small { color: #7b879b; font-size: 6px; }.peek-quote header em { padding: 3px 5px; border-radius: 99px; background: #fff0dc; color: #c96b00; font-size: 5px; font-style: normal; }.peek-quote p { display: flex; justify-content: space-between; margin: 0; padding: 6px 0; border-bottom: 1px solid #eceef3; font-size: 6px; }.peek-quote footer { display: flex; justify-content: space-between; padding-top: 7px; font-size: 7px; }.peek-quote button { width: 100%; margin-top: 7px; padding: 6px; border: 0; border-radius: 6px; background: var(--purple); color: #fff; font-size: 6px; font-weight: 700; }
.hero-peek-editor { width: 282px; }.peek-design-editor { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.peek-design-editor nav { display: flex; gap: 12px; padding: 7px 9px; border-bottom: 1px solid #e6e9ef; color: #718098; font-size: 6px; }.peek-design-editor nav b { color: var(--purple); }.peek-editor-body { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 112px; }.peek-editor-body > section { padding: 9px; }.peek-editor-body > section > small { color: #8791a3; font-size: 5px; font-weight: 800; }.peek-template-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 8px; }.peek-template-list i { height: 38px; border: 1px solid #dfe3eb; border-radius: 4px; background: linear-gradient(180deg,#fff 36%,#eaedf2 36% 40%,#fff 40% 54%,#eaedf2 54% 58%,#fff 58%); }.peek-template-list i.selected { outline: 1.5px solid var(--purple); }.peek-template-list i.dark { background: linear-gradient(90deg,#17213a 30%,#fff 30% 100%); }.peek-editor-body section footer { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 4px; font-size: 5px; }.peek-invoice { padding: 8px; border-left: 1px solid #e6e9ef; background: #f7f8fb; }.peek-invoice header { display: flex; justify-content: space-between; padding: 7px; background: var(--purple); color: #fff; font-size: 5px; }.peek-invoice header i { width: 7px; height: 7px; border-radius: 2px; background: #fff; }.peek-invoice p { width: 55%; height: 3px; margin: 7px 0 0; background: #dfe3eb; }.peek-invoice > div { height: 3px; margin-top: 11px; background: #17213a; }.peek-invoice > strong { display: block; margin-top: 18px; color: var(--purple); text-align: right; font-size: 6px; }

.process { padding: 88px 0 120px; }
.section-heading.split { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 70px; }
.section-heading h2, .quotes h2, .trust h2, .final-cta h2 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; font-weight: 800; }
.section-heading > p, .section-heading.split > p { margin: 0; color: var(--muted); font-size: 18px; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 64px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-grid li { position: relative; min-width: 0; padding: 34px 26px 40px; border-right: 1px solid var(--line); }
.process-grid li:first-child { padding-left: 0; }.process-grid li:last-child { padding-right: 0; border-right: 0; }
.process-grid li > span { color: #a0a7b6; font-size: 12px; font-weight: 800; }
.process-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 28px 0 24px; border-radius: 13px; font-style: normal; font-weight: 800; }
.process-icon.purple { color: var(--purple); background: var(--purple-soft); }.process-icon.blue { color: var(--blue); background: #e8f0ff; }.process-icon.orange { color: #e47d06; background: #fff0dc; }.process-icon.green { color: var(--green); background: #e4f7ef; }
.process-grid h3 { font-size: 20px; line-height: 1.25; }.process-grid p { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

.features { padding: 20px 0 90px; }
.features::before { content: ''; position: absolute; left: 0; right: 0; height: 780px; margin-top: -20px; z-index: -1; background: #f7f7fb; }
.section-heading.centered { max-width: 800px; margin-inline: auto; text-align: center; }
.section-heading.centered > p { max-width: 650px; margin: 20px auto 0; }
.product-carousel { margin-top: 0; overflow: hidden; border: 1px solid #dfe2eb; border-radius: 25px; background: #fff; box-shadow: 0 28px 70px rgba(30, 26, 58, .09); }
.carousel-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.carousel-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 72px; padding: 12px; border: 0; border-right: 1px solid var(--line); background: #fbfbfd; cursor: pointer; }
.carousel-tabs button:last-child { border-right: 0; }.carousel-tabs button span { color: #9ba2b1; font-size: 11px; font-weight: 800; }.carousel-tabs button b { font-size: 13px; }
.carousel-tabs button[aria-selected="true"] { color: var(--purple); background: #fff; }.carousel-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--purple); }
.carousel-stage { position: relative; min-height: 570px; }
.carousel-slide { display: grid; grid-template-columns: 34% 66%; min-height: 570px; animation: slideIn .38s ease both; }
.carousel-slide > .real-app-shot { grid-column: 2; align-self: stretch; width: 100%; height: 100%; max-height: 570px; padding: 24px; object-fit: contain; background: #f5f6fa; }
.carousel-slide > .real-app-shot-contained { padding: 56px; }
.carousel-slide > .real-app-shot + .slide-media { display: none; }
@keyframes slideIn { from { transform: translateX(16px); } to { transform: none; } }
.slide-copy { display: flex; flex-direction: column; justify-content: center; padding: 52px 44px; border-right: 1px solid var(--line); }
.feature-kicker { margin-bottom: 18px; color: var(--purple); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.slide-copy h3 { font-size: clamp(28px, 3vw, 39px); line-height: 1.13; }.slide-copy h3 em { color: var(--purple); font-style: normal; }.slide-copy p { margin: 20px 0 0; color: var(--muted); }
.slide-copy ul { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }.slide-copy li { position: relative; padding-left: 26px; font-size: 14px; font-weight: 600; }.slide-copy li::before { content: '✓'; position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--purple-soft); color: var(--purple); font-size: 10px; }
.slide-media { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 42px; overflow: hidden; background: radial-gradient(circle at 72% 28%,#fff 0,#f4f1ff 44%,#eeedf6 100%); }
.feature-ui { width: min(100%, 720px); border: 1px solid #d9deea; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgba(24,22,50,.14); color: #17213a; font-family: 'DM Sans',sans-serif; }
.feature-ui-dashboard { padding: 24px; }.feature-ui-dashboard > header { display: flex; justify-content: space-between; align-items: center; }.feature-ui-dashboard > header span { font-size: 17px; font-weight: 800; }.feature-ui-dashboard > header b,.feature-ui-rules > header > em,.feature-ui-export > header > em { padding: 5px 9px; border-radius: 99px; background: #e3f8ec; color: #078751; font-size: 9px; font-style: normal; }.metric-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 22px; }.metric-strip article { padding: 17px; border: 1px solid #e1e5ed; border-radius: 12px; }.metric-strip small,.metric-strip strong,.metric-strip i { display: block; }.metric-strip small { color: #6e7a91; font-size: 9px; }.metric-strip strong { margin: 6px 0; font-size: 24px; }.metric-strip i { color: #078751; font-size: 9px; font-style: normal; }.metric-strip i.warn { color: #d77705; }.mini-table { margin-top: 16px; overflow: hidden; border: 1px solid #e1e5ed; border-radius: 12px; }.mini-table nav,.mini-table p { display: grid; grid-template-columns: .7fr 1.3fr .8fr .6fr; align-items: center; margin: 0; padding: 13px 15px; border-bottom: 1px solid #e7eaf0; font-size: 10px; }.mini-table nav { display: flex; justify-content: space-between; background: #fafbfc; }.mini-table nav span { padding: 5px 9px; border: 1px solid #e1e5ed; border-radius: 6px; }.mini-table p:last-child { border-bottom: 0; }.mini-table p em { font-style: normal; font-weight: 700; }.mini-table p i { justify-self: start; padding: 4px 7px; border-radius: 5px; background: #e3f8ec; color: #078751; font-size: 8px; font-style: normal; }.mini-table p i.pending { background: #ffe9e6; color: #d24e3e; }
.feature-ui-design { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 390px; padding: 0; overflow: hidden; }.template-side { padding: 24px; }.template-side header b,.template-side header span { display: block; }.template-side header b { font-size: 15px; }.template-side header span { margin-top: 10px; color: #6e7a91; font-size: 9px; }.template-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 30px; }.template-grid article > div { position: relative; height: 85px; padding: 12px; overflow: hidden; border: 1px solid #e1e5ed; border-radius: 8px; background: #fff; }.template-grid article.selected > div { outline: 2px solid var(--purple); outline-offset: -2px; }.template-grid article > div.dark { background: #17213a; }.template-grid article i { display: block; width: 14px; height: 14px; margin-bottom: 14px; border-radius: 50%; background: var(--purple); }.template-grid article span { display: block; height: 3px; margin-top: 7px; background: #e1e5ed; }.template-grid article b,.template-grid article small { display: block; }.template-grid article b { margin-top: 9px; font-size: 10px; }.template-grid article small { color: #78849a; font-size: 7px; }.invoice-paper { margin: 22px 20px 22px 0; padding: 18px; background: #fff; box-shadow: 0 8px 28px rgba(29,33,58,.14); }.invoice-paper header { display: flex; justify-content: space-between; align-items: center; padding: 14px; background: var(--purple); color: #fff; }.invoice-paper header i { width: 15px; height: 15px; border-radius: 4px; background: #fff; }.invoice-paper header div { text-align: right; }.invoice-paper header b,.invoice-paper header small { display: block; font-size: 8px; }.address-lines { margin: 25px 0; }.address-lines span { display: block; width: 42%; height: 4px; margin-top: 6px; background: #e6e9ef; }.invoice-paper table { width: 100%; border-collapse: collapse; font-size: 6px; }.invoice-paper th { padding: 5px; background: #182239; color: #fff; text-align: left; }.invoice-paper td { padding: 6px 5px; border-bottom: 1px solid #e3e7ed; }.invoice-paper > strong { display: block; margin-top: 28px; color: var(--purple); text-align: right; font-size: 10px; }
.feature-ui-email { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 390px; overflow: hidden; }.email-editor { padding: 24px; border-right: 1px solid #e1e5ed; }.email-editor header { display: flex; justify-content: space-between; margin-bottom: 22px; }.email-editor header b { font-size: 15px; }.email-editor header span { color: var(--purple); font-size: 9px; font-weight: 700; }.email-editor label { display: block; margin-top: 12px; color: #6e7a91; font-size: 8px; font-weight: 700; }.email-editor label strong,.email-editor textarea { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #e1e5ed; border-radius: 8px; background: #fff; color: #17213a; font-size: 9px; font-weight: 500; }.email-editor textarea { min-height: 125px; resize: none; line-height: 1.55; }.email-editor button,.email-preview button { margin-top: 12px; padding: 9px 12px; border: 0; border-radius: 7px; background: var(--purple); color: #fff; font-size: 8px; font-weight: 700; }.email-preview { padding: 24px; background: #f5f6fa; }.email-preview > small { color: #828ca1; font-size: 8px; font-weight: 800; }.email-preview article { margin-top: 13px; padding: 22px; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(30,34,61,.08); }.email-preview article > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--purple); color: #fff; font-style: normal; font-weight: 800; }.email-preview article > b { display: block; margin-top: 18px; font-size: 13px; }.email-preview article p { color: #68748b; font-size: 8px; }.email-preview article > span { display: block; margin-top: 24px; color: #9ba3b3; font-size: 7px; }
.feature-ui-rules,.feature-ui-export { padding: 24px; }.feature-ui-rules > header,.feature-ui-export > header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #e3e6ed; }.feature-ui-rules > header > div,.feature-ui-export > header > div { display: flex; align-items: center; gap: 12px; }.feature-ui-rules > header i,.feature-ui-export > header i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--purple); color: #fff; font-style: normal; }.feature-ui-rules header span b,.feature-ui-rules header span small,.feature-ui-export header span b,.feature-ui-export header span small { display: block; }.feature-ui-rules header span b,.feature-ui-export header span b { font-size: 14px; }.feature-ui-rules header span small,.feature-ui-export header span small { color: #78849a; font-size: 8px; }.feature-ui-rules section { padding-top: 18px; }.feature-ui-rules section > small,.schedule-card > small,.recipient-card > small { color: #8b95a8; font-size: 8px; font-weight: 800; letter-spacing: .1em; }.feature-ui-rules label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid #e5e8ee; }.feature-ui-rules label i.check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e4f7ef; color: #078751; font-style: normal; font-size: 10px; }.feature-ui-rules label span b,.feature-ui-rules label span small { display: block; }.feature-ui-rules label span b { font-size: 10px; }.feature-ui-rules label span small { color: #7c879b; font-size: 8px; }.feature-ui-rules label > em { width: 28px; height: 16px; padding: 2px; border-radius: 99px; background: var(--purple); }.feature-ui-rules label > em::after { content:''; display: block; width: 12px; height: 12px; margin-left: 12px; border-radius: 50%; background: #fff; }.feature-ui-rules footer { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; color: #7c879b; font-size: 8px; }.feature-ui-rules footer button,.recipient-card button { padding: 9px 12px; border: 0; border-radius: 7px; background: var(--purple); color: #fff; font-size: 8px; font-weight: 700; }
.feature-ui-export { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.feature-ui-export > header { grid-column: 1 / -1; }.schedule-card,.recipient-card { padding: 20px; border: 1px solid #e1e5ed; border-radius: 11px; }.schedule-card > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 24px; font-size: 10px; }.schedule-card strong { padding: 8px 10px; border: 1px solid #e1e5ed; border-radius: 7px; }.schedule-card p { margin-top: 28px; padding: 12px; border-radius: 8px; background: #f5f3ff; color: #756b92; font-size: 9px; }.recipient-card p { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 0; padding: 12px 0; border-bottom: 1px solid #e5e8ee; }.recipient-card p span b,.recipient-card p span small { display: block; font-size: 9px; }.recipient-card p span small { color: #7b869a; font-size: 7px; }.recipient-card p > i { color: #078751; font-size: 8px; font-style: normal; }.recipient-card button { margin-top: 15px; background: #f1edff; color: var(--purple); }

.hero-design-window { overflow: hidden; background: rgba(255,255,255,.94); }
.hero-design-stage { height: 570px; padding: 22px; overflow: hidden; background: #f6f7fb; color: #17213a; font-family: 'DM Sans',sans-serif; }
.design-page-header { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 16px; }.design-page-header b,.design-page-header small { display: block; }.design-page-header b { font: 800 20px/1.1 Manrope,sans-serif; }.design-page-header small { margin-top: 5px; color: #718098; font-size: 10px; }.design-page-header button { padding: 9px 13px; border: 1px solid #dce1eb; border-radius: 8px; background: #fff; font-size: 9px; font-weight: 700; }.design-tabs { display: flex; align-items: center; gap: 32px; min-height: 48px; padding: 0 22px; border: 1px solid #dce1eb; border-bottom: 0; border-radius: 13px 13px 0 0; background: #fff; color: #69758c; font-size: 10px; }.design-tabs b { align-self: stretch; display: flex; align-items: center; border-bottom: 2px solid var(--purple); color: var(--purple); }.hero-design-ui { width: 100%; min-height: 450px; grid-template-columns: 1.55fr .75fr; border-radius: 0 0 13px 13px; box-shadow: 0 12px 30px rgba(24,22,50,.08); }.hero-design-ui .template-side { padding: 24px 28px; }.hero-design-ui .template-grid article > div { height: 92px; }.template-label { display: block; margin-top: 22px; color: #111827; font-size: 8px; font-weight: 800; letter-spacing: .08em; }.custom-label { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e3e6ed; }.custom-template-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 12px; }.custom-template-row > span { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #e1e5ed; border-radius: 8px; font-size: 8px; }.custom-template-row i { width: 18px; height: 23px; border-radius: 3px; background: linear-gradient(180deg,var(--purple) 28%,#fff 28%); box-shadow: 0 0 0 1px #dce1eb; }.invoice-preview-panel { padding: 20px 20px 0; border-left: 1px solid #e1e5ed; background: #fafbfc; }.invoice-preview-panel > header b,.invoice-preview-panel > header small { display: block; }.invoice-preview-panel > header b { font-size: 14px; }.invoice-preview-panel > header small { margin-top: 3px; color: #78849a; font-size: 8px; }.invoice-preview-panel .invoice-paper { min-height: 350px; margin: 14px 0 0; }

.dashboard-media { padding: 18px 14px; }.dashboard-viz { display: grid; grid-template-columns: 112px 1fr; width: 108%; height: 445px; overflow: hidden; border: 1px solid #d9deea; border-radius: 16px; background: #f7f8fc; box-shadow: 0 24px 60px rgba(24,22,50,.14); color: #17213a; font-family: 'DM Sans',sans-serif; }.dashboard-viz .mock-sidebar { padding: 14px 8px; }.dashboard-viz .mock-logo { margin-bottom: 12px; }.dashboard-viz .mock-sidebar > span { min-height: 28px; padding: 0 6px; font-size: 8px; }.dashboard-viz .mock-sidebar > small { margin-top: 9px; }.dashboard-viz .mock-workspace { padding: 10px; }.dashboard-viz .mock-plan { grid-template-columns: 1.4fr 70px .7fr .8fr; padding: 10px 12px; }.dashboard-viz .mock-quick { margin-top: 8px; padding: 9px; }.dashboard-viz .mock-quick-grid article { min-height: 86px; padding: 9px; }.dashboard-viz .mock-quick-grid article > i { width: 24px; height: 24px; }.dashboard-viz .mock-quick-grid article div { min-height: 39px; }.dashboard-viz .mock-quick-grid article em { margin: 6px 0 0 31px; padding: 4px 5px; }.dashboard-viz .mock-orders { margin-top: 8px; }.dashboard-viz .mock-orders nav { padding: 7px 10px; }.dashboard-toolbar { display: grid; grid-template-columns: 1fr auto auto auto; gap: 5px; padding: 7px; }.dashboard-toolbar span,.dashboard-toolbar button { padding: 6px 8px; border: 1px solid #e0e5ef; border-radius: 6px; background: #fff; color: #77849a; font-size: 6px; }.dashboard-toolbar button { color: #17213a; font-weight: 700; }.dashboard-table { padding: 0 7px 7px; }.dashboard-row { display: grid; grid-template-columns: .65fr 1fr 1fr .55fr .72fr .9fr 1.55fr; align-items: center; min-height: 40px; padding: 0 6px; border-top: 1px solid #e7eaf0; font-size: 6px; }.dashboard-row > b small { display: block; width: max-content; margin-top: 3px; padding: 2px 4px; border-radius: 4px; background: #dff7e9; color: #078751; font-size: 5px; }.dashboard-row > span small { display: block; margin-top: 2px; color: #7a879e; font-size: 5px; }.dashboard-row > span.status { justify-self: start; padding: 3px 5px; border-radius: 4px; background: #ffe9e6; color: #d24e3e; }.dashboard-row > span.status small { color: #728099; white-space: nowrap; }.dashboard-row > span:last-child { display: flex; gap: 3px; }.dashboard-row button { padding: 4px; border: 1px solid #e0e5ef; border-radius: 5px; background: #fff; font-size: 5px; font-weight: 700; }.dashboard-head { min-height: 24px; color: #6f7990; }
.hero-dashboard-window { overflow: hidden; background: rgba(255,255,255,.94); }.hero-dashboard-viz { grid-template-columns: 145px 1fr; width: 100%; height: 570px; border: 0; border-radius: 0 0 17px 17px; box-shadow: none; }.hero-dashboard-viz .mock-sidebar { padding: 20px 13px; }.hero-dashboard-viz .mock-logo { margin-bottom: 22px; }.hero-dashboard-viz .mock-sidebar > span { min-height: 34px; padding: 0 9px; font-size: 10px; }.hero-dashboard-viz .mock-sidebar > small { margin-top: 14px; }.hero-dashboard-viz .mock-workspace { padding: 14px; }.hero-dashboard-viz .mock-plan { grid-template-columns: 1.4fr 90px .7fr .8fr; padding: 14px 16px; }.hero-dashboard-viz .mock-quick { margin-top: 12px; padding: 13px; }.hero-dashboard-viz .mock-quick-grid article { min-height: 110px; padding: 12px; }.hero-dashboard-viz .mock-quick-grid article > i { width: 28px; height: 28px; }.hero-dashboard-viz .mock-quick-grid article div { min-height: 50px; }.hero-dashboard-viz .mock-quick-grid article em { margin: 9px 0 0 37px; padding: 6px 8px; }.hero-dashboard-viz .mock-orders { margin-top: 12px; }.hero-dashboard-viz .mock-orders nav { padding: 10px 14px; }.hero-dashboard-viz .dashboard-toolbar { padding: 10px; gap: 8px; }.hero-dashboard-viz .dashboard-toolbar span,.hero-dashboard-viz .dashboard-toolbar button { padding: 8px 10px; font-size: 8px; }.hero-dashboard-viz .dashboard-table { padding: 0 10px 10px; }.hero-dashboard-viz .dashboard-row { min-height: 48px; padding: 0 8px; font-size: 8px; }.hero-dashboard-viz .dashboard-head { min-height: 30px; font-size: 7px; }.hero-dashboard-viz .dashboard-row > b small,.hero-dashboard-viz .dashboard-row > span small,.hero-dashboard-viz .dashboard-row button { font-size: 6px; }
.hero-dashboard-window > .hero-dashboard-viz { display: none; }
.hero-dashboard-art { display: grid; grid-template-columns: 132px 1fr; height: 540px; overflow: hidden; border-radius: 0 0 17px 17px; background: #f6f7fb; color: #17213a; font-family: 'DM Sans',sans-serif; }.hero-dashboard-art > aside { padding: 20px 11px; border-right: 1px solid #e1e5ed; background: #fff; }.art-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 12px; }.art-logo i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: var(--purple); color: #fff; font-style: normal; font-weight: 800; }.hero-dashboard-art aside nav { display: grid; gap: 5px; }.hero-dashboard-art aside nav span { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 7px; color: #5f6d87; font-size: 8px; }.hero-dashboard-art aside nav span.active { background: #f0ecff; color: var(--purple); }.hero-dashboard-art aside nav small { margin: 12px 7px 1px; color: #98a1b2; font-size: 6px; font-weight: 800; letter-spacing: .09em; }.hero-dashboard-art > main { min-width: 0; padding: 14px; }.art-plan { display: grid; grid-template-columns: 1.5fr auto .7fr .7fr; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid #dfe4ed; border-radius: 12px; background: #fff; }.art-plan > div { min-width: 0; }.art-plan b { font-size: 11px; }.art-plan span { margin-left: 7px; color: #697790; font-size: 8px; }.art-plan i { display: block; width: 72%; height: 4px; margin-top: 10px; border-radius: 99px; background: linear-gradient(90deg,var(--purple) 12%,#e3e6ed 12%); }.art-plan button { padding: 8px 10px; border: 0; border-radius: 7px; background: #eef0f4; color: #727c91; font-size: 7px; font-weight: 700; }.art-plan label { color: #7b869a; font-size: 6px; }.art-plan label strong { display: block; margin-top: 4px; padding: 8px; border: 1px solid #dfe4ed; border-radius: 7px; color: #17213a; font-size: 8px; }.art-quick,.art-orders { margin-top: 10px; border: 1px solid #dfe4ed; border-radius: 12px; background: #fff; }.art-quick { padding: 12px; }.art-heading { display: flex; justify-content: space-between; align-items: center; }.art-heading b { font-size: 11px; }.art-heading span { color: #8a94a7; font-size: 7px; }.art-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }.art-cards article { display: grid; grid-template-columns: auto 1fr; gap: 8px; min-width: 0; padding: 11px; border: 1px solid #e0e4ec; border-radius: 9px; }.art-cards article > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 10px; font-style: normal; }.art-cards article > i.orange { background: #f5a300; }.art-cards article b,.art-cards article small { display: block; }.art-cards article b { padding-top: 1px; font-size: 8px; white-space: nowrap; }.art-cards article small { margin-top: 2px; color: #758198; font-size: 6px; }.art-cards article em { grid-column: 2; justify-self: start; padding: 5px 7px; border: 1px solid #e0e4ec; border-radius: 6px; font-size: 6px; font-style: normal; font-weight: 700; }.art-orders { overflow: hidden; }.art-orders > nav { display: flex; gap: 24px; padding: 9px 12px; border-bottom: 1px solid #e2e6ed; color: #748097; font-size: 7px; }.art-orders > nav b { color: var(--purple); }.art-search { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; padding: 8px; }.art-search span,.art-search button { padding: 7px 8px; border: 1px solid #e0e4ec; border-radius: 6px; background: #fff; color: #8590a3; font-size: 7px; }.art-search button { color: #17213a; font-weight: 700; }.art-table { padding: 0 8px 8px; }.art-table > header,.art-table > div { display: grid; grid-template-columns: .65fr 1.1fr .7fr .7fr 1fr; align-items: center; min-height: 44px; padding: 0 8px; border-top: 1px solid #e5e8ee; font-size: 7px; }.art-table > header { min-height: 26px; color: #758198; font-size: 6px; }.art-table > div > b small { display: inline-block; margin-left: 4px; padding: 2px 4px; border-radius: 4px; background: #ddf6e8; color: #078751; font-size: 5px; }.art-table > div > span small { display: block; color: #7d899d; font-size: 5px; }.art-table > div > em { justify-self: start; padding: 3px 5px; border-radius: 5px; background: #ffe9e6; color: #cf4e3e; font-size: 6px; font-style: normal; }.art-table > div > span:last-child { display: flex; gap: 4px; }.art-table button { padding: 4px 6px; border: 1px solid #e0e4ec; border-radius: 5px; background: #fff; font-size: 5px; font-weight: 700; }

.email-viz { grid-template-columns: 1.12fr .88fr; min-height: 430px; }.email-viz .email-editor { padding: 20px; }.email-viz .email-editor header { align-items: center; margin-bottom: 13px; }.email-viz .email-editor header div b,.email-viz .email-editor header div small { display: block; }.email-viz .email-editor header div b { font-size: 15px; }.email-viz .email-editor header div small { color: #768299; font-size: 8px; }.email-viz .email-editor header button { margin: 0; padding: 7px 9px; border: 1px solid #e1e5ed; background: #fff; color: #17213a; }.email-viz .email-editor nav { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid #e1e5ed; border-radius: 8px; }.email-viz .email-editor nav > * { padding: 8px 7px; border-right: 1px solid #e1e5ed; color: #6e7a91; font-size: 7px; text-align: center; }.email-viz .email-editor nav > *:last-child { border-right: 0; }.email-viz .email-editor nav b { background: #f2efff; color: var(--purple); }.email-viz .email-editor nav i { display: block; margin-top: 2px; color: #078751; font-size: 5px; font-style: normal; }.email-viz .email-editor label { margin-top: 9px; }.editor-toolbar { display: flex; gap: 12px; margin-top: 6px; padding: 7px 9px; border: 1px solid #e1e5ed; border-bottom: 0; border-radius: 8px 8px 0 0; color: #68748b; font-size: 8px; }.email-viz .email-editor textarea { min-height: 104px; margin-top: 0; border-radius: 0 0 8px 8px; }.variable-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; }.variable-row small { width: 100%; color: #8490a4; font-size: 6px; font-weight: 800; }.variable-row span { padding: 4px 5px; border-radius: 5px; background: #f1edff; color: var(--purple); font-size: 6px; }.email-viz .email-editor footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: #6f7b91; font-size: 6px; }.email-viz .email-editor footer button { margin: 0; }.email-viz .email-preview { padding: 20px; }.email-viz .email-preview > header { display: flex; justify-content: space-between; color: #858fa2; font-size: 7px; }.email-viz .email-preview article { margin-top: 10px; padding: 18px; }.mail-brand { display: flex; align-items: center; gap: 7px; }.mail-brand i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--purple); color: #fff; font-style: normal; font-weight: 800; }.mail-brand b { font-size: 8px; }.email-viz .email-preview article > small { display: block; margin-top: 18px; color: var(--purple); font-size: 6px; font-weight: 800; }.email-viz .email-preview h4 { margin: 5px 0 11px; font: 800 14px/1.2 Manrope,sans-serif; }.attachment { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px; border: 1px solid #e1e5ed; border-radius: 7px; }.attachment > i { display: grid; place-items: center; width: 28px; height: 32px; border-radius: 5px; background: #ffe9e6; color: #c54838; font-size: 6px; font-style: normal; font-weight: 800; }.attachment span b,.attachment span small { display: block; font-size: 7px; }.attachment span small { color: #8690a2; font-size: 6px; }

.feature-ui-automation { padding: 22px; }.feature-ui-automation > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #e3e6ed; }.feature-ui-automation > header b,.feature-ui-automation > header small { display: block; }.feature-ui-automation > header b { font-size: 16px; }.feature-ui-automation > header small { color: #78849a; font-size: 8px; }.feature-ui-automation > header > span { padding: 5px 8px; border-radius: 99px; background: #e4f7ef; color: #078751; font-size: 8px; font-weight: 700; }.automation-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }.automation-columns > section { padding: 16px; border: 1px solid #e1e5ed; border-radius: 11px; }.automation-title { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-bottom: 16px; }.automation-title > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--purple); color: #fff; font-style: normal; }.automation-title.export > i { background: #f5a300; }.automation-title span b,.automation-title span small { display: block; }.automation-title span b { font-size: 10px; }.automation-title span small { color: #7b879b; font-size: 6px; }.automation-title > em { padding: 4px 6px; border-radius: 99px; background: #e4f7ef; color: #078751; font-size: 6px; font-style: normal; }.automation-columns section > small { color: #8993a5; font-size: 6px; font-weight: 800; letter-spacing: .08em; }.automation-columns label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #e7eaf0; }.automation-columns label > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #e4f7ef; color: #078751; font-size: 8px; font-style: normal; }.automation-columns label span b,.automation-columns label span small { display: block; }.automation-columns label span b { font-size: 8px; }.automation-columns label span small { color: #7c879a; font-size: 6px; }.automation-columns label > em { width: 24px; height: 14px; border-radius: 99px; background: var(--purple); }.automation-columns label > em::after { content:''; display: block; width: 10px; height: 10px; margin: 2px 0 0 12px; border-radius: 50%; background: #fff; }.schedule-line { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 4px; padding: 11px; border-radius: 8px; background: #f5f3ff; font-size: 7px; }.recipient-line > em { width: auto !important; height: auto !important; padding: 4px 6px; background: #e4f7ef !important; color: #078751; font-size: 6px; font-style: normal; }.recipient-line > em::after { display: none !important; }.feature-ui-automation > footer { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; color: #7b8699; font-size: 7px; }.feature-ui-automation > footer button { padding: 8px 11px; border: 0; border-radius: 7px; background: var(--purple); color: #fff; font-size: 7px; font-weight: 700; }
.section-anchor { display: block; position: relative; top: -110px; visibility: hidden; }
.quote-carousel-ui { overflow: hidden; }.quote-carousel-ui > header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid #e1e5ed; }.quote-carousel-ui > header b,.quote-carousel-ui > header small { display: block; }.quote-carousel-ui > header b { font-size: 15px; }.quote-carousel-ui > header small { color: #758198; font-size: 8px; }.quote-carousel-ui > header > span { padding: 5px 8px; border-radius: 99px; background: #fff0dc; color: #c96b00; font-size: 7px; font-weight: 700; }.quote-carousel-ui .quote-builder { grid-template-columns: 1fr 165px; min-height: 350px; padding: 14px; }.quote-carousel-ui .quote-catalog { padding: 15px; }.quote-carousel-ui .quote-summary { padding: 15px 13px; }
.carousel-controls { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 10px 16px 10px 24px; border-top: 1px solid var(--line); background: #fff; }
.carousel-controls > span { color: var(--muted); font-size: 12px; font-weight: 700; }.carousel-controls div { display: flex; gap: 8px; }.carousel-controls button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }.carousel-controls button:hover { color: #fff; border-color: var(--purple); background: var(--purple); }

.quotes { position: relative; display: grid; grid-template-columns: minmax(330px,.72fr) minmax(620px,1.28fr); align-items: center; gap: 58px; width: min(1500px, calc(100% - 32px)); margin-top: 110px; padding: 92px clamp(42px,5vw,82px); overflow: hidden; border-radius: 34px; background: var(--night); color: #fff; }
.quotes::before { content: ''; position: absolute; right: -170px; bottom: -280px; width: 660px; height: 660px; border-radius: 50%; background: radial-gradient(circle, rgba(119, 84, 244, .52), transparent 68%); }
.quotes-copy { position: relative; z-index: 2; }.quotes h2 { margin-top: 18px; }.quotes h2 em { color: #b7a4ff; }.quotes-copy > p { max-width: 520px; margin: 25px 0 0; color: #c3bfd3; font-size: 17px; }
.quote-points { display: grid; gap: 14px; margin-top: 34px; }.quote-points span { display: flex; align-items: center; gap: 12px; }.quote-points i { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #4a426c; border-radius: 9px; color: #a998ff; font-size: 10px; font-style: normal; }.quote-points b { font-size: 14px; }
.quotes-visual { position: relative; z-index: 2; min-width: 0; padding: 7px; overflow: hidden; border: 1px solid #4a426b; border-radius: 20px; background: #28223f; box-shadow: 0 32px 80px rgba(0,0,0,.35); }
.window-bar.dark { border-color: #403956; color: #aba5bf; }.quote-builder { display: grid; grid-template-columns: 1fr 190px; min-height: 420px; padding: 20px; gap: 14px; border-radius: 0 0 13px 13px; background: #f6f7fb; color: #17213a; }.quote-catalog { min-width: 0; padding: 20px; border-radius: 11px; background: #fff; }.quote-catalog header b,.quote-catalog header small { display: block; }.quote-catalog header b { font-size: 17px; }.quote-catalog header small { color: #718098; font-size: 9px; }.customer-card { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 18px; padding: 12px; border: 1px solid #e1e5ed; border-radius: 9px; }.customer-card small { grid-row: 1 / 3; align-self: center; color: var(--purple); font-size: 7px; font-weight: 800; }.customer-card b { font-size: 10px; }.customer-card span { color: #78849a; font-size: 8px; }.catalog-tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 14px 0 8px; }.catalog-tools span,.catalog-tools button { padding: 9px 10px; border: 1px solid #e1e5ed; border-radius: 7px; background: #fff; color: #7f899c; font-size: 8px; }.catalog-tools button { color: #17213a; font-weight: 700; }.catalog-row { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 9px; padding: 9px 5px; border-top: 1px solid #e7eaf0; }.catalog-row > i { width: 32px; height: 32px; border-radius: 7px; background: linear-gradient(145deg,#353128,#a99b7f); }.catalog-row > i.product-b { background: linear-gradient(145deg,#ddd2bf,#9a8067); }.catalog-row > i.product-c { background: linear-gradient(145deg,#30180d,#b17442); }.catalog-row span b,.catalog-row span small { display: block; }.catalog-row span b { font-size: 9px; }.catalog-row span small { color: #7d879a; font-size: 7px; }.catalog-row em { padding: 4px 6px; border-radius: 5px; background: #e3f8ec; color: #078751; font-size: 7px; font-style: normal; }.catalog-row > strong { padding: 6px; border: 1px solid #e1e5ed; border-radius: 6px; font-size: 8px; }.quote-summary { padding: 20px 16px; border-radius: 11px; background: #fff; box-shadow: 0 8px 25px rgba(31,34,60,.08); }.quote-summary > small { color: #8a94a7; font-size: 7px; font-weight: 800; }.quote-summary h3 { margin-top: 8px; font-size: 14px; }.quote-summary p { margin: 2px 0 16px; color: #7c879a; font-size: 8px; }.quote-summary > div { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid #e5e8ee; font-size: 8px; }.quote-summary > strong { display: flex; justify-content: space-between; margin-top: 18px; font-size: 13px; }.quote-summary button { width: 100%; margin-top: 18px; padding: 11px; border: 0; border-radius: 8px; background: var(--purple); color: #fff; font-size: 9px; font-weight: 800; }

.formats { padding: 150px 0 120px; }
.format-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 58px; }
.format-grid article { position: relative; min-height: 220px; padding: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }.format-grid article:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28, 24, 56, .08); }.format-grid article::after { content: ''; position: absolute; width: 120px; height: 120px; right: -50px; bottom: -55px; border-radius: 50%; background: var(--purple-soft); }
.format-grid span { color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .12em; }.format-grid h3 { margin-top: 45px; font-size: 28px; }.format-grid p { margin: 8px 0 0; color: var(--muted); }
.format-note { max-width: 820px; margin: 28px auto 0; color: #7b8497; text-align: center; font-size: 12px; }

.pricing { padding: 120px 0 150px; }
.pricing::before { content: ''; position: absolute; left: 0; right: 0; height: 870px; margin-top: -120px; z-index: -1; background: #f7f7fb; }
.trial-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 8px 13px 8px 8px; border: 1px solid #ddd6fb; border-radius: 99px; background: #fff; color: #5f527e; font-size: 12px; }.trial-note span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: #fff; font-weight: 800; }
.pricing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 55px; }
.price-card { min-width: 0; min-height: 218px; padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.price-card:hover { transform: translateY(-4px); border-color: #c6b9fa; box-shadow: 0 18px 38px rgba(31, 26, 62, .09); }.price-card h3 { color: #5e6680; font-size: 15px; }.price { margin-top: 26px; font: 800 29px/1 Manrope, sans-serif; letter-spacing: -.04em; }.price small { margin-left: 3px; color: #8a91a2; font: 500 11px DM Sans, sans-serif; letter-spacing: 0; }.price-card > p { margin: 20px 0 0; color: var(--muted); font-size: 13px; }.price-card > small { display: block; margin-top: 12px; font-size: 10px; }.price-card > small a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.scale-card { color: #fff; border-color: var(--night); background: var(--night); }.scale-card h3, .scale-card > p, .scale-card .price small { color: #beb9cf; }.scale-card > small a { color: #cfc3ff; }
.pricing-action { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; }.pricing-action p { margin: 0; color: #858c9b; font-size: 11px; }

.trust { display: grid; grid-template-columns: .75fr 1.25fr; gap: 65px; padding: 130px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.trust-grid article { padding: 26px 20px; border: 1px solid var(--line); border-radius: 17px; }.trust-grid article > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--purple-soft); color: var(--purple); font-size: 20px; }.trust-grid h3 { margin-top: 28px; font-size: 17px; line-height: 1.25; }.trust-grid p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }.trust-links { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 16px; color: var(--muted); font-size: 12px; }.trust-links a { color: var(--purple); font-weight: 700; }

.final-cta { position: relative; display: flex; align-items: center; min-height: 450px; width: min(1340px, calc(100% - 32px)); margin-bottom: 70px; padding: 70px max(48px, calc((100% - 1180px) / 2)); overflow: hidden; border-radius: 34px; background: linear-gradient(120deg, #5d38db, #7657ef); color: #fff; }
.final-cta::before { content: ''; position: absolute; width: 560px; height: 560px; right: -180px; top: -270px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }.final-cta::after { content: ''; position: absolute; width: 420px; height: 420px; right: -30px; bottom: -300px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.cta-copy { position: relative; z-index: 2; max-width: 720px; }.final-cta h2 { margin-top: 18px; }.final-cta h2 em { color: #d9d0ff; }.final-cta p { margin: 22px 0 28px; color: #e3ddfb; font-size: 17px; }.button-light { background: #fff; color: var(--purple-dark); box-shadow: 0 14px 30px rgba(24, 11, 72, .18); }
.cta-art { position: absolute; right: 8%; top: 50%; width: 245px; height: 245px; transform: translateY(-50%); }.cta-art span { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }.cta-art span:nth-child(2) { inset: 32px; }.cta-art img { position: absolute; inset: 64px; width: calc(100% - 128px); height: calc(100% - 128px); border-radius: 25px; object-fit: cover; box-shadow: 0 18px 40px rgba(30,15,85,.25); }

.site-footer { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 25px 0 28px; }
.footer-main { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; padding: 48px 0 55px; border-top: 1px solid var(--line); }.footer-main > div > p { max-width: 270px; margin: 18px 0 0; color: var(--muted); }.footer-main nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }.footer-main nav div { display: flex; flex-direction: column; gap: 10px; }.footer-main nav b { margin-bottom: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }.footer-main nav a { color: var(--muted); font-size: 13px; }.footer-main nav a:hover { color: var(--purple); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line); color: #9298a6; font-size: 11px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }.reveal[data-delay="1"] { transition-delay: .1s; }.reveal[data-delay="2"] { transition-delay: .2s; }.reveal[data-delay="3"] { transition-delay: .3s; }.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1280px) {
  .quotes { grid-template-columns: 1fr; }.quotes-copy { max-width: 800px; }.quotes-visual { width: 100%; }
}

@media (max-width: 1100px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }.process-grid li:nth-child(2) { border-right: 0; }.process-grid li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.process-grid li:first-child, .process-grid li:nth-child(3) { padding-left: 18px; }
  .carousel-slide { grid-template-columns: 40% 60%; }.slide-copy { padding: 42px 30px; }
  .quotes-copy { max-width: 720px; }
  .format-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }.scale-card { grid-column: span 2; }
  .trust { grid-template-columns: 1fr; }.trust-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  :root { --shell: min(100% - 32px, 720px); }
  .site-header { top: 8px; width: calc(100% - 16px); min-height: 58px; padding: 8px 10px 8px 14px; }.menu-button { display: block; }
  .site-nav { position: fixed; top: 66px; left: 8px; right: 8px; display: none; align-items: stretch; flex-direction: column; gap: 2px; max-height: calc(100vh - 76px); padding: 12px; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(25,20,55,.18); }.site-nav.open { display: flex; }.site-nav > a:not(.nav-cta) { padding: 13px 12px; }.nav-cta { margin: 6px 0 0; min-height: 46px; }.language-menu { margin-top: 3px; border-top: 1px solid var(--line); padding-top: 8px; }.language-button { width: 100%; justify-content: center; }.language-popover { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
  .hero { min-height: auto; padding: 145px 0 60px; }.hero-product { width: 100%; margin-top: 55px; }.hero-peek-design { left: -6px; }.hero-peek-automation { right: -5px; }
  .hero-dashboard-viz { grid-template-columns: 110px 1fr; height: 500px; }.hero-dashboard-viz .mock-sidebar { padding-inline: 8px; }.hero-dashboard-viz .mock-sidebar > span { padding-inline: 6px; }.hero-dashboard-viz .mock-workspace { padding: 10px; }.hero-dashboard-viz .mock-quick-grid { grid-template-columns: repeat(2,1fr); }.hero-dashboard-viz .mock-quick-grid article { min-height: 88px; }.hero-dashboard-viz .mock-quick-grid article div { min-height: 38px; }.hero-dashboard-viz .mock-quick-grid article em { margin-top: 5px; }.hero-dashboard-viz .dashboard-row { font-size: 6px; }
  .hero-dashboard-art { grid-template-columns: 105px 1fr; height: 500px; }.hero-dashboard-art > aside { padding-inline: 8px; }.hero-dashboard-art aside nav span { padding-inline: 6px; }.art-cards { grid-template-columns: repeat(2,1fr); }.art-cards article { min-height: 70px; }.art-table > header,.art-table > div { font-size: 6px; }
  .hero-app { grid-template-columns: 110px 1fr; height: 470px; }.mock-sidebar { padding-inline: 8px; }.mock-sidebar > span { padding-inline: 6px; }.mock-quick-grid article:nth-child(4) { display: none; }.mock-quick-grid { grid-template-columns: repeat(3,1fr); }.mock-plan { grid-template-columns: 1fr 80px .7fr; }.mock-plan label:last-child { display: none; }.mock-row { grid-template-columns: .7fr 1.25fr .7fr .75fr 1.2fr; }
  .section-heading.split { grid-template-columns: 1fr; gap: 24px; }.section-heading.split > p { max-width: 620px; }
  .hero-design-stage { height: 520px; padding: 16px; }.hero-design-ui { grid-template-columns: 1.4fr .8fr; }.design-tabs { gap: 20px; }
  .features::before { height: 1120px; }.carousel-tabs { overflow-x: auto; grid-template-columns: repeat(5, minmax(180px, 1fr)); scrollbar-width: none; }.carousel-tabs::-webkit-scrollbar { display: none; }.carousel-slide { grid-template-columns: 1fr; }.carousel-slide > .real-app-shot { grid-column: 1; min-height: 390px; max-height: 430px; }.slide-copy { border-right: 0; border-bottom: 1px solid var(--line); }.slide-media { min-height: 390px; }.carousel-stage { min-height: 760px; }
  .quotes { padding: 75px 35px; }.format-grid { grid-template-columns: 1fr; }.format-grid article { min-height: 185px; }.format-grid h3 { margin-top: 28px; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }.scale-card { grid-column: span 2; }
  .cta-art { opacity: .35; right: -60px; }.cta-copy { max-width: 620px; }
  .footer-main { grid-template-columns: 1fr; }.trust-links { justify-content: flex-start; }
}

@media (max-width: 620px) {
  :root { --shell: calc(100% - 28px); --radius: 17px; }
  .brand { font-size: 16px; }.brand-mark { width: 31px; height: 31px; }
  .hero { padding-top: 128px; }.hero-copy { text-align: left; }.hero-copy > p { margin-left: 0; }.hero-actions { justify-content: flex-start; }.hero-actions .button { width: 100%; }.hero-proof { justify-content: flex-start; }.hero-proof small { width: 100%; margin: 5px 0 0; }
  .product-window { padding: 5px; border-radius: 16px; }.window-bar { height: 30px; }.window-bar small { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.hero-app { grid-template-columns: 1fr; height: 350px; }.mock-sidebar { display: none; }.mock-workspace { padding: 7px; }.mock-plan { grid-template-columns: 1fr 72px; padding: 9px; }.mock-plan label { display: none; }.mock-plan button { grid-column: 2; }.mock-quick { padding: 9px; }.mock-quick-grid { grid-template-columns: repeat(2,1fr); }.mock-quick-grid article { min-height: 86px; padding: 9px; }.mock-quick-grid article:nth-child(3) { display: block; }.mock-quick-grid article:nth-child(4) { display: none; }.mock-quick-grid article span,.mock-quick-grid article em { display: none; }.mock-orders { margin-top: 7px; }.mock-toolbar,.mock-row span:last-child { display: none; }.mock-row { grid-template-columns: .8fr 1.4fr .8fr .8fr; min-height: 37px; }.hero-peek { position: relative; inset: auto; display: inline-block; width: calc(50% - 5px); margin-top: 10px; transform: none; vertical-align: top; }.hero-peek + .hero-peek { margin-left: 5px; }
  .hero-dashboard-viz { grid-template-columns: 1fr; height: 350px; }.hero-dashboard-viz .mock-sidebar { display: none; }.hero-dashboard-viz .mock-workspace { padding: 7px; }.hero-dashboard-viz .mock-plan { grid-template-columns: 1fr 72px; padding: 9px; }.hero-dashboard-viz .mock-plan label { display: none; }.hero-dashboard-viz .mock-plan button { grid-column: 2; }.hero-dashboard-viz .mock-quick { padding: 8px; }.hero-dashboard-viz .mock-quick-grid { grid-template-columns: repeat(2,1fr); }.hero-dashboard-viz .mock-quick-grid article { min-height: 70px; padding: 8px; }.hero-dashboard-viz .mock-quick-grid article:nth-child(n+3) { display: none; }.hero-dashboard-viz .mock-quick-grid article span,.hero-dashboard-viz .mock-quick-grid article em { display: none; }.hero-dashboard-viz .mock-orders { margin-top: 7px; }.hero-dashboard-viz .dashboard-toolbar { padding: 6px; }.hero-dashboard-viz .dashboard-toolbar button:nth-last-child(-n+2) { display: none; }.hero-dashboard-viz .dashboard-row { grid-template-columns: .7fr 1.2fr .7fr .7fr; }.hero-dashboard-viz .dashboard-row > :nth-child(3),.hero-dashboard-viz .dashboard-row > :nth-child(5),.hero-dashboard-viz .dashboard-row > :nth-child(7) { display: none; }.hero-peek-editor { width: calc(50% - 5px); }
  .hero-dashboard-art { grid-template-columns: 1fr; height: 360px; }.hero-dashboard-art > aside { display: none; }.hero-dashboard-art > main { padding: 7px; }.art-plan { grid-template-columns: 1fr auto; padding: 9px; }.art-plan label { display: none; }.art-quick { padding: 8px; }.art-heading span { display: none; }.art-cards { grid-template-columns: repeat(2,1fr); }.art-cards article { min-height: 62px; padding: 8px; }.art-cards article:nth-child(n+3) { display: none; }.art-cards article em { display: none; }.art-search button:last-child { display: none; }.art-table > header,.art-table > div { grid-template-columns: .8fr 1.2fr .7fr .7fr; }.art-table > header > :last-child,.art-table > div > :last-child { display: none; }
  .process, .features, .formats, .pricing, .trust { padding: 90px 0; }.process-grid { grid-template-columns: 1fr; margin-top: 40px; }.process-grid li, .process-grid li:first-child, .process-grid li:nth-child(3), .process-grid li:last-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }.process-grid li:last-child { border-bottom: 0; }.process-icon { margin: 20px 0 15px; }
  .hero-design-stage { height: 370px; padding: 8px; }.design-page-header { padding: 2px 3px 10px; }.design-page-header b { font-size: 15px; }.design-page-header small { font-size: 7px; }.design-page-header button { display: none; }.design-tabs { min-height: 38px; gap: 15px; padding-inline: 12px; overflow: hidden; font-size: 7px; white-space: nowrap; }.hero-design-ui { width: 156%; min-height: 450px; transform: scale(.64); transform-origin: top left; }.invoice-preview-panel { padding: 14px 12px 0; }
  .features::before { height: 1360px; margin-top: -90px; }.product-carousel { margin-top: 38px; border-radius: 18px; }.carousel-tabs { grid-template-columns: repeat(5, minmax(150px, 1fr)); }.carousel-tabs button { min-height: 62px; }.carousel-stage { min-height: 720px; }.slide-copy { padding: 34px 24px; }.carousel-slide > .real-app-shot { min-height: 300px; height: 300px; padding: 12px; }.carousel-slide > .real-app-shot-contained { padding: 30px; }.slide-media { min-height: 350px; height: 350px; padding: 0; }.feature-ui { flex: 0 0 132%; transform: scale(.72); }.dashboard-viz { flex: 0 0 138%; width: 138%; transform: scale(.68); }.carousel-controls { min-height: 58px; }
  .features { padding-top: 20px; }.features::before { margin-top: -20px; }.product-carousel { margin-top: 0; }
  .hero-peek-quote { width: 100%; margin-left: 0 !important; }
  .quotes { width: calc(100% - 16px); margin-top: 70px; padding: 60px 22px; border-radius: 24px; gap: 38px; }.quotes-visual { border-radius: 14px; }.quote-points b { font-size: 13px; }.quote-builder { grid-template-columns: 1fr; min-height: 0; padding: 10px; }.quote-summary { display: none; }.catalog-row { grid-template-columns: 28px 1fr auto; }.catalog-row > strong { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }.scale-card { grid-column: auto; }.price-card { min-height: 180px; }.price { margin-top: 20px; }
  .trust-grid { grid-template-columns: 1fr; }.trust-links { flex-wrap: wrap; gap: 10px 14px; }
  .final-cta { width: calc(100% - 16px); min-height: 480px; padding: 58px 24px; border-radius: 24px; }.cta-art { width: 190px; height: 190px; top: auto; bottom: -25px; transform: none; }.final-cta .button { width: 100%; }
  .site-footer { width: calc(100% - 28px); }.footer-main nav { grid-template-columns: repeat(2, 1fr); }.footer-main nav div:last-child { grid-column: span 2; }.footer-bottom { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}