:root{--frame:#1a1a1a;--panel:#f1f1f1;--card:#fff;--ink:#303030;--muted:#616161;--line:#e3e3e3;--blue:#004578;--orange:#ff9601;--red:#c62828;--green:#0c6b3a;--focus:#005bd3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,-apple-system,'Segoe UI',system-ui,sans-serif;color:var(--ink);background:var(--panel);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.muted{color:var(--muted)}.small{font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:10px;border:1px solid #c9c9c9;background:#fff;color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.btn:hover{background:#f7f7f7}
.btn.primary{background:var(--frame);border-color:var(--frame);color:#fff}
.btn.primary:hover{background:#000}
.btn.big{padding:12px 20px;font-size:16px}
.btn.wide{width:100%}
/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px max(16px,calc(50% - 560px));background:var(--frame);color:#fff;position:sticky;top:0;z-index:5}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:inherit;text-decoration:none}
.brand i{width:30px;height:30px;border-radius:8px;background:var(--orange);color:#1a1a1a;display:grid;place-items:center;font-style:normal;font-weight:700}
.nav nav{display:flex;align-items:center;gap:18px}
.nav nav a{color:#e3e3e3;text-decoration:none;font-weight:500}
.nav nav a.btn{color:#1a1a1a;background:var(--orange);border-color:var(--orange)}
/* hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:72px max(16px,calc(50% - 560px)) 64px;background:var(--frame);color:#fff}
.eyebrow{color:var(--orange);font-weight:600;margin:0 0 10px}
.hero h1{font-size:46px;line-height:1.1;margin:0 0 16px;letter-spacing:-.02em}
.lead{font-size:18px;color:#cfcfcf;margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn:not(.primary){background:transparent;color:#fff;border-color:#555}
.hero .btn.primary{background:var(--orange);border-color:var(--orange);color:#1a1a1a}
.hero .muted{color:#9a9a9a}
.mock{display:grid;grid-template-columns:1fr 1.2fr;background:#fff;color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);font-size:13px}
.mock-list{border-right:1px solid var(--line);padding:8px}
.mi{display:flex;gap:8px;align-items:center;padding:8px;border-radius:8px}
.mi.on{background:#f1f1f1}
.mi div{flex:1;min-width:0}.mi b{display:block}.mi small{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.av.ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}.av.fb{background:#1877f2}.av.th{background:#000}
.badge{font-style:normal;font-size:11px;background:#eee;padding:2px 6px;border-radius:6px}
.badge.new{background:#fff1d6;color:#7a4b00}
.mock-chat{padding:14px;display:flex;flex-direction:column;gap:8px;background:#fafafa}
.b{max-width:85%;padding:8px 11px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.b.us{align-self:flex-end;background:#e8f1fb;border-color:#cfe0f5}
.b.auto{background:#fff6e5;border-color:#ffe0a3}
.b small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
/* sections */
.features,.pricing{padding:64px max(16px,calc(50% - 560px))}
.features h2,.pricing h2{font-size:30px;margin:0 0 8px;letter-spacing:-.01em}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.f{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.f h3{margin:0 0 6px;font-size:17px}.f p{margin:0;color:var(--muted)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;align-items:start}
.plan{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;position:relative}
.plan.pop{border:2px solid var(--frame)}
.plan .tag{position:absolute;top:-12px;left:20px;background:var(--orange);color:#1a1a1a;font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px}
.plan h3{margin:0;font-size:20px}
.price{font-size:34px;font-weight:700;margin:12px 0 0}.price small{font-size:15px;color:var(--muted);font-weight:500}
.plan ul{padding-left:18px;margin:16px 0 20px}.plan li{margin:4px 0}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px max(16px,calc(50% - 560px));color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
.foot a{margin-left:16px;color:var(--muted)}
/* auth */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 16px}
.auth-wrap>.brand{margin-bottom:20px;color:var(--ink)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.auth-card{width:100%;max-width:440px;padding:28px}
.auth-card h1{font-size:22px;margin:0 0 6px}
.auth-card>.muted{margin:0 0 18px}
.below{color:var(--muted);font-size:14px}
.form{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.form label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:14px}
.form input:not([type=checkbox]):not([type=radio]){font:inherit;font-weight:400;padding:10px 12px;border:1px solid #bdbdbd;border-radius:9px;background:#fff}
.form label.check{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400}
.plans-pick{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.plans-pick legend{font-weight:600;font-size:14px;margin-bottom:5px}
.plan-opt{flex-direction:row!important;align-items:center;gap:10px!important;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font-weight:400!important}
.plan-opt:has(input:checked){border-color:var(--frame);background:#fafafa}
.plan-opt small{display:block;color:var(--muted)}
.flash{padding:10px 12px;border-radius:9px;margin:10px 0;font-size:14px}
.flash.ok{background:#e3f4ea;color:#0c4a28}.flash.err{background:#fde8e8;color:#8a1c1c}
.picklist{display:flex;flex-direction:column;gap:8px;margin:12px 0 18px}
.pick{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.pick.sub{margin-left:26px}
.pick img{width:34px;height:34px;border-radius:50%;background:#eee}
.pick small{display:block;color:var(--muted)}
.checks{list-style:none;padding:0}.checks li{padding:4px 0}.checks .ok{color:var(--green)}.checks .todo{color:var(--muted)}
.legal{max-width:760px;margin:0 auto;padding:40px 16px 60px}
.legal h1{font-size:30px}.legal h2{font-size:19px;margin-top:28px}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:44px}.hero h1{font-size:34px}
  .grid,.plans{grid-template-columns:1fr}
  .nav nav a:not(.btn){display:none}
  .mock{display:none}
}