/* ============================================================
   Frontminder · shared design system for every public page that is not the
   main landing: SEO pages, blog, content pages, docs, legal, contacts, 404.
   v2 (2026-09): the v7 landing look. One hue, Manrope, layered grainy grounds,
   pill top bar that detaches on scroll, mascot at the call to action.
   Class names are unchanged from v1 so page markup did not have to move.
   ============================================================ */
:root {
  --blue: #1D4ED8; --blue-600: #1D4ED8; --blue-500: #1D4ED8;
  --sky: #7CA6FF;
  --blue-50: #EEF3FF; --blue-100: #DCE6FF; --blue-200: color-mix(in oklab, #1D4ED8 30%, #fff);
  --navy: #0B1633; --navy-2: #10245C; --navy-3: #17347A;
  --ink: #0B1633; --body: #56627E; --muted: #56627E; --muted-2: color-mix(in oklab, #56627E 70%, #fff);
  --line: color-mix(in oklab, #0B1633 10%, transparent); --line-2: color-mix(in oklab, #0B1633 6%, transparent);
  --bg: #ffffff; --surface: #F3F6FC;
  --ok: #15803D; --ok-bg: #E7F7EE; --ok-bright: #22C55E; --ok-light: #86EFAC; --danger: #B91C1C;
  --radius: 22px; --radius-sm: 14px; --radius-lg: 28px;
  --shadow-xs: 0 1px 2px rgb(11 22 51 / .08);
  --shadow-sm: 0 2px 4px rgb(11 22 51 / .06), 0 8px 20px -10px rgb(11 22 51 / .16);
  --shadow: 0 12px 28px -14px rgb(11 22 51 / .22);
  --shadow-lg: 0 30px 60px -28px rgb(11 22 51 / .35);
  --shadow-blue: 0 14px 30px -12px rgb(29 78 216 / .6);
  --blue-lift: color-mix(in oklab, #1D4ED8 86%, #fff);
  --grad-blue: linear-gradient(180deg, var(--blue-lift), var(--blue));
  --grad-plate: linear-gradient(160deg, var(--blue-lift) 0%, var(--blue) 45%, var(--navy-2) 100%);
  --grad-navy: radial-gradient(120% 80% at 80% 0%, var(--navy-3) 0%, var(--navy) 55%);
  --maxw: 1080px; --bar-h: 68px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; padding-top: var(--bar-h); }
::selection { background: var(--blue-100); color: var(--navy); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* page-wide grain keeps flat fields from banding */
body::before { content: ""; position: fixed; inset: -50%; z-index: 3; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>"); }

/* ------------------------------------------------ the bar: detaches into a pill on scroll */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 80; padding: 0 24px; pointer-events: none; }
.nav-inner { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; height: var(--bar-h); max-width: var(--maxw); margin: 0 auto; padding: 0; border-radius: 0; background: transparent; border: 1px solid transparent; transition: max-width 420ms var(--ease), padding 420ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease), border-radius 420ms var(--ease), height 420ms var(--ease), margin 420ms var(--ease); }
.nav.is-scrolled .nav-inner { max-width: 66rem; height: 56px; margin-top: 10px; padding: 0 9px 0 18px; border-radius: 999px; background: color-mix(in oklab, #fff 84%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-color: color-mix(in oklab, var(--navy) 8%, transparent); box-shadow: 0 10px 30px -14px rgb(11 22 51 / .35), inset 0 1px 0 rgb(255 255 255 / .6); }
.nav:not(.is-scrolled)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / .92), rgb(255 255 255 / 0)); pointer-events: none; }
.nav-inner > * { position: relative; }
.brand img { height: 30px; width: auto; display: block; transition: height 300ms var(--ease); }
.nav.is-scrolled .brand img { height: 26px; }
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-login { font-size: 15px; font-weight: 700; color: var(--body); transition: color 120ms; }
.nav-login:hover { color: var(--blue); }
.nav .btn { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.nav.is-scrolled .btn { border-radius: 999px; }
.nav-back { font-size: 15px; font-weight: 700; color: var(--body); display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.nav-back:hover { color: var(--blue); }
.nav-back svg { width: 18px; height: 18px; }

/* ------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; font-weight: 700; font-size: 15.5px; letter-spacing: -.005em; line-height: 1; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; transition: transform 140ms var(--ease), box-shadow 180ms var(--ease), background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary { color: #fff; background: var(--grad-blue); box-shadow: 0 1px 2px rgb(11 22 51 / .2), 0 8px 20px -8px rgb(29 78 216 / .6), inset 0 1px 0 rgb(255 255 255 / .18); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgb(11 22 51 / .2), var(--shadow-blue), inset 0 1px 0 rgb(255 255 255 / .2); }
.btn-ghost { color: var(--ink); background: color-mix(in oklab, #fff 70%, transparent); border-color: color-mix(in oklab, var(--navy) 18%, transparent); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { color: var(--blue); background: #fff; box-shadow: 0 10px 30px -12px rgb(11 22 51 / .5); }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -14px rgb(11 22 51 / .55); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 16.5px; border-radius: 14px; }

/* ------------------------------------------------ breadcrumbs, eyebrow */
.crumbs { font-size: 13.5px; color: var(--muted); padding: 18px 0 0; font-weight: 600; }
.crumbs a:hover { color: var(--blue); }
.crumbs span { margin: 0 7px; opacity: .6; }
.eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }

/* ------------------------------------------------ hero: the paper ground (grainy blue mesh) */
.phero { position: relative; overflow: hidden; padding: 28px 0 56px; isolation: isolate; }
.phero:not(.phero-photo)::before { content: ""; position: absolute; inset: -14%; z-index: -1; filter: blur(80px); pointer-events: none;
  background:
    radial-gradient(closest-side at 62% 30%, color-mix(in oklab, var(--blue) 30%, transparent), transparent 72%),
    radial-gradient(closest-side at 88% 100%, color-mix(in oklab, var(--sky) 45%, transparent), transparent 70%),
    radial-gradient(closest-side at 6% 70%, color-mix(in oklab, var(--blue-100) 85%, transparent), transparent 70%); }
.phero:not(.phero-photo)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .18; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.phero .wrap { position: relative; }
h1 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.04; letter-spacing: -.028em; font-weight: 800; margin: 14px 0 16px; max-width: 20ch; text-wrap: balance; }
.phero .lead { color: var(--body); font-size: clamp(16px, 1.9vw, 20px); line-height: 1.45; font-weight: 500; max-width: 640px; text-wrap: pretty; }
.grad-text { color: var(--blue); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 7px 20px; color: var(--body); font-size: 14px; font-weight: 600; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--blue); flex: none; }
.meta-line { color: var(--muted); font-size: 14px; font-weight: 600; margin: 10px 0 0; }

