/* youd.ru — the YOUD ERP look on the public site (ERP: frontend/app/globals.css, rounds 61-66).
   Same tokens (HSL triplets), same classes in spirit: .surface (a block that floats and casts a shadow, comes closer to the pointer),
   .block-head (the title is the head band of its block), .ribbon (KPI panel), .nav-item (menu / tab button). Light AND dark theme.
   No inline styles anywhere (the CSP of the site allows only its own files). */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

:root {
  --background: 220 15% 96%; --foreground: 222 25% 11%;
  --card: 0 0% 100%; --card-foreground: 222 25% 11%;
  --primary: 208 92% 42%; --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 93%; --muted: 220 14% 94%; --muted-foreground: 220 9% 38%;
  --accent: 220 14% 92%; --border: 220 14% 88%; --input: 220 13% 84%; --ring: 208 92% 42%;
  --destructive: 4 72% 48%; --success: 152 58% 30%; --warning: 33 92% 33%;
  --radius: 0.75rem;
  --canvas-top: 220 14% 91%; --canvas-bottom: 220 13% 88%;
  --glass: 0 0% 100%; --glass-float-alpha: 0.8; --glass-blur: 24px; --glass-sat: 1.8;
  --glass-edge: 222 25% 11%; --glass-edge-alpha: 0.09; --glass-highlight: 0 0% 100%;
  --shadow: 222 30% 12%;
  --ease-approach: cubic-bezier(0.33, 0, 0.2, 1);
  --elev-rest: 0 1px 2px hsl(var(--shadow) / 0.1), 0 8px 22px -4px hsl(var(--shadow) / 0.16), 0 26px 56px -16px hsl(var(--shadow) / 0.2);
  --elev-hover: 0 2px 6px hsl(var(--shadow) / 0.12), 0 18px 42px -6px hsl(var(--shadow) / 0.26), 0 46px 90px -22px hsl(var(--shadow) / 0.34);
  --elev-nested: 0 1px 2px hsl(var(--shadow) / 0.1), 0 5px 12px -3px hsl(var(--shadow) / 0.12);
  --elev-nested-hover: 0 2px 5px hsl(var(--shadow) / 0.14), 0 12px 26px -5px hsl(var(--shadow) / 0.24);
  --highlight: 0 0% 100%; --highlight-alpha: 0.9;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --background: 222 12% 9.5%; --foreground: 220 14% 93%; --card: 222 10% 14%; --card-foreground: 220 14% 93%;
  --primary: 207 96% 62%; --primary-foreground: 222 40% 8%; --secondary: 222 10% 18.5%; --muted: 222 10% 17.5%; --muted-foreground: 220 9% 64%;
  --accent: 222 10% 20.5%; --border: 222 9% 22%; --input: 222 12% 24%; --ring: 207 96% 62%;
  --destructive: 4 62% 52%; --success: 152 52% 56%; --warning: 38 92% 60%;
  --canvas-top: 222 10% 11.5%; --canvas-bottom: 222 11% 9.5%;
  --glass: 222 22% 17%; --glass-float-alpha: 0.8; --glass-blur: 24px; --glass-sat: 1.6; --glass-edge: 0 0% 100%; --glass-edge-alpha: 0.1; --glass-highlight: 0 0% 100%;
  --shadow: 0 0% 0%;
  --elev-rest: 0 1px 2px hsl(var(--shadow) / 0.55), 0 10px 26px -4px hsl(var(--shadow) / 0.6), 0 30px 64px -16px hsl(var(--shadow) / 0.7);
  --elev-hover: 0 2px 6px hsl(var(--shadow) / 0.6), 0 20px 46px -6px hsl(var(--shadow) / 0.7), 0 50px 96px -22px hsl(var(--shadow) / 0.8);
  --elev-nested: 0 1px 2px hsl(var(--shadow) / 0.5), 0 6px 14px -3px hsl(var(--shadow) / 0.5);
  --elev-nested-hover: 0 2px 5px hsl(var(--shadow) / 0.55), 0 14px 30px -5px hsl(var(--shadow) / 0.62);
  --highlight: 0 0% 100%; --highlight-alpha: 0.045;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --background: 222 12% 9.5%; --foreground: 220 14% 93%; --card: 222 10% 14%; --card-foreground: 220 14% 93%;
  --primary: 207 96% 62%; --primary-foreground: 222 40% 8%; --secondary: 222 10% 18.5%; --muted: 222 10% 17.5%; --muted-foreground: 220 9% 64%;
  --accent: 222 10% 20.5%; --border: 222 9% 22%; --input: 222 12% 24%; --ring: 207 96% 62%;
  --destructive: 4 62% 52%; --success: 152 52% 56%; --warning: 38 92% 60%;
  --canvas-top: 222 10% 11.5%; --canvas-bottom: 222 11% 9.5%;
  --glass: 222 22% 17%; --glass-float-alpha: 0.8; --glass-blur: 24px; --glass-sat: 1.6; --glass-edge: 0 0% 100%; --glass-edge-alpha: 0.1; --glass-highlight: 0 0% 100%;
  --shadow: 0 0% 0%;
  --elev-rest: 0 1px 2px hsl(var(--shadow) / 0.55), 0 10px 26px -4px hsl(var(--shadow) / 0.6), 0 30px 64px -16px hsl(var(--shadow) / 0.7);
  --elev-hover: 0 2px 6px hsl(var(--shadow) / 0.6), 0 20px 46px -6px hsl(var(--shadow) / 0.7), 0 50px 96px -22px hsl(var(--shadow) / 0.8);
  --elev-nested: 0 1px 2px hsl(var(--shadow) / 0.5), 0 6px 14px -3px hsl(var(--shadow) / 0.5);
  --elev-nested-hover: 0 2px 5px hsl(var(--shadow) / 0.55), 0 14px 30px -5px hsl(var(--shadow) / 0.62);
  --highlight: 0 0% 100%; --highlight-alpha: 0.045;
  color-scheme: dark;
  }
}


