/* ==========================================================================
   e-Client - design system (2026, built from scratch)
   --------------------------------------------------------------------------
   Same brand family as eTranslator, deliberately more restrained: this one faces
   customers, so the green is an accent rather than the subject, the type is larger
   and the spacing more generous.

   1. Tokens & reset
   2. Chrome: header, customer switcher, footer
   3. Login
   4. Components: buttons, fields, alerts, badges, cards
   5. Responsive
   ========================================================================== */

/* 1. Tokens & reset --------------------------------------------------------- */
:root {
	--green: #00ae68;
	--green-600: #009b5c;
	--green-700: #00704a;
	--green-50: #eef9f3;
	--green-100: #d3f2e2;
	--mint: #5cf2a8;

	--ink-900: #101722;
	--ink-800: #1b2430;
	--ink-700: #2f3a48;
	--ink-500: #5f6b7a;
	--ink-400: #8a94a3;
	--ink-300: #c3cad4;
	--ink-200: #dfe4ea;
	--line: #e6eaef;
	--bg: #f7f8f9;
	--card: #ffffff;

	--red: #c8372c;
	--red-50: #fdeceb;
	--amber: #b56f00;
	--amber-50: #fff5e3;
	--blue: #2160c4;
	--blue-50: #ebf1fc;

	--radius: 14px;
	--radius-sm: 9px;
	--radius-pill: 999px;
	--shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
	--shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 6px 16px -6px rgba(16, 24, 40, .12);
	--shadow-lg: 0 24px 56px -20px rgba(16, 24, 40, .3);

	--font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--container: 1180px;
	--header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-700);
	background: var(--bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}
img { border: 0; max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--ink-900); margin: 0 0 10px; line-height: 1.25; font-weight: 650; }
h1 { font-size: 30px; letter-spacing: -.02em; }
h2 { font-size: 20px; letter-spacing: -.01em; }
h3 { font-size: 16px; }
p { margin: 0 0 14px; }
.muted { color: var(--ink-500); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
[hidden] { display: none !important; }
.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;
}

/* 2. Chrome ----------------------------------------------------------------- */
.page { width: 100%; max-width: var(--container); margin: 0 auto; padding: 28px 22px 48px; flex: 1 0 auto; }

.site-header {
	background: var(--ink-900);
	color: #fff;
	position: sticky; top: 0; z-index: 40;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.site-header__inner {
	max-width: var(--container); margin: 0 auto; padding: 0 22px;
	height: var(--header-h); display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark { display: block; flex: none; overflow: visible; }
.brand__mark-halo { transform-box: fill-box; transform-origin: center; animation: markPulse 3.6s ease-in-out infinite; }
@keyframes markPulse { 0%, 100% { transform: scale(1); fill-opacity: .22; } 50% { transform: scale(1.35); fill-opacity: .42; } }
@media (prefers-reduced-motion: reduce) { .brand__mark-halo { animation: none; } }
.brand__name { font-size: 18px; font-weight: 650; letter-spacing: -.01em; line-height: 1.1; }
.brand__sub { font-size: 11px; color: rgba(255, 255, 255, .55); letter-spacing: .06em; text-transform: uppercase; }

.main-nav { display: flex; gap: 2px; margin-left: 8px; flex: 1 1 auto; }
.main-nav a {
	color: rgba(255, 255, 255, .72); padding: 8px 13px; border-radius: var(--radius-sm);
	font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.main-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.main-nav a.is-active { color: #fff; background: rgba(0, 174, 104, .22); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* --- the customer switcher ------------------------------------------------- */
/* One person may represent many customers - the record is 30 - so this is a
   searchable menu, not a select. */
.switcher { position: relative; }
.switcher__button {
	display: flex; align-items: center; gap: 10px;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
	color: #fff; padding: 7px 12px; border-radius: var(--radius-pill);
	font: inherit; font-size: 14px; cursor: pointer; max-width: 320px;
}
.switcher__button:hover { background: rgba(255, 255, 255, .14); }
.switcher__button svg { width: 15px; height: 15px; flex: none; opacity: .7; }
.switcher__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher__role {
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
	background: var(--green); color: #10210a; padding: 2px 7px; border-radius: var(--radius-pill); flex: none;
}
.switcher__menu {
	position: absolute; right: 0; top: calc(100% + 9px); width: 340px; max-width: 86vw;
	background: var(--card); color: var(--ink-700); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 50;
}
.switcher__search { padding: 12px; border-bottom: 1px solid var(--line); }
.switcher__search input {
	width: 100%; padding: 9px 12px; border: 1px solid var(--ink-200);
	border-radius: var(--radius-sm); font: inherit; font-size: 14px;
}
.switcher__search input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.switcher__list { max-height: 330px; overflow-y: auto; padding: 6px; }
.switcher__item {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
	padding: 9px 11px; border: 0; background: none; border-radius: var(--radius-sm);
	font: inherit; color: var(--ink-800); cursor: pointer; text-decoration: none;
}
.switcher__item:hover { background: var(--green-50); text-decoration: none; }
.switcher__item.is-current { background: var(--green-50); font-weight: 600; }
.switcher__item-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher__item-meta { font-size: 12px; color: var(--ink-400); }
.switcher__empty { padding: 20px 14px; text-align: center; color: var(--ink-400); font-size: 13px; }
.switcher__count { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-400); background: #fbfcfd; }

.user-chip { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .85); font-size: 14px; }
.user-chip__avatar {
	width: 32px; height: 32px; border-radius: 50%; flex: none;
	background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center;
	font-size: 12.5px; font-weight: 700; color: #fff;
}

.site-footer {
	background: #fff; border-top: 1px solid var(--line); padding: 22px 0;
	font-size: 13px; color: var(--ink-400); flex: none;
}
.site-footer__inner {
	max-width: var(--container); margin: 0 auto; padding: 0 22px;
	display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
}
.site-footer a { color: var(--ink-500); }

/* 3. Login ------------------------------------------------------------------ */
/* A split page rather than a centred box: the left panel does the reassuring, the
   right panel does the work. */
.auth { flex: 1 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100vh - 0px); }
.auth__aside {
	background: var(--ink-900);
	color: #fff; padding: 56px 58px; display: flex; flex-direction: column; justify-content: space-between;
	position: relative; overflow: hidden;
}
/* Ambient light rather than a shape: the gradient has to fade out well inside the element,
   or the circle's own edge becomes visible and it reads as a blob. */
.auth__aside::after {
	content: ""; position: absolute; right: -320px; bottom: -400px; width: 900px; height: 900px;
	border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle at 50% 50%, rgba(0, 174, 104, .20) 0%, rgba(0, 174, 104, .09) 32%, rgba(0, 174, 104, 0) 62%);
}
.auth__aside-top { position: relative; z-index: 1; }
.auth__eyebrow {
	font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--green); font-weight: 700; margin-bottom: 18px;
}
.auth__aside h1 { color: #fff; font-size: 38px; line-height: 1.12; letter-spacing: -.025em; margin-bottom: 16px; }
.auth__aside p { color: rgba(255, 255, 255, .7); font-size: 16px; max-width: 30em; }
.auth__points { list-style: none; margin: 30px 0 0; padding: 0; position: relative; z-index: 1; }
.auth__points li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; color: rgba(255, 255, 255, .84); font-size: 15px; }
.auth__points svg { width: 19px; height: 19px; flex: none; color: var(--green); margin-top: 2px; }
.auth__aside-foot { position: relative; z-index: 1; color: rgba(255, 255, 255, .42); font-size: 12.5px; }

.auth__main { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: var(--card); }
.auth__form { width: 100%; max-width: 384px; }
.auth__form h2 { font-size: 24px; margin-bottom: 6px; }
.auth__form > p { color: var(--ink-500); margin-bottom: 26px; }
.auth__links { margin-top: 20px; display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.auth__divider { margin: 26px 0; border: 0; border-top: 1px solid var(--line); }
.auth__register { font-size: 14px; color: var(--ink-500); }

/* 4. Components ------------------------------------------------------------- */
.field { display: block; margin-bottom: 16px; }
.field > label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-800); margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="tel"], .field select, .field textarea {
	width: 100%; padding: 11px 13px; font: inherit; font-size: 15px; color: var(--ink-900);
	background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
	transition: border-color .12s, box-shadow .12s;
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 174, 104, .22);
}
.field__hint { font-size: 12.5px; color: var(--ink-400); margin-top: 5px; }
.field--check { display: flex; align-items: center; gap: 9px; }
.field--check input { width: 16px; height: 16px; accent-color: var(--green-600); }
.field--check label { margin: 0; font-weight: 500; color: var(--ink-700); }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: inherit; font-weight: 600; font-size: 15px; line-height: 1;
	padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid var(--ink-200);
	background: #fff; color: var(--ink-800); cursor: pointer; text-decoration: none !important;
	transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover { background: var(--bg); border-color: var(--ink-300); }
