*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#0b1220;--ink2:#1f2a44;--muted:#4b5872;--line:#d8e0ec;--bg:#eef3fa;--white:#fff;--navy:#0b1a3a;--navy2:#132a5e;
      --primary:#1e40af;--primary-dk:#172f80;--primary-lt:#dbe7ff;
      --ins:#15803d;--ins-bg:#dcfce7;--del:#b91c1c;--del-bg:#fee2e2;--fmt:#6d28d9;--fmt-bg:#ede9fe;
      --radius:14px;--shadow:0 10px 30px rgba(15,23,42,.08)}
html{scroll-behavior:smooth;font-size:17px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;cursor:pointer}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px;margin:0 auto;padding:0 20px}

/* header */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:1140px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em;flex-shrink:0}
.logo small{display:block;font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;line-height:1}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{font-size:.9rem;font-weight:500;color:var(--ink2);padding:.45rem .75rem;border-radius:8px}
.nav a:hover{background:var(--bg);color:var(--ink)}
.nav a.on{color:var(--primary);font-weight:600}
.nav .btn{margin-left:8px}
.nav a.btn-primary{color:#fff;background:var(--primary)}
.nav a.btn-primary:hover{background:var(--primary-dk);color:#fff}
.nav [data-sft-auth] a{white-space:nowrap}
.nav [data-sft-auth]{display:flex;align-items:center;gap:4px;font-size:.9rem;padding-left:6px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:.3rem .55rem;font-size:1.15rem;color:var(--ink2)}
@media(max-width:860px){.burger{display:block}.nav{display:none;position:fixed;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px 16px;flex-direction:column;align-items:stretch;gap:4px;box-shadow:var(--shadow)}.nav.open{display:flex}.nav .btn{margin:6px 0 0}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.92rem;padding:.62rem 1.15rem;border-radius:9px;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .1s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dk)}
.btn-outline{background:#fff;border-color:#cbd5e1;color:var(--ink)}
.btn-outline:hover{border-color:var(--ink2)}
.btn-ghost{color:var(--primary)}
.btn-lg{font-size:1rem;padding:.8rem 1.45rem}
.btn:disabled{opacity:.55;cursor:default}

/* hero */
.hero{padding:72px 20px 56px;text-align:center;background:radial-gradient(1200px 500px at 50% -10%,#1e3a8a 0%,var(--navy) 55%,#08132b 100%);color:#fff}
.hero h1{color:#fff}
.hero .lead{color:#c7d2e6}
.hero .eyebrow{background:rgba(255,255,255,.12);color:#bfd3ff;border:1px solid rgba(255,255,255,.18)}
.hero .trust{color:#b8c4dc}
.hero .trust span::before{background:#4ade80}
.hero.light{background:linear-gradient(180deg,var(--bg) 0%,#fff 100%);color:var(--ink)}
.hero.light h1{color:var(--ink)}
.hero.light .lead{color:var(--ink2)}
.hero.light .eyebrow{background:var(--primary-lt);color:var(--primary);border:0}
.hero.light .trust{color:var(--muted)}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);background:var(--primary-lt);padding:5px 12px;border-radius:99px;margin-bottom:16px}
h1{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:800;line-height:1.12;letter-spacing:-.02em;max-width:860px;margin:0 auto 14px}
.lead{font-size:1.12rem;color:var(--ink2);max-width:700px;margin:0 auto;line-height:1.65}
.trust{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:20px;font-size:.86rem;color:var(--muted)}
.trust span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ins);margin-right:7px;vertical-align:middle}

/* sections */
.sec{padding:64px 20px}
.sec.alt{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 40px}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.sec-head p{color:var(--ink2);font-size:1.02rem}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 1px 2px rgba(11,18,32,.04)}
.card h3{font-size:1.02rem;font-weight:700;margin-bottom:6px}
.card p{font-size:.93rem;color:var(--ink2)}
a.card{transition:border-color .15s,box-shadow .15s,transform .15s}
a.card:hover{border-color:#93c5fd;box-shadow:var(--shadow);transform:translateY(-2px)}
.card .more{display:block;margin-top:12px;font-size:.86rem;font-weight:600;color:var(--primary)}
.ico{width:40px;height:40px;border-radius:10px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;margin-bottom:14px}

/* compare tool */
.tool{max-width:960px;margin:36px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(2,8,30,.35);padding:28px;text-align:left;color:var(--ink)}
.step{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;margin-bottom:14px}
.step b{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.drops{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
@media(max-width:640px){.drops{grid-template-columns:1fr}}
.drop{position:relative;border:2px dashed #cbd5e1;border-radius:14px;background:var(--bg);min-height:172px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 16px;transition:border-color .15s,background .15s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--primary);background:#eff6ff}
.drop.has{border-style:solid;border-color:#86efac;background:#f0fdf4}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop .dl{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.drop .dt{font-weight:700;font-size:1rem}
.drop .ds{font-size:.82rem;color:var(--muted);margin-top:4px}
.drop .fn{font-weight:600;font-size:.9rem;color:#166534;margin-top:6px;word-break:break-all}
.drop svg{color:#94a3b8;margin-bottom:10px}
.drop.has svg{color:var(--ins)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
@media(max-width:640px){.modes{grid-template-columns:1fr}}
.mode{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;background:#fff}
.mode:has(input:checked){border-color:var(--primary);background:#eff6ff}
.mode input{accent-color:var(--primary);width:16px;height:16px;flex-shrink:0}
.mode .mt{font-weight:700;font-size:.95rem}
.mode .ms{font-size:.8rem;color:var(--muted)}
.mode .mi{width:44px;height:34px;border-radius:5px;flex-shrink:0;background:linear-gradient(90deg,#fecaca 0 48%,#fff 48% 52%,#bbf7d0 52%);border:1px solid var(--line)}
.mode .mi.red{background:repeating-linear-gradient(180deg,#fff 0 6px,#fecaca 6px 8px,#fff 8px 14px,#bbf7d0 14px 16px)}
.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hint{font-size:.82rem;color:var(--muted)}
.hint a{color:var(--primary);font-weight:600}
.err{display:none;margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--del-bg);color:var(--del);font-size:.9rem;font-weight:500}
.busy{display:none;margin-top:18px;align-items:center;gap:12px;font-size:.92rem;color:var(--ink2)}
.spin{width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* results */
.res{display:none;margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.res-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;padding:5px 11px;border-radius:99px}
.chip.ins{background:var(--ins-bg);color:var(--ins)}
.chip.del{background:var(--del-bg);color:var(--del)}
.chip.fmt{background:var(--fmt-bg);color:var(--fmt)}
.chip.n{background:var(--bg);color:var(--ink2)}
.res-top .sp{flex:1}
.res-body{display:grid;grid-template-columns:300px 1fr;gap:16px;min-height:560px}
@media(max-width:820px){.res-body{grid-template-columns:1fr}}
.chg-list{border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:640px;background:#fff}
.chg-list h4{position:sticky;top:0;background:#fff;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line)}
.chg{padding:11px 14px;border-bottom:1px solid #f1f5f9;cursor:pointer;font-size:.84rem}
.chg:hover,.chg.on{background:#eff6ff}
.chg .k{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.chg .k i{font-style:normal}
.chg del{background:var(--del-bg);color:var(--del);text-decoration:line-through;border-radius:3px;padding:0 2px}
.chg ins{background:var(--ins-bg);color:var(--ins);text-decoration:none;border-radius:3px;padding:0 2px}
.chg .empty{padding:20px 14px;color:var(--muted);font-size:.88rem}
.viewer{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#e5e7eb;min-height:560px}
.viewer iframe{width:100%;height:640px;border:0;background:#fff}
.dl-btns{display:flex;gap:10px;flex-wrap:wrap}

/* feature list */
.feat{display:flex;gap:14px}
.feat .ico{flex-shrink:0;margin:0}
.feat h3{font-size:1rem;font-weight:700;margin-bottom:4px}
.feat p{font-size:.95rem;color:var(--ink2)}

/* code */
pre{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:18px 20px;font-size:.82rem;line-height:1.6;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:#f1f5f9;padding:.1em .4em;border-radius:5px}
pre code{background:none;padding:0;font-size:inherit}
.kv{width:100%;border-collapse:collapse;font-size:.9rem;margin:14px 0 22px}
.kv th,.kv td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.kv th{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.kv td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;white-space:nowrap}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-weight:700;font-size:.98rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--primary);font-size:1.3rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:10px;color:var(--ink2);font-size:.97rem;line-height:1.7}

/* cta band */
.cta{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;padding:64px 20px;text-align:center}
.cta h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.cta p{color:#c7d2e6;max-width:560px;margin:0 auto 24px;font-size:1.05rem}
.cta .btn-outline{background:transparent;color:#fff;border-color:#475569}
.cta .btn-outline:hover{border-color:#fff}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;max-width:1080px;margin:0 auto;align-items:start}
.plan{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 4px 18px rgba(15,23,42,.05)}
.plan.hi{border-color:var(--primary);box-shadow:0 14px 40px rgba(29,78,216,.15)}
.plan-h{padding:22px 26px;background:var(--navy);color:#fff}
.plan-h small{color:#c7d2e6}
.plan.hi .plan-h{background:var(--primary)}
.plan-h h3{font-size:1.1rem;font-weight:800}
.plan-h small{display:block;font-size:.82rem;opacity:.85;margin-top:2px}
.price{padding:24px 26px 18px;border-bottom:1px solid var(--line);text-align:center}
.price .amt{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.price .amt sup{font-size:1.1rem;vertical-align:top;margin-right:2px;font-weight:700}
.price .per{font-size:.86rem;color:var(--muted);margin-top:6px}
.price .sub{font-size:.8rem;color:var(--muted)}
.plan-b{padding:22px 26px 26px}
.plan-b .blurb{text-align:center;color:var(--ink2);font-size:.95rem;margin-bottom:18px;min-height:44px}
.plan-b ul{list-style:none;margin-bottom:22px}
.plan-b li{position:relative;padding:6px 0 6px 26px;font-size:.94rem}
.plan-b li::before{content:"";position:absolute;left:2px;top:12px;width:12px;height:7px;border-left:2px solid var(--ins);border-bottom:2px solid var(--ins);transform:rotate(-45deg)}
.plan-b li.no{color:var(--muted)}
.plan-b li.no::before{border:0;width:12px;height:12px;top:9px;left:1px;border-radius:50%;background:none;box-shadow:inset 0 0 0 1.5px #cbd5e1}
.plan-b .btn{width:100%}

/* article pages */
.art-head{background:radial-gradient(900px 400px at 20% -20%,#1e3a8a 0%,var(--navy) 60%,#08132b 100%);color:#fff;padding:56px 20px 44px}
.art-head .narrow{max-width:860px}
.art-head h1{text-align:left;margin:0 0 14px;font-size:clamp(1.8rem,4vw,2.6rem);color:#fff}
.art-head .lead{margin:0;max-width:none;color:#c7d2e6;font-size:1.15rem}
.art-head .crumbs{color:#9fb0d0;margin-bottom:16px}
.art-head .crumbs a{color:#bfd3ff}
.art-head .meta{color:#9fb0d0;margin:18px 0 0;font-size:.88rem;display:flex;gap:16px;flex-wrap:wrap}
.art-head .tag{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#dbe7ff;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px;margin-bottom:14px}
.article{padding:44px 20px 64px}
.article .narrow{max-width:860px}
.article h1{text-align:left;margin:0 0 10px;font-size:clamp(1.7rem,3.8vw,2.5rem)}
.article .lead{margin:0 0 28px;max-width:none}
.article h2{font-size:1.45rem;font-weight:800;margin:40px 0 14px;letter-spacing:-.01em;padding-left:14px;border-left:4px solid var(--primary)}
.article h3{font-size:1.1rem;font-weight:700;margin:24px 0 8px}
.article p{color:var(--ink2);margin-bottom:16px;font-size:1.06rem;line-height:1.75}
.article ul,.article ol{color:var(--ink2);margin:0 0 18px 24px;font-size:1.04rem;line-height:1.7}
.article li{margin-bottom:9px}
.article p strong{color:var(--ink)}
.toc{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:0 0 30px}
.toc b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.toc ol{margin:0 0 0 18px;font-size:.98rem;color:var(--ink2)}
.toc li{margin-bottom:4px}
.toc a{color:var(--primary);font-weight:500}
.callout{background:var(--primary-lt);border-left:4px solid var(--primary);border-radius:0 12px 12px 0;padding:16px 20px;margin:30px 0;color:var(--ink)}
.callout p{margin:0;font-size:1rem}
.crumbs{font-size:.84rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--primary)}
.meta{font-size:.84rem;color:var(--muted);margin-bottom:22px}
.post-card .date{display:block;font-size:.78rem;color:var(--muted);margin-bottom:8px}
.post-card h3{font-size:1.08rem;line-height:1.35}
.post-card p{font-size:.95rem}
.post-card .pill{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);background:var(--primary-lt);padding:3px 9px;border-radius:99px;margin-bottom:10px}

/* forms */
.form{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;font:inherit;font-size:.94rem;padding:.65rem .8rem;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:var(--ink)}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:2px solid var(--primary-lt);border-color:var(--primary)}
.fg textarea{min-height:130px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.f2{grid-template-columns:1fr}}
.note{font-size:.84rem;color:var(--muted)}

/* footer */
.ftr{background:#08132b;color:#a3b0c8;padding:52px 20px 24px}
.ftr-in{max-width:1140px;margin:0 auto 32px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){.ftr-in{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ftr-in{grid-template-columns:1fr}}
.ftr .logo{color:#fff;margin-bottom:10px}
.ftr .logo small{color:#94a3b8}
.ftr-brand p{font-size:.86rem;line-height:1.65;max-width:280px}
.ftr h5{color:#f1f5f9;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.ftr-col a{display:block;font-size:.86rem;margin-bottom:7px}
.ftr-col a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:14px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06)}
.social a:hover{background:rgba(255,255,255,.14);color:#fff}
.ftr-bot{max-width:1140px;margin:0 auto;border-top:1px solid #1e293b;padding-top:18px;font-size:.79rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}