:root { --ink:#101a2d; --muted:#697386; --line:#e5e8ef; --paper:#f7f8fa; --white:#fff; --gold:#f0b34b; --gold-soft:#fff4dc; --blue:#3157c8; --blue-soft:#eaf0ff; --green:#2d8a67; --green-soft:#e7f6ef; --red:#b34c4c; --red-soft:#fff0ef; --brand-primary:#101a2d; --brand-accent:#f0b34b; --brand-accent-strong:#3157c8; --brand-soft:#fff4dc; --brand-mark-foreground:#101a2d; --shadow:0 14px 40px rgba(16,26,45,.07); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-size:16px; } button, input, select { font:inherit; } button { cursor:pointer; }
.shell { min-height:100vh; } .topbar { height:72px; padding:0 32px; background:var(--brand-primary); color:#fff; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:3; } .brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.03em; } .brand-mark { width:32px; height:32px; border-radius:10px; background:var(--brand-accent); color:var(--brand-mark-foreground); display:grid; place-items:center; font-weight:900; } .brand-wordmark.hinckley { font-family:"Arial Narrow", "Helvetica Neue Condensed", sans-serif; letter-spacing:.02em; text-transform:uppercase; } .org { color:#c8cfdd; font-size:.88rem; }
.layout { display:grid; grid-template-columns:220px minmax(0, 1fr); min-height:calc(100vh - 72px); } .sidebar { background:#fff; border-right:1px solid var(--line); padding:26px 16px; } .nav-label { margin:0 12px 10px; color:#9aa2b1; text-transform:uppercase; font-size:.7rem; letter-spacing:.11em; font-weight:800; } .nav button { width:100%; border:0; background:transparent; color:#617085; text-align:left; padding:12px; border-radius:10px; margin-bottom:4px; font-weight:650; } .nav button.active, .nav button:hover { background:var(--brand-soft); color:var(--brand-accent-strong); } .sidebar-footer { margin-top:50px; padding:16px 12px; background:var(--brand-soft); border-radius:14px; font-size:.84rem; line-height:1.45; }
.content { max-width:1360px; width:100%; margin:0 auto; padding:34px 42px 100px; } .page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; } h1 { margin:0; font-size:2rem; letter-spacing:-.045em; } h2 { margin:0; font-size:1.25rem; letter-spacing:-.025em; } h3 { margin:0; font-size:1rem; } p { margin:0; } .eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.11em; font-size:.72rem; font-weight:800; margin-bottom:7px; } .subtle { color:var(--muted); font-size:.92rem; line-height:1.5; }
.btn { border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); padding:10px 14px; font-weight:750; } .btn:hover { border-color:#b9c2d1; } .btn.primary { border-color:var(--brand-accent-strong); background:var(--brand-accent-strong); color:#fff; } .btn.gold { border-color:var(--gold); background:var(--gold); color:var(--ink); } .btn.small { padding:7px 10px; font-size:.86rem; } .btn.ghost { background:transparent; }
.grid { display:grid; gap:18px; } .grid.kpis { grid-template-columns:repeat(4,1fr); margin-bottom:20px; } .grid.two { grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr); } .grid.three { grid-template-columns:repeat(3,1fr); } .card { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 1px 0 rgba(16,26,45,.02); } .kpi strong { display:block; font-size:1.8rem; letter-spacing:-.05em; margin:7px 0 2px; } .kpi .trend { font-size:.82rem; color:var(--green); font-weight:750; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .event-list { display:grid; gap:12px; } .event-card { display:grid; grid-template-columns:8px 1fr auto; gap:14px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:13px; background:#fff; } .event-bar { height:100%; min-height:70px; border-radius:10px; background:var(--gold); } .event-card.blue .event-bar { background:var(--blue); } .event-card.green .event-bar { background:var(--green); } .event-title { font-weight:800; margin-bottom:6px; } .event-meta { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--muted); font-size:.86rem; } .event-meta span::before { content:'·'; margin-right:7px; color:#b4bbc7; } .event-meta span:first-child::before { content:''; margin:0; } .event-side { text-align:right; } .event-side strong { display:block; font-size:1.05rem; } .event-side small { color:var(--muted); }
.pill { display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:5px 9px; font-size:.75rem; font-weight:800; background:#eff1f5; color:#576276; } .pill.green { background:var(--green-soft); color:var(--green); } .pill.gold { background:var(--gold-soft); color:#8e5b0b; } .pill.blue { background:var(--blue-soft); color:var(--blue); } .pill.red { background:var(--red-soft); color:var(--red); }
.stack { display:grid; gap:10px; } .row { display:flex; align-items:center; justify-content:space-between; gap:12px; } .avatar { width:34px; height:34px; border-radius:50%; background:#dce6ff; color:var(--blue); display:grid; place-items:center; font-weight:800; font-size:.78rem; flex:none; } .person { display:flex; align-items:center; gap:10px; } .person-info strong { display:block; font-size:.9rem; } .person-info span { display:block; color:var(--muted); font-size:.8rem; margin-top:2px; }
.opportunity { border:1px solid #f2dfb7; background:#fffaf0; padding:14px; border-radius:13px; } .opportunity + .opportunity { margin-top:10px; } .opportunity .actions { display:flex; gap:8px; margin-top:13px; } .progress { height:7px; border-radius:99px; background:#e9edf3; overflow:hidden; margin-top:10px; } .progress span { display:block; height:100%; background:var(--gold); border-radius:inherit; }
.detail-hero { background:var(--brand-primary); color:white; border-radius:18px; padding:26px; margin-bottom:18px; } .detail-hero .subtle { color:#bcc6d7; } .detail-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; } .info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:18px; } .info-label { color:var(--muted); font-size:.78rem; margin-bottom:4px; } .info-value { font-weight:750; } .crew-list { display:grid; gap:12px; margin-top:15px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff; } table { width:100%; border-collapse:collapse; min-width:760px; } th, td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:.9rem; } th { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; } tr:last-child td { border-bottom:0; } .role-tag { display:inline-block; background:var(--blue-soft); color:var(--blue); border-radius:7px; padding:4px 7px; margin:2px 3px 2px 0; font-size:.73rem; font-weight:750; } .row-actions { display:flex; gap:6px; }
.availability { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:16px; } .day { border:1px solid var(--line); border-radius:11px; padding:10px 6px; text-align:center; background:#fff; } .day strong { display:block; font-size:.72rem; color:var(--muted); } .day span { display:block; margin:8px 0; font-size:1.1rem; font-weight:800; } .day button { border:0; background:transparent; color:var(--green); font-size:.76rem; font-weight:750; } .day.unavailable { background:var(--red-soft); border-color:#f0c7c5; } .day.unavailable button { color:var(--red); }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,var(--paper) 0%,var(--brand-soft) 100%); } .auth-card { width:min(100%,440px); background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px; box-shadow:var(--shadow); } .auth-card .brand { margin-bottom:30px; } .auth-card h1 { font-size:1.8rem; margin-bottom:10px; } .auth-card form { display:grid; gap:14px; margin-top:24px; } .auth-card label, .modal-card label { display:grid; gap:7px; color:var(--muted); font-size:.84rem; font-weight:750; } .auth-card input, .modal-card input, .modal-card select { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; outline:none; } .auth-card input:focus, .modal-card input:focus, .modal-card select:focus { border-color:var(--brand-accent-strong); box-shadow:0 0 0 3px var(--brand-soft); } .auth-message { min-height:24px; margin-top:16px; color:var(--muted); font-size:.88rem; } .auth-switch { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; } .auth-switch a { color:var(--brand-accent-strong); font-weight:750; } .modal-backdrop { position:fixed; inset:0; z-index:8; display:grid; place-items:center; padding:20px; background:rgba(16,26,45,.48); } .modal-card { width:min(100%,520px); max-height:90vh; overflow:auto; display:grid; gap:14px; background:#fff; border-radius:18px; padding:24px; box-shadow:var(--shadow); } .bottom-nav { display:none; } .toast { position:fixed; right:22px; bottom:22px; z-index:9; background:var(--brand-primary); color:#fff; border-radius:12px; padding:13px 16px; box-shadow:var(--shadow); font-weight:700; }
@media (max-width: 900px) { .layout { display:block; } .sidebar { display:none; } .content { padding:24px 18px 100px; } .topbar { padding:0 18px; height:64px; } .org { display:none; } .grid.kpis { grid-template-columns:repeat(2,1fr); } .grid.two, .detail-grid { grid-template-columns:1fr; } .grid.three { grid-template-columns:1fr; } .bottom-nav { position:fixed; display:grid; grid-template-columns:repeat(5,1fr); bottom:0; left:0; right:0; height:70px; background:#fff; border-top:1px solid var(--line); z-index:4; padding:7px 6px calc(7px + env(safe-area-inset-bottom)); } .bottom-nav button { border:0; background:transparent; color:#7d8798; font-size:.68rem; font-weight:750; } .bottom-nav button.active { color:var(--blue); } .bottom-nav .nav-icon { display:block; font-size:1.2rem; margin-bottom:3px; } .page-head { margin-bottom:22px; } h1 { font-size:1.65rem; } .event-card { grid-template-columns:6px 1fr; } .event-side { grid-column:2; text-align:left; display:flex; justify-content:space-between; align-items:center; } .availability { gap:4px; } .day { padding:8px 2px; } }
@media (max-width: 500px) { .grid.kpis { gap:10px; } .card { padding:16px; border-radius:14px; } .kpi strong { font-size:1.45rem; } .topbar .brand { font-size:.95rem; } .info-grid { gap:12px; } }
.top-logout { background:transparent; color:#fff; border-color:#536079; }
.page-description { margin-top:6px; max-width:760px; }
.page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-card { display:flex; gap:10px; margin-bottom:18px; }
.filter-card input, .filter-card select, .form-stack input, .form-stack select, .form-stack textarea, .form-grid input, .form-grid select, .form-grid textarea, .requirement-row input, .requirement-row select, .feed-row input { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; outline:none; background:#fff; }
.filter-card input { flex:1; }
.filter-card select { max-width:220px; }
.form-stack { display:grid; gap:14px; }
.form-stack label, .form-grid label { display:grid; gap:7px; color:var(--muted); font-size:.84rem; font-weight:750; }
.form-stack textarea, .form-grid textarea { resize:vertical; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid .full { grid-column:1/-1; }
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus, .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .requirement-row input:focus, .requirement-row select:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.auth-alt { width:100%; margin-top:13px; }
.auth-code-help { color:var(--muted); font-size:.84rem; line-height:1.45; }
.auth-code-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.warning-box { border:1px solid #f2dfb7; background:#fffaf0; color:#694b13; border-radius:14px; padding:16px 20px; margin-bottom:18px; }
.warning-box ul { margin:8px 0 0 18px; padding:0; }
.checklist { color:#435066; line-height:1.8; }
.occurrence-editor { display:grid; grid-template-columns:1fr 1fr 1fr 1.3fr 1.2fr 1.5fr; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fafbfd; }
.occurrence-editor label { display:grid; gap:5px; color:var(--muted); font-size:.75rem; font-weight:750; }
.occurrence-editor input, .occurrence-editor select { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px; background:#fff; }
.requirement-header, .requirement-row { display:grid; grid-template-columns:1.5fr .45fr .8fr 1fr 1.3fr .65fr; gap:8px; align-items:center; }
.requirement-header { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; padding:0 4px 7px; }
.requirement-row { padding:8px; border:1px solid var(--line); border-radius:10px; }
.empty-state { padding:24px; border:1px dashed #cfd6e2; border-radius:12px; color:var(--muted); text-align:center; }
.attention-row, .notification-row, .directory-row, .feed-row { border:1px solid var(--line); background:#fff; border-radius:11px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; }
.attention-row { border:0; background:#fffaf0; }
.company-row { cursor:pointer; transition:background .16s ease, box-shadow .16s ease; }
.company-row:hover, .company-row:focus-visible { background:#fff3d9; box-shadow:0 0 0 2px var(--brand-soft); outline:none; }
.company-row-summary { display:grid; justify-items:end; gap:4px; }
.company-row-action { margin-top:4px; white-space:nowrap; }
.attention-row strong, .directory-row strong, .notification-row strong { display:block; }
.attention-row small, .directory-row small, .notification-row small { display:block; color:var(--muted); margin-top:3px; }
.directory-row { align-items:flex-start; }
.directory-row span { display:block; color:var(--muted); font-size:.82rem; margin-top:5px; }
.occurrence-card { display:grid; grid-template-columns:1fr 1.6fr; gap:12px; border:1px solid var(--line); padding:13px; border-radius:12px; }
.feed-row input { flex:1; min-width:0; font-size:.78rem; color:var(--muted); }
.feed-row { align-items:center; }
.modal-card { width:min(100%,620px); }
@media (max-width: 900px) { .form-grid, .occurrence-editor, .requirement-header, .requirement-row, .occurrence-card { grid-template-columns:1fr 1fr; } .requirement-header { display:none; } .filter-card { display:grid; } .filter-card select { max-width:none; } }
@media (max-width: 500px) { .form-grid, .occurrence-editor, .requirement-row, .occurrence-card { grid-template-columns:1fr; } .feed-row { align-items:stretch; flex-direction:column; } }

/* Public product homepage */
.marketing-shell { --m-ink:#111b2c; --m-muted:#697386; --m-line:#dfe5ee; --m-paper:#f5f7fa; --m-white:#fff; --m-red:#bd1f27; --m-red-bright:#ed4b4f; --m-soft:#fff0ef; min-height:100vh; background:var(--m-paper); color:var(--m-ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.marketing-shell a { color:inherit; text-decoration:none; } .marketing-nav { max-width:1240px; height:82px; margin:0 auto; padding:0 26px; display:flex; align-items:center; gap:28px; } .marketing-brand { display:flex; align-items:center; gap:11px; min-width:240px; } .marketing-brand-mark { width:36px; height:36px; display:grid; place-items:center; flex:none; border-radius:11px; background:var(--m-ink); color:#fff; font-weight:900; font-size:1.12rem; } .marketing-brand strong { display:block; font-size:1rem; letter-spacing:-.035em; } .marketing-brand small { display:block; color:var(--m-muted); font-size:.68rem; font-weight:650; margin-top:2px; } .marketing-links { display:flex; align-items:center; justify-content:center; gap:25px; flex:1; color:#546176; font-size:.82rem; font-weight:750; } .marketing-links a:hover, .marketing-footer a:hover { color:var(--m-red); } .marketing-nav-login { border:1px solid var(--m-line); background:#fff; border-radius:9px; padding:10px 14px; color:var(--m-ink); font-size:.82rem; font-weight:800; white-space:nowrap; }
.marketing-hero { max-width:1240px; margin:0 auto; padding:92px 26px 82px; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.92fr); align-items:center; gap:72px; } .marketing-hero-copy { max-width:640px; } .marketing-eyebrow { color:var(--m-red); font-size:.7rem; font-weight:900; letter-spacing:.15em; line-height:1.35; } .marketing-hero h1 { max-width:650px; margin:18px 0 20px; font-size:clamp(3.3rem,6vw,5.9rem); line-height:.94; letter-spacing:-.075em; } .marketing-lede { max-width:570px; color:#566378; font-size:1.1rem; line-height:1.65; } .marketing-actions { display:flex; align-items:center; gap:10px; margin-top:32px; flex-wrap:wrap; } .marketing-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; border:1px solid transparent; border-radius:10px; padding:13px 17px; font-size:.86rem; font-weight:850; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; } .marketing-button:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(17,27,44,.12); } .marketing-button.primary { background:var(--m-red); color:#fff; } .marketing-button.secondary { background:#fff; border-color:var(--m-line); color:var(--m-ink); } .marketing-button span { font-size:1.1rem; line-height:0; } .marketing-hero-note { display:flex; align-items:center; gap:9px; margin-top:28px; color:#7a8494; font-size:.8rem; line-height:1.5; } .marketing-dot { width:8px; height:8px; border-radius:50%; background:var(--m-red-bright); box-shadow:0 0 0 5px rgba(237,75,79,.13); flex:none; }
.marketing-demo { position:relative; overflow:hidden; border-radius:22px; background:var(--m-ink); color:#fff; box-shadow:0 28px 70px rgba(17,27,44,.2); transform:rotate(1.5deg); } .marketing-demo::before { content:''; position:absolute; inset:0; opacity:.24; background:linear-gradient(135deg,transparent 0 42%,rgba(237,75,79,.8) 42% 58%,transparent 58%), radial-gradient(circle at 85% 22%,#ed4b4f 0 1px,transparent 2px); background-size:auto,18px 18px; } .demo-window-bar { position:relative; z-index:1; display:flex; align-items:center; gap:6px; padding:17px 20px; border-bottom:1px solid rgba(255,255,255,.12); } .demo-window-bar > span { width:8px; height:8px; border-radius:50%; background:#667287; } .demo-window-bar > span:first-child { background:#ed4b4f; } .demo-window-bar em { margin-left:auto; color:#9ba8bb; font-size:.64rem; font-style:normal; letter-spacing:.11em; text-transform:uppercase; } .demo-inner { position:relative; z-index:1; margin:28px; padding:25px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.07); backdrop-filter:blur(6px); } .demo-label { color:#ff7e7f; font-size:.65rem; font-weight:850; letter-spacing:.13em; } .demo-title { margin-top:13px; font-size:1.55rem; font-weight:850; letter-spacing:-.045em; } .demo-meta { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; color:#b6c0d1; font-size:.75rem; } .demo-divider { height:1px; margin:24px 0 17px; background:rgba(255,255,255,.13); } .demo-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:16px; } .demo-row small { display:block; color:#8e9aad; font-size:.6rem; font-weight:800; letter-spacing:.1em; } .demo-row strong { display:block; margin-top:5px; font-size:.82rem; } .demo-confirmed { color:#78d9ae; } .demo-flow { display:flex; gap:7px; flex-wrap:wrap; margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.13); } .demo-flow span { border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:6px 8px; color:#8290a4; font-size:.65rem; font-weight:750; } .demo-flow .complete { color:#a9e6c7; border-color:rgba(120,217,174,.34); } .demo-flow .active { color:#fff; background:var(--m-red); border-color:var(--m-red); }
.marketing-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:1240px; margin:0 auto; padding:0 26px 90px; } .marketing-proof > div { padding:22px 30px 22px 0; border-top:1px solid var(--m-line); } .marketing-proof > div + div { padding-left:30px; border-left:1px solid var(--m-line); } .marketing-proof strong { display:block; font-size:.67rem; letter-spacing:.12em; } .marketing-proof span { display:block; max-width:260px; margin-top:8px; color:var(--m-muted); font-size:.8rem; line-height:1.55; }
.marketing-section, .marketing-split-section, .marketing-pricing, .marketing-faq { max-width:1240px; margin:0 auto; padding:95px 26px; } .marketing-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:35px; } .marketing-section-heading h2, .marketing-faq h2, .interest-copy h2 { margin:11px 0 0; max-width:640px; font-size:clamp(2.1rem,4vw,3.55rem); line-height:1; letter-spacing:-.065em; } .marketing-section-heading > p { max-width:365px; color:var(--m-muted); font-size:.94rem; line-height:1.6; } .marketing-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .marketing-feature-card { min-height:286px; padding:25px; border:1px solid var(--m-line); border-radius:16px; background:#fff; display:flex; flex-direction:column; } .marketing-feature-card.feature-dark { background:var(--m-ink); color:#fff; border-color:var(--m-ink); } .marketing-feature-card.feature-red { background:var(--m-red); color:#fff; border-color:var(--m-red); } .feature-number { color:#96a2b4; font-size:.7rem; font-weight:900; letter-spacing:.12em; } .feature-dark .feature-number, .feature-red .feature-number { color:#ff9d9e; } .marketing-feature-card h3 { max-width:235px; margin:35px 0 10px; font-size:1.25rem; letter-spacing:-.035em; } .marketing-feature-card p { color:#68758a; font-size:.84rem; line-height:1.6; } .feature-dark p, .feature-red p { color:#e3e7ee; } .feature-link { margin-top:auto; padding-top:24px; color:var(--m-red); font-size:.72rem; font-weight:850; } .feature-dark .feature-link, .feature-red .feature-link { color:#ffb2b3; }
.marketing-split-section { max-width:none; padding-left:max(26px,calc((100vw - 1188px)/2)); padding-right:max(26px,calc((100vw - 1188px)/2)); background:#eaf0f7; } .marketing-use-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .marketing-use-grid article { min-height:280px; padding:25px; border:1px solid #d8e0eb; border-radius:16px; background:rgba(255,255,255,.55); } .use-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--m-ink); color:#fff; font-size:1.2rem; } .marketing-use-grid h3 { margin:45px 0 10px; font-size:1.12rem; letter-spacing:-.03em; } .marketing-use-grid p { color:#66748a; font-size:.84rem; line-height:1.6; } .marketing-use-grid a { display:block; margin-top:20px; color:var(--m-red); font-size:.76rem; font-weight:850; }
.marketing-pricing { padding-bottom:110px; } .marketing-price-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .marketing-price-cards article { position:relative; min-height:245px; padding:28px; border:1px solid var(--m-line); border-radius:16px; background:#fff; } .marketing-price-cards article.recommended { border:2px solid var(--m-red); box-shadow:0 18px 38px rgba(189,31,39,.1); } .marketing-price-cards span { color:var(--m-muted); font-size:.72rem; font-weight:800; letter-spacing:.05em; } .marketing-price-cards strong { display:block; margin:18px 0 10px; font-size:2.5rem; letter-spacing:-.07em; } .marketing-price-cards strong span { color:var(--m-muted); font-size:.85rem; letter-spacing:0; } .marketing-price-cards p { color:#68758a; font-size:.84rem; line-height:1.6; } .marketing-price-cards b { position:absolute; top:15px; right:15px; padding:6px 8px; border-radius:99px; background:var(--m-soft); color:var(--m-red); font-size:.62rem; letter-spacing:.04em; }
.marketing-interest { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:45px; max-width:none; padding:100px max(26px,calc((100vw - 1188px)/2)); background:var(--m-ink); color:#fff; } .interest-copy { padding-top:15px; } .interest-copy .marketing-eyebrow { color:#ff8889; } .interest-copy h2 { max-width:450px; } .interest-copy > p { max-width:410px; margin-top:20px; color:#b9c3d2; font-size:.95rem; line-height:1.65; } .interest-list { display:grid; gap:10px; margin-top:32px; color:#dce3ec; font-size:.8rem; font-weight:700; } .interest-list i { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:8px; border-radius:50%; background:var(--m-red); color:#fff; font-style:normal; font-size:.72rem; } .interest-form { padding:28px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:#fff; color:var(--m-ink); box-shadow:0 22px 65px rgba(0,0,0,.18); } .interest-form-heading { display:flex; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--m-line); } .interest-form-heading > div:first-child > span { display:block; color:var(--m-red); font-size:.64rem; font-weight:900; letter-spacing:.12em; } .interest-form-heading > div:first-child > strong { display:block; margin-top:6px; font-size:1.25rem; letter-spacing:-.035em; } .interest-estimate { min-width:175px; text-align:right; } .interest-estimate small { display:block; color:var(--m-muted); font-size:.6rem; font-weight:900; letter-spacing:.1em; } .interest-estimate strong { display:block; margin-top:5px; color:var(--m-red); font-size:1.15rem; } .interest-estimate span { display:block; margin-top:4px; color:var(--m-muted); font-size:.68rem; line-height:1.35; } .interest-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:22px; } .interest-form label { display:grid; gap:7px; color:var(--m-muted); font-size:.75rem; font-weight:800; } .interest-form input, .interest-form select, .interest-form textarea { width:100%; border:1px solid var(--m-line); border-radius:9px; padding:11px 12px; outline:none; background:#fff; color:var(--m-ink); font:inherit; font-size:.84rem; } .interest-form input:focus, .interest-form select:focus, .interest-form textarea:focus { border-color:var(--m-red); box-shadow:0 0 0 3px var(--m-soft); } .interest-feature-picker { margin:22px 0 0; padding:0; border:0; } .interest-feature-picker legend { margin-bottom:11px; color:var(--m-muted); font-size:.75rem; font-weight:800; } .interest-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .interest-feature { display:flex !important; grid-template-columns:none !important; align-items:flex-start; gap:9px; padding:11px; border:1px solid var(--m-line); border-radius:10px; cursor:pointer; } .interest-feature:has(input:checked) { border-color:var(--m-red); background:var(--m-soft); } .interest-feature input { width:16px; height:16px; margin:2px 0 0; accent-color:var(--m-red); } .interest-feature strong { display:block; color:var(--m-ink); font-size:.76rem; } .interest-feature small { display:block; margin-top:4px; color:var(--m-muted); font-size:.68rem; font-weight:500; line-height:1.35; } .interest-message { margin-top:17px; } .interest-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .interest-submit-row { display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap; } .interest-form-message { min-height:20px; color:var(--m-muted); font-size:.75rem; line-height:1.4; } .interest-form-message.success { color:#187850; } .interest-form-message.error { color:var(--m-red); }
.marketing-faq { display:grid; grid-template-columns:.75fr 1.25fr; gap:65px; } .marketing-faq h2 { max-width:430px; } .faq-list { border-top:1px solid var(--m-line); } .faq-list details { border-bottom:1px solid var(--m-line); padding:19px 0; } .faq-list summary { cursor:pointer; list-style:none; font-size:.96rem; font-weight:800; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary::after { content:'+'; float:right; color:var(--m-red); font-size:1.2rem; } .faq-list details[open] summary::after { content:'−'; } .faq-list p { max-width:620px; margin-top:11px; color:var(--m-muted); font-size:.85rem; line-height:1.6; }
.marketing-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1240px; margin:0 auto; padding:30px 26px 42px; border-top:1px solid var(--m-line); color:var(--m-muted); font-size:.72rem; } .marketing-footer .marketing-brand { min-width:0; } .marketing-footer > div:nth-child(2) { display:flex; gap:18px; color:var(--m-ink); font-weight:800; }
.platform-interest-card { margin-top:18px; } .platform-interest-card a { color:var(--blue); font-weight:750; }
.modal-card { box-sizing:border-box; min-width:0; }
.modal-card > * { min-width:0; }
.modal-card.wide-modal { width:min(100%,980px); }
.modal-card.wide-modal .grid.kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
.modal-card.wide-modal .card, .modal-card.wide-modal section, .modal-card.wide-modal .table-wrap { min-width:0; max-width:100%; }
.modal-admin-action { justify-content:flex-end; padding-top:4px; border-top:1px solid var(--line); }
.addon-picker { margin:4px 0 0; padding:0; border:0; }
.addon-picker legend { color:var(--muted); font-size:.84rem; font-weight:800; margin-bottom:9px; }
.addon-picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.addon-option { display:flex !important; grid-template-columns:none !important; align-items:flex-start; gap:9px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; }
.addon-option:has(input:checked) { border-color:var(--brand-accent-strong); background:var(--brand-soft); }
.addon-option input { width:16px !important; height:16px; flex:none; margin-top:2px; accent-color:var(--brand-accent-strong); }
.addon-option strong, .addon-option small { display:block; }
.addon-option strong { color:var(--ink); font-size:.8rem; }
.addon-option small { margin-top:4px; color:var(--muted); font-size:.72rem; line-height:1.4; font-weight:500; }
.billing-summary { border:1px solid var(--line); border-radius:12px; padding:14px; background:#fafbfd; }
.billing-line { display:flex; justify-content:space-between; gap:18px; padding-top:8px; color:var(--muted); font-size:.86rem; }
@media (max-width:700px) { .addon-picker-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { .modal-card.wide-modal { width:100%; padding:16px; } .modal-card.wide-modal .grid.kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .modal-card.wide-modal .info-grid { grid-template-columns:1fr; } }
@media (max-width: 960px) { .marketing-hero { grid-template-columns:1fr; gap:48px; padding-top:65px; } .marketing-hero-copy { max-width:760px; } .marketing-demo { max-width:650px; width:100%; } .marketing-feature-grid { grid-template-columns:repeat(2,1fr); } .marketing-use-grid { grid-template-columns:repeat(2,1fr); } .marketing-interest { grid-template-columns:1fr; } .interest-copy { max-width:680px; } .marketing-faq { grid-template-columns:1fr; gap:35px; } }
@media (max-width: 700px) { .marketing-nav { height:auto; min-height:76px; padding:16px 18px; flex-wrap:wrap; gap:14px; } .marketing-links { order:3; flex-basis:100%; justify-content:flex-start; overflow:auto; gap:18px; padding-bottom:3px; } .marketing-nav-login { margin-left:auto; } .marketing-hero, .marketing-section, .marketing-split-section, .marketing-pricing, .marketing-faq { padding-left:18px; padding-right:18px; } .marketing-hero { padding-top:53px; padding-bottom:62px; } .marketing-hero h1 { font-size:3.4rem; } .marketing-proof { display:block; padding:0 18px 55px; } .marketing-proof > div, .marketing-proof > div + div { padding:19px 0; border-left:0; } .marketing-feature-grid, .marketing-use-grid, .marketing-price-cards, .interest-feature-grid { grid-template-columns:1fr; } .marketing-section, .marketing-split-section, .marketing-pricing, .marketing-faq { padding-top:65px; padding-bottom:65px; } .marketing-section-heading { display:block; } .marketing-section-heading > p { margin-top:16px; } .marketing-demo { transform:none; } .demo-inner { margin:16px; padding:20px; } .demo-title { font-size:1.28rem; } .interest-form { padding:19px; } .interest-form-heading { display:block; } .interest-estimate { margin-top:17px; text-align:left; } .interest-form-grid { grid-template-columns:1fr; } .marketing-footer { display:grid; padding-left:18px; padding-right:18px; } .marketing-footer > div:nth-child(2) { order:3; } }