.btn:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-primary {
	background: var(--green); border-color: var(--green); color: #04261a;
	box-shadow: 0 1px 2px rgba(0, 112, 74, .25);
}
.btn-primary:hover { background: var(--green-600); border-color: var(--green-600); color: #04261a; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn svg { width: 17px; height: 17px; flex: none; }

.alert {
	display: flex; gap: 11px; align-items: flex-start;
	padding: 13px 15px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px;
	border: 1px solid transparent;
}
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.alert-danger { background: var(--red-50); border-color: #f3c9c5; color: #8f271f; }
.alert-warning { background: var(--amber-50); border-color: #f0dcb4; color: #7d4d00; }
.alert-info { background: var(--green-50); border-color: var(--green-100); color: #00573a; }

.captcha__row { display: flex; gap: 12px; align-items: stretch; }
.captcha__image { border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: #fff; flex: none; display: block; }
.captcha .captcha__input { flex: 1 1 auto; min-width: 0; height: 58px; font-size: 20px; letter-spacing: .18em; text-transform: uppercase; }
.captcha__reload {
	background: none; border: 0; color: var(--green-700); font: inherit; font-size: 12.5px;
	cursor: pointer; padding: 4px 0; text-decoration: underline;
}

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); margin-bottom: 20px; }
.card__header { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card__body { padding: 22px; }

.badge {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
	border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 1.4;
	background: var(--bg); color: var(--ink-500); border: 1px solid var(--line);
}
.badge-success { background: var(--green-50); color: #00573a; border-color: var(--green-100); }

/* 5. Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
	.auth { grid-template-columns: 1fr; }
	.auth__aside { padding: 38px 26px; }
	.auth__aside h1 { font-size: 29px; }
	.auth__points { margin-top: 22px; }
	.auth__main { padding: 36px 24px; }
}
@media (max-width: 1100px) { .user-chip__name { display: none; } }
@media (max-width: 760px) {
	.main-nav { display: none; }
	.site-header__inner { gap: 12px; }
	.brand__sub { display: none; }
	.switcher__button { max-width: 190px; }
	.user-chip__name { display: none; }
	.page { padding: 20px 16px 36px; }
	h1 { font-size: 25px; }
}

/* 6. Sign-in artwork --------------------------------------------------------
   One sentence cross-fading through the twelve languages, with the pills
   highlighting in step. Pure CSS: no image, no video, about 3 KB on the wire.
   A login page is opened every working day by people who just want their files -
   it should feel considered, not cost them a download. */
.hero-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.hero-art__glow { position: absolute; border-radius: 50%; filter: blur(10px); will-change: transform, opacity; }
.hero-art__glow--1 {
	width: 760px; height: 760px; right: -280px; bottom: -340px;
	background: radial-gradient(circle at 50% 50%, rgba(0, 174, 104, .22) 0%, rgba(0, 174, 104, .07) 38%, rgba(0, 174, 104, 0) 66%);
	animation: heroDrift1 26s ease-in-out infinite;
}
.hero-art__glow--2 {
	width: 520px; height: 520px; left: -200px; top: -160px;
	background: radial-gradient(circle at 50% 50%, rgba(33, 96, 196, .20) 0%, rgba(33, 96, 196, .06) 42%, rgba(33, 96, 196, 0) 68%);
	animation: heroDrift2 34s ease-in-out infinite;
}
.hero-art__glow--3 {
	width: 420px; height: 420px; right: 8%; top: 28%;
	background: radial-gradient(circle at 50% 50%, rgba(0, 174, 104, .14) 0%, rgba(0, 174, 104, 0) 62%);
	animation: heroDrift3 22s ease-in-out infinite;
}
@keyframes heroDrift1 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-40px, -30px, 0) scale(1.08); }
}
@keyframes heroDrift2 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
	50%      { transform: translate3d(50px, 40px, 0) scale(1.12); opacity: 1; }
}
@keyframes heroDrift3 {
	0%, 100% { transform: translate3d(0, 0, 0); opacity: .55; }
	50%      { transform: translate3d(-24px, 30px, 0); opacity: 1; }
}

/* the aside's own content has to sit above the artwork */
.auth__aside-top, .auth__aside-foot { position: relative; z-index: 2; }
.auth__aside .hero-art { z-index: 0; }
/* the old single glow is replaced by the artwork */
.auth__aside::after { content: none; }

/* Someone who has asked for less motion gets a still page: the first phrase and its
   pill, nothing moving. The artwork is decoration; it must never be a barrier. */
@media (prefers-reduced-motion: reduce) {
	.hero-art__glow { animation: none; }
}

@media (max-width: 900px) {
}

/* 7. Landing page -----------------------------------------------------------
   The hero IS the page: the headline and the sign-in form on top, and below them the open
   stage where a project plays out (section 9). The sign-in card is deliberately narrow - it
   is a form, not the subject. */

.lander { flex: 1 0 auto; display: flex; flex-direction: column; }

.hero-band {
	position: relative; background: var(--ink-900); color: #fff; overflow: hidden; padding: 22px 0 0;
	display: flex; flex-direction: column; flex: 1 0 auto; min-height: 100vh; min-height: max(100svh, 720px);
}
.hero-band__inner {
	position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px;
	display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: start;
}
.hero-band h1 { color: #fff; font-size: 44px; line-height: 1.07; letter-spacing: -.03em; margin-bottom: 14px; }
.hero-band__lead { color: rgba(255,255,255,.74); font-size: 17px; line-height: 1.5; max-width: 32em; margin-bottom: 18px; }
.eyebrow {
	display: inline-block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--green); font-weight: 700; margin-bottom: 10px;
}
.hero-band__points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 26px; max-width: 46em; }
.hero-band__points li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,.84); font-size: 14.5px; line-height: 1.42; }
.hero-band__points svg { width: 19px; height: 19px; flex: none; color: var(--green); margin-top: 2px; }

/* the sign-in card: compact, floating over the dark band */
.signin-card {
	background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
	padding: 22px 22px 20px; position: relative; z-index: 2;
}
.signin-card h2 { font-size: 19px; margin-bottom: 3px; }
.signin-card > p { color: var(--ink-500); font-size: 13.5px; margin-bottom: 15px; }
.signin-card .field { margin-bottom: 12px; }
.signin-card .field > label { font-size: 13px; margin-bottom: 5px; }
.signin-card .field input[type="email"], .signin-card .field input[type="password"], .signin-card .field input[type="text"] { padding: 9px 12px; font-size: 14.5px; }
.signin-card .field--check { margin-bottom: 14px; }
.signin-card .field--check label { font-size: 13px; }
.signin-card .btn-block { padding: 11px 18px; font-size: 14.5px; }
.signin-card .auth__links { margin-top: 14px; font-size: 13px; }

@media (max-width: 980px) {
	.hero-band__inner { grid-template-columns: 1fr; gap: 30px; }
	.hero-band h1 { font-size: 34px; }
	.hero-band__points { grid-template-columns: 1fr; gap: 11px; }
	.signin-card { max-width: 420px; }
}

/* 8. Media band -------------------------------------------------------------
   Takes a real photograph or a short muted loop. Until one exists it shows a
   designed placeholder: borrowed stock photography would look worse than none. */
.media-band { background: #0c121b; padding: 0; }
.media-band__inner { max-width: none; margin: 0; padding: 0; }
.media-frame { margin: 0; position: relative; }
.media-frame__media,
.media-frame__placeholder {
	display: block; width: 100%; height: clamp(300px, 42vw, 520px);
	object-fit: cover; background: #0c121b;
}
.media-frame__caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 30px 22px;
	color: rgba(255,255,255,.82); font-size: 13.5px; letter-spacing: .02em;
	background: linear-gradient(180deg, rgba(12,18,27,0) 0%, rgba(12,18,27,.82) 72%);
}
@media (max-width: 760px) {
	.media-frame__media, .media-frame__placeholder { height: 280px; }
}