*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.65;
  color: hsl(var(--foreground)); background-color: hsl(var(--canvas-bottom));
  background-image: linear-gradient(180deg, hsl(var(--canvas-top)), hsl(var(--canvas-bottom))); background-attachment: fixed; min-height: 100vh; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; }
a { color: hsl(var(--primary)); text-decoration: none; } a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding-left: 1.25rem; } img, svg { max-width: 100%; }
.icon { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); border-radius: 0.5rem; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: hsl(var(--card)); padding: .5rem 1rem; border-radius: .75rem; } .skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .wrap { padding: 0 1.5rem; } }
.section { padding: 3.5rem 0 1rem; }
.section-head { max-width: 46rem; margin-bottom: 1.75rem; }
.section-head h2 { font-size: clamp(1.625rem, 3.2vw, 2.25rem); margin-bottom: .75rem; }
.lead { font-size: 1.125rem; color: hsl(var(--muted-foreground)); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: hsl(var(--primary)); margin-bottom: .75rem; }
.muted { color: hsl(var(--muted-foreground)); } .small { font-size: .875rem; }

/* ── surface / block head / ribbon (ERP) ── */
.surface { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: 1rem;
  box-shadow: inset 0 1px 0 hsl(var(--highlight) / var(--highlight-alpha)), var(--elev-rest); }
.surface .surface { box-shadow: inset 0 1px 0 hsl(var(--highlight) / var(--highlight-alpha)), var(--elev-nested); border-radius: .75rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .surface, .ribbon { transition: transform 640ms var(--ease-approach), box-shadow 640ms var(--ease-approach); }
  .surface:hover { transform: scale(var(--lift-scale, 1.005)); box-shadow: inset 0 1px 0 hsl(var(--highlight) / var(--highlight-alpha)), var(--elev-hover); }
  .surface .surface:hover { box-shadow: inset 0 1px 0 hsl(var(--highlight) / var(--highlight-alpha)), var(--elev-nested-hover); }
  .surface-still:hover, .surface .surface-still:hover { transform: none; box-shadow: inset 0 1px 0 hsl(var(--highlight) / var(--highlight-alpha)), var(--elev-rest); }
}
/* a block is a column: its foot band always sits at the bottom, also when the blocks of a row differ in height */
.surface { display: flex; flex-direction: column; } .surface > .block-body, .surface > .sec-body { flex: 1 1 auto; }
.block-head { display: flex; align-items: center; gap: .75rem; padding: .875rem 1.25rem; background-color: hsl(var(--foreground) / 0.045);
  border-bottom: 1px solid hsl(var(--border) / 0.6); border-top-left-radius: inherit; border-top-right-radius: inherit; }