/* ------------------------------------------------ sections */
.section { padding: clamp(46px, 6vw, 76px) 0; position: relative; }
.section--surface { background: linear-gradient(180deg, var(--blue-50), var(--surface)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(25px, 3vw, 36px); line-height: 1.08; letter-spacing: -.022em; font-weight: 800; text-wrap: balance; }
h3 { font-size: 18.5px; letter-spacing: -.01em; font-weight: 800; line-height: 1.25; }
.section > .wrap > h2 { margin-bottom: 10px; }
.section-sub { color: var(--body); font-size: 17px; font-weight: 500; max-width: 680px; margin-bottom: 30px; text-wrap: pretty; }

/* prose */
.prose p { color: var(--body); margin: 0 0 16px; max-width: 720px; font-weight: 500; text-wrap: pretty; }
.prose h2 { margin: 8px 0 14px; }
.prose h3 { margin: 26px 0 8px; }
.prose ul.ticks { display: grid; gap: 10px; margin: 4px 0 18px; max-width: 720px; }
.prose ul.ticks li { display: flex; gap: 11px; color: var(--body); align-items: flex-start; font-weight: 500; }
.prose ul.ticks li svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 2px; }
.prose ul:not(.ticks), .prose ol { list-style: disc; margin: 4px 0 18px; padding-left: 22px; display: grid; gap: 6px; max-width: 720px; color: var(--body); font-weight: 500; }
.prose ol { list-style: decimal; }

