@font-face {
  font-family: "Urbanist";
  src: url("/static/Urbanist-VariableFont_wght.ttf?v=20260720-approved-brand") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --klaxify-font: "Urbanist", Arial, sans-serif;
}

html,
body,
body * {
  font-family: var(--klaxify-font) !important;
}

pre,
code,
kbd,
samp,
.code-snippet,
.widget-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
}

/* Public-site typography: preserve the display scale while giving Urbanist more room. */
.public-shell :where(h1, h2, h3) {
  letter-spacing: -0.025em !important;
}

.public-shell :where(h4, h5, h6) {
  letter-spacing: -0.01em !important;
}

.public-shell .sales-hero h1 {
  max-width: 620px;
  font-size: clamp(56px, 5.35vw, 82px) !important;
  line-height: .97 !important;
  white-space: normal;
}

.public-shell .sales-hero h1 .hero-line {
  display: block;
  color: inherit;
  white-space: nowrap;
}

.public-shell .sales-hero h1 .hero-line.accent {
  color: var(--sales-blue);
}

/* Keep the desktop headline and product render in distinct grid tracks. */
@media (min-width: 1281px) {
  .public-shell .sales-hero {
    grid-template-columns: minmax(450px, .72fr) minmax(0, 1.28fr);
  }

  .public-shell .sales-hero-copy {
    min-width: 0;
  }

  .public-shell .sales-hero h1 {
    max-width: 100%;
    font-size: clamp(56px, 4.95vw, 76px) !important;
  }
}

@media (min-width: 1181px) and (max-width: 1280px) {
  .public-shell .sales-hero {
    grid-template-columns: 1fr;
    padding-bottom: 60px;
  }

  .public-shell .sales-hero-copy {
    text-align: center;
  }

  .public-shell .sales-hero h1,
  .public-shell .sales-hero-copy > p {
    margin-inline: auto;
  }

  .public-shell .sales-hero .sales-actions,
  .public-shell .sales-proof {
    justify-content: center;
  }

  .public-shell .hero-desk-render {
    width: 100%;
    transform: none;
    margin: 20px 0 0;
  }
}

.public-shell .public-announcement,
.public-shell .public-footer {
  font-size: 13px !important;
}

.public-shell .public-nav nav {
  font-size: 13px !important;
}

.public-shell .sales-kicker,
.public-shell .sales-proof,
.public-shell .sales-value-band span,
.public-shell .pricing-promise {
  font-size: 12px !important;
}

.public-shell .sales-button,
.public-shell .context-copy p,
.public-shell .context-copy li,
.public-shell .live-chat-grid > div > ul,
.public-shell .macro-result {
  font-size: 15px !important;
}

.public-shell .sales-hero-copy > p,
.public-shell .pricing-hero > p {
  font-size: 19px !important;
}

.public-shell .sales-heading > p,
.public-shell .live-chat-grid > div > p,
.public-shell .price-story-copy > p,
.public-shell .pricing-clarity p {
  font-size: 18px !important;
}

.public-shell .ai-agent-grid article > p,
.public-shell .sales-price-card header p,
.public-shell .pricing-faq details p {
  font-size: 13px !important;
}

.public-shell .ai-agent-grid article > b,
.public-shell .sales-price-card ul {
  font-size: 12px !important;
}

.public-shell .pricing-faq summary {
  font-size: 16px !important;
}

@media (max-width: 540px) {
  .public-shell .sales-hero h1 {
    font-size: 46px !important;
  }

  .public-shell .sales-hero-copy > p {
    font-size: 17px !important;
  }
}