/* 9. The 3D backdrop ---------------------------------------------------------
   A canvas behind the sign-in window; a camera rides a run of light through the stages
   of a project (scripts/eclient-scene.js). The veil keeps the headline and the form
   readable, and darkens most on the left where the text is. With no JavaScript the CSS
   glow under it is all that shows. */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.scene-veil {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	/* only the part of the hero that carries text: the stage area below stays undimmed */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 74%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 74%);
	background:
		linear-gradient(90deg, rgba(16,23,34,.84) 0%, rgba(16,23,34,.58) 42%, rgba(16,23,34,.12) 100%),
		linear-gradient(180deg, rgba(16,23,34,.42) 0%, rgba(16,23,34,0) 26%, rgba(16,23,34,0) 66%, rgba(16,23,34,.6) 100%);
}
@media (max-width: 980px) {
	.scene-veil { background: linear-gradient(180deg, rgba(16,23,34,.72) 0%, rgba(16,23,34,.5) 100%); }
}

/* the landing page's own top bar: the logo, and a way back to the company site */
.hero-top {
	position: relative; z-index: 3; width: 100%; max-width: var(--container); margin: 0 auto 22px; padding: 0 22px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hero-top__link { color: rgba(255,255,255,.62); font-size: 14px; text-decoration: none; }
.hero-top__link:hover { color: #fff; text-decoration: none; }

/* the lockup is larger on the landing page, where it is the only branding on screen */
.hero-top .brand__name { font-size: 23px; }
.hero-top .brand__sub { font-size: 11.5px; }
.hero-top .brand { gap: 13px; }

/* the open area under the sign-in window, where the scenes play ----------------- */
.scene-stage {
	position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto;
	flex: 1 1 auto; min-height: 290px; padding: 0 22px;
}
.stage-caption {
	position: absolute; left: 22px; bottom: 26px; width: min(350px, calc(100% - 44px));
	transition: opacity .26s ease, transform .26s ease;
}
.stage-caption.is-changing { opacity: 0; transform: translateY(8px); }
.stage-caption__step { font-size: 12px; letter-spacing: .15em; font-weight: 700; color: rgba(255,255,255,.4); }
.stage-caption__num { color: var(--green); }
.stage-caption__name { font-size: 31px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; color: #fff; margin: 5px 0 3px; }
.stage-caption__who { font-size: 12.5px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; color: var(--green); margin-bottom: 9px; }
.stage-caption__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.84); }
.stage-dots { position: absolute; right: 22px; bottom: 34px; display: flex; gap: 7px; }
.stage-dot { width: 24px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.17); transition: background .3s, width .3s; }
.stage-dot.is-done { background: rgba(92,242,168,.5); }
.stage-dot.is-on { background: var(--green); width: 40px; }
@media (max-width: 980px) {
	.scene-stage { min-height: 380px; }
	.stage-caption { bottom: 18px; }
	.stage-caption__name { font-size: 25px; }
	.stage-dots { right: 22px; bottom: auto; top: 8px; }
}

/* 7. Signed-in pages: dashboard ---------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin-bottom: 4px; }
.page-head__sub { margin: 0; color: var(--ink-500); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.searchbar {
	display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 8px 10px 8px 16px; margin-bottom: 20px; box-shadow: var(--shadow-xs);
}
.searchbar svg { color: var(--ink-400); flex: none; }
.searchbar[data-live] { position: relative; }
.rows > li:target { background: var(--green-50, #eef9f3); box-shadow: inset 3px 0 0 var(--green); scroll-margin-top: 90px; }
.searchbar.is-searching > svg { animation: ecl-pulse .9s ease-in-out infinite; }
@keyframes ecl-pulse { 50% { opacity: .35; } }
.livesearch { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: 0 16px 40px rgba(16, 23, 34, .14); overflow: hidden; }
.livesearch[hidden] { display: none; }
.livesearch .rows { margin: 0; }
.livesearch .rows > li { padding-top: 10px; padding-bottom: 10px; }
.livesearch .rows__empty { padding: 14px 16px; }
.livesearch__all { display: block; padding: 11px 16px; border-top: 1px solid var(--line); font-weight: 600; color: var(--green-700); text-decoration: none; background: var(--green-50, #eef9f3); }
.livesearch__all:hover { text-decoration: underline; }
.searchbar input { flex: 1 1 auto; border: 0; outline: 0; font: inherit; font-size: 15px; background: transparent; min-width: 0; color: var(--ink-800); }
.searchbar:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 174, 104, .18); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.tile {
	display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--card);
	border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); color: var(--ink-700);
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tile:hover { text-decoration: none; border-color: var(--green); transform: translateY(-1px); box-shadow: var(--shadow); }
.tile__n { font-size: 32px; font-weight: 700; color: var(--ink-900); line-height: 1.1; letter-spacing: -.01em; }
.tile__l { font-size: 13.5px; color: var(--ink-500); }
.tile--warn { background: var(--amber-50); border-color: #f0dcb4; }
.tile--warn .tile__n { color: var(--amber); }

.card h2 { font-size: 17px; margin: 0; }
.card__header a { font-size: 13.5px; white-space: nowrap; }
.card--attention { border-color: #f0dcb4; }
.card--attention .card__header { background: var(--amber-50); border-radius: var(--radius) var(--radius) 0 0; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 22px; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; }
.rows__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; flex: 1 1 auto; }
.rows__main:hover { text-decoration: none; }
.rows__main:hover strong { color: var(--green-700); }
.rows__main strong { color: var(--ink-900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows__main .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows__empty { color: var(--ink-400); }
.muted { color: var(--ink-500); font-size: 13.5px; }
.owed { margin: 0; padding: 12px 22px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 14px; }
.empty { text-align: center; padding: 38px 22px; }

.cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; }

.badge { flex: none; }
.badge-ok { background: var(--green-50); color: #00573a; border-color: var(--green-100); }
.badge-work { background: var(--blue-50); color: var(--blue); border-color: #cfdcf6; }
.badge-info { background: var(--blue-50); color: var(--blue); border-color: #cfdcf6; }
.badge-warn { background: var(--amber-50); color: #7d4d00; border-color: #f0dcb4; }
.badge-danger { background: var(--red-50); color: #8f271f; border-color: #f3c9c5; }
.badge-muted { background: var(--bg); color: var(--ink-500); }

@media (max-width: 900px) {
	.tiles { grid-template-columns: repeat(2, 1fr); }
	.cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.tiles { gap: 10px; }
	.tile { padding: 14px; }
	.tile__n { font-size: 26px; }
	.rows li { padding: 12px 16px; }
	.page-head__actions, .page-head__actions .btn { width: 100%; }
}

/* 8. Projects, project page, invoices ---------------------------------------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
	padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--card);
	color: var(--ink-700); font-size: 13.5px; font-weight: 600;
}
.chip:hover { text-decoration: none; border-color: var(--green); }
.chip.is-on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 24px; }
.crumb { margin: 0 0 8px; font-size: 14px; }
.project-title { font-size: 24px; overflow-wrap: anywhere; }
.amount { color: var(--ink-900); white-space: nowrap; font-variant-numeric: tabular-nums; }

.stepper { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 0; }
.stepper li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--ink-400); font-size: 13px; font-weight: 600; position: relative; }
.stepper li + li::before { content: ""; position: absolute; left: -50%; right: 50%; top: 14px; height: 2px; background: var(--ink-200); z-index: 0; }   /* the line runs dot to dot, behind the dots; labels sit BELOW it */
.stepper li.is-done + li::before, .stepper li.is-now::before { background: var(--green); }
.stepper__dot {
	position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
	background: var(--card); border: 2px solid var(--ink-200); font-size: 13px;
}
.stepper__dot svg { width: 15px; height: 15px; }
.stepper li.is-done { color: var(--ink-700); }
.stepper li.is-done .stepper__dot { background: var(--green); border-color: var(--green); color: #04261a; }
.stepper li.is-now { color: var(--ink-900); }
.stepper li.is-now .stepper__dot { border-color: var(--green); color: var(--green-700); box-shadow: 0 0 0 4px rgba(0, 174, 104, .2); }
.stepper.is-ended li.is-now .stepper__dot { border-color: var(--ink-300); color: var(--ink-500); box-shadow: none; }

.facts { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 10px 32px; }
.facts div { min-width: 0; }
.facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); font-weight: 600; }
.facts dd { margin: 2px 0 0; color: var(--ink-900); overflow-wrap: anywhere; }
.facts--stack { flex-direction: column; gap: 12px; margin: 0; }
@media (max-width: 520px) { .stepper li { font-size: 12px; } }
.card__foot { margin: 0; padding: 12px 22px; border-top: 1px solid var(--line); }
.hero-top__links { display: flex; gap: 22px; align-items: center; }
.card__tools { display: flex; align-items: center; gap: 12px; }

