@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-sans-400.c6d16617f1.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plex-sans-500.29209e19fe.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/plex-sans-600.dbe368fdad.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-mono-400.a32e36c3a8.woff2) format("woff2"); }
:root {
--p-900: #0E2440;
--p-700: #163C6B;
--p-600: #1D4E89;
--p-300: #7FAEE0;
--p-50: #EEF3F9;
--a-600: #DB9020;
--a-500: #F2A93B;
--a-100: #FDF1DC;
--a-line: #B97A12;
--a-ink: #5C3D06;
--error: #B42318;
--n-900: #101A29;
--n-700: #33415A;
--n-600: #4A5870;
--n-500: #64718A;
--n-400: #7C879B;
--n-300: #C9D1DC;
--n-200: #E1E6ED;
--n-50: #F6F8FA;
--white: #FFFFFF;
--on-dark-muted: #B7C3D4;
--font-sans: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
--radius: 4px;
--radius-card: 6px;
--content: 1120px;
--gutter: 32px;
--section-y: 96px;
--h1: 56px;
--h2: 40px;
--h3: 22px;
--lead: 20px;
--body: 17px;
--small: 14px;
--label: 13px;
--t-hover: 150ms;
--ease: cubic-bezier(0, 0, 0.2, 1);
}
@media (max-width: 1023px) {
:root { --gutter: 24px; --section-y: 72px; }
}
@media (max-width: 639px) {
:root { --gutter: 20px; --section-y: 56px; --h1: 36px; --h2: 30px; --h3: 20px; --lead: 18px; --body: 16px; --label: 12px; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--body);
line-height: 1.6;
color: var(--n-900);
background: var(--p-900);
-webkit-font-smoothing: antialiased;
}
main { display: block; background: var(--white); }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
h1, h2, h3, h4 { color: var(--p-900); font-weight: 600; }
h1 { font-size: var(--h1); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--h2); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: var(--h3); line-height: 1.3; }
@media (max-width: 639px) { h1 { line-height: 1.15; } h2 { line-height: 1.2; } }
img, svg { display: block; }
svg { flex: none; }
a { color: var(--p-600); text-underline-offset: 3px; }
a:hover { color: var(--p-700); }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--p-600); outline-offset: 2px; }
.section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--p-300); }
[tabindex="-1"]:focus { outline: none; }
.container { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.stack-48 { display: flex; flex-direction: column; gap: var(--s-12); }
@media (max-width: 639px) { .stack-48 { gap: var(--s-8); } }
.eyebrow {
font-family: var(--font-mono);
font-size: var(--label);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--p-600);
}
.eyebrow--accent { color: var(--a-500); }
.lead { font-size: var(--lead); line-height: 1.5; color: var(--n-700); }
.lead--ink { color: var(--n-900); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 44px; padding: 0 16px;
font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2;
text-decoration: none; white-space: nowrap;
border: 1px solid transparent; border-radius: var(--radius);
cursor: pointer;
transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.btn--primary { height: 52px; padding: 0 24px; gap: 10px; background: var(--a-500); color: var(--p-900); font-size: 17px; font-weight: 600; border: 0; }
.btn--primary:hover { background: var(--a-600); color: var(--p-900); }
.btn--lg { height: 52px; padding: 0 28px; font-size: 17px; font-weight: 600; }
.btn--secondary { background: var(--white); color: var(--p-600); border-color: var(--p-600); }
.btn--secondary:hover { background: var(--p-50); color: var(--p-700); }
.btn--secondary .i-check { display: none; }
.btn--secondary.is-done { background: var(--p-50); color: var(--p-700); }
.btn--secondary.is-done .i-copy { display: none; }
.btn--secondary.is-done .i-check { display: block; }
.btn--ghost { padding: 0 24px; gap: 10px; color: var(--white); border-color: var(--white); background: transparent; }
.btn--ghost:hover { background: var(--p-700); color: var(--white); }
.btn--text { height: 44px; padding: 0 8px; background: transparent; color: var(--p-600); text-decoration: underline; text-underline-offset: 3px; }
.btn--text:hover { color: var(--p-700); }
.btn--consent { height: 48px; min-width: 132px; padding: 0 20px; background: var(--p-600); color: var(--white); font-size: 16px; font-weight: 600; border: 0; }
.btn--consent:hover { background: var(--p-700); color: var(--white); }
.btn svg, .arrow-link svg { transition: transform var(--t-hover) var(--ease); }
.arrow-link-btn:hover svg, .arrow-link:hover svg { transform: translateX(3px); }
.arrow-link {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
color: var(--p-600); font-weight: 500; font-size: 17px; text-decoration: none;
}
.arrow-link:hover { text-decoration: underline; }
.linkbtn {
display: inline-flex; align-items: center; align-self: flex-start;
padding: 0; border: 0; background: transparent; color: var(--white);
font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.site-header { background: var(--white); border-bottom: 1px solid var(--n-200); position: relative; z-index: 10; }
.header-bar { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.wordmark {
display: inline-flex; align-items: center; gap: 5px; min-height: 44px;
font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: 0.04em;
color: var(--p-900); text-decoration: none;
}
a.wordmark:hover { color: var(--p-900); }
.wordmark__bar { display: inline-block; width: 10px; height: 4px; background: var(--p-600); }
.wordmark--dark { color: var(--white); min-height: 0; }
.wordmark--dark .wordmark__bar { background: var(--p-300); }
.wordmark--sm { font-size: 20px; }
.wordmark--sm .wordmark__bar { width: 9px; }
.nav { display: flex; align-items: center; gap: 32px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav a { color: var(--n-700); text-decoration: none; padding: 12px 0; }
.nav a:hover { color: var(--p-600); text-decoration: underline; text-underline-offset: 4px; }
.lang { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; }
.lang--header { padding-left: 24px; border-left: 1px solid var(--n-200); margin-left: -8px; }
.lang--header a { color: var(--n-600); text-decoration: none; padding: 12px 2px; }
.lang--header span { color: var(--n-400); }
.lang a.is-current {
color: var(--p-900); font-weight: 400;
text-decoration: underline; text-decoration-color: var(--a-500); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.lang--header a:not(.is-current):hover { color: var(--p-600); text-decoration: underline; }
.menu { display: none; }
@media (max-width: 1023px) {
.header-bar { flex-wrap: wrap; gap: 0 24px; padding-top: 4px; padding-bottom: 4px; min-height: 0; }
.header-bar > .wordmark { min-height: 56px; }
.lang--header { margin-left: auto; padding-left: 0; border-left: 0; }
.nav { order: 3; width: 100%; margin-left: -2px; gap: 20px; overflow-x: auto; border-top: 1px solid var(--n-200); }
}
@media (max-width: 639px) {
.header-bar { flex-wrap: nowrap; gap: 12px; min-height: 64px; padding-top: 0; padding-bottom: 0; }
.header-bar > .wordmark { font-size: 20px; min-height: 44px; }
.header-bar > .wordmark .wordmark__bar { width: 9px; }
.nav { display: none; }
.lang--header { gap: 4px; }
.lang--header a { min-width: 32px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.menu { display: block; }
.menu summary {
display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
color: var(--p-900); font-size: 15px; font-weight: 500; line-height: 1;
border: 1px solid var(--n-400); border-radius: var(--radius); background: var(--white);
cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--p-50); border-color: var(--p-600); }
.menu__nav {
position: absolute; left: 0; right: 0; top: 100%;
display: flex; flex-direction: column; padding: 8px var(--gutter) 16px;
background: var(--white); border-bottom: 1px solid var(--n-300);
}
.menu__nav a { display: flex; align-items: center; min-height: 48px; color: var(--n-700); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--n-200); }
.menu__nav a:last-child { border-bottom: 0; }
}
.hero { background: var(--white); }
.hero__grid { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.hero__text { max-width: 720px; display: flex; flex-direction: column; gap: 24px; }
.hero__text .lead { max-width: 560px; }
.hero__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 639px) {
.hero__grid { padding-top: 48px; }
.hero__text { gap: 20px; }
.hero__actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 4px; }
.hero__actions .btn { width: 100%; }
.hero__actions .arrow-link { justify-content: center; min-height: 48px; font-size: 16px; }
}
.section { background: var(--white); border-top: 1px solid var(--n-200); }
.section > .container { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--alt { background: var(--n-50); }
.section--dark { background: var(--p-900); color: var(--white); border-top: 0; }
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.section-head__intro { color: var(--n-700); }
@media (max-width: 639px) { .section-head { gap: 12px; } }
.card { background: var(--white); border: 1px solid var(--n-200); border-radius: var(--radius-card); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.service { padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color var(--t-hover) var(--ease); }
.service:hover { border-color: var(--p-600); }
.service p { font-size: 16px; color: var(--n-700); }
@media (max-width: 639px) {
.cards { grid-template-columns: 1fr; gap: 16px; }
.service { padding: 20px; gap: 10px; }
}
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--p-600); padding-top: 20px; }
.step__no { font-family: var(--font-mono); font-size: 14px; color: var(--p-600); }
.step__body { display: flex; flex-direction: column; gap: 12px; }
.step h3 { font-size: 20px; }
.step p { font-size: 16px; color: var(--n-700); }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
.steps { grid-template-columns: 1fr; gap: 24px; }
.step { flex-direction: row; gap: 16px; padding-top: 16px; }
.step__no { flex: 0 0 32px; padding-top: 3px; }
.step__body { gap: 6px; }
}
.product { gap: 0; }
.section--dark h2 { color: var(--white); }
.product__text { display: flex; flex-direction: column; gap: 20px; }
.product__text .lead { color: var(--white); }
.product__body { color: var(--on-dark-muted); max-width: 480px; }
.product__cta { margin-top: 28px; }
.product__panel { margin-top: 48px; min-width: 0; }
@media (max-width: 639px) {
.product__text { gap: 16px; }
.product__panel { order: 2; margin-top: 24px; margin-right: calc(-1 * var(--gutter)); overflow: hidden; border-radius: 12px 0 0 12px; }
.product__panel-inner { width: 760px; }
.product__cta { order: 3; margin-top: 24px; }
.product__cta .btn { width: 100%; }
}
.about { display: flex; gap: var(--s-16); align-items: flex-start; }
.about__head { flex: 4 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.about__body { flex: 7 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.about__body > p:not(.lead) { color: var(--n-700); }
.about__facts { display: flex; flex-wrap: wrap; gap: 16px 48px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--n-200); }
.about__facts > div { display: flex; flex-direction: column; gap: 2px; }
.about__facts dt { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-600); }
.about__facts dd { font-size: 20px; font-weight: 600; color: var(--p-900); }
@media (max-width: 1023px) { .about { flex-direction: column; gap: 20px; } .about__head, .about__body { flex: none; width: 100%; } }
@media (max-width: 639px) {
.about, .about__head, .about__body { gap: 16px; }
.about__facts { gap: 16px 28px; padding-top: 16px; }
.about__facts dd { font-size: 18px; }
}
.contact { display: flex; gap: var(--s-16); align-items: flex-start; }
.contact__main { flex: 7 1 0; min-width: 0; }
.contact__side { flex: 5 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.contact__direct, .contact__company { display: flex; flex-direction: column; gap: 12px; }
.contact__direct h3, .contact__company h3 { font-size: 20px; }
.contact__email { font-size: 18px; color: var(--n-900); overflow-wrap: anywhere; }
.contact__note { margin-top: 8px; font-size: 15px; color: var(--n-600); }
.contact__company { border-top: 1px solid var(--n-300); padding-top: 24px; }
.contact__company dl { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.contact__company dl > div { display: flex; gap: 16px; }
.contact__company dt { flex: 0 0 132px; color: var(--n-600); }
html[lang="en"] .contact__company dt { flex-basis: 148px; }
.contact__more { font-size: 15px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
@media (max-width: 1023px) {
.contact { flex-direction: column; gap: 40px; }
.contact__main, .contact__side { flex: none; width: 100%; }
.contact__side { flex-direction: row; gap: 32px; }
.contact__side > * { flex: 1 1 0; min-width: 0; }
.contact__company { border-top: 0; padding-top: 0; border-left: 1px solid var(--n-300); padding-left: 32px; }
}
@media (max-width: 639px) {
.contact { gap: 32px; }
.contact__side { flex-direction: column; gap: 24px; }
.contact__direct { gap: 10px; }
.contact__direct .btn { width: 100%; height: 48px; }
.contact__email { font-size: 17px; }
.contact__company { border-left: 0; padding-left: 0; border-top: 1px solid var(--n-300); padding-top: 24px; gap: 10px; }
.contact__company dl { gap: 12px; }
.contact__company dl > div { flex-direction: column; gap: 4px; }
.contact__company dt { flex-basis: auto; font-size: 13px; }
}
.form { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; color: var(--n-900); }
.field input, .field textarea {
width: 100%; height: 48px; padding: 0 14px;
font: inherit; font-size: 16px; color: var(--n-900); background: var(--white);
border: 1px solid var(--n-400); border-radius: var(--radius);
}
.field textarea { height: 160px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--p-600); }
.field [aria-invalid="true"] { border: 2px solid var(--error); padding-left: 13px; }
.field textarea[aria-invalid="true"] { padding: 11px 13px; }
.field__error { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--error); }
.field__error svg { flex: 0 0 16px; margin-top: 2px; }
.field__counter { font-size: 14px; line-height: 1.4; color: var(--n-600); text-align: right; font-variant-numeric: tabular-nums; }
.form__submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__hint { font-size: 14px; color: var(--n-600); flex: 1 1 200px; }
@media (max-width: 639px) {
.form { padding: 20px; gap: 16px; }
.form__row { grid-template-columns: 1fr; gap: 16px; }
.form__submit { flex-direction: column; align-items: stretch; gap: 12px; }
.form__submit .btn { width: 100%; font-size: 16px; white-space: normal; text-align: center; }
.form__hint { flex: none; }
}
.form-sent { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.form-sent__head { display: flex; gap: 16px; align-items: flex-start; }
.form-sent__icon { flex: 0 0 44px; height: 44px; border-radius: 22px; background: var(--p-50); color: var(--p-600); display: flex; align-items: center; justify-content: center; }
.form-sent__copy { display: flex; flex-direction: column; gap: 8px; }
.form-sent__copy h3 { font-size: 24px; line-height: 1.25; }
.form-sent__copy p { color: var(--n-700); }
.form-sent__summary { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; font-size: 15px; background: var(--n-50); border: 1px solid var(--n-200); border-radius: var(--radius); }
.form-sent__summary > div { display: flex; gap: 12px; }
.form-sent__summary > div > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.form-sent__summary .mono { font-size: 14px; }
.form-sent__k { flex: 0 0 72px; color: var(--n-600); }
.form-sent__fallback { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--n-200); }
.form-sent__fallback h4 { font-size: 17px; line-height: 1.4; }
.form-sent__fallback p { font-size: 15px; color: var(--n-700); }
.form-sent__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 639px) {
.form-sent { padding: 20px; }
.form-sent__summary > div { flex-direction: column; gap: 0; }
.form-sent__k { flex-basis: auto; }
.form-sent__actions { flex-direction: column; align-items: stretch; }
.form-sent__actions .btn { width: 100%; height: 48px; }
}
.noscript-mail { padding: 32px; font-size: 18px; }
.site-footer { background: var(--p-900); color: var(--on-dark-muted); font-size: 15px; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--p-300); }
.site-footer > .container { padding-top: 64px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 48px; }
.footer__grid { display: flex; gap: var(--s-16); align-items: flex-start; }
.footer__brand { flex: 4 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.footer__company { flex: 5 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__nav { flex: 3 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.footer__nav > a, .footer__nav > .linkbtn { min-height: 36px; display: inline-flex; align-items: center; align-self: flex-start; }
.footer__h { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 4px; }
.footer__nav .footer__h { margin-bottom: 8px; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 20px; border-top: 1px solid var(--n-700); font-size: 14px; }
.lang--footer { gap: 12px; font-family: var(--font-sans); font-size: 14px; }
.lang--footer a { color: var(--on-dark-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.lang--footer a.is-current { color: var(--white); font-weight: 500; }
.lang--footer a:not(.is-current):hover { text-decoration: underline; color: var(--white); }
.site-footer--compact { font-size: 14px; }
.site-footer--compact > .container { padding-top: 32px; padding-bottom: 32px; }
.footer__row { flex-direction: row !important; justify-content: space-between; align-items: center; gap: 24px !important; flex-wrap: wrap; }
.footer__id { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__nav--row { flex: none; flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__nav--row > a, .footer__nav--row > .linkbtn { min-height: 44px; }
.footer__nav--row > a.footer__other { color: var(--on-dark-muted); }
@media (max-width: 1023px) {
.footer__grid { flex-wrap: wrap; gap: 40px 48px; }
.footer__brand { flex: 1 1 100%; }
}
@media (max-width: 639px) {
.site-footer > .container { padding-top: 48px; padding-bottom: 24px; gap: 32px; }
.footer__grid { flex-direction: column; gap: 32px; }
.footer__brand { gap: 8px; }
.footer__company { gap: 10px; }
.footer__h { margin-bottom: 0; }
.footer__nav { gap: 0; }
.footer__nav .footer__h { margin-bottom: 4px; }
.footer__nav > a, .footer__nav > .linkbtn { min-height: 44px; }
.footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 8px; padding-top: 16px; }
.footer__row { flex-direction: column !important; align-items: flex-start; }
.footer__nav--row { flex-direction: column; align-items: flex-start; gap: 0; }
}
.legal__inner { max-width: calc(800px + 2 * var(--gutter)); margin: 0 auto; padding: 72px var(--gutter) 96px; display: flex; flex-direction: column; gap: 40px; }
.legal h1 { font-size: 48px; line-height: 1.1; }
.legal h2 { font-size: 26px; line-height: 1.2; }
.legal h2.mb-8 { margin-bottom: 8px; }
.legal-head { display: flex; flex-direction: column; gap: 16px; }
.legal-head > p:not(.eyebrow):not(.lead):not(.note) { color: var(--n-700); }
.legal section { display: flex; flex-direction: column; gap: 12px; }
.legal section.sec-tight { gap: 8px; }
.legal section > p { color: var(--n-700); }
.legal p.sec-intro { margin-bottom: 8px; font-size: 16px; }
.legal p.note { font-size: 15px; color: var(--n-600); }
.legal .facts { display: flex; flex-direction: column; border-top: 1px solid var(--n-300); }
.legal .facts .row { display: flex; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--n-200); }
.legal .facts dt { flex: 0 0 180px; color: var(--n-600); font-size: 16px; }
.legal .facts dt.wide { flex-basis: 260px; }
.legal .facts dd { min-width: 0; color: var(--n-900); }
.legal .facts dd.mono, .legal .facts dd .mono { font-size: 16px; }
.legal .facts dd.strong { font-weight: 600; }
.legal .dd-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.legal .dd-actions .btn { font-size: 14px; padding: 0 14px; }
.legal p .mono { font-size: 15px; color: var(--n-900); }
.legal .placeholder { font-family: var(--font-mono); font-size: 13px; background: var(--a-100); color: var(--a-ink); padding: 2px 6px; border-radius: 3px; border: 1px dashed var(--a-line); }
.legal .list { padding-left: 22px; color: var(--n-700); display: flex; flex-direction: column; gap: 6px; }
.legal .table-wrap { overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal th { text-align: left; color: var(--n-600); padding: 10px 12px; font-weight: 500; border-bottom: 1px solid var(--n-300); }
.legal td { padding: 12px; border-bottom: 1px solid var(--n-200); vertical-align: top; }
.legal th:first-child, .legal td:first-child { padding-left: 0; }
.legal th:last-child, .legal td:last-child { padding-right: 0; }
.legal td.mono { font-size: 14px; }
.notfound .legal__inner { padding-bottom: 120px; }
@media (max-width: 639px) {
.legal__inner { padding-top: 48px; padding-bottom: 64px; gap: 32px; }
.legal h1 { font-size: 36px; line-height: 1.15; }
.legal h2 { font-size: 22px; }
.legal .facts .row { flex-direction: column; gap: 2px; padding: 12px 0; }
.legal .facts dt, .legal .facts dt.wide { flex-basis: auto; font-size: 14px; }
.legal table { min-width: 560px; }
}
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 0 var(--gutter) var(--gutter); pointer-events: none; }
.consent__inner {
max-width: var(--content); margin: 0 auto; pointer-events: auto;
display: flex; align-items: center; gap: 40px; padding: 24px 28px;
background: var(--white); border: 1px solid var(--n-300); border-top: 3px solid var(--p-600); border-radius: var(--radius-card);
font-size: 16px; line-height: 1.55;
}
.consent__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.consent h2 { font-size: 20px; line-height: 1.3; letter-spacing: 0; }
.consent p { color: var(--n-700); }
.consent__short { display: none; }
.consent__actions { flex: none; display: flex; gap: 12px; }
@media (max-width: 1023px) {
.consent__inner { flex-direction: column; align-items: stretch; gap: 16px; }
}
@media (max-width: 639px) {
.consent { padding: 0 12px 12px; }
.consent__inner { padding: 20px; gap: 14px; }
.consent h2 { font-size: 18px; }
.consent p { font-size: 15px; }
.consent__long { display: none; }
.consent__short { display: block; }
.consent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn--consent { min-width: 0; padding: 0 8px; }
}
.rc {
--frame: #F3F5F8; --sheet: #FFFFFF; --active: #E7EBF0; --border: #E1E6EC; --rule: #EDF0F4;
--control: #7D889A; --ink: #17202E; --muted: #526072; --accent: #2F62C8; --kbd: #F1F4F8; --codeBg: #F6F8FA;
--sTxt: #24292F; --sKw: #A71D5D; --sFn: #795DA3; --sTy: #0086B3;
width: 100%; height: 280px; display: flex; flex-direction: column; overflow: hidden;
background: var(--frame); color: var(--ink);
font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; font-size: 12px; line-height: normal;
border: 1px solid var(--border); border-radius: 12px; text-align: left;
-webkit-user-select: text; user-select: text;
}
.rc button, .rc input, .rc kbd { font-family: inherit; }
.rc button { cursor: default; }
.rc-mute { color: var(--muted); }
.rc-fill { flex: 1 1 0; min-width: 0; }
.rc-head { flex: none; height: 32px; margin: 10px 16px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.rc-search { position: relative; flex: 0 1 300px; min-width: 150px; height: 32px; display: block; }
.rc-sicon { color: var(--muted); position: absolute; left: 10px; top: 9.5px; }
.rc-search input { width: 100%; height: 32px; padding: 0 96px 0 32px; font-size: 13px; color: var(--ink); background: var(--sheet); border: 1px solid var(--control); border-radius: 6px; outline: none; }
.rc-search input::placeholder { color: var(--muted); opacity: 1; }
.rc-anywhere { position: absolute; right: 10px; top: 0; height: 32px; display: flex; align-items: center; font-size: 11px; color: var(--muted); pointer-events: none; }
.rc-tabs { flex: 0 1 auto; min-width: 0; overflow: hidden; display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--active); border-radius: 7px; }
.rc-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; white-space: nowrap; }
.rc-tab.is-on { font-weight: 600; color: var(--ink); background: var(--sheet); border-color: var(--control); }
.rc-dot { width: 7px; height: 7px; border-radius: 4px; background: #64B5F6; }
.rc-add { flex: none; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: none; border-radius: 5px; }
.rc-filter { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px 0 10px; font-size: 12px; color: var(--ink); background: var(--sheet); border: 1px solid var(--control); border-radius: 6px; white-space: nowrap; }
.rc-sep { flex: none; width: 1px; height: 20px; background: var(--border); }
.rc-switch { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; font-size: 12px; color: var(--ink); background: transparent; border: none; border-radius: 6px; white-space: nowrap; }
.rc-track { position: relative; width: 26px; height: 14px; border-radius: 7px; background: var(--control); }
.rc-knob { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 5px; background: var(--sheet); }
.rc-icon { flex: none; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: none; border-radius: 6px; }
.rc-cards { flex: none; height: 180px; display: flex; gap: 8px; padding: 0 16px; overflow: hidden; }
.rc-card { flex: none; width: 180px; height: 180px; padding: 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; background: var(--sheet); border: 1px solid var(--border); border-radius: 10px; }
.rc-card.is-sel { padding: 9px; border: 2px solid var(--accent); }
.rc-ch { flex: none; height: 18px; display: flex; align-items: center; gap: 6px; }
.rc-type { font-size: 11px; font-weight: 600; color: var(--muted); }
.rc-fill { flex: 1; }
.rc-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.rc-num { padding: 0 4px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--muted); background: var(--kbd); border: 1px solid var(--border); border-radius: 4px; }
.rc-note { flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 0; font-size: 12px; line-height: 17px; color: var(--ink); }
.rc-app { flex: none; height: 24px; display: flex; align-items: center; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.rc-code { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 6px 8px; border-radius: 6px; background: var(--codeBg); font-family: "Cascadia Mono", Consolas, monospace; font-size: 11.5px; line-height: 17px; white-space: pre; color: var(--sTxt); }
.rc-code .k { color: var(--sKw); } .rc-code .f { color: var(--sFn); } .rc-code .t { color: var(--sTy); }
.rc-foot { flex: none; height: 24px; display: flex; align-items: center; gap: 2px; }
.rc-appname { flex: 1; min-width: 0; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-mini { flex: none; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: none; border-radius: 5px; }
.rc-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.rc-linkimg { flex: none; height: 54px; padding: 8px; display: flex; align-items: flex-end; gap: 6px; border-radius: 6px; background: #24292F; }
.rc-linkdot { width: 16px; height: 16px; border-radius: 4px; background: #2DA44E; }
.rc-linkbar { flex: 1; height: 6px; border-radius: 3px; background: #57606A; }
.rc-linktitle { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); }
.rc-host { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.rc-shot { max-width: 100%; border-radius: 6px; }
.rc-meta { font-size: 11px; color: var(--muted); }
.rc-file { display: flex; align-items: center; gap: 8px; }
.rc-fcol { display: flex; flex-direction: column; }
.rc-fname { font-size: 12px; }
.rc-secret { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.rc-dots { font-size: 18px; letter-spacing: 3px; color: var(--muted); }
.rc-hold { line-height: 15px; }
.rc-swatch { height: 48px; border-radius: 6px; background: #E8590C; border: 1px solid var(--rule); }
.rc-hex { font-family: "Cascadia Mono", Consolas, monospace; font-size: 13px; font-weight: 600; }
.rc-rgb { font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; color: var(--muted); }
.rc-json { gap: 4px; }
.rc-jname { font-size: 12px; font-weight: 600; }
.rc-jval { font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; line-height: 16px; color: var(--muted); overflow-wrap: anywhere; }
.rc-keys { flex: none; height: 28px; margin-top: 10px; padding: 0 16px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; border-top: 1px solid var(--rule); overflow: hidden; }
.rc-key { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.rc-key kbd { padding: 0 5px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--ink); background: var(--kbd); border: 1px solid var(--border); border-radius: 4px; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero .enter { animation: enter 400ms var(--ease) both; }
.hero h1.enter { animation-delay: 0ms; }
.hero .lead.enter { animation-delay: 60ms; }
.hero__actions.enter { animation-delay: 120ms; }
html.js .reveal:not(.is-in) .reveal-item { opacity: 0; transform: translateY(16px); }
html.js .reveal .reveal-item { transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
html.js .reveal .cards .reveal-item:nth-child(2), html.js .reveal .steps .reveal-item:nth-child(2) { transition-delay: 50ms; }
html.js .reveal .cards .reveal-item:nth-child(3), html.js .reveal .steps .reveal-item:nth-child(3) { transition-delay: 100ms; }
html.js .reveal .cards .reveal-item:nth-child(4), html.js .reveal .steps .reveal-item:nth-child(4) { transition-delay: 150ms; }
html.js .reveal.is-in .service.reveal-item { transition: opacity 350ms var(--ease), transform 350ms var(--ease), border-color var(--t-hover) var(--ease); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
html.js .reveal:not(.is-in) .reveal-item { opacity: 1; transform: none; }
}
@media print {
body { background: #fff; }
.site-header .nav, .menu, .consent, .btn, noscript { display: none !important; }
}