/* cards (the landing's tile: bordered, lifted, top edge light) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { position: relative; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs), inset 0 1px 0 #fff; transition: transform 200ms var(--ease), box-shadow 250ms var(--ease), border-color 200ms; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--blue) 30%, transparent); box-shadow: 0 18px 36px -18px rgb(29 78 216 / .35), inset 0 1px 0 #fff; }
.ic-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); transition: background-color 160ms, color 160ms, transform 200ms var(--ease); }
.ic-tile svg { width: 22px; height: 22px; color: var(--blue); transition: color 160ms; }
.card:hover .ic-tile { background: var(--grad-blue); transform: rotate(-6deg) scale(1.06); }
.card:hover .ic-tile svg { color: #fff; }
.card h3 { margin: 13px 0 6px; font-size: 16.5px; }
.card p { color: var(--body); font-size: 14.5px; font-weight: 500; }

/* steps: numbered badge over a rail */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; margin-top: 12px; }
.step { position: relative; margin-top: 20px; padding: 34px 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs), inset 0 1px 0 #fff; }
.step::before { counter-increment: s; content: counter(s); position: absolute; top: -20px; left: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-blue); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 0 0 6px rgb(29 78 216 / .12), 0 10px 24px -10px rgb(29 78 216 / .8); }
.step h3 { margin: 6px 0 6px; font-size: 16.5px; } .step p { color: var(--body); font-size: 14.5px; font-weight: 500; }

/* comparison table */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); background: #fff; }
table.cmp { width: 100%; border-collapse: collapse; background: #fff; min-width: 560px; }
table.cmp th, table.cmp td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line-2); font-size: 14.5px; font-weight: 500; color: var(--body); }
table.cmp thead th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); font-weight: 800; }
table.cmp td:first-child { font-weight: 700; color: var(--ink); }
table.cmp .ar { color: var(--blue); font-weight: 800; }
table.cmp tr:last-child td { border-bottom: 0; }

/* faq */
.faq { max-width: 800px; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; transition: border-color 200ms, box-shadow 200ms; }
.faq-item.open { border-color: color-mix(in oklab, var(--blue) 30%, transparent); box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 18px 22px; font-size: 16px; font-weight: 800; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; letter-spacing: -.01em; }
.faq-q svg { width: 22px; height: 22px; color: var(--blue); flex: none; transition: transform 200ms var(--ease); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq-a p { padding: 0 22px 20px; color: var(--body); font-size: 15px; font-weight: 500; text-wrap: pretty; }

/* internal links */
.links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.linkcard { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); font-weight: 700; font-size: 15px; color: var(--ink); transition: transform 200ms var(--ease), border-color 200ms, box-shadow 200ms, color 120ms; }
.linkcard:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--blue) 30%, transparent); box-shadow: var(--shadow-sm); color: var(--blue); }
.linkcard svg { width: 18px; height: 18px; color: var(--blue); flex: none; }

