/* The public site (homepage, privacy, terms) — static, no scripts; the dashboard's palette and Rubik. */
:root {
  --bg:#F6F7FB; --panel:#FFFFFF; --line:#E4E7EE; --line2:#EEF0F5; --ink:#152038; --muted:#5F6B85; --navy:#0B1530;
  --acc:#2F5BEA; --acc-soft:#E8EEFE; --ok:#12805C; --warn:#B7791F;
  --f:'SignRubik','Rubik',-apple-system,system-ui,sans-serif; --r:14px;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:var(--f); font-size:16px; line-height:1.7; color:var(--ink); background:var(--bg); -webkit-text-size-adjust:100%; }
a { color:var(--acc); }
a:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:4px; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; background:#EEF1F7; padding:1px 6px; border-radius:6px; direction:ltr; unicode-bidi:isolate; }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px; }

/* ── header ── */
.top { background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.top .wrap { display:flex; align-items:center; gap:14px; min-height:60px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; font-size:17px; }
.brand .logo { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:var(--acc); color:#fff; font-size:17px; }
.top nav { display:flex; gap:4px; flex-wrap:wrap; margin-inline-start:auto; align-items:center; }
.top nav a { color:var(--muted); text-decoration:none; padding:7px 11px; border-radius:9px; font-weight:500; font-size:15px; }
.top nav a:hover { background:var(--acc-soft); color:var(--acc); }
.top nav a.cta { background:var(--acc); color:#fff; font-weight:600; }
.top nav a.cta:hover { background:#244BD0; color:#fff; }
.top nav a.lang { border:1px solid var(--line); }

/* ── homepage ── */
.hero { padding:56px 0 40px; background:radial-gradient(1000px 500px at 80% -20%, #E3EAFF 0, transparent 60%); }
.hero h1 { font-size:clamp(30px, 6vw, 46px); line-height:1.15; margin:0 0 14px; letter-spacing:-.01em; }
.hero .lead { font-size:clamp(17px, 2.4vw, 20px); color:#33405E; max-width:720px; margin:0 0 26px; }
.hero .name { display:inline-block; font-size:13px; font-weight:600; color:var(--acc); background:var(--acc-soft); border-radius:99px; padding:3px 12px; margin-bottom:14px; }
.btns { display:flex; gap:10px; flex-wrap:wrap; }
.btn { display:inline-block; text-decoration:none; font-weight:600; border-radius:11px; padding:11px 20px; border:1px solid var(--line); background:var(--panel); color:var(--ink); }
.btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.btn:hover { border-color:var(--acc); }
.sec { padding:34px 0; }
.sec h2 { font-size:clamp(22px, 3.6vw, 28px); margin:0 0 8px; }
.sec > .wrap > p.sub { color:var(--muted); margin:0 0 22px; max-width:760px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 16px; }
.card h3 { margin:0 0 6px; font-size:17px; }
.card p { margin:0; color:#3A4766; font-size:15px; }
.card .ic { font-size:22px; display:block; margin-bottom:6px; }
.steps { counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.steps li { counter-increment:s; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; gap:12px; align-items:flex-start; }
.steps li::before { content:counter(s); flex:none; width:28px; height:28px; border-radius:50%; background:var(--acc-soft); color:var(--acc); font-weight:700; display:grid; place-items:center; }
.band { background:var(--navy); color:#E9EEFF; border-radius:18px; padding:26px; }
.band h2 { color:#fff; }
.band a { color:#BFD0FF; }

/* ── legal pages ── */
.doc { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:clamp(20px, 4vw, 40px); margin:28px auto 40px; max-width:860px; }
.doc h1 { font-size:clamp(26px, 5vw, 34px); margin:0 0 4px; line-height:1.2; }
.doc .updated { color:var(--muted); margin:0 0 18px; font-size:14px; }
.doc h2 { font-size:21px; margin:32px 0 8px; padding-top:6px; border-top:1px solid var(--line2); }
.doc h3 { font-size:17px; margin:20px 0 6px; }
.doc ul { padding-inline-start:22px; }
.doc li { margin:4px 0; }
.doc .toc { background:#FAFBFD; border:1px solid var(--line2); border-radius:12px; padding:12px 16px; margin:16px 0 8px; }
.doc .toc ol { margin:6px 0 0; padding-inline-start:22px; columns:2 240px; }
.doc .toc a { text-decoration:none; }
.doc .note { background:var(--acc-soft); border-radius:12px; padding:12px 16px; }
.doc .key { background:#FFF8E6; border:1px solid #F3DFA8; border-radius:12px; padding:12px 16px; }
.tbl { width:100%; border-collapse:collapse; font-size:15px; margin:10px 0; display:block; overflow-x:auto; }
.tbl th, .tbl td { text-align:start; vertical-align:top; padding:9px 10px; border-bottom:1px solid var(--line2); }
.tbl th { background:#FAFBFD; font-weight:600; white-space:nowrap; }
.ltr { direction:ltr; unicode-bidi:isolate; }

/* ── footer ── */
.foot { border-top:1px solid var(--line); background:var(--panel); padding:22px 0 30px; margin-top:20px; color:var(--muted); font-size:14px; }
.foot .wrap { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
.foot nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
.foot a { color:var(--muted); }
.foot a:hover { color:var(--acc); }
.foot .copy { margin-inline-start:auto; }

@media (max-width: 640px) {
  .top .wrap { padding-top:8px; padding-bottom:8px; }
  .top nav { margin-inline-start:0; width:100%; }
  .top nav a { padding:6px 9px; font-size:14px; }
  .hero { padding:36px 0 28px; }
  .foot .copy { margin-inline-start:0; width:100%; }
}