.block-head :is(h2, h3, h4) { font-size: 1rem; line-height: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.block-head .icon { color: hsl(var(--primary)); }
.block-head .tag { margin-left: auto; }
.block-body { padding: 1.25rem; }
.block-body > :last-child { margin-bottom: 0; }

.ribbon { display: grid; gap: 1px; overflow: hidden; border-radius: 1rem; background-color: hsl(var(--border)); grid-template-columns: repeat(2, 1fr);
  box-shadow: 0 0 0 1px hsl(var(--border)), var(--elev-rest); }
@media (min-width: 900px) { .ribbon { grid-template-columns: repeat(4, 1fr); } }
.ribbon > div { background-color: hsl(var(--card)); padding: 1.1rem 1.25rem 1.25rem; }
.ribbon .k { font-size: .875rem; color: hsl(var(--muted-foreground)); font-weight: 500; }
.ribbon .v { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; margin-top: .125rem; font-variant-numeric: tabular-nums; }
.ribbon .n { font-size: .8125rem; color: hsl(var(--muted-foreground)); margin-top: .125rem; line-height: 1.4; }

.tag { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; line-height: 1; padding: .3rem .6rem; border-radius: 999px;
  background-color: hsl(var(--foreground) / 0.06); color: hsl(var(--muted-foreground)); font-weight: 500; }
.tag-primary { background-color: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }

/* ── nav item (menu button + tab look) ── */
.nav-item { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; border-radius: .75rem; padding: .5rem .75rem; font-size: .9375rem; line-height: 1.25rem;
  white-space: nowrap; color: hsl(var(--muted-foreground)); background: transparent; border: 0; cursor: pointer; font-family: inherit;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 380ms var(--ease-approach); }
.nav-item:hover { background-color: hsl(var(--foreground) / 0.05); color: hsl(var(--foreground)); text-decoration: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .nav-item:hover { transform: scale(1.035); } }
.nav-item:active { transform: scale(0.97); background-color: hsl(var(--foreground) / 0.09); transition-duration: 120ms; }
.nav-item[aria-current="page"], .nav-item[aria-selected="true"] { background-color: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); font-weight: 500;
  box-shadow: inset 0 1px 0 hsl(var(--glass-highlight) / 0.7), inset 0 0 0 1px hsl(var(--primary) / 0.22); }

a.ribbon { display: grid; color: inherit; text-decoration: none; margin-top: 2rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { a.ribbon:hover { transform: scale(var(--lift-scale, 1.005)); box-shadow: inset 0 1px 0 hsl(var(--highlight) / var(--highlight-alpha)), var(--elev-hover); } }
a.ribbon:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
/* ── buttons: ONE design for every button of the site = the look of the ACTIVE menu item of the ERP (tint, ring, light and dark) ── */
.btn, .btn-cta, .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3rem; padding: .625rem 1.75rem; border-radius: .875rem; border: 0; cursor: pointer;
  font: 600 .9375rem/1.25rem "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; background-color: hsl(var(--primary) / 0.1); color: hsl(var(--primary));
  box-shadow: inset 0 1px 0 hsl(var(--glass-highlight) / 0.7), inset 0 0 0 1px hsl(var(--primary) / 0.22); transition: background-color 150ms ease, transform 380ms var(--ease-approach); }