/* ------------------------------------------------ cta band: the blue plate, mascot standing behind it */
.cta { position: relative; overflow: visible; color: #fff; border-radius: var(--radius-lg); padding: 56px 40px; text-align: center; margin-top: 40px;
  background: var(--grad-plate); box-shadow: var(--shadow-lg), 0 30px 60px -30px rgb(29 78 216 / .8), inset 0 1px 0 rgb(255 255 255 / .35); border: 1px solid color-mix(in oklab, #fff 22%, transparent); }
.cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(closest-side at 85% 0%, color-mix(in oklab, var(--sky) 70%, transparent), transparent 70%),
    linear-gradient(112deg, transparent 4%, color-mix(in oklab, var(--sky) 16%, transparent) 13%, transparent 24%),
    linear-gradient(112deg, transparent 40%, color-mix(in oklab, var(--sky) 10%, transparent) 50%, transparent 62%); }
.cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .22; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; }
.cta p { color: rgb(255 255 255 / .9); max-width: 560px; margin: 12px auto 26px; font-weight: 500; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta .btn-light[style] { background: rgb(255 255 255 / .14) !important; color: #fff !important; border-color: rgb(255 255 255 / .28) !important; box-shadow: none; }
.cta__bot { position: absolute; left: -26px; top: -118px; width: 176px; z-index: 0; pointer-events: auto; }
.cta__bot .mascot { --ex: .3; }
.cta__hand { position: absolute; left: -26px; top: -118px; width: 176px; z-index: 2; pointer-events: none; }
@media (max-width: 860px) { .cta__bot, .cta__hand { width: 120px; left: -6px; top: -80px; } .cta { padding-top: 64px; } }

/* ------------------------------------------------ footer: navy, like the landing */
footer { position: relative; background: var(--grad-navy); color: #fff; padding: 52px 0 26px; margin-top: 40px; overflow: hidden; }
footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(color-mix(in oklab, #fff 10%, transparent) 1px, transparent 1.4px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); }
footer .wrap { position: relative; }
.foot-top { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.foot-top img { height: 28px; filter: brightness(0) invert(1); opacity: .95; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-nav a { color: color-mix(in oklab, #fff 84%, transparent); font-size: 15px; font-weight: 600; transition: color 120ms; }
.foot-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.foot-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid color-mix(in oklab, #fff 12%, transparent); font-size: 13.5px; font-weight: 600; color: #AEBBDA; }
footer a:hover { color: #fff; }
/* the compact footer of contacts/legal pages */
footer.foot--mini .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: #AEBBDA; }
footer.foot--mini a { color: color-mix(in oklab, #fff 84%, transparent); }

/* ------------------------------------------------ reveals (added by public.js) */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 600ms var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv:nth-child(2) { transition-delay: 60ms; } .rv:nth-child(3) { transition-delay: 120ms; } .rv:nth-child(4) { transition-delay: 180ms; } .rv:nth-child(5) { transition-delay: 240ms; } .rv:nth-child(6) { transition-delay: 300ms; }
html.no-js .rv, .no-io .rv { opacity: 1; transform: none; }

/* ------------------------------------------------ contacts page */
.head { padding: 28px 0 8px; }
.head .lead { color: var(--body); font-size: clamp(16px, 1.8vw, 19px); font-weight: 500; max-width: 620px; }
.grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; padding: 36px 0 72px; align-items: start; }
.card .sub { color: var(--muted); font-size: 15px; font-weight: 500; margin-bottom: 22px; }
.card > h2 { font-size: 21px; margin-bottom: 6px; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line-2); }
.contact-item:first-of-type { border-top: 0; padding-top: 0; }
.contact-icon { flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; }
.contact-icon svg { width: 21px; height: 21px; }
.contact-label { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.contact-value { font-size: 17px; font-weight: 800; color: var(--ink); word-break: break-word; }
.contact-value a:hover { color: var(--blue); }
.contact-note { font-size: 14px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--body); margin-bottom: 7px; }
.field label .opt { font-weight: 500; color: var(--muted-2); }
.req { color: var(--blue); }
.field input, .field textarea { width: 100%; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid color-mix(in oklab, var(--navy) 18%, transparent); border-radius: 12px; padding: 13px 15px; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); font-weight: 500; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 22%, transparent); }
.field textarea { resize: vertical; min-height: 148px; line-height: 1.55; }
.form-note { font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 14px; }
.form-note a { color: var(--blue); font-weight: 700; }
.status { margin-top: 16px; font-size: 15px; font-weight: 600; border-radius: 12px; padding: 13px 15px; display: none; }
.status.show { display: block; }
.status.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid color-mix(in oklab, var(--ok) 25%, transparent); }
.status.err { background: color-mix(in oklab, var(--danger) 8%, #fff); color: var(--danger); border: 1px solid color-mix(in oklab, var(--danger) 25%, transparent); }
button.btn[disabled] { opacity: .6; cursor: default; box-shadow: none; }

/* ------------------------------------------------ legal documents (offer, privacy, requisites, 152-fz) */
.doc { max-width: 820px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow), inset 0 1px 0 #fff; }
.doc h1 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 20px; max-width: none; }
.doc h2 { font-size: clamp(20px, 2.2vw, 24px); margin: 34px 0 12px; }
.doc h3 { margin: 24px 0 8px; font-size: 17px; }
.doc p, .doc li { color: var(--body); font-weight: 500; font-size: 16px; line-height: 1.65; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.doc ul { list-style: disc; } .doc ol { list-style: decimal; }
.doc strong { color: var(--ink); font-weight: 700; }
.doc a { color: var(--blue); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--blue) 30%, transparent); text-underline-offset: 3px; }
.doc .box, .doc [class*="bg-slate-50"], .doc [class*="bg-primary/5"] { margin: 18px 0; padding: 20px 22px; border-radius: var(--radius-sm); background: var(--blue-50); border: 1px solid color-mix(in oklab, var(--blue) 14%, transparent); }
.doc [class*="bg-slate-50"] p, .doc .box p { margin: 0 0 8px; }
.doc [class*="grid"] { display: grid; gap: 14px; }
.doc [class*="sm:grid-cols-3"], .doc [class*="md:grid-cols-2"] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.doc [class*="sm:grid-cols-3"] > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; text-align: center; }
.doc [class*="sm:grid-cols-3"] p { margin: 4px 0 0; }
.doc [class*="md:grid-cols-2"] > div { background: var(--blue-50); border: 1px solid color-mix(in oklab, var(--blue) 14%, transparent); border-radius: var(--radius-sm); padding: 20px; }
.doc [class*="md:grid-cols-2"] h3 { margin: 0; }
.doc [class*="flex"] { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.doc .material-symbols-outlined { color: var(--blue); font-size: 26px; }
.doc [class*="border-t"] { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.doc [class*="text-sm"] { font-size: 14px; }
.doc .text-center, .doc [class*="text-center"] { text-align: center; }
.doc-hero { text-align: center; }
.doc-hero h1 { margin: 14px auto 12px; }
.doc-hero .lead { margin: 0 auto; }

/* ------------------------------------------------ content engine (markdown pages + blog) */
.prose--md > * { max-width: 760px; }
.prose--md h2 { margin: 36px 0 12px; }
.prose--md h3 { margin: 24px 0 8px; }
.prose--md ul, .prose--md ol { color: var(--body); margin: 0 0 18px; padding-left: 22px; display: grid; gap: 6px; font-weight: 500; }
.prose--md ul { list-style: disc; } .prose--md ol { list-style: decimal; }
.prose--md li > p { margin: 0; }
.prose--md blockquote { margin: 18px 0; padding: 14px 20px; border-left: 3px solid var(--blue); background: var(--blue-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); }
.prose--md blockquote p { margin: 0; color: var(--ink); }
.prose--md code { font-family: var(--mono); font-size: .92em; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.prose--md pre { background: var(--navy); color: #E6EDF7; border-radius: var(--radius-sm); padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; }
.prose--md pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose--md table { width: 100%; border-collapse: collapse; background: #fff; margin: 0 0 20px; font-size: 14.5px; display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.prose--md thead th { text-align: left; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; font-weight: 800; }
.prose--md td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); color: var(--body); vertical-align: top; font-weight: 500; }
.prose--md td:first-child { font-weight: 700; color: var(--ink); }
.prose--md img { max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.prose--md a { color: var(--blue); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--blue) 30%, transparent); text-underline-offset: 3px; font-weight: 600; }
.prose--md hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.prose--md strong { color: var(--ink); }
.postlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.post { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs), inset 0 1px 0 #fff; color: var(--ink); transition: transform 200ms var(--ease), border-color 200ms, box-shadow 200ms; }
.post:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--blue) 30%, transparent); box-shadow: 0 18px 36px -18px rgb(29 78 216 / .35), inset 0 1px 0 #fff; }
.post h2 { font-size: 20px; margin: 0; line-height: 1.25; }
.post p { color: var(--body); font-size: 15px; margin: 0; font-weight: 500; }
.post-meta { font-size: 12.5px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.post-more { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 800; font-size: 14.5px; margin-top: auto; }
.post-more svg { width: 16px; height: 16px; }

/* docs screenshots */
.shot img { border-color: var(--line) !important; box-shadow: var(--shadow) !important; }

/* ------------------------------------------------ responsive */
@media (max-width: 860px) {
  .cards, .steps, .links { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; gap: 20px; }
  .nav { padding: 0 12px; }
  .nav.is-scrolled .nav-inner { max-width: none; padding: 0 8px 0 14px; }
  .nav-login { display: none; }
}
@media (max-width: 760px) { .postlist { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .cards, .steps, .links { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1 1 100%; }
  .cta { padding: 64px 22px 40px; }
  .nav .btn { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
  .brand img { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}