/* chrome:begin — the rules between these markers are also served as chrome.css, the site chrome on pages the store and connector libraries render */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(/fonts/dm-sans-latin.woff2?h=b6511d71) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: optional;
  src: url(/fonts/jetbrains-mono-latin.woff2?h=b6511d71) format("woff2"); }

:root {
  --bg: #0c1014; --bg-card: #111518; --bg-surface: #161b22; --bg-hover: #1c2428;
  --text: #e8edf2; --text-bright: #ffffff; --text-subtle: #8a9aa8; --text-quiet: #aebbc7;
  --border: #1c2428; --border-bright: #2a3640;
  --blue: #818cf8; --orange: #f59e0b; --gold: #daa04a; --green: #22c55e;
  --red: #f85149; --cyan: #22d3ee; --pink: #f472b6; --purple: #a78bfa;
  --on-accent: #0c1014;
  --glow-blue: rgba(129, 140, 248, 0.16); --glow-cyan: rgba(34, 211, 238, 0.10); --glow-gold: rgba(218, 160, 74, 0.10);
  --grid-line: rgba(138, 154, 168, 0.07);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: 20px;
  --radius: 12px;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* chrome:begin */
.muted { color: var(--text-subtle); }
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 10px 16px; border-radius: 8px; background: var(--blue); color: var(--on-accent); font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }

/* chrome:begin */
/* ---- chrome */
.anav { --anav-bg: color-mix(in srgb, var(--bg) 84%, transparent); --anav-fg: var(--text-bright); --anav-accent: var(--blue); --anav-muted: var(--text-subtle);
  --anav-border: var(--border); --anav-font: var(--font-sans); --anav-fs: 16px; --anav-h: 64px; --anav-max: 1200px; }
.anav { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
.anav .anav-wrap { padding-inline: var(--gutter); }
.anav .anav-cb { display: none; }
.anav ul, .anav li { margin: 0; padding: 0; list-style: none; }
.anav details, .anav summary { margin: 0; }
.anav summary::after { display: none; }
@media (max-width: 860px) { .anav .anav-burger { display: inline-flex; width: 44px; height: 44px; margin: 0; } }
.anav .nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--blue); color: var(--on-accent);
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.anav .nav-cta:hover { background: var(--text-bright); color: var(--bg); }
@media (max-width: 480px) { .anav .nav-cta { display: none; } }

.attribution { border-top: 1px solid var(--border); background: var(--bg-card); }
.attribution-row { display: flex; gap: 14px; align-items: flex-start; padding-block: 20px; font-size: 15px; color: var(--text-quiet); }
.attribution-row .icon { color: var(--green); margin-top: 2px; }
.attribution-row a { white-space: normal; }
.anav-footer { --anav-fg: var(--text); --anav-muted: var(--text-subtle); --anav-accent: var(--blue); --anav-border: var(--border); --anav-font: var(--font-sans); --anav-max: 1200px; --anav-bg: var(--bg); }
/* Pico lays out every <nav> and its list as a flex bar with padded items; the
   footer's columns are navs too and must keep anav's own layout. */
.anav-footer nav.anav-footer-col { display: block; }
.anav-footer nav ul.anav-footer-list { align-items: flex-start; justify-content: flex-start; margin: 0; }
.anav-footer nav li { display: list-item; padding: 0; list-style: none; }
.anav-footer nav li a { display: inline-block; margin: 0; padding: 4px 0; }
.anav-footer .anav-footer-h { margin: 0 0 10px; }
.anav-footer .anav-footer-grid { padding-inline: var(--gutter); }


/* chrome:begin */
/* ---- CJK typography (translation review 2026-09-15) */
/* Korean and Chinese punctuation and text use system CJK fonts before DM Sans
   (DM Sans has no CJK glyphs and draws "——" as two Latin dashes). */
:lang(ko) { --font-sans: "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", "DM Sans", system-ui, sans-serif; }
:lang(zh) { --font-sans: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Hiragino Sans GB", "DM Sans", system-ui, sans-serif; }
/* Korean breaks between words, never inside a syllable block. */
:lang(ko) body, :lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) p, :lang(ko) li, :lang(ko) dd, :lang(ko) .card { word-break: keep-all; overflow-wrap: anywhere; }
/* Chinese: strict line breaking; headings balance their lines. (keep-all is
   wrong for Chinese: unspaced text becomes one unbreakable run.) */
:lang(zh) body { line-break: strict; }
:lang(zh) h1, :lang(zh) h2 { text-wrap: balance; }
/* site.js wraps each Chinese word of a heading (Intl.Segmenter) in .nw. */
.nw { white-space: nowrap; }

/* chrome:begin */
/* The price's VAT basis on store pages (storefilter.go). */
.lh-price .brreg-vat { display: block; margin: .35rem 0 0; font: 500 0.875rem/1.35 var(--font-sans); color: var(--text-quiet); letter-spacing: 0; }
.brreg-card-pay { margin: 0 0 1rem; }
/* Five plans across one row leave each card ~200 px: the figure must not break
   inside "kr" or "/mnd". */
@media (min-width: 1180px) { .lh-featured-5 .lh-price { font-size: 1.35rem; } }
.lh-price { overflow-wrap: normal; }
.lh-price > small:not(.brreg-vat) { white-space: nowrap; }
.lh-foot-lang { display: inline-flex; flex-wrap: wrap; gap: .4rem 1rem; }