.btn:hover { background-color: hsl(var(--primary) / 0.16); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .btn:hover { transform: scale(1.035); } }
.btn:active { transform: scale(0.97); transition-duration: 120ms; }
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.btn-sm { min-height: 2.25rem; padding: .4rem 1rem; font-size: .8125rem; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── header (glass: it floats over scrolling content) ── */
.topbar-wrap { position: sticky; top: .75rem; z-index: 50; padding-top: .75rem; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .5rem .5rem .5rem 1rem; border-radius: 1rem;
  background-color: hsl(var(--glass) / var(--glass-float-alpha)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid hsl(var(--glass-edge) / var(--glass-edge-alpha)); box-shadow: inset 0 1px 0 hsl(var(--glass-highlight) / .6), var(--elev-rest); }
.logo { display: inline-flex; align-items: center; gap: .625rem; color: hsl(var(--foreground)); font-weight: 600; letter-spacing: -0.01em; }
.logo:hover { text-decoration: none; }
.logo-mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 1rem; font-weight: 600; box-shadow: inset 0 1px 0 hsl(0 0% 100% / .25); }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; } .logo-text small { font-size: .6875rem; font-weight: 400; color: hsl(var(--muted-foreground)); letter-spacing: 0; }
.nav { display: none; gap: .125rem; margin-left: auto; align-items: center; }
.topbar .right { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
[data-theme="dark"] .theme-moon, :root:not([data-theme="dark"]) .theme-sun { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; }
.phone-link { display: none; font-weight: 500; color: hsl(var(--foreground)); white-space: nowrap; }
@media (min-width: 1040px) { .nav { display: flex; margin-left: auto; margin-right: auto; } .topbar .right { margin-left: 0; } .menu-btn { display: none; } }
@media (min-width: 1240px) { .phone-link { display: inline-flex; align-items: center; gap: .375rem; margin-right: .25rem; } }
.mobile-nav { display: none; margin-top: .5rem; padding: .5rem; flex-direction: column; gap: .125rem; }
.mobile-nav.open { display: flex; } .mobile-nav .nav-item { width: 100%; }
@media (min-width: 1040px) { .mobile-nav, .mobile-nav.open { display: none; } }

/* ── hero ── */
.hero { padding: 3.5rem 0 2rem; display: block; text-align: center; }
.hero .eyebrow { justify-content: center; }
@media (min-width: 960px) { .hero { padding-top: 3.5rem; } }
.hero h1 { font-size: clamp(1.75rem, 4.6vw, 3.25rem); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 1.5rem; text-transform: uppercase; font-weight: 700; }
.hero h1 span { display: block; } .hero h1 .h1-b { margin-top: .25rem; background-image: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / .62)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero .lead { max-width: 52rem; margin: 0 auto 2rem; }
.hero .actions { margin-bottom: 0; justify-content: center; }
.checks { list-style: none; padding: 0; display: grid; gap: .5rem; }
.checks li { display: flex; gap: .625rem; align-items: flex-start; } .checks .icon { color: hsl(var(--success)); margin-top: .25rem; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding: .75rem 0; border-top: 1px solid hsl(var(--border) / .7); }
.steps li:first-child { border-top: 0; padding-top: 0; } .steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .625rem; background-color: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-weight: 600; font-size: .9375rem; }
.steps b { display: block; font-weight: 600; } .steps span { color: hsl(var(--muted-foreground)); font-size: .9375rem; }

/* ── grids / cards ── */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr)); }
.grid-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none !important; }
.card-link .block-body { flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.card-link .more { margin-top: auto; display: inline-flex; align-items: center; gap: .375rem; color: hsl(var(--primary)); font-weight: 500; }
.list-plain { list-style: none; padding: 0; display: grid; gap: .5rem; } .list-plain li { display: flex; gap: .625rem; align-items: flex-start; } .list-plain .icon { color: hsl(var(--primary)); margin-top: .25rem; }
.flagship { border-color: hsl(var(--primary) / .4); }
.flagship .block-head { background-color: hsl(var(--primary) / .09); }

/* ── section block (ERP look): the title of a section is the HEAD of the big block, the smaller blocks and the links live inside it ── */
.sec { margin-top: 3rem; }
.sec > .block-head h2 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.sec-body { padding: 1.25rem; display: grid; gap: 1.25rem; }
.sec-body > .lead { max-width: 46rem; margin: 0; font-size: 1rem; }
.sec-body.flush { padding: 0; gap: 0; }
.sec-body.flush > .lead { padding: 1.1rem 1.25rem .85rem; border-bottom: 1px solid hsl(var(--border) / .7); max-width: none; }
.block-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: .75rem 1.25rem; border-top: 1px solid hsl(var(--border) / .6); background-color: hsl(var(--foreground) / .03);
  border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; font-size: .9375rem; }
