:root {
  --ink: #171522;
  --muted: #777382;
  --line: #e9e6ed;
  --paper: #fbfaf8;
  --white: #fff;
  --purple: #7659df;
  --purple-dark: #5b42bc;
  --purple-soft: #f0ecff;
  --orange: #f79d63;
  --green: #5dbd91;
  --shadow: 0 20px 60px rgba(44, 35, 76, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.container { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.brand { align-items: center; display: inline-flex; font: 700 22px/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.brand > span:last-child { color: var(--purple); }
.brand-mark { align-items: center; background: var(--purple); border-radius: 9px; color: white; display: inline-flex; font-size: 14px; height: 27px; justify-content: center; letter-spacing: 0; margin-right: 7px; transform: rotate(-7deg); width: 27px; }
.button { align-items: center; border: 0; border-radius: 10px; display: inline-flex; font-weight: 700; gap: 16px; justify-content: center; padding: 14px 19px; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 18px; line-height: 0; }
.button-primary { background: var(--purple); box-shadow: 0 8px 18px rgba(118, 89, 223, .22); color: white; }
.button-primary:hover { background: var(--purple-dark); }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: #302b3e; }
.button-white { background: white; color: var(--ink); }
.button-light { background: white; color: var(--purple-dark); }
.button-outline { background: white; border: 1px solid var(--line); color: var(--ink); padding: 10px 14px; }
.button-small { font-size: 13px; padding: 11px 15px; }
.button-ghost { border: 1px solid var(--line); color: #605d69; }
.button-ghost:hover { background: white; border-color: #d6d0e2; }
.eyebrow { color: var(--purple); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* Landing page */
.site-header { align-items: center; display: flex; height: 88px; justify-content: space-between; }
.main-nav { display: flex; gap: 34px; margin-left: 120px; }
.main-nav a, .text-link { color: #666270; font-size: 13px; font-weight: 600; }
.main-nav a:hover, .text-link:hover { color: var(--purple); }
.header-actions { align-items: center; display: flex; gap: 24px; }
.menu-button { background: none; border: 0; color: var(--ink); display: none; font-size: 23px; padding: 5px; }
.hero { align-items: center; display: grid; gap: 60px; grid-template-columns: .95fr 1.05fr; min-height: 620px; padding: 60px 0 95px; }
.hero-copy { padding-bottom: 13px; position: relative; z-index: 2; }
.pulse-dot { background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(93, 189, 145, .15); display: inline-block; height: 7px; margin-right: 8px; width: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.hero h1 { font-size: clamp(48px, 5.5vw, 76px); line-height: .99; margin: 27px 0 25px; }
em { color: var(--purple); font-style: normal; }
.hero-lead { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 430px; }
.hero-actions { display: flex; gap: 11px; margin: 34px 0; }
.hero-note { align-items: center; color: var(--muted); display: flex; font-size: 11px; gap: 13px; line-height: 1.5; }
.avatar-stack { display: flex; padding-left: 7px; }
.avatar-stack i { align-items: center; background: #f2b486; border: 2px solid var(--paper); border-radius: 50%; color: white; display: flex; font-size: 9px; font-style: normal; font-weight: bold; height: 28px; justify-content: center; margin-left: -7px; width: 28px; }
.avatar-stack i:nth-child(2) { background: #9f8be6; }.avatar-stack i:nth-child(3) { background: #78bfaa; }
.hero-visual { height: 500px; position: relative; }
.sun-shape { background: #f7d6bd; border-radius: 50%; height: 260px; left: 50%; position: absolute; top: 55px; transform: translateX(-50%); width: 260px; }
.hero-orbit { border: 1px solid #e4dce9; border-radius: 50%; height: 405px; left: 50%; position: absolute; top: -17px; transform: translateX(-50%) rotate(-20deg); width: 540px; }
.orbit-two { height: 475px; transform: translateX(-50%) rotate(52deg); width: 320px; }
.phone-card { background: #282434; border: 7px solid #373141; border-radius: 35px; box-shadow: 0 28px 65px rgba(43, 32, 61, .28); color: white; height: 425px; left: 50%; overflow: hidden; position: absolute; top: 25px; transform: translateX(-50%) rotate(5deg); width: 253px; }
.phone-top { height: 26px; position: relative; }.phone-notch { background: #121018; border-radius: 0 0 12px 12px; height: 15px; left: 50%; position: absolute; top: -1px; transform: translateX(-50%); width: 88px; }
.chat-head { align-items: center; background: #322d3c; display: flex; gap: 9px; padding: 12px 13px; }.chat-head strong { display: block; font-size: 10px; }.chat-head small { color: #aaa4b5; display: block; font-size: 7px; margin-top: 2px; }.chat-head > b { color: #a09aaa; font-size: 13px; margin-left: auto; }.mini-avatar, .team-avatar { align-items: center; background: var(--purple); border-radius: 50%; color: white; display: flex; font: 700 14px 'Space Grotesk'; height: 29px; justify-content: center; width: 29px; }.online-dot { background: #65c798; border-radius: 50%; display: inline-block; height: 5px; margin-right: 3px; width: 5px; }.chat-body { background: #f2eff5; color: var(--ink); display: flex; flex-direction: column; height: 308px; padding: 17px 12px; }.chat-date { color: #aba6b2; font-size: 7px; font-weight: 700; letter-spacing: .1em; margin: 0 auto 19px; }.bubble { border-radius: 9px; font-size: 8px; line-height: 1.5; margin-bottom: 10px; max-width: 83%; padding: 9px 10px; }.bubble-in { align-self: flex-start; background: white; border-top-left-radius: 2px; }.bubble-out { align-self: flex-end; background: #dfd5ff; border-top-right-radius: 2px; }.message-read { align-self: flex-end; color: var(--purple); font-size: 7px; margin-top: -6px; }.chat-input { align-items: center; background: #322d3c; color: #928b9b; display: flex; font-size: 8px; justify-content: space-between; padding: 13px; }.chat-input b { align-items: center; background: var(--purple); border-radius: 50%; color: white; display: flex; font-size: 9px; height: 22px; justify-content: center; width: 22px; }
.floating-card { align-items: center; background: rgba(255,255,255,.94); border: 1px solid rgba(232,225,237,.9); border-radius: 12px; box-shadow: var(--shadow); display: flex; gap: 9px; padding: 10px 13px; position: absolute; }.floating-card small, .floating-card strong { display: block; }.floating-card small { color: #9a95a1; font-size: 8px; }.floating-card strong { font-size: 10px; margin-top: 2px; }.floating-card-top { left: 2px; top: 88px; }.floating-card-bottom { bottom: 70px; right: -10px; }.floating-icon { align-items: center; border-radius: 8px; display: flex; font-weight: 700; height: 28px; justify-content: center; width: 28px; }.floating-icon.green { background: #e1f6eb; color: #40aa7a; }.floating-icon.orange { background: #ffeadc; color: #e6854d; }.sparkle { color: var(--purple); font-size: 18px; position: absolute; }.sparkle-a { right: 18px; top: 42px; }.sparkle-b { bottom: 44px; left: 43px; font-size: 12px; }
.logo-strip { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding: 25px 0; }.logo-strip > span { color: #aaa5ae; display: block; font-size: 9px; letter-spacing: .13em; margin-bottom: 17px; text-align: center; }.logo-list { align-items: center; color: #a19ca7; display: flex; font-size: 19px; justify-content: space-around; }.logo-list span { color: var(--purple); }.logo-serif { font-family: Georgia, serif; font-style: italic; font-weight: 400; }.logo-wide { font-size: 14px; letter-spacing: .15em; }.logo-dot { font-size: 22px; }.logo-dot span { color: #f1a16e; }.logo-mono { font-family: monospace; font-size: 15px; letter-spacing: .2em; }
.section { padding: 115px 0; }.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 48px; }.section-heading h2 { font-size: 48px; line-height: 1.03; margin: 15px 0 0; }.section-heading > p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 0 3px; max-width: 350px; }.feature-grid { display: grid; gap: 18px; grid-template-columns: 1.35fr 1fr 1fr; }.feature-card { background: white; border: 1px solid var(--line); border-radius: 15px; min-height: 360px; overflow: hidden; padding: 26px; position: relative; }.feature-card-large { background: #f0ecff; border-color: #e1d9fb; }.feature-number { color: #a7a0b2; font-size: 10px; font-weight: 700; }.feature-card-large .feature-number { color: var(--purple); }.feature-card h3 { font: 600 21px 'Space Grotesk', sans-serif; letter-spacing: -.04em; margin: 17px 0 9px; }.feature-card p { color: var(--muted); font-size: 12px; line-height: 1.65; max-width: 260px; }.inline-link { color: var(--purple); font-size: 11px; font-weight: 700; }.inline-link span { font-size: 17px; margin-left: 5px; vertical-align: -1px; }.feature-illustration { height: 130px; position: relative; }.art-node { align-items: center; background: white; border-radius: 11px; box-shadow: 0 8px 18px rgba(117, 89, 223, .12); color: var(--purple); display: flex; font-size: 19px; height: 40px; justify-content: center; position: absolute; width: 40px; z-index: 1; }.node-main { background: var(--purple); color: white; height: 56px; left: 48%; top: 37px; transform: translateX(-50%); width: 56px; }.node-one { left: 9%; top: 6px; }.node-two { right: 8%; top: 6px; color: var(--green); }.node-three { bottom: 2px; left: 42%; color: var(--orange); }.art-line { border-top: 1px dashed #b6a7e6; position: absolute; transform-origin: left; }.line-one { left: 22%; top: 43px; transform: rotate(17deg); width: 103px; }.line-two { left: 59%; top: 43px; transform: rotate(-18deg); width: 100px; }.line-three { left: 52%; top: 88px; transform: rotate(90deg); width: 38px; }.feature-icon { align-items: center; border-radius: 12px; display: flex; font-size: 27px; height: 58px; justify-content: center; margin: 31px 0 27px; width: 58px; }.icon-chart { background: #fff0e7; color: #e48651; }.icon-shield { background: #e3f7ed; color: #43aa7d; }.mini-chart { align-items: end; display: flex; gap: 5px; height: 60px; margin-top: 25px; }.mini-chart i { background: #dccfff; border-radius: 4px 4px 0 0; display: block; flex: 1; }.mini-chart i:nth-child(4), .mini-chart i:nth-child(6) { background: var(--purple); }.shield-lines { display: flex; gap: 5px; margin-top: 29px; }.shield-lines span { color: var(--green); font-size: 15px; }.shield-lines i { background: #d8f1e4; border-radius: 5px; height: 6px; margin-top: 6px; width: 35px; }.section-how { background: #f2eff6; }.centered { align-items: end; margin: 0 auto 55px; max-width: 930px; }.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 930px; }.step { border-left: 1px solid #d9d2e0; padding: 0 30px; }.step:first-child { border-left: 0; padding-left: 0; }.step span { color: var(--purple); font: 700 11px 'Space Grotesk'; }.step h3 { font: 600 21px 'Space Grotesk'; letter-spacing: -.04em; margin: 24px 0 9px; }.step p { color: var(--muted); font-size: 13px; max-width: 220px; }.cta { align-items: center; background: var(--purple); border-radius: 18px; color: white; display: flex; justify-content: space-between; margin-top: 100px; padding: 52px 60px; }.cta .eyebrow { color: #dcd1ff; }.cta h2 { font-size: 43px; line-height: 1; margin: 14px 0 0; }.cta h2 em { color: #f5c8a4; }.site-footer { align-items: center; border-top: 1px solid var(--line); color: #9b96a0; display: flex; font-size: 11px; justify-content: space-between; margin-top: 90px; padding: 25px 0; }.site-footer .brand { color: var(--ink); font-size: 17px; }

/* Shared dashboard */
.dashboard-body { background: #f7f6f9; }.dashboard-shell { display: flex; min-height: 100vh; }.sidebar { background: white; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 29px 19px 20px; width: 235px; }.workspace-switcher { align-items: center; background: #faf9fc; border: 1px solid #efedf2; border-radius: 10px; display: flex; gap: 9px; margin: 36px 0 28px; padding: 9px; }.workspace-avatar { align-items: center; background: #ded4ff; border-radius: 8px; color: var(--purple); display: flex; font-weight: 700; height: 30px; justify-content: center; width: 30px; }.workspace-switcher small, .workspace-switcher strong { display: block; }.workspace-switcher small { color: #9f9aa7; font-size: 9px; }.workspace-switcher strong { font-size: 11px; margin-top: 2px; }.workspace-switcher b { color: #9f9aa7; font-size: 15px; margin-left: auto; }.side-nav { display: flex; flex-direction: column; gap: 4px; }.nav-label { color: #aaa5b0; font-size: 9px; font-weight: 700; letter-spacing: .12em; margin: 0 10px 8px; }.nav-label-space { margin-top: 25px; }.side-nav a { align-items: center; border-radius: 8px; color: #85808d; display: flex; font-size: 12px; gap: 12px; padding: 11px 12px; }.side-nav a span { color: #a6a0ad; font-size: 17px; width: 16px; }.side-nav a.active, .side-nav a:hover { background: var(--purple-soft); color: var(--purple); }.side-nav a.active span, .side-nav a:hover span { color: var(--purple); }.nav-count { background: #e5dcff; border-radius: 10px; color: var(--purple); font-size: 9px; margin-left: auto; padding: 2px 7px; }.sidebar-bottom { margin-top: auto; }.help-card { background: #f6f1ff; border-radius: 11px; margin-bottom: 17px; padding: 15px; }.help-card > span { color: var(--purple); }.help-card strong { display: block; font: 600 12px 'Space Grotesk'; margin-top: 10px; }.help-card p { color: #8b849d; font-size: 10px; line-height: 1.5; margin: 5px 0 11px; }.help-card a { color: var(--purple); font-size: 10px; font-weight: 700; }.sidebar-user { align-items: center; display: flex; gap: 8px; padding: 4px; }.user-avatar, .customer-avatar { align-items: center; background: #f4c6a5; border-radius: 50%; color: white; display: flex; font-size: 10px; font-weight: 700; height: 29px; justify-content: center; width: 29px; }.sidebar-user strong, .sidebar-user small { display: block; }.sidebar-user strong { font-size: 10px; }.sidebar-user small { color: #a09ba6; font-size: 9px; margin-top: 2px; }.sidebar-user b { color: #a09ba6; font-size: 12px; margin-left: auto; }.dashboard-main { flex: 1; min-width: 0; }.dashboard-header { align-items: center; background: white; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 107px; padding: 24px 46px; }.breadcrumb { color: #a09ba6; font-size: 10px; margin: 0 0 13px; }.breadcrumb strong { color: #65616b; font-weight: 500; }.dashboard-header h1 { font-size: 24px; margin: 0; }.dashboard-header h1 span { color: var(--orange); font-size: 17px; }.header-tools { align-items: center; display: flex; gap: 25px; }.icon-button { background: white; border: 1px solid var(--line); border-radius: 8px; color: #716c78; height: 33px; position: relative; width: 33px; }.icon-button i { background: #f28360; border: 2px solid white; border-radius: 50%; height: 7px; position: absolute; right: 5px; top: 4px; width: 7px; }.header-date { color: #9b96a2; font-size: 11px; }.dashboard-content { padding: 32px 46px 50px; }.status-banner { align-items: center; background: var(--purple); border-radius: 12px; color: white; display: flex; justify-content: space-between; margin-bottom: 19px; padding: 20px 24px; }.status-main { align-items: center; display: flex; gap: 14px; }.status-icon { align-items: center; background: rgba(255,255,255,.17); border-radius: 9px; display: flex; font-size: 23px; height: 44px; justify-content: center; width: 44px; }.status-main small { color: #dcd3ff; font-size: 9px; font-weight: 700; letter-spacing: .12em; }.status-main h2 { font-size: 18px; margin: 2px 0 1px; }.status-main p { color: #dcd3ff; font-size: 10px; margin: 0; }.metric-grid { display: grid; gap: 15px; grid-template-columns: repeat(4, 1fr); margin-bottom: 19px; }.metric-card, .panel-card, .customer-card { background: white; border: 1px solid var(--line); border-radius: 12px; }.metric-card { padding: 19px 20px; }.metric-top { align-items: center; color: #8d8894; display: flex; font-size: 11px; justify-content: space-between; }.metric-icon { align-items: center; border-radius: 7px; display: flex; font-size: 14px; font-style: normal; height: 28px; justify-content: center; width: 28px; }.metric-icon.purple { background: #eee9ff; color: var(--purple); }.metric-icon.orange { background: #ffeadf; color: #df8553; }.metric-icon.green { background: #e3f7ed; color: #4bad7d; }.metric-icon.pink { background: #ffebee; color: #ed8490; }.metric-card > strong { display: block; font: 600 26px 'Space Grotesk'; letter-spacing: -.05em; margin: 15px 0 7px; }.metric-card p { font-size: 9px; margin: 0; }.metric-up { color: #5eb48b; }.metric-up b { font-weight: 700; }.metric-up span { color: #a4a0aa; margin-left: 3px; }.dashboard-columns { display: grid; gap: 19px; grid-template-columns: 1.35fr 1fr; margin-bottom: 19px; }.panel-card { padding: 22px 23px; }.panel-heading { align-items: start; display: flex; justify-content: space-between; }.panel-heading h2 { font-size: 17px; margin: 5px 0 0; }.panel-heading select { background: white; border: 1px solid var(--line); border-radius: 7px; color: #77727e; font-size: 10px; padding: 8px 10px; }.chart-legend { display: flex; font-size: 10px; gap: 19px; margin: 25px 0 9px 41px; }.legend-dot { border-radius: 50%; display: inline-block; height: 6px; margin-right: 5px; width: 6px; }.purple-dot { background: var(--purple); }.orange-dot { background: var(--orange); }.line-chart { display: flex; height: 220px; }.chart-y { color: #b1acb5; display: flex; flex-direction: column; font-size: 9px; justify-content: space-between; padding: 3px 12px 24px 0; text-align: right; width: 35px; }.chart-area { flex: 1; position: relative; }.grid-line { border-top: 1px dashed #eeeaf0; left: 0; position: absolute; right: 0; top: 0; }.grid-line:nth-child(2) { top: 33.3%; }.grid-line:nth-child(3) { top: 66.6%; }.grid-line:nth-child(4) { top: 100%; }.chart-area svg { height: calc(100% - 24px); overflow: visible; width: 100%; }.chart-fill { fill: url(#areaPurple); }.chart-line { fill: none; stroke-linecap: round; stroke-width: 2.1; }.purple-line { stroke: var(--purple); }.orange-line { stroke: var(--orange); }.chart-x { bottom: 0; color: #b1acb5; display: flex; font-size: 8px; justify-content: space-between; left: 0; position: absolute; right: 0; }.activity-panel { min-height: 315px; }.activity-panel .inline-link { font-size: 10px; margin-top: 5px; }.activity-list { margin-top: 20px; }.activity-item { align-items: center; border-bottom: 1px solid #f0eef2; display: flex; gap: 10px; padding: 12px 0; }.activity-item:last-child { border-bottom: 0; }.activity-avatar { align-items: center; border-radius: 50%; display: flex; font-size: 9px; font-weight: 700; height: 29px; justify-content: center; width: 29px; }.activity-avatar.blue { background: #dceafe; color: #5788ce; }.activity-avatar.peach { background: #ffe5d4; color: #df8b5b; }.activity-avatar.lilac { background: #ebe1ff; color: #896ad2; }.activity-avatar.mint { background: #dff5e9; color: #4caa7b; }.activity-item strong { font-size: 10px; }.activity-item p { color: #77727f; font-size: 9px; margin: 2px 0; }.activity-item small { color: #aaa5af; font-size: 8px; }.activity-type { background: #f2eff5; border-radius: 5px; color: #8c8794; font-size: 8px; margin-left: auto; padding: 4px 6px; }.activity-type.new { background: #fff0e6; color: #dd8957; }.activity-type.done { background: #e8f7ef; color: #48a677; }.bottom-panels { margin-bottom: 19px; }.send-panel form { margin-top: 21px; }.send-panel label, .customer-message-form label { color: #716c78; display: block; font-size: 10px; font-weight: 700; margin-bottom: 13px; }.send-panel input, .send-panel textarea, .customer-message-form input, .customer-message-form textarea, .api-key-panel input { background: #fcfbfd; border: 1px solid #e8e4ec; border-radius: 7px; color: var(--ink); display: block; font-size: 11px; margin-top: 7px; outline: none; padding: 11px 12px; resize: vertical; width: 100%; }.send-panel input:focus, .send-panel textarea:focus, .customer-message-form input:focus, .customer-message-form textarea:focus, .api-key-panel input:focus { border-color: #b5a2f1; box-shadow: 0 0 0 3px #f1edff; }.form-footer { align-items: center; display: flex; justify-content: space-between; margin-top: 5px; }.form-footer small { color: #aaa5ae; font-size: 9px; }.form-footer .button { font-size: 10px; padding: 10px 13px; }.form-feedback { color: var(--purple); font-size: 10px; margin: 11px 0 0; min-height: 15px; }.form-feedback.error { color: #d36d67; }.soft-badge { background: #f0ecff; border-radius: 20px; color: var(--purple); font-size: 9px; font-weight: 700; padding: 6px 9px; }.green-badge { background: #e5f7ed; color: #4aa879; }.qr-content { align-items: center; display: flex; gap: 20px; margin-top: 22px; }.qr-preview { align-items: center; background: #f7f5fb; border: 1px dashed #d5cce9; border-radius: 8px; display: flex; flex-shrink: 0; height: 130px; justify-content: center; overflow: hidden; width: 130px; }.qr-preview img { height: 112px; width: 112px; }.qr-placeholder { color: #aaa3b4; font-size: 10px; line-height: 1.5; text-align: center; }.qr-copy { color: #85808d; font-size: 10px; line-height: 1.6; margin: 0 0 13px; }.qr-hint { color: #aaa5ae; font-size: 9px; margin: 13px 0 0; }.qr-hint code { background: #f3f0f7; border-radius: 4px; color: var(--purple); padding: 2px 4px; }.api-key-panel { align-items: center; background: #f0ecff; border: 1px solid #e2dafb; border-radius: 10px; display: flex; gap: 20px; justify-content: space-between; padding: 15px 18px; }.api-key-panel strong { font: 600 12px 'Space Grotesk'; }.api-key-panel p { color: #8d84a6; font-size: 10px; margin: 3px 0 0; }.api-key-panel form { display: flex; gap: 7px; min-width: 340px; }.api-key-panel input { background: white; margin: 0; }.api-key-panel .button { font-size: 10px; padding: 10px 13px; }

/* Customer panel */
.customer-billing-card { margin-bottom: 18px; }
.customer-billing-description { color: #85808b; font-size: 11px; line-height: 1.6; margin: 14px 0 0; }
.customer-plan-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 20px; }
.customer-plan-list .plan-box { background: #fcfbfd; min-height: 106px; }
.customer-plan-list .plan-box h2 { font-size: 16px; }
.customer-plan-list .plan-box p { color: var(--muted); font-size: 10px; margin: 0; }
.customer-plan-list .plan-box strong { color: var(--purple); }
.customer-body { background: #f8f7fa; }.customer-header { align-items: center; display: flex; height: 84px; justify-content: space-between; }.customer-header-right { align-items: center; display: flex; gap: 23px; }.secure-label { color: #938e99; font-size: 10px; }.secure-label i { background: #e2f6eb; border-radius: 50%; color: #45ad7c; font-style: normal; margin-right: 5px; padding: 3px 5px; }.customer-avatar { background: #d9cef9; color: var(--purple); height: 32px; width: 32px; }.customer-main { padding: 48px 0 0; }.customer-welcome { align-items: end; display: flex; justify-content: space-between; margin-bottom: 39px; }.customer-welcome h1 { font-size: 40px; margin: 11px 0 8px; }.customer-welcome p { color: #85808b; font-size: 13px; margin: 0; }.customer-help { color: #96909e; font-size: 11px; }.customer-help a { color: var(--purple); font-weight: 700; margin-left: 4px; }.customer-grid { display: grid; gap: 18px; grid-template-columns: 1.15fr 1fr; margin-bottom: 18px; }.customer-card { padding: 25px; }.profile-top { align-items: center; display: flex; gap: 13px; }.profile-avatar { align-items: center; background: #f1c1a1; border-radius: 50%; color: white; display: flex; font: 600 17px 'Space Grotesk'; height: 54px; justify-content: center; width: 54px; }.profile-top h2, .service-card h2 { font-size: 18px; margin: 0 0 3px; }.profile-top p, .service-card p { color: #9b96a1; font-size: 10px; margin: 0; }.more-button { background: transparent; border: 0; color: #aaa5af; font-size: 13px; margin-left: auto; }.profile-meta { border-top: 1px solid #f0edf2; display: flex; gap: 68px; margin: 24px 0 17px; padding-top: 17px; }.profile-meta small, .profile-meta strong { display: block; }.profile-meta small { color: #aaa5ae; font-size: 9px; margin-bottom: 3px; }.profile-meta strong { font-size: 11px; font-weight: 600; }.service-card { background: #f0ecff; border-color: #e2dafb; }.service-card-head { align-items: start; display: flex; justify-content: space-between; }.service-card h2 { color: var(--purple-dark); margin-top: 8px; }.service-card p { color: #8c82a9; margin-top: 14px; }.service-signal { align-items: center; background: #dff4e9; border-radius: 50%; display: flex; height: 38px; justify-content: center; width: 38px; }.service-signal i { background: #5cbe90; border-radius: 50%; box-shadow: 0 0 0 5px rgba(92,190,144,.16); height: 9px; width: 9px; }.service-line { background: #ddd5f1; border-radius: 3px; height: 5px; margin: 25px 0 16px; overflow: hidden; }.service-line span { background: var(--purple); border-radius: 3px; display: block; height: 100%; width: 100%; }.service-footer { color: #81779f; display: flex; font-size: 9px; justify-content: space-between; }.customer-grid-main { align-items: start; grid-template-columns: 1.45fr .75fr; }.conversation-card { padding: 28px; }.card-heading { align-items: center; display: flex; justify-content: space-between; }.card-heading h2 { font-size: 19px; margin: 5px 0 0; }.message-status { color: #55ae83; font-size: 10px; }.conversation-preview { align-items: center; background: #faf9fc; border: 1px solid #f0edf2; border-radius: 9px; display: flex; gap: 10px; margin: 23px 0 25px; padding: 13px; }.conversation-preview strong { font-size: 11px; }.conversation-preview p { color: #a09ba4; font-size: 9px; margin: 2px 0 0; }.arrow-circle { align-items: center; background: #eae4ff; border-radius: 50%; color: var(--purple); display: flex; font-size: 15px; height: 26px; justify-content: center; margin-left: auto; width: 26px; }.customer-message-form { max-width: 585px; }.customer-side { display: flex; flex-direction: column; gap: 18px; }.tip-card { background: var(--purple); color: white; min-height: 205px; position: relative; overflow: hidden; }.tip-card:after { border: 1px solid rgba(255,255,255,.2); border-radius: 50%; content: ''; height: 210px; position: absolute; right: -75px; top: -80px; width: 210px; }.tip-card .eyebrow { color: #d9ceff; }.tip-card h2 { font-size: 22px; line-height: 1.05; margin: 14px 0 10px; position: relative; z-index: 1; }.tip-card h2 em { color: #f6c29d; }.tip-card p { color: #d9d0f4; font-size: 10px; line-height: 1.6; max-width: 260px; position: relative; z-index: 1; }.tip-sparkle { color: #f6c29d; font-size: 22px; position: absolute; right: 30px; top: 34px; }.faq-card { padding-bottom: 10px; }.faq-card .card-heading { margin-bottom: 11px; }.faq-card .card-heading h2 { font-size: 16px; }.faq-card a { border-top: 1px solid #f0edf2; color: #6f6a77; display: flex; font-size: 10px; justify-content: space-between; padding: 12px 0; }.faq-card a span { color: var(--purple); font-size: 17px; line-height: 10px; }.customer-footer-note { align-items: center; background: #f1ede6; border: 1px solid #ebe4db; border-radius: 12px; display: flex; gap: 17px; margin: 34px 0 0; padding: 19px 23px; }.customer-footer-note > span { color: var(--orange); font-size: 23px; }.customer-footer-note p { color: #98908b; font-size: 10px; line-height: 1.5; margin: 0; }.customer-footer-note strong { color: #67616a; font-weight: 600; }.customer-footer-note .button { font-size: 10px; margin-left: auto; padding: 10px 13px; }.customer-footer { margin-top: 35px; }

@media (max-width: 980px) {
  .container { width: min(100% - 40px, 720px); }.main-nav { margin-left: 0; }.header-actions .text-link { display: none; }.hero { gap: 20px; grid-template-columns: 1fr 1fr; }.hero h1 { font-size: 49px; }.hero-visual { transform: scale(.85); transform-origin: center left; }.section-heading h2 { font-size: 39px; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-card-large { grid-column: span 2; }.dashboard-header, .dashboard-content { padding-left: 28px; padding-right: 28px; }.sidebar { width: 208px; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-columns, .customer-grid, .customer-grid-main { grid-template-columns: 1fr; }.activity-panel { min-height: auto; }.customer-welcome { align-items: start; flex-direction: column; gap: 20px; }.customer-help { align-self: end; }.customer-side { display: grid; grid-template-columns: 1fr 1fr; }.api-key-panel { align-items: start; flex-direction: column; }.api-key-panel form { min-width: 100%; width: 100%; }
}
@media (max-width: 680px) {
  .container { width: calc(100% - 34px); }.site-header { height: 72px; }.main-nav, .header-actions { display: none; }.menu-button { display: block; }.site-header .menu-button { margin-left: auto; }.hero { display: block; min-height: auto; padding: 58px 0 35px; }.hero h1 { font-size: clamp(47px, 14vw, 68px); }.hero-visual { height: 450px; margin: 20px auto 0; transform: scale(.85); transform-origin: top center; width: 420px; max-width: 100%; }.logo-list { flex-wrap: wrap; gap: 18px 35px; }.section { padding: 75px 0; }.section-heading { align-items: start; display: block; }.section-heading h2 { font-size: 39px; }.section-heading > p { margin-top: 22px; }.feature-grid { display: block; }.feature-card { margin-bottom: 14px; min-height: 330px; }.feature-card-large { min-height: 385px; }.steps { display: block; }.step, .step:first-child { border-left: 0; border-top: 1px solid #d9d2e0; margin-top: 20px; padding: 20px 0 0; }.step:first-child { border-top: 0; margin-top: 0; padding-top: 0; }.step h3 { margin-top: 11px; }.cta { align-items: start; display: block; margin-top: 60px; padding: 34px 28px; }.cta h2 { font-size: 37px; margin-bottom: 28px; }.site-footer { align-items: start; flex-direction: column; gap: 15px; margin-top: 60px; }.dashboard-shell { display: block; }.sidebar { box-shadow: 0 8px 30px rgba(35,25,50,.1); left: -250px; position: fixed; top: 0; transition: left .25s ease; z-index: 10; }.sidebar.open { left: 0; }.dashboard-header { min-height: 86px; padding: 20px 17px; }.dashboard-header h1 { font-size: 19px; }.dashboard-menu { display: block; margin-right: 10px; }.breadcrumb { margin-bottom: 7px; }.header-date { display: none; }.dashboard-header > div:nth-child(2) { margin-right: auto; }.header-tools { gap: 8px; }.dashboard-content { padding: 20px 17px 35px; }.status-banner { align-items: start; flex-direction: column; gap: 17px; padding: 17px; }.status-banner .button { font-size: 10px; padding: 10px 13px; }.metric-grid { gap: 10px; }.metric-card { padding: 15px; }.metric-card > strong { font-size: 22px; }.panel-card { padding: 18px 15px; }.panel-heading h2 { font-size: 16px; }.chart-legend { margin-left: 35px; }.chart-x { font-size: 7px; }.qr-content { align-items: start; flex-direction: column; }.qr-preview { height: 140px; width: 140px; }.api-key-panel form { display: block; }.api-key-panel form .button { margin-top: 8px; width: 100%; }.customer-header { height: 70px; }.secure-label { display: none; }.customer-main { padding-top: 35px; }.customer-welcome h1 { font-size: 36px; }.customer-side { display: flex; }.customer-card { padding: 19px; }.profile-meta { gap: 25px; }.profile-meta strong { font-size: 10px; }.customer-footer-note { align-items: start; flex-wrap: wrap; }.customer-footer-note .button { margin-left: 0; width: 100%; }.customer-footer-note p { flex: 1; }.auth-layout { display: flex; flex-direction: column; gap: 35px; padding-bottom: 30px; padding-top: 30px; }.auth-intro { gap: 48px; }.auth-intro h1 { font-size: 46px; margin-top: 18px; }.auth-card { align-self: stretch; padding: 23px; }
}

/* Customer authentication */
.auth-body { background: #f2eff6; min-height: 100vh; }
.auth-layout { align-items: stretch; display: grid; gap: 70px; grid-template-columns: 1fr 430px; min-height: 100vh; padding-bottom: 55px; padding-top: 55px; }
.auth-intro { display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0 10px; }
.auth-intro > div { max-width: 520px; }
.auth-intro h1 { font-size: clamp(48px, 6vw, 72px); line-height: 1; margin: 25px 0 22px; }
.auth-intro p { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 430px; }
.auth-back-link { color: var(--purple); font-size: 12px; font-weight: 700; }
.auth-card { align-self: center; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 31px; }
.auth-card-heading { align-items: flex-start; display: flex; gap: 14px; }
.auth-card-heading h2 { font-size: 25px; margin: 7px 0 5px; }
.auth-card-heading p { color: var(--muted); font-size: 11px; margin: 0; }
.auth-card-heading a { color: var(--purple); font-weight: 700; }
.auth-icon { align-items: center; background: var(--purple-soft); border-radius: 11px; color: var(--purple); display: flex; flex-shrink: 0; font-size: 21px; height: 42px; justify-content: center; width: 42px; }
.auth-form { margin-top: 28px; }
.auth-form label { color: #716c78; display: block; font-size: 11px; font-weight: 700; margin-bottom: 16px; }
.auth-form label > span { color: #aaa5ae; font-size: 10px; font-weight: 400; }
.auth-form input { background: #fcfbfd; border: 1px solid #e8e4ec; border-radius: 8px; color: var(--ink); display: block; font-size: 12px; margin-top: 7px; outline: none; padding: 13px; width: 100%; }
.auth-form input:focus { border-color: #b5a2f1; box-shadow: 0 0 0 3px #f1edff; }
.auth-form label small { color: #aaa5ae; display: block; font-size: 9px; font-weight: 400; margin-top: 6px; }
.auth-submit { margin-top: 4px; width: 100%; }
.auth-form .form-feedback { min-height: 30px; }
.auth-terms { color: #aaa5ae; font-size: 9px; line-height: 1.5; margin: 7px 0 0; text-align: center; }
.customer-logout { background: transparent; border: 0; color: var(--purple); font-size: 10px; font-weight: 700; padding: 4px; }
.customer-logout:hover { color: var(--purple-dark); }
.admin-logout { background: transparent; border: 0; color: var(--purple); font-size: 9px; font-weight: 700; margin-left: auto; padding: 4px; }
.admin-logout:hover { color: var(--purple-dark); }
.access-main { align-items: center; display: flex; justify-content: center; min-height: 70vh; }.access-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); max-width: 620px; padding: 42px; width: 100%; }.access-icon { align-items: center; background: var(--purple-soft); border-radius: 12px; color: var(--purple); display: inline-flex; font-size: 24px; height: 48px; justify-content: center; margin-bottom: 22px; width: 48px; }.access-card h1 { font-size: clamp(27px, 5vw, 42px); letter-spacing: -.06em; margin: 9px 0 13px; }.access-card > p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; }.access-status { background: #faf9fc; border: 1px solid var(--line); border-radius: 9px; color: #625d6d; font-size: 12px; margin: 25px 0 16px; padding: 13px 15px; }.plan-box { align-items: center; border: 1px solid #e7e0fb; border-radius: 12px; display: flex; justify-content: space-between; padding: 18px; }.plan-box h2 { font-size: 18px; margin: 5px 0; }.plan-box p { color: var(--muted); font-size: 11px; margin: 0; }.plan-box strong { color: var(--purple); }.access-note { color: #aaa5ae; display: block; font-size: 10px; line-height: 1.5; margin-top: 18px; }.access-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }.access-nav-link { text-decoration: none; }.qr-access-box { align-items: center; background: #faf9fc; border: 1px dashed #d4c9ef; border-radius: 12px; color: var(--muted); display: flex; justify-content: center; min-height: 260px; padding: 20px; text-align: center; }.qr-access-box img { border-radius: 8px; max-width: 220px; width: 100%; }.new-key-box { background: #201b2c; border-radius: 10px; color: white; display: grid; gap: 10px; margin-top: 18px; padding: 16px; }.new-key-box code { font-size: 12px; overflow-wrap: anywhere; }.new-key-box small { color: #d4c9e9; font-size: 10px; }.new-key-box .button { justify-self: start; }.access-card code { background: #f0ecff; border-radius: 4px; color: var(--purple-dark); font-size: .9em; padding: 2px 4px; }