/* 9. New request ---------------------------------------------------------------- */
.svc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.svc-card {
	position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; cursor: pointer;
	border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); transition: border-color .15s, background .15s, box-shadow .15s;
}
.svc-card:hover { border-color: var(--ink-300); }
.svc-card input { position: absolute; opacity: 0; pointer-events: none; }
.svc-card:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.svc-card.is-on { border-color: var(--green); background: var(--green-50); box-shadow: 0 0 0 3px rgba(0, 174, 104, .16); }
.svc-card__icon { color: var(--ink-500); } .svc-card.is-on .svc-card__icon { color: var(--green-700); }
.svc-card__title { font-weight: 650; color: var(--ink-900); }
.svc-card__blurb { font-size: 13px; color: var(--ink-500); line-height: 1.4; }
.svc-card.is-on::after {
	content: ""; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314240a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

.qgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 26px; }
.q { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.q[hidden], .service[hidden], .langpick__item[hidden] { display: none; }
.q__label { font-size: 13.5px; font-weight: 600; color: var(--ink-800); }
.q__label em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--amber); background: var(--amber-50); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.q__help { font-size: 12.5px; color: var(--ink-500); }
.q input[type=search], .q input[type=text], .q input[type=number], .q input[type=date], .q select, .q textarea, .static {
	width: 100%; font: inherit; font-size: 15px; color: var(--ink-900); background: #fff; border: 1px solid var(--ink-200);
	border-radius: var(--radius-sm); padding: 10px 12px; box-sizing: border-box;
}
.q textarea { resize: vertical; min-height: 84px; }
.q input:focus, .q select:focus, .q textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 174, 104, .18); }
.static { background: var(--bg); color: var(--ink-700); overflow-wrap: anywhere; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-block; padding: 8px 14px; border: 1px solid var(--ink-200); border-radius: 999px; background: #fff; font-size: 14px; color: var(--ink-700); transition: all .12s; }
.choice:hover span { border-color: var(--ink-300); }
.choice input:checked + span { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.qgrid > .q:has(.choices), .qgrid > .q:has(.langpick), .qgrid > .q:has(textarea) { grid-column: 1 / -1; }

.langpick { border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: #fff; }
.langpick__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 0; }
.langpick__chips:empty { display: none; }
.chip--sel { background: var(--green-50); border-color: var(--green-100); color: #00573a; cursor: pointer; font: inherit; font-size: 13px; padding: 3px 10px; }
.chip--sel:hover { border-color: var(--red); color: var(--red); background: var(--red-50); }
.q .langpick__search { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.langpick__list { max-height: 180px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: 6px 8px; }
.langpick__item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 14px; cursor: pointer; border-radius: 6px; }
.langpick__item:hover { background: var(--bg); }

.drop {
	display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 18px; text-align: center; cursor: pointer;
	border: 2px dashed var(--ink-300); border-radius: var(--radius); color: var(--ink-700); background: var(--bg); transition: all .15s;
}
.drop svg { color: var(--green-700); }
.drop:hover, .drop.is-over, .drop:focus-visible { border-color: var(--green); background: var(--green-50); outline: 0; }
.uploads { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.upl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.upl__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.upl__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-900); font-weight: 600; }
.upl__bar { height: 4px; background: var(--ink-200); border-radius: 2px; overflow: hidden; }
.upl__bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }
.upl.is-done .upl__bar { display: none; }
.upl.is-bad { border-color: #f3c9c5; background: var(--red-50); } .upl.is-bad .upl__bar { display: none; }
.upl.is-bad .upl__meta { color: var(--red); }

.request__actions { display: flex; align-items: center; gap: 16px; margin: 4px 0 40px; }
.alert__list { margin: 6px 0 0; padding-left: 18px; }
.done { text-align: center; padding: 42px 22px; }
.done__tick { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center; background: var(--green); color: #04261a; margin-bottom: 10px; }
.done__tick svg { width: 26px; height: 26px; }
.done__list { list-style: none; padding: 0; margin: 14px 0 22px; color: var(--ink-700); }
@media (max-width: 900px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } .qgrid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .svc-cards { grid-template-columns: 1fr; } }

/* 10. Pages before sign-in: recover / reset password, register ------------------ */
.guest { max-width: 460px; margin: 28px auto 0; }
.guest .card__body { padding: 28px; }
.guest h1 { font-size: 24px; }
.guest .lead { color: var(--ink-500); margin: 0 0 20px; }
.guest .field { margin-bottom: 16px; }
.guest .hint { font-size: 13px; color: var(--ink-500); margin: 6px 0 0; }
.guest .back { display: block; margin-top: 18px; text-align: center; font-size: 14px; }
.alert-success { background: var(--green-50); border-color: var(--green-100); color: #00573a; }
.guest .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guest .vat { display: grid; grid-template-columns: 160px 1fr; gap: 14px; }
.guest .field select { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: #fff; box-sizing: border-box; }
.guest .field--check { display: flex; gap: 10px; align-items: flex-start; }
.guest .field--check input { margin-top: 4px; }
.guest .field--check label { font-weight: 400; margin: 0; }
@media (max-width: 520px) { .guest .two, .guest .vat { grid-template-columns: 1fr; } }

/* 11. Offers and confirming them ------------------------------------------------- */
.cstep { list-style: none; display: flex; gap: 22px; margin: 0 0 18px; padding: 0; color: var(--ink-400); font-weight: 600; }
.cstep li { display: flex; align-items: center; gap: 8px; }
.cstep span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink-200); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.cstep .is-now { color: var(--ink-900); } .cstep .is-now span { border-color: var(--green); color: var(--green-700); }
.cstep .is-done span { background: var(--green); border-color: var(--green); color: #04261a; }
.sigpad { position: relative; border: 2px dashed var(--ink-300); border-radius: var(--radius); background: #fff; max-width: 640px; }
.sigpad canvas { display: block; width: 100%; height: auto; aspect-ratio: 640 / 180; touch-action: none; cursor: crosshair; }
.sigpad .btn { position: absolute; right: 8px; top: 8px; }
.sigpad.is-signed { border-style: solid; border-color: var(--green); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--green-700); text-decoration: underline; cursor: pointer; }
.terms-box > summary { cursor: pointer; list-style: none; } .terms-box > summary::-webkit-details-marker { display: none; }
.terms-box .terms { font-size: 13px; line-height: 1.5; text-align: justify; }

/* graphic details */
.tile { position: relative; }
.tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; }
.tile__icon--blue { background: #e4eefc; color: #2160c4; }
.tile__icon--amber { background: #fdf0d5; color: #b26a00; }
.tile__icon--green { background: #dcf3e7; color: #00704a; }
.tile__icon--red { background: #fde3e1; color: #c0392b; }
.tile__icon--gray { background: #eceff3; color: #5b6676; }
.ftype { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; border-radius: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #fff; background: #8a94a3; flex: none; }
.ftype--red { background: #d9453b; } .ftype--blue { background: #2f6fd0; } .ftype--green { background: #2e9a5b; }
.ftype--orange { background: #e2812a; } .ftype--violet { background: #7a5bd0; } .ftype--teal { background: #1f98a8; }
.ftype-wrap { display: inline-flex; margin-right: 12px; }
.stepper li > span:first-child svg { width: 14px; height: 14px; }

/* list graphics */
.rows li { align-items: center; }
.rows__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; flex: none; margin-right: 14px; background: #eceff3; color: #5b6676; }
.rows__icon svg { width: 19px; height: 19px; }
.rows__icon--info, .rows__icon--work { background: #e4eefc; color: #2160c4; }
.rows__icon--warn { background: #fdf0d5; color: #b26a00; } .rows__icon--ok { background: #dcf3e7; color: #00704a; }
.rows__icon--danger { background: #fde3e1; color: #c0392b; }
.rows__side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.mini { display: inline-flex; gap: 3px; } .mini i { width: 18px; height: 4px; border-radius: 2px; background: #dfe4ea; }
.mini--1 i:nth-child(-n+1), .mini--2 i:nth-child(-n+2), .mini--3 i:nth-child(-n+3), .mini--4 i { background: #00ae68; }
.lchips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.lchip { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #eef2f6; color: #3d4756; }
.lchip--more { background: #e4eefc; color: #2160c4; } .lchip__arrow { color: #9aa3ae; font-size: 12px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0; color: #6b7787; }
.empty-state__icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: #eef2f6; color: #8a94a3; align-items: center; justify-content: center; }
.empty-state__icon svg { width: 26px; height: 26px; }
/* landing */
.hero-band__points li strong { display: block; color: #fff; font-size: 14.5px; margin-bottom: 1px; }
.hero-band__points li > span { font-size: 13.5px; }
.hero-trust { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.hero-trust span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: rgba(255,255,255,.82); }
@media (max-width: 520px) { .rows__side .mini { display: none; } }

/* account */
a.user-chip { text-decoration: none; } a.user-chip:hover .user-chip__name { text-decoration: underline; }
.field input:disabled { background: #f1f4f7; color: #6b7787; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.company { display: flex; gap: 22px; align-items: flex-start; }
.company__logo { flex: none; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, #00ae68, #00704a); color: #fff; font-weight: 700; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.company__main h2 { margin: 0 0 12px; }
.company__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 28px; margin: 0 0 12px; }
.company__facts dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); } .company__facts dd { margin: 2px 0 0; }
.cols__narrow > .card + .card { margin-top: 20px; }

/* rename */
.rename { margin-top: 4px; } .rename__open { display: inline-block; cursor: pointer; font-size: 13px; color: var(--ink-400); list-style: none; }
.rename__open::-webkit-details-marker { display: none; } .rename__open:hover { color: var(--green-dark, #00704a); text-decoration: underline; }
.rename__form { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.rename__form input[type="text"] { flex: 1 1 260px; max-width: 460px; padding: 8px 11px; font: inherit; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); }
.rename__form--done { justify-content: center; margin: 14px 0; }

/* language switch */
.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 700; }
.lang-switch__opt { padding: 4px 9px; color: rgba(255,255,255,.7); text-decoration: none; }
.lang-switch__opt.is-on { background: rgba(255,255,255,.18); color: #fff; }
.hero-top__links .lang-switch { margin-left: 4px; }
/* header stays on one line in longer languages */
.brand__sub, .user-chip__name, .main-nav a { white-space: nowrap; }
@media (max-width: 1100px) { .brand__sub { display: none; } }

/* ---- the anonymous project page (downloadFiles.php), 8 Oct 2026: the sign-in backdrop held at the project's stage */
.lnk-main { display: block; flex: 1 0 auto; background: var(--bg); }
.lnk-hero {
	position: relative; overflow: hidden; color: #fff; isolation: isolate;
	background: radial-gradient(120% 90% at 78% 50%, #0d3a2b 0%, #0b2a22 34%, var(--ink-900) 72%);
	min-height: 560px; display: flex; flex-direction: column; padding: 56px 0 0;
}
.lnk-hero::after {   /* the edge where the dark band meets the page: a soft emerald horizon */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3;
	background: linear-gradient(90deg, transparent, rgba(92,242,168,.55) 30%, rgba(0,174,104,.55) 70%, transparent);
}
.lnk-hero .scene { z-index: 0; }
.lnk-hero__veil {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(16,23,34,.9) 0%, rgba(16,23,34,.66) 34%, rgba(16,23,34,.08) 62%, rgba(16,23,34,0) 100%),
		linear-gradient(180deg, rgba(16,23,34,.35) 0%, rgba(16,23,34,0) 30%, rgba(16,23,34,0) 70%, rgba(16,23,34,.75) 100%);
}
.lnk-hero__inner {
	position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px;
	display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex: 1 0 auto;
}
.lnk-hero__text { max-width: 560px; padding-bottom: 34px; }
.lnk-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pill);
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.86); font-size: 13.5px; font-weight: 600; backdrop-filter: blur(6px); }
.lnk-kicker svg { width: 15px; height: 15px; color: var(--mint); }
.lnk-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(92,242,168,.6); animation: lnkPulse 2.4s ease-out infinite; }
@keyframes lnkPulse { 0% { box-shadow: 0 0 0 0 rgba(92,242,168,.55); } 70% { box-shadow: 0 0 0 10px rgba(92,242,168,0); } 100% { box-shadow: 0 0 0 0 rgba(92,242,168,0); } }
.lnk-hero h1 { color: #fff; font-size: 50px; line-height: 1.12; letter-spacing: -.035em; margin: 0 0 10px; padding: 0 0 .12em; font-weight: 700;   /* the padding keeps g, y, p inside the gradient clip */
	background: linear-gradient(100deg, #ffffff 0%, #ffffff 55%, #b8f8d6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lnk-lead { font-size: 17.5px; line-height: 1.55; color: rgba(255,255,255,.74); margin: 0 0 26px; max-width: 480px; }
.lnk-project { display: grid; gap: 8px; padding: 14px 18px; margin: 0 0 24px; border-left: 3px solid var(--mint); background: linear-gradient(90deg, rgba(92,242,168,.10), rgba(92,242,168,0)); border-radius: 0 10px 10px 0; }
.lnk-project__line { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.lnk-project__label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.lnk-project__no { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); }
.lnk-project__titlebox { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.lnk-project__title { font-size: 19px; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.lnk-project__btn { background: none; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: rgba(255,255,255,.75); font: inherit; font-size: 12.5px; padding: 3px 12px; cursor: pointer; }
.lnk-project__btn:hover, .lnk-project__btn:focus-visible { border-color: var(--mint); color: var(--mint); }
.lnk-project__form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.lnk-project__form[hidden], .lnk-project__titlebox[hidden] { display: none; }
.lnk-project__form input[type="text"] { flex: 1 1 220px; min-width: 0; padding: 7px 11px; font: inherit; font-size: 17px; font-weight: 600; color: #fff;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-sm); }
.lnk-project__form input[type="text"]:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(92,242,168,.2); }
@media (max-width: 520px) { .lnk-project__line { grid-template-columns: 1fr; gap: 2px; } }
.lnk-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.lnk-btn-glow { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg, var(--mint), var(--green)); color: #04261a; border: 0; font-weight: 700;
	box-shadow: 0 10px 30px -8px rgba(92,242,168,.55), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s ease, box-shadow .15s ease; }
.lnk-btn-glow:hover { color: #04261a; transform: translateY(-1px); box-shadow: 0 14px 34px -8px rgba(92,242,168,.7), inset 0 1px 0 rgba(255,255,255,.35); text-decoration: none; }
.lnk-btn-glow svg, .lnk-btn-ghost svg { width: 17px; height: 17px; }
.lnk-btn-ghost { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.lnk-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.lnk-stage { display: grid; justify-items: end; text-align: right; gap: 2px; align-self: flex-start; padding-top: 4px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.lnk-stage__num { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--mint); }
.lnk-stage__num small { font-size: 13px; color: rgba(255,255,255,.45); }
.lnk-stage__name { font-size: 28px; letter-spacing: -.02em; }
.lnk-stage__who { font-size: 13.5px; color: rgba(255,255,255,.62); }
.lnk-hero__foot {
	position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 18px 22px 58px;
	display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.08);
}
.lnk-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; flex: 1 1 520px; max-width: 640px; }
.lnk-track li { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; color: rgba(255,255,255,.42); font-size: 13px; font-weight: 600; white-space: nowrap; }
/* each step is dot + label + a line that fills the space up to the next dot, so every gap is drawn the same way */
.lnk-track li:last-child { flex: 0 0 auto; }
.lnk-track li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 2px; min-width: 18px; margin: 0 4px 0 2px; border-radius: 2px; background: rgba(255,255,255,.14); }
.lnk-track li.is-done:not(:last-child)::after { background: linear-gradient(90deg, var(--green), var(--mint)); box-shadow: 0 0 10px rgba(92,242,168,.5); }
.lnk-track__dot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
	border: 1.5px solid rgba(255,255,255,.2); color: rgba(255,255,255,.55); background: rgba(16,23,34,.5); }
.lnk-track__dot svg { width: 14px; height: 14px; }
.lnk-track li.is-done { color: rgba(255,255,255,.85); }
.lnk-track li.is-done .lnk-track__dot { background: var(--green); border-color: var(--green); color: #04261a; }
.lnk-track li.is-now { color: #fff; }
.lnk-track li.is-now .lnk-track__dot { border-color: var(--mint); color: var(--mint); box-shadow: 0 0 0 5px rgba(92,242,168,.16), 0 0 22px rgba(92,242,168,.45); }
.lnk-track.is-ended li.is-now .lnk-track__dot { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.7); box-shadow: none; }
.lnk-valid { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.6); }
.lnk-valid svg { width: 15px; height: 15px; color: var(--mint); }
.lnk-valid strong { color: #fff; }

.lnk { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px 56px; position: relative; z-index: 4; }
.lnk-alert { margin: 22px 0 0; }
.lnk-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: -34px; }
.lnk-alert + .lnk-grid, .lnk-alert + .lnk-alert + .lnk-grid { margin-top: 22px; }
.lnk-grid__main, .lnk-grid__side { display: grid; gap: 22px; min-width: 0; }
.lnk-panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 22px 24px; min-width: 0; }
.lnk-panel--compact { padding: 18px 20px; }
.lnk-panel__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lnk-panel__head h2 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.lnk-panel__head p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-500); }
.lnk-panel--compact .lnk-panel__head { margin-bottom: 12px; }
.lnk-panel--compact .lnk-panel__head h2 { font-size: 16px; }
.lnk-panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex: none;
	background: linear-gradient(140deg, var(--green-50), #dcf6e9); color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-100); }
.lnk-panel__icon svg { width: 19px; height: 19px; }
.lnk-panel--compact .lnk-panel__icon { width: 34px; height: 34px; border-radius: 10px; }
.lnk-panel--compact .lnk-panel__icon svg { width: 17px; height: 17px; }
.lnk-note { margin: 0 0 10px; font-size: 14px; color: var(--ink-500); line-height: 1.5; }
.lnk-note:last-child { margin-bottom: 0; }

.lnk-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lnk-file { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #fff, #fbfcfc);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; min-width: 0; }
.lnk-file:hover { border-color: var(--green-100); box-shadow: 0 8px 22px -12px rgba(0,112,74,.35); transform: translateY(-1px); }
.lnk-file__pick { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.lnk-file__pick input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.lnk-file__pick span { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ink-300); background: #fff; display: inline-block; transition: all .12s ease; }
.lnk-file__pick input:checked + span { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304261a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--green); }
.lnk-file__pick input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,174,104,.3); }
.lnk-file__type .ftype { min-width: 46px; height: 46px; border-radius: 12px; font-size: 11px; box-shadow: 0 6px 14px -8px rgba(16,23,34,.5); }
.lnk-file__main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.lnk-file__main strong { font-size: 15px; overflow-wrap: anywhere; }
.lnk-file__main span { font-size: 13px; color: var(--ink-500); }
.lnk-file__get { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; flex: none;
	background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); transition: all .15s ease; }
.lnk-file__get:hover { background: var(--green); color: #04261a; border-color: var(--green); }
.lnk-file__get svg { width: 19px; height: 19px; }
.lnk-files-bar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lnk-files-bar .btn { display: inline-flex; align-items: center; gap: 8px; }
.lnk-files-bar svg { width: 16px; height: 16px; }
.lnk-waiting { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 14px; background: linear-gradient(120deg, #0f1c25, #0d3a2b); color: rgba(255,255,255,.8); }
.lnk-waiting p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.lnk-waiting__orb { display: inline-flex; flex: none; width: 66px; height: 66px; border-radius: 50%; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(92,242,168,.18), rgba(92,242,168,0) 70%); }
.lnk-waiting__orb .brand__mark { animation: lnkSpin 24s linear infinite; }
@keyframes lnkSpin { to { transform: rotate(360deg); } }

.lnk-receipt__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.lnk-choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--ink-800);
	transition: all .15s ease; }
.lnk-choice span { display: grid; gap: 1px; }
.lnk-choice small { color: var(--ink-500); font-size: 12.5px; }
.lnk-choice svg { flex: none; padding: 8px; width: 38px; height: 38px; border-radius: 11px; box-sizing: border-box; }
.lnk-choice--ok svg { background: var(--green-50); color: var(--green-700); }
.lnk-choice--flag svg { background: var(--amber-50); color: var(--amber); }
.lnk-choice--ok:hover { border-color: var(--green); box-shadow: 0 8px 22px -12px rgba(0,112,74,.45); }
.lnk-choice--flag:hover { border-color: #f0dcb4; box-shadow: 0 8px 22px -12px rgba(181,111,0,.4); }
.lnk-receipt .field { margin-bottom: 0; }

.lnk-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.lnk-offer__num { font-weight: 700; font-size: 15px; }
.lnk-offer__date { font-size: 13px; color: var(--ink-500); }
.lnk-rowlink { display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin: 0 -8px; border-radius: 10px; color: var(--ink-800); font-size: 14px; font-weight: 600; text-decoration: none; min-width: 0; }
.lnk-rowlink > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lnk-rowlink svg { flex: none; color: var(--green-700); }
.lnk-rowlink:hover { background: var(--green-50); color: var(--ink-900); text-decoration: none; }
.lnk-rowlink:hover svg:last-child { transform: translateX(2px); }
.lnk-rowlink__main { display: grid; gap: 1px; }
.lnk-rowlink__main small { font-weight: 500; color: var(--ink-500); font-size: 12.5px; }
.lnk-po { display: flex; gap: 8px; }
.lnk-po input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--ink-200); border-radius: 10px; font: inherit; }
.lnk-po input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,174,104,.18); }

.lnk-person { background: radial-gradient(120% 120% at 100% 0%, #0d3a2b 0%, var(--ink-900) 70%); border-color: transparent; color: #fff; }
.lnk-person__label { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.lnk-person__row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.lnk-person__row div { display: grid; gap: 1px; }
.lnk-person__row strong { font-size: 16px; }
.lnk-person__row span { font-size: 13px; color: rgba(255,255,255,.6); }
.lnk-person__face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px rgba(92,242,168,.35), 0 0 24px rgba(92,242,168,.25); }
.lnk-person__face--initials { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--mint), var(--green)); color: #04261a; font-weight: 800; font-size: 20px; }
.lnk-person .lnk-rowlink { color: rgba(255,255,255,.88); }
.lnk-person .lnk-rowlink svg { color: var(--mint); }
.lnk-person .lnk-rowlink:hover { background: rgba(255,255,255,.07); color: #fff; }

.lnk-cta { display: flex; align-items: center; gap: 22px; margin-top: 28px; padding: 26px 30px; border-radius: 20px; color: #fff; overflow: hidden; position: relative;
	background: radial-gradient(90% 160% at 0% 50%, #0d3a2b 0%, var(--ink-900) 60%); box-shadow: var(--shadow-lg); }
.lnk-cta::before { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(92,242,168,.16); box-shadow: 0 0 0 40px rgba(92,242,168,.03), 0 0 0 80px rgba(92,242,168,.02); }
.lnk-cta__mark { flex: none; display: inline-flex; filter: drop-shadow(0 0 16px rgba(92,242,168,.35)); }
.lnk-cta__text { flex: 1 1 auto; }
.lnk-cta__text strong { font-size: 19px; }
.lnk-cta__text p { margin: 4px 0 0; color: rgba(255,255,255,.66); font-size: 14.5px; }
.lnk-cta .btn { position: relative; flex: none; }

@media (max-width: 980px) {
	.lnk-grid { grid-template-columns: 1fr; }
	.lnk-stage { display: none; }
	.lnk-hero h1 { font-size: 40px; }
}
@media (max-width: 760px) {
	.lnk-hero { min-height: 0; padding-top: 170px; }
	.lnk-hero__veil { background: linear-gradient(180deg, rgba(16,23,34,0) 0%, rgba(16,23,34,.55) 26%, rgba(16,23,34,.92) 52%, rgba(16,23,34,.96) 100%); }
	.lnk-hero h1 { font-size: 33px; }
	.lnk-lead { font-size: 16px; }
	.lnk-track__label { display: none; }
	.lnk-track li.is-now .lnk-track__label { display: inline; }
	.lnk-track { flex-basis: 100%; }
	.lnk-receipt__choices { grid-template-columns: 1fr; }
	.lnk-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
	.lnk-panel { padding: 18px; }
	.lnk-grid { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .lnk-pulse, .lnk-waiting__orb .brand__mark { animation: none; } }
.lnk-hero--gone { min-height: calc(100vh - var(--header-h) - 64px); min-height: calc(100svh - var(--header-h) - 64px); }
.lnk-hero--gone .lnk-hero__inner { align-items: center; }
/* text boxes on these pages grow downwards only, never past their panel */
.lnk textarea { width: 100%; max-width: 100%; box-sizing: border-box; resize: vertical; }

/* ---- the satisfaction survey (feedbackForm.php), 8 Oct 2026 */
.svy-hero { min-height: 430px; }
.svy-groups { justify-content: flex-start; gap: 26px; }
.svy-groups__item { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.7); }
.svy-groups__item b { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: rgba(92,242,168,.12); color: var(--mint); font-size: 12.5px; letter-spacing: .04em; border: 1px solid rgba(92,242,168,.25); }
.svy { max-width: 880px; }
.svy-form { display: grid; gap: 22px; margin-top: -34px; }
.lnk-alert + .svy-form, .lnk-alert + .lnk-alert + .svy-form { margin-top: 22px; }
.svy-roman { font-weight: 800; font-size: 14px; letter-spacing: .04em; }
.svy-q { border: 0; margin: 0; padding: 18px 0 20px; border-top: 1px solid var(--line); min-width: 0; }
.svy-q:first-of-type { border-top: 0; padding-top: 4px; }
.svy-q legend { display: flex; gap: 12px; align-items: baseline; padding: 0; margin: 0 0 14px; font-size: 15.5px; font-weight: 600; color: var(--ink-900); line-height: 1.45; }
.svy-q__num { flex: none; font-size: 12px; font-weight: 800; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); border-radius: 7px; padding: 2px 7px; transition: all .2s ease; }
.svy-q.is-answered .svy-q__num { background: var(--green); border-color: var(--green); color: #04261a; }
.svy-choices { display: grid; gap: 8px; }
.svy-choice { position: relative; display: block; cursor: pointer; }
.svy-choice input { position: absolute; opacity: 0; pointer-events: none; }
.svy-choice span { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; color: var(--ink-700); background: #fff; transition: all .14s ease; }
.svy-choice span::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-300); background: #fff; transition: all .14s ease; }
.svy-choice:hover span { border-color: var(--green-100); background: var(--green-50); }
.svy-choice input:checked + span { border-color: var(--green); background: var(--green-50); color: var(--ink-900); font-weight: 600; box-shadow: 0 6px 18px -12px rgba(0,112,74,.5); }
.svy-choice input:checked + span::before { border: 5px solid var(--green); }
.svy-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,174,104,.25); }
.svy-grid { display: grid; gap: 8px; }
.svy-grid__head, .svy-grid__row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(var(--cols), minmax(0, 1fr)); gap: 6px; align-items: center; }
.svy-grid__head span { font-size: 11.5px; font-weight: 700; color: var(--ink-500); text-align: center; line-height: 1.25; text-transform: uppercase; letter-spacing: .03em; }
.svy-grid__row { padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.svy-grid__label { font-size: 14px; color: var(--ink-700); }
.svy-cell { position: relative; display: flex; justify-content: center; cursor: pointer; }
.svy-cell input { position: absolute; opacity: 0; pointer-events: none; }
.svy-cell span { display: block; width: 100%; height: 34px; border-radius: 9px; background: var(--bg); border: 1px solid transparent; font-size: 0; transition: all .14s ease; position: relative; }
.svy-cell span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid var(--ink-300); background: #fff; }
.svy-cell:hover span { background: var(--green-50); }
.svy-cell input:checked + span { background: var(--green); border-color: var(--green); }
.svy-cell input:checked + span::after { border-color: #04261a; background: #04261a; box-shadow: inset 0 0 0 3px var(--green); }
.svy-cell input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,174,104,.25); }
.svy-remark { margin-top: 10px; }
.svy-remark summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--green-700); list-style: none; }
.svy-remark summary::-webkit-details-marker { display: none; }
.svy-remark summary::before { content: "+"; font-weight: 800; }
.svy-remark[open] summary::before { content: "\2013"; }
.svy-remark textarea { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--ink-200); border-radius: 10px; font: inherit; font-size: 14px; }
.svy-remark textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,174,104,.18); }
.svy-form.is-done .svy-choice, .svy-form.is-done .svy-cell { cursor: default; }
.svy-form.is-done .svy-choice:hover span { border-color: var(--line); background: #fff; }
.svy-form.is-done .svy-choice input:checked + span { border-color: var(--green); background: var(--green-50); }
.svy-bar { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 20px; border-radius: 16px; color: #fff;
	background: rgba(16,23,34,.94); backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); }
.svy-bar__progress { flex: 1 1 auto; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.svy-bar__fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--green), var(--mint)); box-shadow: 0 0 12px rgba(92,242,168,.6); transition: width .3s ease; }
.svy-bar__count { flex: none; font-size: 13px; color: rgba(255,255,255,.7); }
.svy-bar__count b { color: #fff; }
.svy-bar .btn { flex: none; }
@media (max-width: 760px) {
	.svy-form { margin-top: 22px; }
	.svy-groups { gap: 12px; }
	.svy-grid__head { display: none; }
	.svy-grid__row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); padding: 10px; }
	.svy-grid__label { grid-column: 1 / -1; margin-bottom: 4px; }
	.svy-cell span { font-size: 11px; height: auto; min-height: 38px; padding: 22px 4px 6px; line-height: 1.2; color: var(--ink-500); text-align: center; }
	.svy-cell span::after { top: 6px; margin-top: 0; }
	.svy-cell input:checked + span { color: #04261a; font-weight: 700; }
	.svy-bar { flex-wrap: wrap; }
	.svy-bar__progress { flex-basis: 100%; order: 3; }
}

/* ---- phones (8 Oct 2026 check) ------------------------------------------------------------------------------------
   Grid columns never grow wider than the screen (a long unbroken name used to push every page to ~510 px and the
   phone zoomed the whole page out); the header keeps only the logo, EN/RO and the company; the menu moves to a tab bar. */
.cols > *, .tiles > *, .lnk-grid > * { min-width: 0; }
.tabbar { display: none; }
.account-logout { display: none; }
.brand__name { white-space: nowrap; }
@media (max-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
	.header-actions > .user-chip, .header-actions > a.btn[href$="logout.php"] { display: none; }
	.account-logout { display: inline-flex; }
	.tabbar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
		background: rgba(16,23,34,.96); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.08);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
	}
	.tabbar a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; color: rgba(255,255,255,.6); font-size: 11px; font-weight: 600; text-decoration: none; border-radius: 10px; }
	.tabbar a svg { width: 22px; height: 22px; }
	.tabbar a.is-active { color: var(--mint); }
	.tabbar a:hover { color: #fff; text-decoration: none; }
	body:has(.tabbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	body:has(.tabbar) .svy-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
	.site-header__inner { padding: 0 14px; gap: 10px; }
	.site-header .brand__name { font-size: 16px; }
	.switcher__button { max-width: 150px; padding: 6px 10px; font-size: 13px; }
	.switcher__role { display: none; }
	.hero-top { padding: 0 16px; }
	.hero-top .brand__name { font-size: 19px; }
	.hero-top__links { gap: 12px; }
	.hero-top__links a[href*="serious.ro"]:not([href^="mailto"]) { display: none; }
}
@media (max-width: 340px) { .site-header .brand__name { display: none; } }
@media (max-width: 520px) {
	/* list rows: the name gets the full width (two lines), buttons and badges go underneath, aligned with the text */
	.rows li { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; justify-content: flex-start; }
	.rows li > .rows__main { flex: 1 1 calc(100% - 64px); }
	.rows li > .ftype-wrap, .rows li > .rows__icon { margin-right: 12px; }
	.rows li > .ftype-wrap ~ .btn:first-of-type, .rows li > .rows__icon ~ .badge, .rows li > .rows__icon ~ .rows__side { margin-left: 62px; }
	.rows li > .ftype-wrap ~ .btn { flex: 0 0 auto; }
	.rows__main strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
	.rows li > .rows__side { flex-direction: row; align-items: center; }
	.card__header { flex-wrap: wrap; }
}

/* ---- the invitation (invitation.php), 12 Oct 2026 */
.inv-hero .lnk-hero__text { max-width: 600px; }
.inv-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.inv-points li { display: flex; gap: 13px; align-items: flex-start; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.45; }
.inv-points li svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(92,242,168,.1); color: var(--mint); border: 1px solid rgba(92,242,168,.22); box-sizing: border-box; }
.inv-points strong { display: block; color: #fff; font-size: 15px; }
.inv-form { margin: 0; }
.inv-cta { font-size: 16px; padding: 14px 26px; }
.inv-cta svg { width: 19px; height: 19px; }
.inv-note { display: block; margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.62); }
.inv-note svg { color: var(--mint); vertical-align: -4px; margin-right: 7px; }
.inv-note strong, .inv-addr { color: #fff; }
.inv-note--light { margin: 0 0 24px; }
.inv-alert { margin: 0 0 16px; }
@media (min-width: 761px) and (max-width: 1180px) {
	.inv-hero .lnk-hero__veil { background: linear-gradient(90deg, rgba(16,23,34,.95) 0%, rgba(16,23,34,.88) 48%, rgba(16,23,34,.25) 78%, rgba(16,23,34,0) 100%); }
}
@media (max-width: 760px) { .inv-hero { padding-top: 250px; } }   /* room for the connect scene above the text */

/* ---- the account pages on the "connect" backdrop (create account, forgotten / new password, confirm e-mail), 12 Oct 2026 */
.page.guest-scene { position: relative; isolation: isolate; overflow: hidden; max-width: none; width: 100%; padding: 56px 22px 72px;
	background: radial-gradient(120% 90% at 78% 50%, #0d3a2b 0%, #0b2a22 34%, var(--ink-900) 72%); min-height: calc(100vh - var(--header-h) - 64px); }
.guest-scene .scene { z-index: 0; height: calc(100vh - var(--header-h)); max-height: 100%; }   /* a tall form: the scene fills the first screen */
.guest-scene .lnk-hero__veil { z-index: 1; height: calc(100vh - var(--header-h)); max-height: 100%; }
.guest-scene .guest { position: relative; z-index: 2; margin: 0 0 0 max(0px, calc((100% - var(--container)) / 2)); }
.guest-scene .guest > .card, .guest-scene .guest .card { box-shadow: 0 30px 70px -24px rgba(0,0,0,.6); border-color: transparent; }
.guest-scene .guest > p, .guest-scene .guest > .back, .guest-scene .guest > a { color: rgba(255,255,255,.75); }
@media (max-width: 760px) { .page.guest-scene { padding-top: 250px; } .guest-scene .guest { margin: 0 auto; } }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: #a92c23; border-color: #a92c23; color: #fff; }
.acc-close { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.acc-close summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--red); }
.acc-close form { margin-top: 12px; }

/* ---- footer (12 Oct 2026): copyright + the legal pages; on the dark pages it continues the dark background */
.site-footer__inner { justify-content: space-between; }
.site-footer__links { display: inline-flex; gap: 18px; }
body:has(.lnk-main) .site-footer, body:has(.guest-scene) .site-footer { background: var(--ink-900); border-top: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.45); }
body:has(.lnk-main) .site-footer a, body:has(.guest-scene) .site-footer a { color: rgba(255,255,255,.7); }
body:has(.lnk-main) .site-footer a:hover, body:has(.guest-scene) .site-footer a:hover { color: #fff; }

/* ---- the legal pages (terms.php, privacy.php) */
.legal-wrap { max-width: 860px; margin: 0 auto; }
.guest:has(.legal-wrap) { max-width: 860px; }
.legal .card__body { padding: 36px 40px; }
.legal__kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-700); }
.legal h1 { font-size: 28px; margin: 0 0 12px; }
.legal__lead { color: var(--ink-500); font-size: 16px; line-height: 1.6; margin: 0 0 22px; }
.legal h2 { font-size: 18px; margin: 28px 0 10px; }
.legal p, .legal li { line-height: 1.65; }
.legal__table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14px; }
.legal__table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); border-bottom: 2px solid var(--line); padding: 8px 10px; }
.legal__table td { border-bottom: 1px solid var(--line); padding: 9px 10px; vertical-align: top; }
.legal__date { margin-top: 26px; font-size: 13px; color: var(--ink-400); }
.legal__terms { font-size: 14.5px; line-height: 1.65; text-align: justify; }
@media (max-width: 640px) { .legal .card__body { padding: 22px 18px; } .legal__table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; } .legal__table tr:first-child { display: none; } .legal__table td { border: 0; padding: 2px 0; } .legal__table tr { border-bottom: 1px solid var(--line); padding: 8px 0; } .legal__table td:first-child { font-weight: 600; } .legal__terms { text-align: left; } }