.block-foot .foot-text { flex: 1 1 100%; margin: 0; } .block-foot .foot-text b { font-weight: 600; }
.block-foot a { display: inline-flex; align-items: center; gap: .375rem; font-weight: 500; }
/* grids with a FIXED number of columns, so every block row is full and symmetric at any width (3 / 6 items: 1 -> 2 -> 3 columns, 2 / 4 items: 1 -> 2) */
.g2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 800px) { .g2 { grid-template-columns: repeat(2, 1fr); } }
.g3 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .g3 { grid-template-columns: repeat(3, 1fr); } }
.g6 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .g6 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .g6 { grid-template-columns: repeat(3, 1fr); } }
.gcard { display: flex; flex-direction: column; } .gcard > .block-body { flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.gcard .gdesc { min-height: 3rem; color: hsl(var(--foreground)); font-size: .9375rem; margin: 0; }
.gcard .list-plain li span { color: hsl(var(--foreground)); }
.gcard .list-plain { margin-top: auto; }
.tile-text { color: hsl(var(--muted-foreground)); margin: 0; }
.chips-sys { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: auto; }
/* the process as a row of steps: 6 columns -> 3 -> 1 */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background-color: hsl(var(--border) / .7); grid-template-columns: 1fr; overflow: hidden; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
@media (min-width: 700px) { .flow { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .flow { grid-template-columns: repeat(6, 1fr); } }
.flow li { background-color: hsl(var(--card)); padding: 1.1rem 1.25rem 1.25rem; display: grid; grid-template-columns: auto 1fr; column-gap: .625rem; row-gap: .5rem; align-items: center; align-content: start; }
.flow li .t { grid-column: 1 / -1; }
.flow .n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .625rem; background-color: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-weight: 600; font-size: .9375rem; }
.flow b { font-weight: 600; line-height: 1.3; } .flow span.t { color: hsl(var(--muted-foreground)); font-size: .9375rem; line-height: 1.5; }
/* a row of the systems catalogue */
.rows { display: grid; gap: 0; } .row-link { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .25rem 1rem; align-items: start; padding: 1rem 1.25rem; border-top: 1px solid hsl(var(--border) / .7); color: inherit; text-decoration: none !important;
  transition: background-color 150ms ease; } .row-link:first-child { border-top: 0; } .row-link:hover { background-color: hsl(var(--foreground) / .035); }
.row-link .icon { color: hsl(var(--primary)); margin-top: .2rem; } .row-link b { font-weight: 600; display: block; } .row-link span.t { color: hsl(var(--muted-foreground)); font-size: .9375rem; display: block; }
.row-link .go { color: hsl(var(--primary)); align-self: center; }
.lic dl { margin: 0; }

/* ── chat in the cabinet ── */
.chat { display: grid; gap: .625rem; } .chat-list { display: grid; gap: .5rem; max-height: 22rem; overflow-y: auto; padding: .25rem; align-content: start; }
.chat-msg { max-width: 88%; padding: .5rem .75rem; border-radius: .75rem; border: 1px solid hsl(var(--border)); background-color: hsl(var(--card)); overflow-wrap: anywhere; }
.chat-msg p { margin: .125rem 0 0; white-space: pre-wrap; } .chat-msg.mine { justify-self: end; background-color: hsl(var(--primary) / .1); } .chat-msg.theirs { justify-self: start; }
.chat-file { display: block; margin-top: .25rem; padding: 0; border: 0; background: none; color: hsl(var(--primary)); font: inherit; font-size: .875rem; text-decoration: underline; cursor: pointer; }
.chat-form { display: grid; gap: .5rem; }
/* ── documents in the cabinet ── */
.docs { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem .875rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background-color: hsl(var(--card)); }
.doc-info { display: grid; gap: .125rem; min-width: 0; overflow-wrap: anywhere; }
/* ── sign-in way tabs ── */
.tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: .75rem; background-color: hsl(var(--muted)); }
.tabs button { min-height: 2rem; padding: .25rem .75rem; border: 0; border-radius: .5rem; background: transparent; color: hsl(var(--muted-foreground)); font: inherit; font-size: .875rem; cursor: pointer; }
.tabs button.is-on { background-color: hsl(var(--card)); color: hsl(var(--foreground)); font-weight: 500; box-shadow: var(--elev-nested); }
.tabs button:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
/* ── suggestions (organisation, address) ── */
.combo { position: relative; align-content: start; } .combo > label { font-weight: 500; } .combo > p { margin: 0; font-weight: 400; }
.sug { position: absolute; z-index: 30; left: 0; right: 0; top: 2.9rem; margin: 0; padding: .25rem; list-style: none; max-height: 18rem; overflow: auto; background-color: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: .75rem; box-shadow: var(--elev-hover); font-weight: 400; }
.sug li { display: grid; padding: .5rem .75rem; border-radius: .5rem; cursor: pointer; line-height: 1.35; } .sug li small { color: hsl(var(--muted-foreground)); font-size: .8125rem; }
.sug li[aria-selected="true"], .sug li:hover { background-color: hsl(var(--primary) / .1); }
.picked { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .375rem .375rem .375rem .875rem; border-radius: .75rem; background-color: hsl(var(--success) / .1);
  border: 1px solid hsl(var(--success) / .35); font-weight: 400; } .picked-text { min-width: 0; overflow-wrap: anywhere; }
