/*!*************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***! \*************************************************************************************************************************************************************************************************************************************************************/ /* ============================================================================ PreAI portal — design system. Simple, light, single-tone. All pages share these classes, so restyling here re-skins the whole portal. ========================================================================== */ :root{ --bg:#f7f8fb; --fg:#111827; --muted:#5b6472; --faint:#8b93a3; --line:#e8ebf1; --line-2:#eef1f6; --card:#fff; /* Brand accent — driven by Manage Site → primaryColor (set inline on ). accent-2/soft derive from it so one color reskins buttons, links, badges, sidebars across the whole portal AND the marketing pages. */ --accent:#2563eb; --accent-2:color-mix(in srgb, var(--accent), #000 14%); --accent-soft:color-mix(in srgb, var(--accent), #fff 90%); --green:#0f9d6b; --green-soft:#e9f9f1; --amber:#c2730a; --amber-soft:#fff6e9; --rose:#e11d48; --rose-soft:#fdebef; --violet:#7c3aed; --violet-soft:#f2ecfe; --teal:#0d9488; --teal-soft:#e5f7f4; --radius:12px; --radius-sm:9px; --shadow:0 1px 2px rgba(17,24,39,.04); } *{box-sizing:border-box} /* Force a permanent scrollbar so the centered sidebar + content never shift horizontally between short pages (no scrollbar) and long ones. */ html{overflow-y:scroll; scrollbar-gutter:stable} body{margin:0; background:var(--bg); color:var(--fg); font:15px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased} a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{letter-spacing:-.02em} .wrap{max-width:980px; margin:0 auto; padding:26px 24px} .muted{color:var(--muted)} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px} /* ---- cards ---- */ .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:0 0 16px; box-shadow:var(--shadow)} .card h3{margin-top:0; font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--fg)} /* ---- buttons ---- */ .btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; padding:9px 16px; border-radius:var(--radius-sm); border:1px solid var(--line); background:#fff; color:var(--fg); cursor:pointer; transition:background .15s,border-color .15s} .btn:hover{background:var(--bg); text-decoration:none} .btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)} .btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)} .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap} /* ---- badges & pills ---- */ .badge{font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent)} .badge.ok{background:var(--green-soft); color:var(--green)} .badge.warn{background:var(--amber-soft); color:var(--amber)} .pill{font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--line); color:var(--muted)} .pill.active{background:var(--green-soft); color:var(--green)} .pill.trialing{background:var(--accent-soft); color:var(--accent)} .pill.past_due,.pill.paused{background:var(--amber-soft); color:var(--amber)} .pill.canceled{background:var(--rose-soft); color:var(--rose)} /* ---- tables ---- */ table{width:100%; border-collapse:collapse; font-size:14px; margin-top:8px} th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-2)} th{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700} td{color:var(--fg)} tbody tr{transition:background .12s} tbody tr:hover{background:#fafbfd} .tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm)} .tablewrap table{margin-top:0} .tablewrap th{border-top:none} /* ---- page header + tabbed sub-nav ---- */ .page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:2px 0 18px} .page-head h2{margin:0; font-size:20px; font-weight:800; color:var(--fg)} .page-head .sub{color:var(--muted); font-size:13px; margin-top:3px} .tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:0 0 18px} .tabs a{padding:9px 14px; font-size:14px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px} .tabs a:hover{color:var(--fg); text-decoration:none} .tabs a.on{color:var(--accent); border-bottom-color:var(--accent)} /* ---- KPI / stat cards (simple, light) ---- */ .metrics{display:grid; grid-template-columns:repeat(4,1fr); grid-gap:12px; gap:12px; margin:0 0 14px} .metrics.cols-3{grid-template-columns:repeat(3,1fr)} @media (max-width:860px){.metrics,.metrics.cols-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.metrics,.metrics.cols-3{grid-template-columns:1fr}} .stat{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow)} .stat .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700; padding-right:36px} .stat .v{font-size:22px; font-weight:800; letter-spacing:-.025em; margin-top:3px; line-height:1.1; font-feature-settings:"tnum"; font-variant-numeric:tabular-nums} .stat .s{font-size:12.5px; color:var(--muted); margin-top:4px} .stat.good .v{color:var(--green)} .stat.warn .v{color:var(--amber)} /* soft icon chip, top-right */ .stat-ico{position:absolute; top:11px; right:11px; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent)} .stat-ico svg{width:15px; height:15px; stroke-width:2} .stat-ico.green{background:var(--green-soft); color:var(--green)} .stat-ico.amber{background:var(--amber-soft); color:var(--amber)} .stat-ico.violet{background:var(--violet-soft); color:var(--violet)} .stat-ico.teal{background:var(--teal-soft); color:var(--teal)} .stat-ico.rose{background:var(--rose-soft); color:var(--rose)} .bar{height:7px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:10px} .bar > i{display:block; height:100%; background:var(--accent); border-radius:999px} /* ---- toolbar / misc ---- */ .toolbar{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:10px} .toolbar h2,.toolbar h3{margin:0} .kv{display:grid; grid-template-columns:180px 1fr; grid-gap:9px 14px; gap:9px 14px; font-size:14px} .kv dt{color:var(--muted)} .kv dd{margin:0} .danger{border-color:var(--rose-soft); background:#fef5f6} .danger h3{color:var(--rose)} .wireup{background:var(--amber-soft); border:1px solid #f3e2c7; color:#7c4a02; border-radius:var(--radius-sm); padding:12px 14px; margin:0 0 16px; font-size:14px} .wireup-connect{margin-top:6px; color:#8a6534} /* ============================================================================ Top bar (global) — light ========================================================================== */ header.top{position:-webkit-sticky;position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line)} header.top .bar{height:60px; padding:0 20px; display:flex; justify-content:space-between; align-items:center} /* ---- merged app-shell top bar (logo over sidebar, system + user over content); flat (no rounded corners) ---- */ header.top.top-app{display:grid; grid-template-columns:248px 1fr; transition:grid-template-columns .18s ease} body.nav-collapsed header.top.top-app{grid-template-columns:64px 1fr} @media (max-width:820px){header.top.top-app, body.nav-collapsed header.top.top-app{grid-template-columns:auto 1fr}} .top-logo{display:flex; align-items:center; gap:9px; height:60px; padding:0 16px; border-right:1px solid var(--line); min-width:0} .top-logo:hover{text-decoration:none} .top-logo .brand-mark{width:34px; height:34px; flex:none} .top-logo .brand-name{font-weight:800; font-size:23px; color:var(--fg); white-space:nowrap; letter-spacing:-.02em} .top-logo .brand-name span{color:var(--accent)} body.nav-collapsed .top-logo{padding:0; justify-content:center; gap:0} body.nav-collapsed .top-logo .brand-name{display:none} .top-main{display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px; padding:0 22px; min-width:0} .top-main .sys-name{margin-left:0; overflow:hidden; text-overflow:ellipsis; min-width:0} .topbar-user{display:flex; align-items:center; gap:10px; flex:none} .user-chip{display:inline-flex; align-items:center; gap:9px; padding:5px 12px 5px 8px; background:var(--bg); border-radius:0; transition:background .15s} .user-chip:hover{background:#e9edf3; text-decoration:none} .user-meta{display:flex; flex-direction:column; align-items:flex-start; line-height:1.2} .user-name{font-size:13.5px; font-weight:700; color:var(--fg); max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .user-role{font-size:11px; color:var(--muted)} .signout-btn{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:1px solid var(--line); border-radius:0; background:#fff; color:var(--muted); font-size:13px; font-weight:600; transition:background .14s,color .14s,border-color .14s} .signout-btn:hover{background:var(--rose-soft); color:var(--rose); border-color:#f3c9c9; text-decoration:none} .signout-btn svg{width:16px; height:16px; stroke-width:2; flex:none} header.top nav a{color:var(--fg); font-weight:600; font-size:14px; padding:6px 2px} header.top nav a:hover{color:var(--accent); text-decoration:none} .brand{font-weight:800; font-size:18px; color:var(--fg)} .brand:hover{text-decoration:none} .brand span{color:var(--accent)} /* reworked brand block + system name */ .bar-left{display:flex; align-items:center; gap:14px; min-width:0} .brand-block{display:flex; align-items:center; gap:9px} .brand-block:hover{text-decoration:none} .brand-mark{width:30px; height:30px; flex:none} .brand-name{font-weight:800; font-size:18px; color:var(--fg); letter-spacing:-.01em} .brand-name span{color:var(--accent)} .sys-divider{width:1px; height:30px; background:var(--line); flex:none} .sys-name{font-size:22px; font-weight:700; color:#1e293b; line-height:1.2; white-space:nowrap; margin-left:14px; letter-spacing:-.02em} .avatar{width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; text-transform:uppercase} /* ---- top-bar profile menu ---- */ .avatar.lg{width:40px; height:40px; font-size:15px} /* Pure-CSS dropdown: opens when the button (or any menu item) holds focus. */ .pm{position:relative} .pm-btn{display:inline-flex; align-items:center; gap:9px; padding:5px 10px 5px 7px; border:none; border-radius:8px; background:var(--bg); cursor:pointer; transition:background .15s} .pm-btn:hover{background:#e9edf3} .pm-meta{display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; min-width:0} .pm-name{font-size:13.5px; font-weight:700; color:var(--fg); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .pm-role{font-size:11px; color:var(--muted); font-weight:500; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .pm-chev{width:16px; height:16px; color:var(--faint); transition:transform .15s} .pm-btn.open .pm-chev{transform:rotate(180deg)} .pm-menu{position:absolute; right:0; top:calc(100% + 8px); width:264px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 28px rgba(17,24,39,.12); padding:6px; z-index:60; animation:pm-in .12s ease-out} @keyframes pm-in{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}} .pm-head{display:flex; align-items:center; gap:11px; padding:10px 10px 12px; border-bottom:1px solid var(--line); margin-bottom:6px} .pm-id{min-width:0} .pm-id-name{font-weight:700; font-size:14px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pm-id-email{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pm-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--fg); font-size:13.5px; font-weight:600} .pm-item:hover{background:var(--bg); text-decoration:none} .pm-item svg{width:17px; height:17px; stroke-width:2; color:var(--faint); flex:none} .pm-item.danger{color:var(--rose)} .pm-item.danger svg{color:var(--rose)} .pm-item.danger:hover{background:var(--rose-soft)} .pm-sep{height:1px; background:var(--line); margin:6px 4px} @media (max-width:640px){.hide-sm{display:none !important}} /* ============================================================================ Customer workspace shell — same skin as the admin shell (.admin-nav*) ========================================================================== */ .wrap:has(.app-shell){max-width:none; padding:0} .app-shell{display:grid; grid-template-columns:248px 1fr; grid-gap:0; gap:0; align-items:start} @media (max-width:820px){.app-shell{grid-template-columns:1fr}} .app-main{min-width:0; padding:18px 22px 44px} /* status / info banner (overview) */ .notice{display:flex; align-items:center; gap:12px; background:var(--accent-soft); border:1px solid #dbe6ff; color:#1e3a8a; border-radius:var(--radius); padding:13px 16px; margin:0 0 16px; font-size:14px} .notice .ico{flex:none; width:20px; height:20px; color:var(--accent)} .notice .grow{flex:1 1} .notice a{font-weight:600} .notice.warn{background:var(--amber-soft); border-color:#f3e2c7; color:#7c4a02} .notice.warn .ico{color:var(--amber)} /* quick-action tiles (overview) */ .qa{display:grid; grid-template-columns:repeat(3,1fr); grid-gap:14px; gap:14px; margin:0 0 16px} @media (max-width:720px){.qa{grid-template-columns:1fr}} .qa-tile{display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; box-shadow:var(--shadow); transition:border-color .14s, box-shadow .14s} .qa-tile:hover{border-color:#d7dce6; box-shadow:0 2px 8px rgba(17,24,39,.06); text-decoration:none} .qa-tile .ico{flex:none; width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center} .qa-tile .ico svg{width:20px; height:20px; stroke-width:2} .qa-tile .l{font-weight:700; font-size:14px; color:var(--fg)} .qa-tile .d{font-size:12.5px; color:var(--muted); margin-top:1px} .qa-tile.go{background:var(--accent); border-color:var(--accent)} .qa-tile.go .l{color:#fff} .qa-tile.go .d{color:#dbe6ff} .qa-tile.go .ico{background:rgba(255,255,255,.18); color:#fff} /* getting-started checklist (overview) */ .steps{list-style:none; padding:0; margin:6px 0 0} .steps li{display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-top:1px solid var(--line-2)} .steps li:first-child{border-top:none} .steps .n{flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px} .steps .n.done{background:var(--green-soft); color:var(--green)} /* ============================================================================ Admin shell — light sidebar + content ========================================================================== */ .wrap:has(.admin-shell){max-width:none; padding:0} .admin-shell{display:grid; grid-template-columns:248px 1fr; grid-gap:0; gap:0; align-items:start} @media (max-width:820px){.admin-shell{grid-template-columns:1fr}} .admin-main{min-width:0; padding:18px 22px 44px} .admin-nav{position:-webkit-sticky;position:sticky; top:61px; height:calc(100vh - 61px); display:flex; flex-direction:column; gap:3px; background:var(--card); border:none; border-right:1px solid var(--line); border-radius:0; padding:14px 14px 16px; box-shadow:none; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#dfe3ea transparent} .admin-nav::-webkit-scrollbar{width:8px} .admin-nav::-webkit-scrollbar-track{background:transparent} .admin-nav::-webkit-scrollbar-thumb{background:#e2e6ec; border-radius:8px; border:2px solid var(--card)} .admin-nav::-webkit-scrollbar-thumb:hover{background:#cfd5df} @media (max-width:820px){.admin-nav{position:static; height:auto; border-right:none; border-bottom:1px solid var(--line)}} .admin-brand{display:flex; align-items:center; gap:10px; padding:4px 8px 12px; margin-bottom:4px; border-bottom:1px solid var(--line)} .admin-brand .mark{width:24px; height:24px; flex:none} .admin-brand .name{color:var(--fg); font-weight:800; font-size:16px} .admin-brand .name span{color:var(--accent)} .admin-brand .tag{margin-left:auto; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); background:var(--accent-soft); padding:2px 7px; border-radius:999px} .admin-nav-group{display:flex; flex-direction:column; gap:1px} .admin-nav-title{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700; padding:10px 10px 3px} .admin-nav-link{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--fg); font-weight:600; font-size:13.5px; transition:background .14s,color .14s} .admin-nav-link svg{width:17px; height:17px; flex:none; color:var(--faint); stroke-width:2} .admin-nav-link:hover{background:var(--bg); color:var(--fg); text-decoration:none} .admin-nav-link.on{background:var(--accent-soft); color:var(--accent)} .admin-nav-link.on svg{color:var(--accent)} .admin-nav-link .soon{margin-left:auto; font-size:9.5px; font-weight:700; text-transform:uppercase; color:var(--amber); background:var(--amber-soft); padding:1px 6px; border-radius:999px} /* sidebar collapse toggle + collapsed state */ .nav-collapse-btn{align-self:flex-end; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin:0 4px 6px 0; border:none; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; transition:background .14s,color .14s} .nav-collapse-btn:hover{background:var(--bg); color:var(--accent)} .nav-collapse-btn svg{width:16px; height:16px; transition:transform .18s} .admin-shell, .app-shell{transition:grid-template-columns .18s ease} body.nav-collapsed .admin-shell, body.nav-collapsed .app-shell{grid-template-columns:64px 1fr} body.nav-collapsed .nav-label, body.nav-collapsed .admin-nav-title, body.nav-collapsed .admin-nav-link .soon{display:none} body.nav-collapsed .admin-nav-link{justify-content:center; padding:10px 0} body.nav-collapsed .nav-collapse-btn{align-self:center; margin:0 auto 6px} body.nav-collapsed .nav-collapse-btn svg{transform:rotate(180deg)} @media (max-width:820px){body.nav-collapsed .admin-shell, body.nav-collapsed .app-shell{grid-template-columns:1fr}} .admin-nav-foot{margin-top:8px; padding:10px 8px 2px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px} .admin-nav-foot .who{min-width:0} .admin-nav-foot .who .e{color:var(--fg); font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .admin-nav-foot .who .r{color:var(--faint); font-size:11px} .admin-nav-foot a.out{margin-left:auto; color:var(--muted); font-size:12px; font-weight:600} .admin-nav-foot a.out:hover{color:var(--accent)} /* ============================================================================ Support live chat (customer + admin inbox) ========================================================================== */ .chat{display:grid; grid-template-columns:260px 1fr; height:560px; max-height:72vh} @media (max-width:720px){.chat{grid-template-columns:1fr; height:auto; max-height:none}} .chat-list{border-right:1px solid var(--line); padding:12px; overflow-y:auto; background:var(--bg)} @media (max-width:720px){.chat-list{border-right:none; border-bottom:1px solid var(--line); max-height:260px}} .chat-search{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; margin-bottom:8px} .chat-search:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .chat-filters{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px} .chip{font-size:11px; font-weight:700; text-transform:capitalize; padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer} .chip.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft)} .chat-item{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:9px 10px; border:none; border-radius:9px; background:transparent; cursor:pointer; margin-bottom:2px} .chat-item:hover{background:#fff} .chat-item.on{background:#fff; box-shadow:var(--shadow)} .chat-item.unread .ci-subj{font-weight:800} .ci-subj{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:650; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .ci-subj .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none} .ci-meta{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .ci-prev{font-size:12px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .chat-item .pill{align-self:flex-start; margin-top:2px} .chat-main{position:relative; display:flex; flex-direction:column; min-width:0} .chat-panel{display:flex; flex-direction:column; height:100%; min-height:0} .chat-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line)} .chat-msgs{flex:1 1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg); min-height:240px} .msg{display:flex; flex-direction:column; align-items:flex-start; max-width:78%} .msg.me{align-self:flex-end; align-items:flex-end} .msg.sys{align-self:center; max-width:90%} .msg-who{font-size:11px; color:var(--faint); margin:0 4px 3px} .msg-bubble{background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px 13px; font-size:14px; line-height:1.45; white-space:pre-wrap; word-break:break-word} .msg.me .msg-bubble{background:var(--accent); color:#fff; border-color:var(--accent)} .msg.sys .msg-bubble{background:#eef1f6; border-style:dashed; color:var(--muted); font-size:12.5px} .msg-bubble.typing{color:var(--muted); font-style:italic} .chat-composer{display:flex; gap:8px; align-items:flex-end; padding:12px 14px; border-top:1px solid var(--line); background:#fff} .chat-composer textarea{flex:1 1; resize:none; max-height:120px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:14px; line-height:1.4} .chat-composer textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .chat-new{padding:22px; max-width:560px} .chat-input{display:block; width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:14px; margin-bottom:10px} .chat-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .chat-empty{display:flex; align-items:center; justify-content:center; height:100%; min-height:280px; font-size:14px; padding:20px; text-align:center} .chat-sel{padding:6px 8px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; text-transform:capitalize} .chat-conn{position:absolute; top:9px; right:14px; font-size:11px; font-weight:700; color:var(--amber)} .chat-conn.ok{color:var(--green)} .pill.open{background:var(--accent-soft); color:var(--accent)} .pill.pending{background:var(--amber-soft); color:var(--amber)} .pill.resolved{background:var(--green-soft); color:var(--green)} .pill.closed{background:var(--line); color:var(--muted)} /* ---- table tools: top-right pagination ---- */ .tabletools{display:flex; flex-direction:column} .tt-bar{display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-bottom:8px} .tt-page{font-size:12px; color:var(--muted); margin-right:4px} .tt-btn{font-size:14px; font-weight:700; min-width:30px; padding:3px 9px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--muted); cursor:pointer; transition:background .14s,color .14s,border-color .14s; line-height:1.25} .tt-btn:hover:not(:disabled){background:var(--bg); color:var(--accent); border-color:#d7dce6} .tt-btn:disabled{opacity:.4; cursor:default} /* labeled form field (stacked) */ .fld{display:flex; flex-direction:column; gap:4px} .fld > span{font-size:10.5px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.04em} .fld input,.fld textarea,.fld select{padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; font-size:14px; background:#fff; color:var(--fg); width:100%} .fld input:focus,.fld textarea:focus,.fld select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .fld textarea{resize:vertical} /* responsive 2-up grid for admin forms */ .kv-grid{display:grid; grid-template-columns:repeat(2,1fr); grid-gap:12px 16px; gap:12px 16px} @media (max-width:640px){.kv-grid{grid-template-columns:1fr}} /*!***************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/marketing.css ***! \***************************************************************************************************************************************************************************************************************************************************************/ /* ============================================================================ Marketing design system — ported from the standalone website so the public pages (landing, pricing, features, legal, blog) share ONE look with the app. Scoped to avoid clashing with the app's globals.css: • page content under `.mkt` • chrome under `.site-header` / `.site-footer` • tokens namespaced `--m-*`; accent links to the global `--accent` (Manage Site → primaryColor) so changing the brand color reskins both. ========================================================================== */ :root{ --m-bg:#ffffff; --m-bg-soft:#f6f8fc; --m-fg:#0d1426; --m-muted:#475069; --m-faint:#6b7689; --m-line:#e7ebf2; --m-line-soft:#eef2f8; --m-accent-dark:color-mix(in srgb, var(--accent), #000 14%); --m-accent-bright:color-mix(in srgb, var(--accent), #fff 25%); --m-accent-soft:color-mix(in srgb, var(--accent), #fff 90%); --m-accent-line:color-mix(in srgb, var(--accent), #fff 78%); --m-red:#c01c28; --m-red-soft:#fef2f2; --m-red-line:#fde0e0; --m-green:#057a55; --m-green-soft:#ecfdf5; --m-green-line:#c8f0dd; --m-amber:#b45309; --m-amber-soft:#fff8ed; --m-amber-line:#fdeccd; --m-plain:#7c3aed; --m-plain-soft:#f5f3ff; --m-teal:#0f766e; --m-teal-soft:#f0fdfa; --m-tech:#0f766e; --m-tech-soft:#f0fdfa; --m-tech-line:#ccfbf1; --m-ink:#0a0f1f; --m-ink-2:#0c1326; --m-ink-line:rgba(255,255,255,.10); --m-maxw:1160px; --m-radius:16px; --m-shadow-sm:0 1px 2px rgba(13,20,38,.05),0 1px 3px rgba(13,20,38,.06); --m-shadow-md:0 6px 16px rgba(13,20,38,.07),0 14px 32px rgba(13,20,38,.07); --m-shadow-lg:0 12px 28px rgba(13,20,38,.10),0 36px 70px rgba(13,20,38,.12); } /* Let marketing pages break out of the app's narrow `.wrap` container. */ .wrap:has(.mkt){max-width:none; padding:0} .mkt{color:var(--m-fg); font:16px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} .mkt h1,.mkt h2,.mkt h3{letter-spacing:-.025em; font-weight:800} .mkt a{color:var(--accent)} .mkt a:hover{text-decoration:underline} .mkt-wrap{max-width:var(--m-maxw); margin:0 auto; padding:0 24px} .mkt .center{text-align:center} .mkt .muted{color:var(--m-muted)} /* ---------- buttons ---------- */ .mkt .btn,.site-header .btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:11px 19px; border-radius:11px; border:1px solid transparent; cursor:pointer; transition:transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; white-space:nowrap} .mkt .btn:hover,.site-header .btn:hover{text-decoration:none} .mkt .btn:active{transform:translateY(1px)} .mkt .btn-primary,.site-header .btn-primary{background:var(--accent); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 6px 16px -6px color-mix(in srgb, var(--accent), transparent 40%)} .mkt .btn-primary:hover,.site-header .btn-primary:hover{background:var(--m-accent-dark)} .mkt .btn-ghost,.site-header .btn-ghost{background:#fff; color:var(--m-fg); border-color:var(--m-line)} .mkt .btn-ghost:hover,.site-header .btn-ghost:hover{border-color:#c8d2e2; background:var(--m-bg-soft)} .mkt .btn-soft{background:var(--m-accent-soft); color:var(--accent); border-color:var(--m-accent-line)} .mkt .btn-lg{font-size:16px; padding:13px 24px} .mkt .btn-block{width:100%; justify-content:center} /* ---------- header (chrome) ---------- */ .site-header{position:-webkit-sticky;position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--m-line)} .site-header .mkt-wrap{position:relative; display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px} .site-brand{font-weight:800; letter-spacing:-.02em; font-size:20px; color:var(--m-fg); display:flex; align-items:center; gap:9px; white-space:nowrap} .site-brand:hover{text-decoration:none} .site-brand .mark{width:26px; height:26px; flex:0 0 auto} .site-brand .accent{color:var(--accent)} .site-nav{display:flex; align-items:center; gap:2px} .site-nav a.link{color:var(--m-muted); font-size:14.5px; font-weight:500; padding:8px 13px; border-radius:9px} .site-nav a.link:hover{color:var(--m-fg); background:var(--m-bg-soft); text-decoration:none} .site-nav .sep{width:1px; height:22px; background:var(--m-line); margin:0 8px} /* hamburger toggle button — hidden on desktop, shown at the mobile breakpoint. */ .nav-toggle{display:none; align-items:center; justify-content:center; padding:0; width:42px; height:42px; border:1px solid var(--m-line); border-radius:11px; background:#fff; color:var(--m-fg); cursor:pointer} .nav-toggle:hover{background:var(--m-bg-soft)} .nav-toggle-bars{position:relative; width:18px; height:13px; display:block} .nav-toggle-bars span{position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform .18s ease, opacity .18s ease} .nav-toggle-bars span:nth-child(1){top:0} .nav-toggle-bars span:nth-child(2){top:5.5px} .nav-toggle-bars span:nth-child(3){top:11px} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} @media(max-width:860px){ /* mobile: links collapse behind the hamburger and drop down as an absolutely positioned panel so they can never overflow the 64px bar onto the hero. */ .nav-toggle{display:inline-flex} .site-nav{display:none} .site-nav.open{display:flex; flex-direction:column; align-items:stretch; gap:2px; position:absolute; top:calc(100% + 12px); right:0; min-width:230px; padding:8px; z-index:60; background:#fff; border:1px solid var(--m-line); border-radius:16px; box-shadow:0 22px 48px -18px rgba(15,23,42,.32)} .site-nav.open a.link{padding:11px 14px; font-size:15.5px; border-radius:10px} .site-nav.open .sep{display:block; width:auto; height:1px; margin:6px 8px} .site-nav.open .btn{margin-top:6px; justify-content:center; width:100%} } /* ---------- badges / chips ---------- */ .mkt .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); background:var(--m-accent-soft); border:1px solid var(--m-accent-line); padding:5px 13px; border-radius:999px} .mkt .pill{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--m-muted); background:#fff; border:1px solid var(--m-line); padding:6px 13px; border-radius:999px} .mkt .pill svg{width:15px; height:15px; color:var(--m-green)} .mkt .chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center} /* ---------- hero ---------- */ .mkt .hero{position:relative; overflow:hidden; padding:60px 0 52px; text-align:center; background: radial-gradient(900px 380px at 50% -110px, var(--m-accent-soft) 0%, rgba(238,244,255,0) 72%), linear-gradient(180deg,#ffffff 0%, var(--m-bg-soft) 100%); border-bottom:1px solid var(--m-line)} .mkt .hero h1{font-size:50px; line-height:1.07; margin:14px auto 16px; max-width:20ch; color:var(--m-fg)} .mkt .hero h1 .hl{color:var(--accent)} .mkt .hero h1 .hl-red{color:var(--m-red)} .mkt .hero p.lede{font-size:19px; line-height:1.55; color:var(--m-muted); max-width:60ch; margin:0 auto 24px} .mkt .hero .cta-row{display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-bottom:22px} .mkt .hero .trust{display:flex; gap:9px; justify-content:center; flex-wrap:wrap} @media(max-width:680px){ .mkt .hero{padding:44px 0 38px} .mkt .hero h1{font-size:34px} .mkt .hero p.lede{font-size:17px} } .mkt .hero-home{text-align:left} .mkt .hero-home .mkt-wrap{display:grid; grid-template-columns:1fr .8fr; grid-gap:44px; gap:44px; align-items:center} .mkt .hero-home h1{margin:16px 0 16px; max-width:16ch; font-size:46px} .mkt .hero-home p.lede{margin:0 0 24px} .mkt .hero-home .cta-row,.mkt .hero-home .trust{justify-content:flex-start} @media(max-width:940px){ .mkt .hero-home{text-align:center} .mkt .hero-home .mkt-wrap{grid-template-columns:1fr; gap:36px} .mkt .hero-home h1{margin-inline:auto} .mkt .hero-home .cta-row,.mkt .hero-home .trust{justify-content:center} } /* ---------- editor mock (hero visual) ---------- */ .mkt .mock{background:#0e1626; border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 18px 44px -22px rgba(0,0,0,.55); overflow:hidden; text-align:left; font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .mkt .mock-bar{display:flex; align-items:center; gap:7px; padding:9px 14px; background:#0a1120; border-bottom:1px solid rgba(255,255,255,.07)} .mkt .mock-bar .dot{width:11px; height:11px; border-radius:50%} .mkt .mock-bar .dot.r{background:#ff5f57} .mkt .mock-bar .dot.y{background:#febc2e} .mkt .mock-bar .dot.g{background:#28c840} .mkt .mock-bar .mock-tab{margin-left:8px; color:#8a97ad; font-size:12px} .mkt .mock-bar .mock-shield{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#9ec3ff; background:rgba(59,130,246,.16); border:1px solid rgba(99,143,235,.4); padding:3px 9px; border-radius:999px} .mkt .mock-code{margin:0; padding:11px 16px; color:#cbd6ea; white-space:pre; overflow-x:auto} .mkt .mock-code .ln{display:inline-block; width:22px; color:#3c485f; -webkit-user-select:none; -moz-user-select:none; user-select:none} .mkt .mock-code .k{color:#7cc7ff} .mkt .mock-code .s{color:#86d99c} .mkt .mock-code .c{color:#5b687f; font-style:italic} .mkt .mock-code .leak{color:#ffb4b4; background:rgba(239,68,68,.14); border-bottom:2px wavy #ef4444; border-radius:2px; padding:0 2px} .mkt .mock-diag{display:flex; gap:11px; align-items:flex-start; padding:8px 16px; font-size:12.5px; line-height:1.45; color:#cdd7e6; border-top:1px solid rgba(255,255,255,.07); background:rgba(239,68,68,.07)} .mkt .mock-badge{flex:none; font-size:10px; font-weight:800; letter-spacing:.04em; color:#fff; background:#dc2626; padding:3px 7px; border-radius:6px} .mkt .mock-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 16px; border-top:1px solid rgba(52,211,153,.22); background:rgba(34,197,94,.12)} .mkt .mock-foot-ok{display:inline-flex; align-items:center; gap:7px; color:#7ef0b0; font-weight:700; font-size:12px; background:rgba(34,197,94,.18); border:1px solid rgba(52,211,153,.45); padding:4px 11px; border-radius:999px} @media(max-width:940px){ .mkt .mock{max-width:560px; margin:0 auto} } /* phones: scale the editor mock down so it reads as a compact preview, not a full-size panel. Smaller type/padding throughout + a thinner gutter. */ @media(max-width:560px){ .mkt .mock{font-size:11px; border-radius:12px} .mkt .mock-bar{padding:8px 11px; gap:6px} .mkt .mock-bar .dot{width:9px; height:9px} .mkt .mock-bar .mock-tab{font-size:11px} .mkt .mock-bar .mock-shield{font-size:10px; padding:2px 7px} /* wrap long lines instead of overflowing/clipping off the right edge */ .mkt .mock-code{padding:10px 12px; white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word} .mkt .mock-code .ln{width:18px} .mkt .mock-diag{padding:7px 12px; gap:9px; font-size:11.5px} .mkt .mock-badge{font-size:9px; padding:2px 6px} .mkt .mock-foot{padding:7px 12px} .mkt .mock-foot-ok{font-size:11px; padding:3px 9px} } @media(max-width:380px){ .mkt .mock{font-size:10.5px} .mkt .mock-code{padding:9px 10px} } /* ---------- compat bar ---------- */ .mkt .compat{padding:20px 0; border-bottom:1px solid var(--m-line); background:#fff} .mkt .compat .lbl{text-align:center; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--m-faint); margin:0 0 16px} .mkt .compat .row{display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:center; align-items:center} .mkt .compat .host{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:#39455b} /* ---------- sections ---------- */ .mkt section.band{padding:48px 0; border-bottom:1px solid var(--m-line)} .mkt section.band.alt{background:var(--m-bg-soft)} .mkt .sec-head{max-width:64ch; margin:0 auto 30px; text-align:center} .mkt .sec-head .eyebrow{margin-bottom:14px} .mkt .sec-head h2{font-size:33px; line-height:1.16; margin:0 0 12px} .mkt .sec-head p{font-size:18px; color:var(--m-muted); margin:0} @media(max-width:680px){ .mkt section.band{padding:36px 0} .mkt .sec-head h2{font-size:26px} } /* ---------- card grid ---------- */ .mkt .grid{display:grid; grid-gap:20px; gap:20px} .mkt .grid.cols-2{grid-template-columns:repeat(2,1fr)} .mkt .grid.cols-3{grid-template-columns:repeat(3,1fr)} .mkt .grid.cols-4{grid-template-columns:repeat(4,1fr)} @media(max-width:920px){ .mkt .grid.cols-3,.mkt .grid.cols-4{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .mkt .grid.cols-2,.mkt .grid.cols-3,.mkt .grid.cols-4{grid-template-columns:1fr} } .mkt .card{border:1px solid var(--m-line); border-radius:var(--m-radius); padding:22px; background:#fff; box-shadow:var(--m-shadow-sm); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease} .mkt .card.hover:hover{box-shadow:var(--m-shadow-md); transform:translateY(-3px); border-color:#d4dff5} .mkt .icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--m-accent-soft); color:var(--accent); margin-bottom:15px} .mkt .icon svg{width:23px; height:23px} .mkt .card h3{font-size:18px; margin:0 0 9px} .mkt .card p{color:var(--m-muted); margin:0; font-size:15px} .mkt .card ul{margin:12px 0 0; padding-left:0; list-style:none} .mkt .card ul li{position:relative; padding-left:24px; margin:7px 0; font-size:14.5px; color:var(--m-muted)} .mkt .card ul li::before{content:""; position:absolute; left:2px; top:8px; width:11px; height:6px; border-left:2px solid var(--m-green); border-bottom:2px solid var(--m-green); transform:rotate(-45deg)} /* ---------- dark panel (privacy callout) ---------- */ .mkt .panel-dark{position:relative; overflow:hidden; border-radius:22px; color:#e2e8f0; background:linear-gradient(180deg,#0c1326 0%, var(--m-ink) 100%); padding:38px 40px; box-shadow:var(--m-shadow-lg)} .mkt .panel-dark .eyebrow{background:rgba(59,130,246,.16); border-color:rgba(99,143,235,.4); color:#bfdbfe} .mkt .panel-dark h2{color:#fff; font-size:31px; margin:14px 0 14px; max-width:22ch} .mkt .panel-dark p{color:#c2cde0; font-size:17px; max-width:64ch; margin:0 0 24px} .mkt .panel-dark .facts{display:grid; grid-template-columns:repeat(3,1fr); grid-gap:22px; gap:22px} .mkt .panel-dark .fact b{display:block; color:#fff; font-size:15px; margin-bottom:3px} .mkt .panel-dark .fact span{color:#93a1ba; font-size:14px} .mkt .panel-dark .fact{padding-left:26px; position:relative} .mkt .panel-dark .fact::before{content:""; position:absolute; left:0; top:5px; width:13px; height:7px; border-left:2px solid #4ade80; border-bottom:2px solid #4ade80; transform:rotate(-45deg)} @media(max-width:680px){ .mkt .panel-dark{padding:28px 22px} .mkt .panel-dark .facts{grid-template-columns:1fr; gap:16px} .mkt .panel-dark h2{font-size:24px} } /* ---------- comparison table ---------- */ .mkt .cmp{width:100%; border-collapse:separate; border-spacing:0; font-size:15px; border:1px solid var(--m-line); border-radius:14px; overflow:hidden} .mkt .cmp th,.mkt .cmp td{padding:13px 18px; text-align:left; border-bottom:1px solid var(--m-line-soft)} .mkt .cmp thead th{background:var(--m-bg-soft); font-size:14px; color:var(--m-faint); font-weight:700} .mkt .cmp thead th.us{color:var(--accent)} .mkt .cmp tbody tr:last-child td{border-bottom:none} .mkt .cmp td.feat{font-weight:600; color:var(--m-fg)} .mkt .cmp .yes{color:var(--m-green); font-weight:700} .mkt .cmp .no{color:#aab3c2} .mkt .cmp .col-us{background:var(--m-accent-soft)} .mkt .cmp-scroll{overflow-x:auto} /* ---------- pricing ---------- */ .mkt .toggle-wrap{display:flex; align-items:center; justify-content:center; gap:12px; margin:2px 0 24px} /* clearance so the featured card's "Most popular" ribbon never collides with the toggle */ .mkt .tiers{margin-top:6px} .mkt .toggle-wrap .lab{font-weight:600; font-size:15px; color:var(--m-faint)} .mkt .toggle-wrap .lab.on{color:var(--m-fg)} .mkt .switch{position:relative; width:54px; height:30px; border:1px solid var(--m-accent-line); background:var(--m-accent-soft); border-radius:999px; cursor:pointer; padding:0} .mkt .switch .knob{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--accent); transition:transform .18s ease} .mkt .switch[aria-checked="true"] .knob{transform:translateX(24px)} .mkt .save-badge{font-size:12.5px; font-weight:700; color:var(--m-green); background:var(--m-green-soft); border:1px solid var(--m-green-line); padding:3px 9px; border-radius:999px} .mkt .tiers{display:grid; grid-template-columns:repeat(3,1fr); grid-gap:16px; gap:16px; align-items:stretch; max-width:1040px; margin:0 auto} @media(max-width:900px){ .mkt .tiers{grid-template-columns:1fr; max-width:440px} } .mkt .tier{display:flex; flex-direction:column; border:1px solid var(--m-line); border-radius:var(--m-radius); padding:20px 20px; background:#fff; box-shadow:var(--m-shadow-sm); position:relative} .mkt .tier.featured{border-color:var(--accent); box-shadow:var(--m-shadow-lg); z-index:1} .mkt .tier .ribbon{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 13px; border-radius:999px; white-space:nowrap} .mkt .tier .tname{font-size:17px; font-weight:800; margin:0 0 4px} .mkt .tier .tdesc{font-size:13px; color:var(--m-faint); margin:0 0 12px; min-height:34px; line-height:1.4} .mkt .tier .price{display:flex; align-items:baseline; gap:5px; margin-bottom:2px; min-height:42px} .mkt .tier .price .amt{font-size:36px; font-weight:800; letter-spacing:-.03em; line-height:1} .mkt .tier .price .per{font-size:13.5px; color:var(--m-faint); font-weight:600} .mkt .tier .billed{font-size:12.5px; color:var(--m-faint); min-height:16px; margin-bottom:14px} .mkt .tier .btn{margin-bottom:16px} .mkt .tier .flist{list-style:none; padding:0; margin:0; border-top:1px solid var(--m-line-soft); padding-top:14px} .mkt .tier .flist .grouplbl{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--m-faint); margin:0 0 6px; padding-left:0} .mkt .tier .flist .grouplbl:not(:first-child){margin-top:14px; padding-top:14px; border-top:1px solid var(--m-line-soft)} .mkt .tier .flist li{position:relative; padding-left:24px; margin:7px 0; font-size:13.5px; color:var(--m-muted); line-height:1.4} .mkt .tier .flist li.feat::before{content:""; position:absolute; left:2px; top:6px; width:11px; height:6px; border-left:2px solid var(--m-green); border-bottom:2px solid var(--m-green); transform:rotate(-45deg)} /* ---------- FAQ ---------- */ .mkt .faq{max-width:780px; margin:0 auto} .mkt .faq details{border:1px solid var(--m-line); border-radius:12px; margin-bottom:12px; background:#fff; overflow:hidden} .mkt .faq details[open]{box-shadow:var(--m-shadow-sm); border-color:#d8e2f3} .mkt .faq summary{cursor:pointer; list-style:none; padding:17px 22px; font-weight:600; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:16px} .mkt .faq summary::-webkit-details-marker{display:none} .mkt .faq details .ans{padding:0 22px 20px; color:var(--m-muted); font-size:15px; line-height:1.65} /* ---------- CTA band ---------- */ .mkt .cta-band{padding:56px 0; text-align:center; background:radial-gradient(900px 320px at 50% -60px, var(--m-accent-soft), transparent 70%), var(--m-bg-soft); border-bottom:1px solid var(--m-line)} .mkt .cta-band h2{font-size:33px; margin:0 0 12px; color:var(--m-fg)} .mkt .cta-band p{font-size:18px; color:var(--m-muted); max-width:54ch; margin:0 auto 22px} .mkt .cta-band .cta-row{display:flex; gap:13px; justify-content:center; flex-wrap:wrap} /* ---------- footer (chrome) ---------- */ .site-footer{background:var(--m-ink); color:#9aa6bd; padding:38px 0 24px; font-size:14.5px; border-top:1px solid var(--m-ink-line)} .site-footer a{color:#c6d0e2} .site-footer a:hover{color:#fff} .site-footer .mkt-wrap{max-width:var(--m-maxw); margin:0 auto; padding:0 24px} .site-footer .cols{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; grid-gap:26px; gap:26px; margin-bottom:24px} @media(max-width:760px){ .site-footer .cols{grid-template-columns:1fr 1fr} } @media(max-width:460px){ .site-footer .cols{grid-template-columns:1fr} } .site-footer .brand{color:#fff; margin-bottom:12px; font-weight:800; font-size:20px; letter-spacing:-.02em} .site-footer .brand .accent{color:color-mix(in srgb, var(--accent), #fff 35%)} .site-footer .blurb{max-width:34ch; color:#8997af; font-size:14px} .site-footer h4{color:#dbe3f1; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px} .site-footer ul{list-style:none; padding:0; margin:0} .site-footer ul li{margin:9px 0} .site-footer .legal{border-top:1px solid var(--m-ink-line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#6f7b92} .site-footer .legal a{color:#6f7b92} /* ---------- legal / long-form doc pages ---------- */ .mkt .doc{max-width:800px; margin:0 auto} /* centered title header; body prose stays left for readability */ .mkt .doc h1{font-size:32px; letter-spacing:-.02em; margin:0 0 6px; text-align:center} .mkt .doc .updated{color:var(--m-faint); font-size:14px; margin:0 0 26px; text-align:center} .mkt .doc h2{font-size:22px; margin:30px 0 10px; letter-spacing:-.01em} .mkt .doc h3{font-size:17px; margin:22px 0 8px} .mkt .doc p{color:var(--m-muted); margin:0 0 14px; font-size:15.5px; line-height:1.72} .mkt .doc ul{color:var(--m-muted); margin:0 0 14px; padding-left:22px; font-size:15.5px; line-height:1.72} .mkt .doc li{margin:6px 0} .mkt .doc strong{color:var(--m-fg)} .mkt .doc .callout{border:1px solid var(--m-accent-line); border-left:3px solid var(--accent); background:var(--m-accent-soft); border-radius:10px; padding:14px 16px; margin:0 0 26px; color:var(--m-fg); font-size:14.5px; line-height:1.6} /* ---------- icon color variants ---------- */ .mkt .icon.red{background:var(--m-red-soft); color:var(--m-red)} .mkt .icon.green{background:var(--m-green-soft); color:var(--m-green)} .mkt .icon.amber{background:var(--m-amber-soft); color:var(--m-amber)} .mkt .icon.plain{background:var(--m-plain-soft); color:var(--m-plain)} .mkt .icon.teal{background:var(--m-teal-soft); color:var(--m-teal)} /* ---------- button arrow ---------- */ .mkt .btn .ar,.site-header .btn .ar{transition:transform .15s ease} .mkt .btn:hover .ar,.site-header .btn:hover .ar{transform:translateX(3px)} /* ---------- compat host icons ---------- */ .mkt .compat .host svg{width:18px; height:18px; color:var(--accent)} /* ---------- pill check icons ---------- */ .mkt .pill svg{width:15px; height:15px; color:var(--m-green)} /* ---------- hero trust legend ---------- */ .mkt .hero .legend,.mkt .hero .trust{justify-content:center} .mkt .hero-home .trust{justify-content:flex-start} @media(max-width:940px){ .mkt .hero-home .trust{justify-content:center} } /* ---------- editor mock (extra variants) ---------- */ .mkt .mock-bar .mock-shield svg{width:12px; height:12px} .mkt .mock-code .inj{color:#f4a661; background:rgba(245,158,11,.14); border-bottom:2px wavy #f59e0b; border-radius:2px; padding:0 2px; font-style:italic} .mkt .mock-diag.warn{background:rgba(245,158,11,.08)} .mkt .mock-diag b{color:#fff; font-weight:700} .mkt .mock-diag div{min-width:0} .mkt .mock-badge.amber{background:#d97706} .mkt .mock-tag{display:inline-block; margin-top:3px; color:#8a97ad; font-size:11px} .mkt .mock-diag code{font-family:inherit; font-size:.92em; background:rgba(255,255,255,.08); padding:0 4px; border-radius:4px; color:#e7edf6} .mkt .mock-foot-ok b{color:#fff; font-weight:800} .mkt .mock-foot-ok svg{width:14px; height:14px} .mkt .mock-foot-meta{color:#8a97ad; font-size:11px} /* ---------- FAQ plus toggle ---------- */ .mkt .faq summary .plus{flex:0 0 auto; width:20px; height:20px; position:relative; transition:transform .2s ease} .mkt .faq summary .plus::before,.mkt .faq summary .plus::after{content:""; position:absolute; background:var(--accent); border-radius:2px; left:50%; top:50%} .mkt .faq summary .plus::before{width:14px; height:2px; transform:translate(-50%,-50%)} .mkt .faq summary .plus::after{width:2px; height:14px; transform:translate(-50%,-50%)} .mkt .faq details[open] summary .plus::after{transform:translate(-50%,-50%) scaleY(0)} .mkt .faq details .ans p{margin:0 0 10px} .mkt .faq details .ans p:last-child{margin:0} /* ---------- comparison table check marks ---------- */ .mkt .cmp td.yes,.mkt .cmp td.val.yes{color:var(--m-green); font-weight:700} .mkt .cmp td.no{color:#aab3c2} .mkt .cmp td.col-us{background:var(--m-accent-soft)} .mkt .cmp td.val{color:var(--m-muted)} /* ---------- anchor offset: land below the sticky header when jumping to #id ---------- */ html{scroll-behavior:smooth} .mkt section[id]{scroll-margin-top:84px} /* features has a second sticky bar (the jump nav), so offset further there */ .mkt.doc-pages.wide section[id]{scroll-margin-top:120px} /* ---------- reveal: no scroll-JS in the portal, so show immediately ---------- */ .mkt .reveal{opacity:1; transform:none} /* ---------- header CTA: compact button, readable text ---------- */ .site-header .btn-primary{font-size:14px; padding:8px 14px; border-radius:8px} /* ---------- utility ---------- */ .mkt .band-inner{padding-top:44px} /*!*******************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/marketing-doc.css ***! \*******************************************************************************************************************************************************************************************************************************************************************/ /* ============================================================================ Long-form / explainer styles — ported from the website's blog.css for the features page and blog article. Scoped to `.doc-pages` (used together with `.mkt`). Collision-prone selectors (card/grid/row/legend) use the compound `.mkt.doc-pages` to outrank the base marketing rules. Tokens are `--m-*`. ========================================================================== */ .doc-pages .prose,.doc-pages .mkt-wrap{max-width:760px} .doc-pages.wide .mkt-wrap,.mkt.doc-pages .mkt-wrap{max-width:var(--m-maxw)} /* post header — centered title block (article body below stays left) */ .doc-pages .post{padding:32px 0 6px; text-align:center} .doc-pages .post-title,.doc-pages .post-dek{margin-left:auto; margin-right:auto} .doc-pages .post-meta{justify-content:center} .doc-pages .post-kicker{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin:0 0 12px} .doc-pages .post-title{font-size:40px; line-height:1.12; letter-spacing:-.028em; margin:0 0 14px; max-width:24ch} .doc-pages .post-dek{font-size:20px; line-height:1.5; color:var(--m-muted); max-width:62ch; margin:0 0 22px} .doc-pages .post-meta{display:flex; align-items:center; gap:13px} .doc-pages .post-av{width:42px; height:42px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--accent),var(--m-accent-bright)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px} .doc-pages .post-who{font-size:14px; line-height:1.4} .doc-pages .post-who b{display:block; font-weight:700; color:var(--m-fg); font-size:15px} .doc-pages .post-who span{color:var(--m-faint)} /* sections */ .doc-pages section.group{padding:36px 0; border-bottom:1px solid var(--m-line); scroll-margin-top:70px} .doc-pages section.group.solution{background:linear-gradient(180deg,#f8fbff,#ffffff)} .doc-pages .group-head{margin:0 0 20px} .doc-pages .group-head .kicker{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent)} .doc-pages .group-head h2{font-size:30px; line-height:1.18; letter-spacing:-.024em; margin:8px 0 10px; max-width:26ch} .doc-pages .group-head p.dek{color:var(--m-muted); margin:0; max-width:68ch; font-size:17px} /* prose */ .doc-pages article{font-size:17px; line-height:1.72; color:#1e293b} .doc-pages article p{margin:0 0 13px; max-width:70ch} .doc-pages article p.first{font-size:18.5px; color:#334155} .doc-pages article h3{font-size:21px; letter-spacing:-.015em; color:var(--m-fg); margin:24px 0 10px; max-width:38ch} .doc-pages article strong{font-weight:700; color:var(--m-fg)} .doc-pages code{background:#e7f6f3; color:#0b5e54; padding:1px 6px; border-radius:5px; font-size:.86em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .doc-pages ul.points{list-style:none; padding:0; margin:0 0 14px; max-width:72ch} .doc-pages ul.points li{position:relative; padding:0 0 0 22px; margin:0 0 9px} .doc-pages ul.points li::before{content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--accent)} .doc-pages ul.points li strong{color:var(--m-fg)} /* callouts */ .doc-pages .callout{border:1px solid var(--m-line); border-left-width:4px; border-radius:10px; padding:15px 18px; margin:18px 0; max-width:74ch; background:#fff} .doc-pages .callout .tag{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:0 0 7px} .doc-pages .callout p{margin:0; max-width:none; font-size:16px; line-height:1.66} .doc-pages .callout p + p{margin-top:12px} .doc-pages .callout.incident{border-left-color:var(--m-red); background:var(--m-red-soft); border-color:var(--m-red-line)} .doc-pages .callout.incident .tag{color:var(--m-red)} .doc-pages .callout.control{border-left-color:var(--m-green); background:var(--m-green-soft); border-color:var(--m-green-line)} .doc-pages .callout.control .tag{color:var(--m-green)} .doc-pages .callout.note{border-left-color:var(--m-amber); background:var(--m-amber-soft); border-color:var(--m-amber-line)} .doc-pages .callout.note .tag{color:var(--m-amber)} /* numbered idea cards */ .doc-pages .ideas{display:grid; grid-template-columns:1fr; grid-gap:12px; gap:12px; margin:16px 0 6px; max-width:74ch} .doc-pages .idea{border:1px solid var(--m-line); border-radius:12px; padding:18px 20px; background:#fff} .doc-pages .idea h4{margin:0 0 7px; font-size:17px; letter-spacing:-.01em; display:flex; gap:11px; align-items:baseline} .doc-pages .idea h4 .n{font-size:13px; font-weight:700; color:#fff; background:var(--accent); min-width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; flex:none} .doc-pages .idea p{margin:0; font-size:15.5px; color:var(--m-muted); line-height:1.6; max-width:none} /* spec grid (part 3) */ .doc-pages .spec{display:grid; grid-template-columns:repeat(2,1fr); grid-gap:10px; gap:10px; margin:16px 0 8px; max-width:74ch} .doc-pages .spec .s{border:1px solid var(--m-line); border-radius:11px; padding:14px 16px; background:#fff} .doc-pages .spec .s b{display:block; font-size:15px; color:var(--m-fg); letter-spacing:-.01em; margin-bottom:2px} .doc-pages .spec .s span{font-size:13px; color:var(--m-faint)} /* closers */ .doc-pages .closer{padding:36px 0} .doc-pages .closer .panel{border:1px solid color-mix(in srgb,var(--accent),#fff 78%); background:var(--m-accent-soft); border-radius:18px; padding:24px 28px} .doc-pages .closer .kicker{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin:0 0 8px} .doc-pages .closer h2{margin:0 0 12px; font-size:26px; letter-spacing:-.02em; max-width:26ch} .doc-pages .closer p{margin:0 0 14px; color:#334155; max-width:74ch; font-size:17px; line-height:1.7} .doc-pages .closer p:last-child{margin-bottom:0} /* glossary */ .doc-pages .glossary dl{margin:0} .doc-pages .gterm{border-top:1px solid var(--m-line); padding:16px 2px; scroll-margin-top:78px} .doc-pages .gterm:first-child{border-top:none} .doc-pages .gterm dt{font-weight:700; font-size:16px; margin:0 0 4px} .doc-pages .gterm dd{margin:0; color:var(--m-muted); max-width:78ch} .doc-pages .gterm:target{background:var(--m-accent-soft); border-radius:8px} .doc-pages .gterm:target dt{color:var(--accent)} /* feature-reference legend + cards (features page) */ .doc-pages .legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; font-size:13px; color:var(--m-faint); justify-content:center} .doc-pages .legend b{font-weight:700} .doc-pages .legend .k.problem{color:var(--m-red)} .doc-pages .legend .k.solution{color:var(--m-green)} .doc-pages .legend .k.plain{color:var(--m-plain)} .mkt.doc-pages .grid{display:grid; grid-template-columns:1fr; grid-gap:18px; gap:18px} .mkt.doc-pages .card{border:1px solid var(--m-line); border-radius:14px; padding:22px 24px; background:#fff; box-shadow:none} .mkt.doc-pages .card.hover:hover{transform:none; box-shadow:none} .doc-pages .card h3{font-size:18px; letter-spacing:-.01em; margin:0 0 14px; display:flex; gap:10px; align-items:baseline} .doc-pages .card h3 .num{font-size:13px; font-weight:700; color:var(--m-faint); min-width:26px} .mkt.doc-pages .row{display:grid; grid-template-columns:150px 1fr; grid-gap:14px; gap:14px; padding:10px 0; border-top:1px dashed var(--m-line); align-items:start} .mkt.doc-pages .row:first-of-type{border-top:none} .doc-pages .label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding-top:2px} .doc-pages .label.problem{color:var(--m-red)} .doc-pages .label.solution{color:var(--m-green)} .doc-pages .label.plain{color:var(--m-plain)} .doc-pages .row .body{color:var(--m-fg)} .mkt.doc-pages .row.plain{background:var(--m-plain-soft); border-radius:8px; margin-top:6px; padding:10px 13px; border-top:none; grid-template-columns:150px 1fr} .doc-pages .row.plain .body{font-style:italic; color:#4c1d95} .doc-pages abbr{cursor:help; -webkit-text-decoration:underline dotted; text-decoration:underline dotted; text-underline-offset:3px} /* features hero — compact legend + sticky jump bar */ .doc-pages .feat-hero{padding:16px 0 0} .doc-pages .feat-hero .eyebrow{margin-bottom:0} .mkt.doc-pages .feat-hero h1{font-size:31px; line-height:1.12; margin:6px auto 6px; max-width:none; text-align:center} @media(min-width:760px){ .mkt.doc-pages .feat-hero h1{white-space:nowrap} } .mkt.doc-pages .feat-hero p.lede{margin:0 auto 8px; font-size:15.5px; max-width:90ch; text-align:center} .doc-pages .feat-legend{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 8px} .doc-pages .feat-legend .lg{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--m-fg); background:#fff; border:1px solid var(--m-line); border-radius:999px; padding:6px 14px} .doc-pages .feat-legend .lg small{font-weight:500; color:var(--m-faint); font-size:12.5px} .doc-pages .feat-legend .lg .dot{width:9px; height:9px; border-radius:50%; flex:none} .doc-pages .feat-legend .lg.problem .dot{background:var(--m-red)} .doc-pages .feat-legend .lg.solution .dot{background:var(--m-green)} .doc-pages .feat-legend .lg.plain .dot{background:var(--m-plain)} @media(max-width:560px){ .doc-pages .feat-legend .lg small{display:none} } .doc-pages .feat-jump{position:-webkit-sticky;position:sticky; top:64px; z-index:20; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; padding:7px 24px; background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); border-top:1px solid var(--m-line); border-bottom:1px solid var(--m-line)} /* tighten the gap between the jump bar and the first content section */ .mkt.doc-pages.wide section.group{padding-top:14px} .mkt.doc-pages.wide section.group .group-head{margin-bottom:14px} /* let the section description use the full content width (wider, fewer lines) */ .mkt.doc-pages.wide .group-head p.dek{max-width:none} .doc-pages .feat-jump .jl{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--m-faint); margin-right:2px} .doc-pages .feat-jump .jp{font-size:13px; font-weight:600; color:var(--m-muted); background:#fff; border:1px solid var(--m-line); border-radius:999px; padding:5px 13px; transition:color .14s, border-color .14s, background .14s} .doc-pages .feat-jump .jp:hover{color:var(--accent); border-color:var(--m-accent-line); background:var(--m-accent-soft); text-decoration:none} @media(max-width:680px){ .doc-pages .post-title{font-size:30px} .doc-pages .post-dek{font-size:17px} .doc-pages .group-head h2{font-size:24px} .doc-pages .feat-hero h1{font-size:30px} .doc-pages .spec{grid-template-columns:1fr} } @media(max-width:620px){ .mkt.doc-pages .row,.mkt.doc-pages .row.plain{grid-template-columns:1fr} }