:root{
  --bg:#faf8f4; --bg2:#f2efe8; --card:#ffffff; --line:#e3ded3;
  --text:#1d1c1a; --muted:#67635b; --accent:#1f5fd1; --accent-dark:#174ba8;
  --green:#2e7d4f; --orange:#b45309; --radius:10px;
  --serif:ui-serif,"New York","Iowan Old Style",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
p a,.sub a{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
nav{position:sticky;top:0;z-index:10;background:rgba(250,248,244,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:14px;height:58px}
nav .brand{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none}
nav .brand img{width:26px;height:26px;border-radius:6px}
nav .links{margin-left:auto;display:flex;gap:22px;align-items:center;font-size:14px;color:var(--muted)}
nav .links a{text-decoration:none}
nav .links a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:8px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;font-size:15px;transition:background .15s,border-color .15s}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark)}
.btn.ghost{border-color:#cfc9bc;background:var(--card);color:var(--text)}
.btn.ghost:hover{border-color:#a9a293}
.btn.small{padding:7px 13px;font-size:14px}
header.hero{padding:72px 0 56px;text-align:center}
.hero img.icon{width:96px;height:96px;border-radius:22px;box-shadow:0 1px 2px rgba(0,0,0,.1),0 10px 24px -8px rgba(40,30,10,.3)}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,5.4vw,52px);line-height:1.12;letter-spacing:-.01em;margin:24px auto 16px;max-width:900px}
.hero h1 span{color:var(--muted)}
.hero p.lead{font-size:clamp(17px,2.1vw,19px);color:var(--muted);max-width:640px;margin:0 auto 30px}
.hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .req{margin-top:16px;font-size:13px;color:var(--muted)}
/* app mockup — mirrors the real window layout */
.mock{margin:56px auto 0;max-width:1060px;background:#23262d;border:1px solid #383c45;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.12),0 18px 40px -12px rgba(40,30,10,.28);overflow:hidden;text-align:left;font-size:13px;color:#e7e8ec}
.mock .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#1d2026;border-bottom:1px solid #33363e}
.mock .bar i{width:12px;height:12px;border-radius:50%}
.mock .bar i:nth-child(1){background:#ff5f57}.mock .bar i:nth-child(2){background:#febc2e}.mock .bar i:nth-child(3){background:#28c840}
.mock .bar span{margin-left:10px;color:#9a9ca6;font-weight:600;font-size:13px}
.mock .app{display:grid;grid-template-columns:200px 1fr 250px;min-height:430px}
.mock small{display:block;color:#9a9ca6;font-size:11px;line-height:1.35}
.mock .side{background:#1d2026;border-right:1px solid #33363e;padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.mock .appname{display:flex;gap:9px;align-items:center;margin-bottom:10px}
.mock .appname img{width:32px;height:32px;border-radius:8px}
.mock .appname b{font-size:13px}
.mock .seg{display:flex;background:#2b2e36;border-radius:7px;padding:2px;margin-bottom:10px}
.mock .seg span{flex:1;text-align:center;padding:4px 0;border-radius:5px;color:#c9cad1}
.mock .seg span.on{background:#3b82f6;color:#fff}
.mock .nav{padding:6px 8px;border-radius:6px;color:#d6d7dd;display:flex;align-items:center;gap:6px}
.mock .nav.on{background:#2c3244;color:#6ea0ff}
.mock .nav em{margin-left:auto;font-style:normal;font-size:11px;background:#3a3f4f;border-radius:10px;padding:0 7px}
.mock .tip{margin-top:auto;background:#262a33;border-radius:10px;padding:10px;color:#9a9ca6;font-size:11px;line-height:1.4}
.mock .tip b{display:block;color:#e7e8ec;margin-bottom:4px;font-size:12px}
.mock .center{padding:16px;display:flex;flex-direction:column;gap:14px}
.mock .drop{border:2px dashed #4a4e59;border-radius:12px;padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.mock .dropicon{font-size:30px;color:#3b82f6;line-height:1}
.mock .addbtn{margin-top:6px;background:#3b82f6;color:#fff;border-radius:6px;padding:4px 14px;font-size:12px;font-weight:600}
.mock .table{background:#1b1d22;border-radius:10px;overflow:hidden}
.mock .th{display:flex;justify-content:space-between;padding:7px 10px;color:#9a9ca6;font-size:11px;font-weight:700;border-bottom:1px solid #33363e}
.mock .row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid #2b2e36}
.mock .row .ok{color:#9a9ca6}
.mock .row .tag{margin-left:auto;font-size:12px}
.mock .row .size{width:62px;text-align:right;color:#9a9ca6;font-size:12px}
.tag.new{color:var(--green)}.tag.upd{color:#6ea0ff}.tag.inst{color:#9a9ca6}.tag.old{color:var(--orange)}
.mock .spin{width:13px;height:13px;border:2px solid #3a3f4f;border-top-color:#6ea0ff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mock .tf{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;font-size:11px;color:#9a9ca6}
.mock .tf b{color:#e7e8ec;white-space:nowrap}
.mock .insp{background:#1d2026;border-left:1px solid #33363e;padding:16px 12px;display:flex;flex-direction:column;gap:8px}
.mock .insp .h{font-size:13px;margin-top:4px}
.mock .group{background:#262a33;border-radius:9px}
.mock .opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid #30343d;font-size:12px}
.mock .opt:last-child{border-bottom:0}
.mock .opt{white-space:nowrap}.mock .sel{color:#c9cad1;overflow:hidden;text-overflow:ellipsis}
.mock .tg{width:28px;height:16px;border-radius:9px;background:#4a4e59;position:relative;flex:none}
.mock .tg:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.mock .tg.on{background:#3b82f6}.mock .tg.on:after{left:14px}
.mock .rd{width:13px;height:13px;border-radius:50%;background:#4a4e59;flex:none}
.mock .rd.on{background:#3b82f6;box-shadow:inset 0 0 0 4px #3b82f6,inset 0 0 0 7px #fff}
.mock .cb{width:14px;height:14px;border-radius:4px;background:#3a3f4f;flex:none;display:grid;place-items:center;font-style:normal;font-size:10px;color:#fff}
.mock .cb.on{background:#3b82f6}.mock .cb.on:after{content:"✓"}
.mock .row.dim{opacity:.55}
.mock .row .x{color:#9a9ca6;margin-left:6px}
.tag.found{color:#6ea0ff}
.mock .table{position:relative}
.mock .popover{margin:4px 10px 8px 34px;background:#2b2e36;border:1px solid #3d414c;border-radius:10px;padding:10px 12px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.mock .popover b{font-size:13px}
.mock .popover small{margin-bottom:6px}
.mock .pv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid #383c46;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#d6d7dd}
.mock .pv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock .pv em{font-style:normal;color:#9a9ca6;white-space:nowrap;font-family:inherit}
.mock .opt.small{font-size:11px;color:#9a9ca6}
.mock .opt.wrap{white-space:normal;line-height:1.45}
.mock .go.red{background:#dc2626}
.mock .go{margin-top:auto;padding:10px;border-radius:8px;background:linear-gradient(90deg,#6d5dfc,#8b5cf6);text-align:center;font-weight:600;color:#fff}
section{padding:80px 0;border-top:1px solid var(--line)}
section.alt{background:var(--bg2)}
section h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.6vw,36px);letter-spacing:-.01em;text-align:center;margin-bottom:10px}
section p.sub{color:var(--muted);text-align:center;max-width:620px;margin:0 auto 44px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:44px;row-gap:6px}
.grid .feat{padding:20px 0;border-top:1px solid var(--line)}
.grid .feat h3{font-size:17px;margin-bottom:4px}
.grid .feat p{color:var(--muted);font-size:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card h3{font-size:17px;margin-bottom:6px}
.card p{color:var(--muted);font-size:15px}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.steps .card:before{counter-increment:s;content:"Step " counter(s);display:block;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:8px}
table.cmp{width:100%;max-width:720px;margin:0 auto;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:15px}
table.cmp th,table.cmp td{padding:12px 18px;border-bottom:1px solid var(--line);text-align:left}
table.cmp tr:last-child td{border-bottom:0}
table.cmp th:not(:first-child),table.cmp td:not(:first-child){text-align:center;width:130px}
table.cmp thead th{background:var(--bg2);font-weight:600}
.yes{color:var(--green);font-weight:700}.no{color:#b3ada0}
.price{max-width:420px;margin:0 auto;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:34px 30px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.price .amt{font-family:var(--serif);font-size:52px;font-weight:600}
.price .per{color:var(--muted);margin-bottom:22px}
.price ul{list-style:none;text-align:left;margin:0 auto 26px;max-width:300px}
.price li{padding:6px 0 6px 26px;position:relative;color:var(--text)}
.price li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.price .btn{width:100%;justify-content:center}
.price .fine{font-size:12px;color:var(--muted);margin-top:14px}
details{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:15px 20px;margin:0 auto 10px;max-width:760px}
details summary{cursor:pointer;font-weight:600;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+";float:right;color:var(--muted)}
details[open] summary:after{content:"–"}
details p{color:var(--muted);margin-top:10px;font-size:15px}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer .links{display:flex;gap:18px;flex-wrap:wrap}
/* legal pages */
.legal{max-width:720px;margin:0 auto;padding:56px 20px 80px}
.legal h1{font-family:var(--serif);font-weight:600;font-size:34px;margin-bottom:6px}
.legal .date{color:var(--muted);margin-bottom:28px;font-size:14px}
.legal h2{font-size:19px;margin:28px 0 8px}
.legal p,.legal li{color:#3d3a35;margin-bottom:10px}
.legal ul{padding-left:22px}
.legal a{color:var(--accent)}
@media (max-width:900px){
  .mock .app{grid-template-columns:1fr 230px}
  .mock .side{display:none}
}
@media (max-width:640px){
  .mock .app{grid-template-columns:1fr}
  .mock .insp .h,.mock .insp .group{display:none}
  .mock .insp{border-left:0;border-top:1px solid #33363e}
  nav .links a.hide-sm{display:none}
  .mock .row .size{display:none}
  section{padding:60px 0}
  header.hero{padding:48px 0 32px}
}
.mock .app>*{min-width:0}
.mock .opt.small{white-space:normal;line-height:1.45}
.mock .drop b,.mock .drop small{overflow-wrap:anywhere}