/* ── files of a request / drop zone ── */
.drop { border: 1px dashed hsl(var(--input)); border-radius: .75rem; padding: 1rem; display: grid; gap: .5rem; justify-items: start; background-color: hsl(var(--foreground) / .02); transition: background-color 150ms ease, border-color 150ms ease; }
.drop.over { background-color: hsl(var(--primary) / .08); border-color: hsl(var(--primary)); }
.files { list-style: none; padding: 0; margin: 0; display: grid; gap: .375rem; font-size: .9375rem; } .files li { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .4rem .75rem; border: 1px solid hsl(var(--border)); border-radius: .625rem; background-color: hsl(var(--card)); }
.files li.ok { color: hsl(var(--success)); } .files li.bad { color: hsl(var(--destructive)); }
.tag-end { margin-left: auto; } .nav-item.small { min-height: 1.75rem; padding: .2rem .6rem; font-size: .875rem; }
.drop label.btn { cursor: pointer; } .drop label.btn:focus-within { box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }

/* ── tables / sla ── */
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .table th, .table td { text-align: left; padding: .75rem 1.25rem; border-top: 1px solid hsl(var(--border) / .7); vertical-align: top; }
.table th { font-weight: 500; color: hsl(var(--muted-foreground)); font-size: .875rem; border-top: 0; } .table td:last-child { font-weight: 500; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
@media (max-width: 640px) { .table td:last-child { white-space: normal; } }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0; } .dl dt { color: hsl(var(--muted-foreground)); } .dl dd { margin: 0; }
@media (max-width: 560px) { .dl { grid-template-columns: 1fr; gap: 0; } .dl dd { margin-bottom: .75rem; } }

/* ── faq ── */
details.faq { border-top: 1px solid hsl(var(--border) / .7); } details.faq:first-child { border-top: 0; }
details.faq summary { cursor: pointer; list-style: none; padding: 1rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-weight: 500; }
details.faq summary::-webkit-details-marker { display: none; } details.faq summary .icon { transition: transform 240ms var(--ease-approach); color: hsl(var(--muted-foreground)); }
details.faq[open] summary .icon { transform: rotate(180deg); } details.faq .ans { padding: 0 1.25rem 1.1rem; color: hsl(var(--muted-foreground)); }