/* chrome:begin */
/* ---- store form pages: quote, company details, confirm (spec public-site-and-store).
   ginstore renders these as a bare <article> in a 78rem container with Pico's
   full-width controls; storefilter.go stamps the route on <body data-store-page>
   so they get one centred card. Only generic elements are styled (label, input,
   select, textarea, small, [role=alert], [role=status]), so a field the library
   adds keeps the same look. */
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) main.container { max-width: calc(620px + 2 * var(--gutter)); padding-inline: var(--gutter); padding-block: 32px 72px; }
body:is([data-store-page="orders"], [data-store-page="cart"], [data-store-page="success"]) main.container { max-width: calc(960px + 2 * var(--gutter)); padding-inline: var(--gutter); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) main.container > article {
  max-width: none; margin: 0 0 16px; padding: 36px 36px 32px; border: 1px solid var(--border-bright); border-radius: 16px; background: var(--bg-card); box-shadow: var(--shadow); color: var(--text); }
@media (max-width: 560px) { body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) main.container > article { padding: 24px 18px; border-radius: 14px; } }
body[data-store-page] main.container > article hgroup { margin: 0 0 24px; }
body[data-store-page] main.container > article h1 { margin: 0; font: 700 32px/1.15 var(--font-sans); letter-spacing: -0.02em; color: var(--text-bright); }
@media (max-width: 560px) { body[data-store-page] main.container > article h1 { font-size: 26px; } }
body[data-store-page] main.container > article hgroup p { margin: 8px 0 0; font: 400 16px/1.5 var(--font-sans); color: var(--text-quiet); }
body[data-store-page] main.container > article hgroup p strong { color: var(--text); font-weight: 600; }
body[data-store-page] main.container > article > p:not(.lh-price, .lh-unavail, [role="alert"]) { font-size: 16px; line-height: 1.55; color: var(--text-quiet); margin: 0 0 20px; }
body[data-store-page] .lh-quote-intro { margin: 0 0 28px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 7%, var(--bg-card)); color: var(--text-quiet); font-size: 15px; line-height: 1.55; }
body[data-store-page] .lh-quote-intro p { margin: 0; font-size: 15px; } body[data-store-page] .lh-quote-intro p + p { margin-top: 8px; }
body[data-store-page] main.container > article form { display: grid; gap: 20px; margin: 0; }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form :is(.lh-biz-group, .lh-quote-group):not([hidden]) { display: grid; gap: 20px; }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .lh-quote-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-subtle); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form label:has(> input:not([type="checkbox"], [type="radio"], [type="hidden"]), > select, > textarea) { display: grid; gap: 7px; margin: 0; font: 600 15px/1.35 var(--font-sans); color: var(--text); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
  width: 100%; min-height: 48px; margin: 0; padding: 11px 14px; font: 400 16px/1.4 var(--font-sans); color: var(--text-bright); background-color: var(--bg);
  border: 1px solid var(--border-bright); border-radius: 10px; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form select { padding-inline-end: 40px; } body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form select:has(option[value=""]:checked) { color: var(--text-subtle); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form textarea { min-height: 128px; resize: vertical; }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form :is(input, select, textarea)::placeholder { color: var(--text-subtle); opacity: 1; }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form :is(input, select, textarea):focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--red); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form :is(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 30%, transparent); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form label small { display: block; margin: 0; font: 400 15px/1.45 var(--font-sans); color: var(--text-subtle); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form [aria-invalid="true"] + small { color: var(--red); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form :is(output, [role="status"]) { display: block; margin: 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--green) 9%, var(--bg-card)); color: var(--text); font: 500 15px/1.45 var(--font-sans); }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .lh-quote-confirm p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); } body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .lh-quote-confirm p + p { margin-top: 4px; }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .lh-quote-confirm strong { color: var(--text-bright); font-size: 17px; font-weight: 600; } body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .lh-quote-confirm .lh-quote-note { color: var(--text-quiet); margin-top: 8px; }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .brreg-card-pay { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-quiet); } body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .brreg-card-pay strong { color: var(--text); font-weight: 600; }
body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .lh-terms { margin: 0; } body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .lh-terms small { font-size: 15px; } body:is([data-store-page="quote"], [data-store-page="business"], [data-store-page="confirm"]) form .lh-terms label { font-size: 15px; font-weight: 400; color: var(--text); }
body[data-store-page] main.container > article :is(button[type="submit"], a[role="button"]) {
  display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 48px; margin: 4px 0 0; padding: 0 26px; border-radius: 10px;
  font: 600 16px/1 var(--font-sans); text-decoration: none; border: 1px solid var(--blue); background: var(--blue); color: var(--on-accent); box-shadow: none; }
body[data-store-page] main.container > article form button[type="submit"] { justify-self: start; }
body[data-store-page] main.container > article :is(button[type="submit"], a[role="button"]):hover { background: var(--text-bright); border-color: var(--text-bright); color: var(--bg); }
body[data-store-page] main.container > article a[role="button"].outline { background: transparent; border-color: var(--border-bright); color: var(--text-bright); }
body[data-store-page] main.container > article a[role="button"].outline:hover { background: var(--bg-surface); border-color: var(--blue); color: var(--text-bright); }
@media (max-width: 560px) { body[data-store-page] main.container > article :is(button[type="submit"], a[role="button"]) { width: 100%; } body[data-store-page] main.container > article form button[type="submit"] { justify-self: stretch; } }
body[data-store-page] main.container > article:has(> p[role="alert"]), body[data-store-page] .lh-biz-err {
  margin: 0 0 16px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--red) 50%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--red) 11%, var(--bg-card)); box-shadow: none; }
body[data-store-page] main.container > article > p[role="alert"] { margin: 0; font: 500 16px/1.45 var(--font-sans); color: var(--text-bright); }
body[data-store-page] main.container > article > p.lh-unavail { margin: 0 0 24px; padding: 14px 16px; border-radius: 10px; background: var(--bg-surface); border: 1px solid var(--border-bright); color: var(--text); font-size: 16px; }