.login-shell { align-items: center; display: flex; justify-content: center; min-height: 70vh; padding: 32px; }
 .login-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--app-shadow); max-width: 460px; padding: 36px; width: 100%; }
 .login-card h1 { font-size: 3rem; margin: 12px 0 24px; }
:root { --app-shadow: 0 18px 45px rgba(30,45,39,.08); }
.app-shell { margin: 0 auto; max-width: 1240px; padding: 60px 32px 120px; }
.narrow-shell { max-width: 780px; }
.app-heading, .detail-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 32px; }
.app-heading h1, .detail-heading h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 8px; }
.muted { color: var(--muted); }
.back-link { color: var(--muted); display: inline-block; font-size: .8rem; font-weight: 800; margin-bottom: 32px; }
.ticket-filter { background: var(--panel); border: 1px solid var(--line); display: flex; gap: 10px; margin-bottom: 18px; padding: 14px; }
.ticket-filter input, .ticket-filter select, .ticket-form input, .ticket-form select, .ticket-form textarea { background: transparent; border: 1px solid var(--line); color: var(--ink); font: inherit; padding: 11px; width: 100%; }
.ticket-filter input { flex: 1; }.ticket-filter select { max-width: 180px; }
.ticket-table { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--app-shadow); }
.ticket-table-head, .ticket-table-row { align-items: center; display: grid; gap: 18px; grid-template-columns: 1.4fr 1.2fr .9fr .8fr .7fr; padding: 17px 20px; }
.ticket-table-head { color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }.ticket-table-row { border-top: 1px solid var(--line); font-size: .78rem; }.ticket-table-row:hover { background: #f0f3e5; }.ticket-table-row small { color: var(--muted); display: inline-block; font-size: .75rem; font-weight: 500; margin-top: 4px; }
.app-pill { background: #edf5ce; color: #596d36; display: inline-block; font-size: .65rem; font-weight: 900; padding: 5px 8px; width: fit-content; }
.ticket-form { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; padding: 28px; }.ticket-form label { font-size: .72rem; font-weight: 900; margin-top: 10px; }.ticket-form button { align-self: flex-start; margin-top: 18px; }.validation-summary, .field-validation-error { color: #bd4835; font-size: .72rem; }
.ticket-layout { display: grid; gap: 18px; grid-template-columns: 1.5fr .8fr; }.conversation, .time-panel { background: var(--panel); border: 1px solid var(--line); padding: 26px; }.conversation h2, .time-panel h2 { font-size: 1.4rem; }.message-card { border-top: 1px solid var(--line); padding: 18px 0; }.message-card div { align-items: baseline; display: flex; gap: 10px; }.message-card small { color: var(--muted); font-size: .65rem; }.message-card p { white-space: pre-wrap; }.compact-form { border: 0; padding: 20px 0 0; }.checkbox { align-items: center; display: flex; gap: 8px; }.checkbox input { width: auto; }.time-total { color: var(--coral); font-size: 3rem; font-weight: 900; letter-spacing: -.08em; }.time-panel hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }.time-line { border-bottom: 1px solid var(--line); display: flex; flex-direction: column; font-size: .72rem; gap: 3px; padding: 10px 0; }.time-line span { color: var(--muted); }
@media (max-width: 900px) { .ticket-layout { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .app-shell { padding-left: 20px; padding-right: 20px; }.app-heading, .detail-heading { align-items: flex-start; flex-direction: column; gap: 20px; }.ticket-filter { align-items: stretch; flex-direction: column; }.ticket-filter select { max-width: none; }.ticket-table { overflow-x: auto; }.ticket-table-head, .ticket-table-row { min-width: 680px; } }
:root { --ink: #17211f; --muted: #64706c; --paper: #f4f1e9; --panel: #fffdf8; --line: #d9d8cf; --acid: #d5f25f; --coral: #ff745c; --deep: #1d3a34; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Segoe UI", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.site-header { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 26px 32px; }.site-brand { align-items: center; display: flex; font-size: 1.15rem; font-weight: 800; gap: 10px; }.brand-mark { align-items: center; background: var(--ink); color: var(--acid); display: inline-flex; font-size: .9rem; font-weight: 900; height: 30px; justify-content: center; transform: rotate(-8deg); width: 30px; }.small-mark { font-size: .7rem; height: 22px; width: 22px; }nav { align-items: center; display: flex; gap: 28px; }nav a { color: var(--muted); font-size: .82rem; font-weight: 700; }.header-cta { background: var(--ink); color: white; padding: 11px 16px; }
.hero-shell, .feature-section, .pricing-section, .demo-section, .ownership-section, .intro-band { margin: 0 auto; max-width: 1240px; padding-left: 32px; padding-right: 32px; }.hero-shell { align-items: center; display: grid; gap: 70px; grid-template-columns: 1fr 1fr; min-height: 680px; padding-bottom: 90px; padding-top: 70px; }.eyebrow, .section-kicker, .price-label, .console-top, .ticket-list-head { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.eyebrow { align-items: center; display: flex; gap: 10px; }.eyebrow-dot { background: var(--coral); border-radius: 50%; height: 7px; width: 7px; }h1, h2, h3, p { margin-top: 0; }h1 { font-size: clamp(3rem, 6vw, 5.8rem); letter-spacing: -.065em; line-height: .96; margin-bottom: 28px; max-width: 650px; }h2 { font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.05em; line-height: 1; }.hero-lead { color: var(--muted); font-size: 1.1rem; max-width: 540px; }.hero-actions { align-items: center; display: flex; gap: 24px; margin: 38px 0 44px; }.button { border: 0; cursor: pointer; display: inline-flex; font-size: .78rem; font-weight: 800; gap: 18px; justify-content: center; padding: 15px 20px; }.button-primary { background: var(--coral); color: #fff; }.button-outline { border: 1px solid var(--ink); }.text-link { border-bottom: 1px solid currentColor; font-size: .82rem; font-weight: 800; padding-bottom: 3px; }.nav-form { display: inline; margin: 0; }button.text-link { background: none; border: 0; border-bottom: 1px solid currentColor; color: inherit; cursor: pointer; font-family: inherit; }.proof-row { display: flex; flex-wrap: wrap; gap: 8px; }.proof-row span { border: 1px solid var(--line); color: var(--muted); font-size: .65rem; font-weight: 800; padding: 6px 9px; }
.hero-console { background: var(--deep); box-shadow: 0 24px 70px rgba(30,45,39,.14); color: #edf4dc; padding: 22px; transform: rotate(2deg); }.console-top, .console-footer { display: flex; gap: 8px; }.console-top { color: #94ae9e; font-size: .58rem; }.console-date { margin-left: auto; }.console-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 26px 0 12px; }.metric-card { background: rgba(255,255,255,.07); padding: 17px; }.metric-card span, .metric-card small { color: #9eb2a9; display: block; font-size: .62rem; }.metric-card strong { display: block; font-size: 1.8rem; margin: 8px 0; }.metric-card small { color: var(--acid); }.accent-card { background: var(--acid); color: var(--ink); }.accent-card span, .accent-card small { color: #5b6d38; }.ticket-list { border-top: 1px solid rgba(255,255,255,.16); margin-top: 20px; }.ticket-list-head, .ticket-row { display: grid; gap: 12px; grid-template-columns: 1.4fr 1fr .7fr; padding: 14px 4px; }.ticket-list-head { color: #88a394; font-size: .55rem; }.ticket-row { border-top: 1px solid rgba(255,255,255,.09); font-size: .7rem; }.status-open { color: var(--acid); }.status-waiting { color: #f5bd70; }.status-ready { color: #ff8c78; }.console-footer { border-top: 1px solid rgba(255,255,255,.14); color: #8da79b; font-size: .55rem; margin-top: 18px; padding-top: 15px; }.console-footer strong { color: #edf4dc; font-size: .65rem; margin-left: auto; }
.intro-band { border-top: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: .8fr 1.5fr 1fr; padding-bottom: 100px; padding-top: 100px; }.intro-band h2 { margin: 0; }.intro-band > p:last-child { color: var(--muted); max-width: 340px; }.feature-section { padding-bottom: 120px; }.section-heading { margin-bottom: 34px; }.feature-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }.feature-card { background: var(--panel); border: 1px solid var(--line); min-height: 320px; padding: 28px; }.feature-card-dark { background: var(--deep); color: #eff6df; }.feature-card-dark p { color: #b4c4b1; }.feature-number { color: var(--coral); font-size: .7rem; font-weight: 900; }.feature-card h3 { font-size: 1.6rem; margin-top: 100px; }.feature-card p { color: var(--muted); font-size: .9rem; max-width: 270px; }
.screens-section { margin: 0 auto; max-width: 1240px; padding: 0 32px 120px; }.screens-heading { align-items: end; display: flex; justify-content: space-between; }.screens-heading > p { color: var(--muted); max-width: 290px; }.screens-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }.screen-card { min-width: 0; }.screen-wide { grid-column: 1 / -1; }.screen-browser { background: #fdfcf7; border: 1px solid var(--line); box-shadow: 0 18px 45px rgba(30,45,39,.08); overflow: hidden; }.browser-bar { align-items: center; background: #e8e8df; color: #7d8580; display: flex; font-size: .55rem; gap: 5px; min-height: 32px; padding: 0 12px; }.browser-bar > span { background: #a5ada5; border-radius: 50%; height: 5px; width: 5px; }.browser-bar strong { font-size: .55rem; font-weight: 800; margin-left: 9px; }.browser-bar small { margin-left: auto; }.screen-body { display: grid; grid-template-columns: 145px 1fr; min-height: 280px; }.screen-sidebar { background: var(--deep); color: #b6c8b9; display: flex; flex-direction: column; font-size: .62rem; gap: 16px; padding: 18px 12px; }.screen-sidebar strong { color: var(--acid); font-size: .8rem; margin-bottom: 18px; }.sidebar-active { background: rgba(213,242,95,.14); color: #f4f9e9; padding: 9px 8px; }.sidebar-active b { color: var(--acid); float: right; }.screen-main { padding: 22px; }.screen-title { align-items: center; display: flex; justify-content: space-between; }.screen-title small, .detail-body > small, .billing-body > small { color: var(--muted); font-size: .56rem; font-weight: 900; letter-spacing: .12em; }.screen-title h3, .detail-body h3, .billing-body h3 { font-size: 1.35rem; letter-spacing: -.05em; margin: 4px 0 0; }.screen-title button { background: var(--coral); border: 0; color: white; font-size: .6rem; font-weight: 800; padding: 9px; }.screen-filters { border-bottom: 1px solid var(--line); display: flex; gap: 18px; margin-top: 20px; padding-bottom: 9px; }.screen-filters span { color: var(--muted); font-size: .6rem; }.screen-filters .filter-active { color: var(--ink); font-weight: 900; }.screen-table { margin-top: 12px; }.screen-table > div { align-items: center; border-bottom: 1px solid #e7e6df; display: grid; font-size: .63rem; gap: 10px; grid-template-columns: 1fr 1.3fr 1fr .5fr; padding: 11px 4px; }.screen-table-head { color: var(--muted); font-size: .52rem !important; font-weight: 900; padding-top: 0 !important; }.screen-table em, .billing-line em { font-size: .55rem; font-style: normal; font-weight: 800; }.pill-green { color: #668c38; }.pill-yellow { color: #bc7d1c; }.pill-coral { color: #d65642; }.screen-caption { color: var(--muted); font-size: .72rem; margin: 12px 0 0; }.screen-caption strong { color: var(--ink); margin-right: 5px; }.detail-body, .billing-body { min-height: 300px; padding: 24px; }.detail-body h3, .billing-body h3 { font-size: 1.6rem; }.detail-customer { color: var(--muted); font-size: .65rem; }.message-bubble { background: #eef1e6; margin-top: 26px; padding: 14px; }.message-bubble strong { font-size: .65rem; }.message-bubble p { color: var(--muted); font-size: .68rem; margin: 7px 0; }.attachment-chip { color: var(--deep); font-size: .6rem; font-weight: 800; }.time-entry { align-items: center; background: var(--acid); display: flex; gap: 10px; margin-top: 12px; padding: 12px; }.clock-icon { font-size: 1.2rem; }.time-entry strong, .time-entry small { display: block; font-size: .65rem; }.time-entry small { color: #596d36; margin-top: 3px; }.time-entry b { font-size: .62rem; margin-left: auto; }.billing-total { align-items: end; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 22px; padding-bottom: 16px; }.billing-total span { color: var(--muted); font-size: .62rem; }.billing-total strong { font-size: 1.5rem; }.billing-line { align-items: center; border-bottom: 1px solid var(--line); display: flex; font-size: .65rem; justify-content: space-between; padding: 12px 0; }.billing-line b { font-size: .68rem; }.billing-line em { color: #668c38; }.billing-button { background: var(--deep); border: 0; color: #f4f9e9; font-size: .62rem; font-weight: 800; margin-top: 20px; padding: 12px; width: 100%; }.billing-footnote { color: var(--muted); font-size: .56rem; margin: 9px 0 0; text-align: center; }
.ownership-section { background: var(--acid); display: grid; gap: 80px; grid-template-columns: 1fr 1fr; padding-bottom: 90px; padding-top: 90px; }.ownership-copy h2 { max-width: 580px; }.ownership-copy > p:not(.section-kicker) { max-width: 480px; }.ownership-facts { align-items: center; border-left: 1px solid rgba(23,33,31,.25); display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); padding-left: 50px; }.ownership-facts strong { display: block; font-size: 2.8rem; }.ownership-facts span { font-size: .72rem; font-weight: 700; }.pricing-section { padding-bottom: 120px; padding-top: 120px; }.pricing-heading { align-items: end; display: flex; justify-content: space-between; }.pricing-heading > p { color: var(--muted); max-width: 260px; }.pricing-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }.price-card { background: var(--panel); border: 1px solid var(--line); min-height: 440px; padding: 28px; position: relative; }.price-card-featured { border: 2px solid var(--coral); }.popular-label { background: var(--coral); color: #fff; font-size: .58rem; font-weight: 900; left: 0; padding: 6px 10px; position: absolute; top: 0; }.price-label { margin-bottom: 26px; }.price-card h3 { font-size: 2.5rem; margin-bottom: 10px; }.price-card h3 small { color: var(--muted); font-size: .78rem; font-weight: 500; }.price-card > p:not(.price-label) { color: var(--muted); min-height: 52px; }.price-card ul { list-style: none; margin: 24px 0 28px; padding: 0; }.price-card li { border-top: 1px solid var(--line); font-size: .8rem; padding: 9px 0; }.price-card li::before { color: var(--coral); content: "✓"; font-weight: 900; margin-right: 8px; }.pricing-note { color: var(--muted); font-size: .72rem; margin-top: 20px; }
.demo-section { background: var(--deep); color: #f2f7e8; display: grid; gap: 80px; grid-template-columns: 1fr 1fr; padding-bottom: 100px; padding-top: 100px; }.demo-copy h2 { max-width: 520px; }.demo-copy > p:not(.section-kicker) { color: #b4c4b1; max-width: 460px; }.form-panel { background: var(--panel); color: var(--ink); padding: 30px; }.form-row { margin-bottom: 15px; }.form-row label { display: block; font-size: .72rem; font-weight: 800; margin-bottom: 6px; }.form-row label span, .consent span span { color: var(--coral); }.form-row input, .form-row select, .form-row textarea { background: transparent; border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: .8rem; padding: 11px; width: 100%; }.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--coral); outline: 2px solid rgba(255,116,92,.2); }.form-row input::placeholder, .form-row textarea::placeholder { color: #98a09b; }.form-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }.consent { align-items: flex-start; display: flex; font-size: .68rem; gap: 9px; margin: 16px 0; }.consent input { accent-color: var(--coral); }.button-full { width: 100%; }.form-footnote { color: var(--muted); font-size: .62rem; margin: 12px 0 0; text-align: center; }.field-validation-error, .validation-summary-errors { color: #bd4835; font-size: .68rem; }.validation-summary ul { margin: 0 0 12px; padding-left: 18px; }.honeypot { left: -9999px; position: absolute; }.success-message { background: #edf5ce; display: flex; flex-direction: column; gap: 8px; padding: 24px; }.success-message span { color: var(--muted); font-size: .85rem; }.site-footer { align-items: center; color: var(--muted); display: flex; font-size: .7rem; gap: 30px; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 26px 32px; }.site-footer > span:first-child { color: var(--ink); font-weight: 800; }
@media (max-width: 900px) { .hero-shell, .demo-section, .ownership-section { gap: 40px; grid-template-columns: 1fr; }.hero-shell { padding-top: 40px; }.hero-console { max-width: 650px; transform: none; }.intro-band { grid-template-columns: 1fr; }.feature-grid, .pricing-grid { grid-template-columns: 1fr; }.screens-heading { align-items: flex-start; flex-direction: column; }.screens-grid { grid-template-columns: 1fr; }.screen-wide { grid-column: auto; }.feature-card { min-height: 260px; }.feature-card h3 { margin-top: 70px; }.ownership-facts { border-left: 0; border-top: 1px solid rgba(23,33,31,.25); padding-left: 0; padding-top: 28px; }.pricing-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 620px) { .site-header { padding: 20px; }.site-header nav { flex-wrap: wrap; gap: 10px; }.hero-shell, .feature-section, .pricing-section, .demo-section, .ownership-section, .intro-band { padding-left: 20px; padding-right: 20px; }.hero-shell { min-height: auto; padding-bottom: 70px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.hero-console { padding: 15px; }.ownership-facts { gap: 12px; }.ownership-facts strong { font-size: 2rem; }.ownership-facts span { font-size: .62rem; }.form-panel { padding: 20px; }.site-footer { align-items: flex-start; flex-direction: column; gap: 10px; padding: 24px 20px; } }