/* ── breadcrumbs / article ── */
.crumbs { display: flex; flex-wrap: wrap; gap: .375rem; font-size: .875rem; color: hsl(var(--muted-foreground)); padding-top: 1.5rem; list-style: none; margin: 0; padding-left: 0; }
.crumbs li + li::before { content: "/"; margin-right: .375rem; opacity: .6; }
.page-title { padding: 1rem 0 .5rem; } .page-title h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -0.025em; margin-bottom: .75rem; } .page-title .lead { max-width: 46rem; }
.layout-2 { display: grid; gap: 1.25rem; } @media (min-width: 960px) { .layout-2 { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .sticky { position: sticky; top: 6rem; } }
.prose h2 { font-size: 1.25rem; margin: 1.5rem 0 .625rem; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.0625rem; margin: 1.25rem 0 .5rem; } .prose ul, .prose ol { margin-bottom: 1rem; display: grid; gap: .375rem; }
.cta { text-align: left; } .cta .block-body { display: grid; gap: .75rem; }

/* ── form ── */
.form { display: grid; gap: .875rem; } .row-2 { display: grid; gap: 1rem; align-items: start; } @media (min-width: 640px) { .row-2 { grid-template-columns: 1fr 1fr; } }
label.f, .f { display: grid; gap: .375rem; font-weight: 500; font-size: .9375rem; } .f .hint { font-weight: 400; font-size: .8125rem; color: hsl(var(--muted-foreground)); } label.f .opt, .f .opt { font-weight: 400; color: hsl(var(--muted-foreground)); }
.input, select.input, textarea.input { width: 100%; min-height: 2.75rem; padding: .625rem .875rem; border-radius: .75rem; border: 1px solid hsl(var(--input)); background-color: hsl(var(--card)); color: hsl(var(--foreground)); font: 400 1rem/1.4 "IBM Plex Sans", system-ui, sans-serif; }
/* ONE height for every single-line field (an input and a select looked different: the browser draws a select by its own rules) */
input.input, select.input { height: 2.75rem; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .875rem center; }
:root[data-theme="dark"] select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
textarea.input { min-height: 7rem; resize: vertical; } .input:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .18); }
.input[aria-invalid="true"] { border-color: hsl(var(--destructive)); }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; min-height: 1.875rem; border-radius: .625rem; border: 1px solid hsl(var(--input)); background-color: hsl(var(--card)); font-size: .8125rem; line-height: 1.25; transition: background-color 150ms ease, transform 380ms var(--ease-approach); }
.chip input:checked + span { background-color: hsl(var(--primary) / .1); border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); font-weight: 500; }
.chip input:focus-visible + span { box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.consent { display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; color: hsl(var(--muted-foreground)); } .consent input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: hsl(var(--primary)); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: .875rem 1rem; border-radius: .75rem; font-size: .9375rem; } .notice-ok { background-color: hsl(var(--success) / .12); color: hsl(var(--success)); } .notice-err { background-color: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.is-hidden { display: none !important; }
.err { color: hsl(var(--destructive)); font-size: .875rem; font-weight: 400; }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .timeline li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .75rem; padding-bottom: 1.1rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: .8125rem; top: 1.6rem; bottom: .1rem; width: 2px; background-color: hsl(var(--border)); } .timeline li:last-child::before { display: none; }
.timeline .dot { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center; background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .timeline .done .dot { background-color: hsl(var(--success) / .15); color: hsl(var(--success)); } .timeline .now .dot { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.timeline .now b { color: hsl(var(--primary)); } .timeline li > div > span { display: block; color: hsl(var(--muted-foreground)); font-size: .9375rem; }

/* ── footer / cookie ── */
.footer { margin-top: 4rem; padding: 0 0 2rem; } .footer .surface { padding: 1.5rem 1.25rem; display: grid; gap: 1.5rem; } @media (min-width: 900px) { .footer .surface { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; padding: 1.75rem; } }
.footer h4 { font-size: .875rem; color: hsl(var(--muted-foreground)); font-weight: 500; margin-bottom: .625rem; } .footer ul { list-style: none; padding: 0; display: grid; gap: .375rem; } .footer a { color: hsl(var(--foreground)); } .footer .legal { font-size: .8125rem; color: hsl(var(--muted-foreground)); padding: 1rem .25rem 0; }
.cookie { position: fixed; z-index: 60; left: .75rem; right: .75rem; bottom: .75rem; max-width: 40rem; padding: 1rem 1.1rem; display: grid; gap: .75rem; }
@media (min-width: 720px) { .cookie { left: 1.5rem; right: auto; bottom: 1.5rem; } }
.cookie[hidden] { display: none; }
.back-top { margin-top: 1rem; }
.stack { display: grid; gap: 1.25rem; } .mt-sm { margin-top: .75rem; } .mt-md { margin-top: 1.5rem; } .mb-sm { margin-bottom: .5rem; }
.field-set { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .375rem; } .f-legend { font-weight: 500; font-size: .875rem; padding: 0; margin-bottom: .25rem; } .f-legend .opt { font-weight: 400; color: hsl(var(--muted-foreground)); }
.v-sm { font-size: 1.0625rem; line-height: 1.35; }
.theme-moon, .theme-sun { display: inline-grid; }

/* ── entrance (ERP page-rise): the first blocks of a page rise into place, later ones when they scroll into view ── */
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .js .reveal { opacity: 0; } .js .reveal.in { opacity: 1; animation: rise-in 560ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms) backwards; }
}
@media print { .topbar-wrap, .cookie, .footer .surface { display: none; } body { background: #fff; } }
.nowrap { white-space: nowrap; }
/* ── phone widths: the header must fit (logo text and the request button give way) ── */
@media (max-width: 480px) { .topbar .logo-text small { display: none; } .topbar { gap: .5rem; } .topbar .right { gap: .25rem; } .topbar .btn-sm { padding-left: .75rem; padding-right: .75rem; } }
@media (max-width: 360px) { .topbar .logo-text { display: none; } }