/* Full helpdesk dark surfaces, including the three-pane inbox and data modules. */
html[data-theme="dark"] body.app-shell #app-view :where(h1,h2,h3,h4){color:#eef3fb}
html[data-theme="dark"] body.app-shell #app-view :where(.conversation-queue,.ticket-workspace,.customer-context,.ticket-scroll,.queue-header,.ticket-header,.customer-summary,.customer-timeline,.context-tags,.customer-notes){background:#0f1929!important;border-color:#2a374c!important;color:#e7edf7}
html[data-theme="dark"] body.app-shell #app-view :where(.queue-item,.ticket-bottom-actions,.composer-tabs,.composer-footer,.shopify-order-card,.customer-stats,.customer-message-card,.ai-response-card,.reply-composer,.macro-picker,.ticket-menu,.queue-menu){background:#131f31!important;border-color:#2d3b51!important;color:#e7edf7}
html[data-theme="dark"] body.app-shell #app-view .queue-item:hover{background:#18263b!important}html[data-theme="dark"] body.app-shell #app-view .queue-item.active{background:#1b2d49!important;box-shadow:inset 3px 0 0 var(--hd-blue)}html[data-theme="dark"] body.app-shell #app-view :where(.queue-subject,.queue-person strong,.ticket-header h2,.customer-message-card strong,.ai-response-copy,.customer-name h3,.customer-timeline strong,.shopify-order-card h3,.customer-notes p){color:#e7edf7!important}html[data-theme="dark"] body.app-shell #app-view :where(.queue-person time,.queue-meta,.ticket-header p,.customer-message-card small,.customer-message-card time,.ai-response-card small,.customer-name p,.customer-timeline small,.shopify-order-card dt){color:#92a0b5!important}html[data-theme="dark"] body.app-shell #app-view :where(.customer-message-card p,.ai-response-copy){background:#172438!important;border-color:#304059!important;color:#e4ebf6!important}html[data-theme="dark"] body.app-shell #app-view :where(.ticket-actions button,.ticket-bottom-actions button,.composer-footer button,.queue-controls button){background:#18263a!important;border-color:#344259!important;color:#dce5f2!important}html[data-theme="dark"] body.app-shell #app-view .thread-date:before{background:#2d3a4f}html[data-theme="dark"] body.app-shell #app-view .thread-date span{background:#0f1929;color:#8f9cb0}
html[data-theme="dark"] body.app-shell #app-view :where(.section-metrics article,.section-table-card,.section-table-row,.customer-directory>a,.product-directory article,.automation-grid article,.settings-directory>a,.analytics-hero,.support-workspace,.support-queue-pane,.support-case-pane,.support-diagnostics,.support-compose){background:#111b2b!important;border-color:#2b384d!important;color:#e7edf7!important}html[data-theme="dark"] body.app-shell #app-view :where(.section-table-card>header,.section-table-head){background:#172235!important;border-color:#2b384d!important}html[data-theme="dark"] body.app-shell #app-view :where(.section-table-row:hover,.customer-directory>a:hover,.settings-directory>a:hover){background:#18263a!important}html[data-theme="dark"] body.app-shell #app-view :where(.section-page-head span,.section-metrics small,.section-metrics span,.section-table-row small,.customer-directory p,.customer-directory small,.product-directory p,.automation-grid p,.settings-directory p){color:#98a5b9!important}

html[data-theme="dark"] body.app-shell #app-view :where(.customer-stats strong,.shopify-order-card dd,.order-product strong,.order-product small,.order-tracking span,.order-tracking b){color:#e7edf7!important}
html[data-theme="dark"] body.app-shell #app-view :where(.connection-overview>div,.platform-integration-grid article){background:#111b2b!important;border-color:#29364b!important}html[data-theme="dark"] body.app-shell #app-view :where(.connection-overview strong,.platform-integration-grid h3){color:#edf2fb!important}html[data-theme="dark"] body.app-shell #app-view .connection-features li{background:#1a273b;color:#b9c4d5}html[data-theme="dark"] body.app-shell #app-view .connection-setup-message{background:#2a2418;border-color:#5c4922}html[data-theme="dark"] body.app-shell #app-view .connection-setup-message :where(strong,span){color:#e8d39f}html[data-theme="dark"] body.app-shell #app-view .platform-integration-grid code{background:#172235;border-color:#334159;color:#dce5f2}