/* ---- the confirmation panel on the offer page (13 Oct 2026, NM): floating, non-modal, see-through - the offer stays readable
   and scrollable under it; minimised it becomes a pill. Wide screens keep room for it, so the prices are never covered. */
.cpanel { position: fixed; right: 24px; top: 92px; z-index: 40; width: 372px; max-height: calc(100vh - 116px); overflow: auto;
	background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid rgba(0, 174, 104, .35); border-radius: 16px; box-shadow: 0 22px 60px rgba(4, 38, 26, .22), 0 2px 6px rgba(4, 38, 26, .08); }
.cpanel.is-min { display: none; }
.cpanel__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 12px;
	background: linear-gradient(135deg, rgba(0, 174, 104, .95), rgba(0, 112, 74, .95)); color: #fff; border-radius: 15px 15px 0 0; }
.cpanel__kicker { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d3f2e2; }
.cpanel__sum { margin: 2px 0 0; font-size: 13px; color: #eef9f3; } .cpanel__sum strong { font-size: 20px; color: #fff; }
.cpanel__min { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.cpanel__min:hover { background: rgba(255, 255, 255, .25); }
.cpanel__body { padding: 14px 16px 16px; }
.cpanel__late { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 16px; background: #fff4e0; color: #8a5200; font-size: 13px; border-bottom: 1px solid #f3dfb8; }
.cpanel__late svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.cpanel__body .cstep { gap: 16px; font-size: 13.5px; margin-bottom: 12px; }
.cpanel__body .field { margin-bottom: 12px; }
.cpanel__body textarea { width: 100%; }
.cpanel__code { font-size: 22px; letter-spacing: 6px; text-align: center; max-width: 200px; }
.cpanel__resend { margin: -6px 0 12px; font-size: 13px; }
.cpanel__accept { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 13.5px; } .cpanel__accept input { margin-top: 3px; flex: none; }
.cpanel__accept label { font-weight: 400; }
.cpanel__signed { margin: 8px 0 0; font-size: 12.5px; text-align: center; }
.cpanel__note { margin: 12px 0 0; font-size: 12px; color: var(--ink-400); }
.cpanel .sigpad { max-width: none; }
.cpanel__done { text-align: center; padding: 6px 4px 2px; }
.cpanel__done > svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--green); color: #04261a; }
.cpanel__done h2 { margin: 10px 0 6px; font-size: 19px; } .cpanel__done p { margin: 0 0 10px; }
.cpanel [data-cpanel-error] { margin-bottom: 12px; } .cpanel [data-cpanel-error][hidden] { display: none; }
.cpanel-pill { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px;
	background: var(--green); color: #04261a; font: inherit; font-weight: 700; box-shadow: 0 12px 30px rgba(4, 38, 26, .3); cursor: pointer; }
.cpanel-pill[hidden] { display: none; }
.cpanel-pill svg { width: 18px; height: 18px; }
@media (min-width: 1240px) { .page:has(> .cpanel:not(.is-min)) { padding-right: 420px; max-width: calc(var(--container) + 420px); } }
@media (max-width: 760px) {
	.cpanel { left: 8px; right: 8px; top: auto; bottom: 74px; width: auto; max-height: 72vh; }
	.cpanel-pill { left: 12px; right: 12px; bottom: 80px; justify-content: center; }
}