/* Persistent app theme. */
.theme-toggle{border:1px solid var(--ryfie-line)!important;border-radius:9px!important;background:#fff!important;color:#23304a!important}.theme-toggle .theme-moon{display:none}html[data-theme="dark"] .theme-toggle .theme-sun{display:none}html[data-theme="dark"] .theme-toggle .theme-moon{display:inline}
html[data-theme="dark"]{color-scheme:dark}html[data-theme="dark"] body.app-shell,html[data-theme="dark"] .helpdesk-app-main,html[data-theme="dark"] #app-view{background:#0b1220;color:#e8edf7}html[data-theme="dark"] body.app-shell{--ryfie-line:#283449;--ryfie-text:#ecf1fb;--ryfie-muted:#93a0b6;--hd-line:#283449;--hd-muted:#93a0b6;--line:#283449;--muted:#93a0b6}
html[data-theme="dark"] .helpdesk-topbar,html[data-theme="dark"] .integration-rail,html[data-theme="dark"] .persistent-integration-rail{background:#101928;border-color:#283449}html[data-theme="dark"] .topbar-tenant,html[data-theme="dark"] .global-search,html[data-theme="dark"] .topbar-copilot,html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .topbar-menu{background:#172235!important;border-color:#2c3950!important;color:#e9eef8!important}html[data-theme="dark"] .topbar-tenant strong,html[data-theme="dark"] .topbar-copilot{color:#e9eef8}html[data-theme="dark"] .topbar-menu p,html[data-theme="dark"] .topbar-menu small{color:#95a2b7}html[data-theme="dark"] .topbar-menu a,html[data-theme="dark"] .topbar-menu button{color:#dce4f2}html[data-theme="dark"] .topbar-menu a:hover,html[data-theme="dark"] .topbar-menu button:hover{background:#202d42}
html[data-theme="dark"] .helpdesk-admin-page,html[data-theme="dark"] .helpdesk-section-page,html[data-theme="dark"] .agent-editor-page{color:#e7edf7}html[data-theme="dark"] :is(.agent-settings-card,.agent-editor-side>section,.macro-hero-card,.macro-library,.helpdesk-agent-grid>article,.configured-profiles article,.panel,.plugin-card,.connection-card,.billing-plan,.section-card,.knowledge-library){background:#111b2b!important;border-color:#29364b!important;color:#e7edf7}html[data-theme="dark"] :is(input,select,textarea){background:#172235!important;border-color:#334159!important;color:#edf2fb!important}html[data-theme="dark"] :is(.agent-active-toggle,.agent-choice-field,.agent-file-drop,.agent-openai-note,.agent-add-card,.macro-toolbar label,.macro-transformation,.variable-grid button,.data-row.header){background:#172235!important;border-color:#2f3c52!important;color:#e0e7f3!important}html[data-theme="dark"] :is(.agent-settings-card h2,.agent-editor-side h2,.admin-page-head h1,.helpdesk-agent-grid h2,.configured-profiles strong,.agent-stat-strip strong){color:#f2f5fb!important}html[data-theme="dark"] :is(.agent-settings-card p,.admin-page-head p,.knowledge-library p,.helpdesk-agent-grid p){color:#9aa7bb!important}html[data-theme="dark"] .agent-form-footer{background:#101928eb;border-color:#2d3a4f}html[data-theme="dark"] .persistent-integration-rail a,html[data-theme="dark"] .persistent-integration-rail button{color:#b2bfd2}html[data-theme="dark"] .persistent-integration-rail a.active{background:#25334b;color:#fff}html[data-theme="dark"] .agent-editor-shell #app-view{background:#0b1220}
html[data-theme="dark"] .order-detail-dialog>section{background:#111b2b;border-color:#2b384d;color:#e7edf7}html[data-theme="dark"] .order-detail-dialog>section>header,html[data-theme="dark"] .order-detail-dialog>section>footer,html[data-theme="dark"] .order-modal-items,html[data-theme="dark"] .order-modal-body>dl,html[data-theme="dark"] .order-modal-customer{border-color:#2b384d}html[data-theme="dark"] .order-modal-customer,html[data-theme="dark"] .order-modal-items>header{background:#172235}html[data-theme="dark"] .order-modal-items article,html[data-theme="dark"] .order-modal-body>dl>*{border-color:#29364b}html[data-theme="dark"] .order-detail-dialog>section>header>button{background:#172235;border-color:#334159;color:#e7edf7}html[data-theme="dark"] .ticket-order-chip{background:#25334b!important;color:#b9c7ff!important}html[data-theme="dark"] .timeline-order-link:hover{background:#18263a}

html[data-theme="dark"] body.app-shell #app-view .ai-response-card{background:linear-gradient(145deg,#2c2615,#242116)!important;border-color:#65572c!important;color:#f5edcf!important}html[data-theme="dark"] body.app-shell #app-view .ai-response-copy{background:#242116!important;border-color:#665a32!important;color:#f4edd7!important}html[data-theme="dark"] body.app-shell #app-view .composer-tabs .context-action-pill{background:#302a18!important;border-color:#6d5d2d!important;color:#f2dda0!important}html[data-theme="dark"] body.app-shell #app-view .composer-tabs .context-action-pill span{color:#f0c85c!important}html[data-theme="dark"] .shopify-inline-dialog form>.shopify-address-load-status{background:#172a21;border-color:#315a45;color:#a8dfc0}html[data-theme="dark"] .shopify-inline-dialog form>.shopify-address-load-status.is-empty,html[data-theme="dark"] .shopify-inline-dialog form>.shopify-address-load-status.is-error,html[data-theme="dark"] .shopify-inline-dialog form>.shopify-address-load-status.is-fallback{background:#302919;border-color:#66572c;color:#ead690}
html[data-theme="dark"] body.app-shell #app-view .conversation-reply-card.human-authored{background:#15283d;border-color:#315274}html[data-theme="dark"] body.app-shell #app-view .conversation-reply-card.human-authored .conversation-reply-avatar{background:#203e5e;color:#aad4ff}html[data-theme="dark"] body.app-shell #app-view .conversation-reply-card.human-authored :is(strong,p){color:#d9ebff}html[data-theme="dark"] body.app-shell #app-view .conversation-reply-card.human-authored :is(small,time){color:#8eb0d3}html[data-theme="dark"] body.app-shell #app-view .conversation-reply-card.ai-authored{background:#2c2615;border-color:#65572c}html[data-theme="dark"] body.app-shell #app-view .conversation-reply-card.ai-authored :is(strong,p){color:#f4edd7}html[data-theme="dark"] body.app-shell #app-view .conversation-reply-card.ai-authored :is(small,time){color:#cfbd7e}
html[data-theme="dark"] body.app-shell #app-view .customer-shopify-tags span{background:#203457;color:#b9ccff}html[data-theme="dark"] body.app-shell #app-view .customer-shopify-tags button{color:#aebbd0}
html[data-theme="dark"] body.app-shell #app-view .ai-draft-state.approval{background:#453817;color:#f3dfa0}html[data-theme="dark"] body.app-shell #app-view .ai-draft-state.approval i{background:#66521f}html[data-theme="dark"] body.app-shell #app-view .ai-draft-state.resolved{background:#173729;color:#aee3c7}html[data-theme="dark"] body.app-shell #app-view .conversation-reply-state{border-color:#65572c;color:#aee3c7}
/* The HelpDesk-style hero is intentionally stacked at every desktop width. */
.public-shell .sales-hero.helpdesk-style-hero {
  grid-template-columns: 1fr;
}

.public-shell .sales-hero.helpdesk-style-hero h1 {
  max-width: 980px;
  font-size: clamp(60px, 7.2vw, 98px) !important;
  line-height: .98 !important;
}

.public-shell .sales-hero.helpdesk-style-hero .hero-line {
  white-space: normal;
}