/* SEWMA public site — variant B «Svět» (port of www/redesign/b/style.css).
   Needs the five ds/tokens/*.css (fonts, colors, typography, spacing, base; linked directly in the layouts with
   ?v=<filemtime>, ds/styles.css is not linked) and components.css (.sewma-btn, .sewma-section-label,
   .sewma-tag, .sewma-field, .sewma-input, .sewma-select) first. Every theme color is a system token
   (ds/tokens/colors.css, the B → system table is in .autopilot interfaces / www/redesign/DESIGN.md);
   literals left are B's own fixed lights, masks and shadows that do not change with the theme.
   B spacing → system: 4→1, 8→2, 12→3, 16→4, 24→6, 32→8, 48→12, 64→16, 96→24, 128→32, 160→40;
   radius sm/md/lg/pill → md/lg/xl/full; shadow-1/2/3 → sm/md/lg; --fs-* → --text-*. */

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: inherit; letter-spacing: normal; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
html { scrollbar-color: var(--color-line-strong) var(--color-bg); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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; }
/* the solid button blue: white on --color-accent is 2.8:1 in the dark theme (accent is the light blue there) */
.skip { position: absolute; left: var(--content-gutter); top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-primary-solid); color: var(--color-on-accent); border-radius: var(--radius-full); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--content-wrap) + 2 * var(--content-gutter)); margin-inline: auto; padding-inline: var(--content-gutter); }

em { font-style: normal; color: var(--color-accent); }

/* ───────── Buttons ─────────
   B .btn / .btn--primary / .btn--ghost / .btn--lg are the shared .sewma-btn controls (components.css). */

.icon-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px;
	border-radius: var(--radius-full); border: 1px solid var(--color-line-strong); background: transparent; cursor: pointer;
	transition: border-color 160ms var(--ease-state), color 160ms var(--ease-state);
}
.icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle__moon, :root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }

/* ───────── Header ───────── */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-height);
	transition: background-color 240ms var(--ease-state), box-shadow 240ms var(--ease-state);
}
.site-header.is-scrolled { background: color-mix(in srgb, var(--color-bg-alt) 94%, transparent); box-shadow: 0 1px 0 var(--color-line); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-6); }
.logo { display: flex; align-items: center; min-height: 44px; flex: none; } /* 44px touch target around the 22px wordmark */
.logo__img { height: 22px; width: auto; }
.logo__img--dark, :root[data-theme="dark"] .logo__img--light { display: none; }
:root[data-theme="dark"] .logo__img--dark { display: block; }
.nav { display: flex; align-items: center; gap: var(--space-8); margin-left: auto; }
.nav__links { display: flex; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.nav__links a { position: relative; text-decoration: none; font-weight: 600; font-size: .9375rem; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--color-accent); transform: scaleX(0); transition: transform 240ms var(--ease-out); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.site-header__tools { display: flex; gap: var(--space-2); }
.nav-toggle { display: none; }
.nav-toggle path { transition: transform 240ms var(--ease-out); transform-origin: 12px 12px; }
.nav-open .nav-toggle__top { transform: translateY(4px) rotate(45deg); }
.nav-open .nav-toggle__bottom { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 860px) {
	.nav-toggle { display: inline-grid; }
	.site-header__tools { margin-left: auto; }
	.nav {
		position: absolute; top: var(--header-height); left: 0; right: 0; margin: 0;
		flex-direction: column; align-items: stretch; gap: var(--space-6);
		padding: var(--space-6) var(--content-gutter) var(--space-8);
		background: var(--color-bg-alt); box-shadow: 0 1px 0 var(--color-line), var(--shadow-md);
		visibility: hidden; opacity: 0; transform: translateY(-8px);
		transition: opacity 240ms var(--ease-state), transform 240ms var(--ease-out), visibility 0s 240ms;
	}
	.nav-open .nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.nav-open { background: var(--color-bg-alt); }
	.nav__links { flex-direction: column; gap: 0; }
	.nav__links a { display: block; padding: 14px 0; font-size: 1.125rem; border-bottom: 1px solid var(--color-line); }
	.nav__links a::after { display: none; }
	.nav__cta { align-self: flex-start; }
}
/* Without JS the menu stays open in the flow on small screens */
@media (max-width: 860px) {
	html:not(.js) .nav { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; padding: 0; background: none; flex-direction: row; }
	html:not(.js) .nav__links { flex-direction: row; gap: var(--space-4); }
	html:not(.js) .nav__links a { border: 0; font-size: .9375rem; }
	html:not(.js) .nav__cta { display: none; }
}

/* ───────── Hero: the lit stage ───────── */
.hero {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column;
	background: linear-gradient(180deg, var(--color-stage-top) 0%, var(--color-stage-bottom) 100%);
}
.hero__stage { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__light { position: absolute; border-radius: 50%; }
/* backlight: sits behind the devices, low centre */
.hero__light--back {
	left: 50%; top: 70%; width: min(1100px, 120vw); aspect-ratio: 1.6;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, var(--color-light-back), transparent 72%);
}
/* side light: cool window highlight in light theme, warm amber in dark */
.hero__light--side {
	left: -10%; top: -20%; width: min(760px, 90vw); aspect-ratio: 1;
	background: radial-gradient(closest-side, var(--color-light-side), transparent 70%);
}
.hero__floor {
	position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
	background: linear-gradient(180deg, transparent, rgb(10 23 48 / .06));
}
:root[data-theme="dark"] .hero__floor { background: linear-gradient(180deg, transparent, rgb(0 0 0 / .35)); }
/* frame: in the flow under the copy, at full width, pinned to the hero bottom (the copy block takes the spare height).
   Its empty top (stage backdrop, no devices) slides up behind the copy by a negative margin in % of the hero width:
   desktop frame 2280×995, devices from 47 % of its height → 47 % × 995/2280 = 20.5 % of the width;
   mobile frame 780×529, devices from 8.5 % → 5.5 %. So the devices start --hero-gap below the last line of copy
   on every screen; when the copy is taller than the viewport, the hero grows instead of the frame climbing over it. */
.hero { --hero-gap: clamp(24px, 3vw, 40px); }
.hero-media { position: relative; z-index: -1; order: 1; flex: none; margin-top: calc(var(--hero-gap) - 20.5%); }
.hero-media picture, .hero-media img { display: block; width: 100%; height: auto; }
.hero-media img { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }
/* hero video (DESIGN.md §Hero-анимация): the clip is the 16:9 generation frame without the side extension,
   so it sits over the middle 1920 of the 2280 px wide still (left 180/2280), cropped at the same floor line (995 px);
   its sides dissolve into the still's extended backdrop underneath. pending: the slot stays hidden until the clip plays */
.hero-video {
	position: absolute; left: 7.8947%; bottom: 0; width: 84.2105%; height: auto; aspect-ratio: 1920 / 995;
	display: block; object-fit: cover; object-position: 50% 0; opacity: 0; pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent, #000 22%), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-composite: intersect;
}
@media (min-width: 701px) {
	/* hiding into "pending" is instant (the poster must never show before the clip);
	   only the reveal into playing / ended / off fades */
	.hero-media[data-video="playing"], .hero-media[data-video="ended"], .hero-media[data-video="off"] { transition: opacity 900ms var(--ease-out); }
	.hero-media[data-video="pending"] { opacity: 0; }
	.hero-media[data-video="playing"] .hero-video, .hero-media[data-video="ended"] .hero-video { opacity: 1; }
}
@media (max-width: 700px) { .hero-video { display: none; } }

.hero__content {
	position: relative; flex: 1 0 auto;
	padding-top: calc(var(--header-height) + clamp(40px, 8vh, 96px));
	text-align: center; display: flex; flex-direction: column; align-items: center;
}
.hero__title {
	font-size: var(--text-display); line-height: .98; letter-spacing: -0.035em;
	max-width: 15ch;
}
/* secondary hero copy sits over the backlight glow: a darker (light) / lighter (dark) muted than the page token keeps it above 4.5:1 */
/* --color-hero-muted (darker in light, lighter in dark) keeps the copy over the glow above 4.5:1 */
.hero__lead { margin-top: var(--space-6); max-width: 52ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-hero-muted); }
.hero__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.hero__status { margin-top: var(--space-6); display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-small); color: var(--color-hero-muted); }
.hero__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-live) 18%, transparent); }


@media (max-width: 700px) {
	.hero__content { padding-top: calc(var(--header-height) + 32px); }
	.hero-media { margin-top: calc(var(--hero-gap) - 5.5%); }
	.hero__actions { width: 100%; }
	.hero__actions .sewma-btn { flex: 1 1 100%; }
	.hero__light--back { top: 78%; }
}
/* short phones in portrait (Safari's visible area of 414×715, 375×667, 360×640, 320×568): the copy tightens
   (smaller headline, compact lead, both buttons in one 44px row) so the devices fit on the first screen with it;
   the spare height is split above and below the copy instead of pooling over the frame */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 760px) {
	.hero { --hero-gap: 24px; }
	.hero__content { padding-top: calc(var(--header-height) + 8px); justify-content: center; }
	.hero__title { font-size: clamp(1.75rem, 10.6vw - .375rem, 2.5rem); line-height: 1; max-width: 15ch; }
	.hero__lead { margin-top: var(--space-4); font-size: 1rem; line-height: 1.45; }
	.hero__actions { margin-top: var(--space-6); flex-wrap: nowrap; gap: var(--space-2); }
	.hero__actions .sewma-btn { flex: 1 1 auto; min-height: 44px; padding: 10px 14px; font-size: .9375rem; }
	.hero__status { margin-top: var(--space-4); }
}
/* the smallest phones (320×568): tighter type and spacing, so the whole laptop still shows on the first screen */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 600px) {
	.hero { --hero-gap: 16px; }
	.hero__content { padding-top: calc(var(--header-height) + 4px); }
	.hero__lead { margin-top: var(--space-3); font-size: var(--text-small); }
	.hero__actions { margin-top: var(--space-4); }
	.hero__status { margin-top: var(--space-3); }
}
/* phones in landscape: lower top offset and a smaller headline keep both buttons on the first screen */
@media (orientation: landscape) and (max-height: 500px) {
	.hero__content { padding-top: calc(var(--header-height) + 8px); }
	.hero__title { font-size: clamp(2rem, 1rem + 3.2vw, 2.75rem); max-width: 20ch; }
	.hero__lead { margin-top: var(--space-3); font-size: 1rem; }
	.hero__actions { margin-top: var(--space-4); }
	.hero__actions .sewma-btn { min-height: 44px; padding: 10px 20px; }
	.hero__status { margin-top: var(--space-3); }
}

/* ───────── Strip: facts + technologies ───────── */
.strip {
	position: relative; background: var(--color-bg-alt);
	border-block: 1px solid var(--color-line);
	padding-block: var(--space-12) 0;
}
.strip__facts {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6);
	padding-bottom: var(--space-12);
}
.fact { display: flex; align-items: baseline; gap: var(--space-4); justify-content: center; }
.fact + .fact { border-left: 1px solid var(--color-line); }
.fact__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.fact__label { font-size: var(--text-small); color: var(--color-text-muted); max-width: 16ch; line-height: 1.35; }
.marquee { overflow: hidden; border-top: 1px solid var(--color-line); padding-block: var(--space-6); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__item { display: inline-flex; align-items: center; gap: 14px; padding-inline: 22px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.marquee__item svg { width: 14px; height: 14px; color: var(--color-accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
/* WCAG 2.2.2: the moving strip stops under the pointer */
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (max-width: 700px) {
	.strip__facts { grid-template-columns: 1fr; gap: 0; padding-bottom: var(--space-6); }
	.fact { justify-content: flex-start; padding-block: var(--space-4); }
	.fact + .fact { border-left: 0; border-top: 1px solid var(--color-line); }
	.fact__num { min-width: 2.7em; } /* widest value "120+" sets the column, so the three labels line up */
	.fact__label { max-width: none; }
}

/* ───────── Sections ───────── */
.section { position: relative; isolation: isolate; padding-block: clamp(80px, 10vw, 136px); }
/* The section name sits as a tab on the section's top edge */
/* the pill itself is .sewma-section-label[--band] (components.css); .tab only pins it to the edge */
.tab { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.h2 { font-size: var(--text-h2); line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; }
.h2--xl { font-size: var(--text-h2-xl); max-width: 20ch; }
.h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }
.lead { margin-top: var(--space-6); font-size: var(--text-lead); line-height: 1.5; color: var(--color-text-muted); max-width: 52ch; }

/* ───────── Services: lit screens ───────── */
.services { background: var(--color-bg); }
.services::before {
	content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(1000px, 100vw); height: 520px; transform: translateX(-50%);
	background: radial-gradient(closest-side, var(--color-accent-soft), transparent 75%);
	pointer-events: none;
}
.svc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.svc {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column;
	background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	transition: border-color 240ms var(--ease-state), transform 240ms var(--ease-out);
}
.svc:hover { border-color: var(--color-line-strong); transform: translateY(-2px); }
.svc__body { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.svc__body p { color: var(--color-text-muted); max-width: 46ch; }
.svc__body .h3 { margin-top: var(--space-2); }
.svc__visual {
	position: relative; min-height: 220px;
	display: grid; place-items: center; padding: var(--space-8);
	background:
		radial-gradient(60% 70% at 50% 85%, var(--color-accent-glow), transparent 70%),
		var(--color-surface-2);
}
.svc__visual--top { border-bottom: 1px solid var(--color-line); }
.svc--wide, .svc--wide-r { grid-column: span 7; display: grid; grid-template-columns: 1fr 1.1fr; }
.svc--wide .svc__visual { border-left: 1px solid var(--color-line); }
.svc--wide-r { grid-template-columns: 1.1fr 1fr; }
.svc--wide-r .svc__visual { border-right: 1px solid var(--color-line); }
.svc--wide .svc__body, .svc--wide-r .svc__body, .svc--tall .svc__body { justify-content: center; }
.svc:nth-child(2) { grid-column: span 5; }
.svc--tall { grid-column: span 5; }
.svc--tall .svc__visual { flex: 1; min-height: 260px; border-top: 1px solid var(--color-line); }
.svc--half { grid-column: span 6; }

.plaque {
	display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
	border-radius: 12px; background: var(--color-primary-solid); color: var(--color-on-accent);
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-primary-solid) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / .25);
}
.plaque svg { width: 24px; height: 24px; }
.plaque--sm { width: 40px; height: 40px; border-radius: 10px; }
.plaque--sm svg { width: 20px; height: 20px; }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
/* items are .sewma-tag (components.css) */

/* mock devices + interfaces (drawn in CSS, no images) */
.mock-laptop { width: 100%; max-width: 400px; }
.mock-laptop__screen { aspect-ratio: 16 / 10; padding: 3.5%; margin-inline: 8%; border-radius: 10px 10px 2px 2px; background: var(--color-mock-frame); box-shadow: var(--shadow-lg); }
.mock-laptop__base { height: 10px; border-radius: 1px 1px 10px 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-mock-frame) 60%, #a8bad8), var(--color-mock-frame)); }
.ui-site { height: 100%; border-radius: 4px; background: var(--color-surface); padding: 6% 7%; display: flex; flex-direction: column; gap: 9%; overflow: hidden; }
.ui-site__nav { display: flex; align-items: center; gap: 6%; }
.ui-site__nav i { width: 14%; height: 6px; border-radius: 3px; background: var(--color-text); opacity: .85; }
.ui-site__nav b { width: 9%; height: 4px; border-radius: 2px; background: var(--color-mock-ink); }
.ui-site__nav s { margin-left: auto; width: 14%; height: 8px; border-radius: 4px; background: var(--color-primary-solid); }
.ui-site__hero { display: flex; flex-direction: column; gap: 6px; }
.ui-site__hero i { height: 8px; border-radius: 4px; background: var(--color-text); opacity: .8; }
.ui-site__hero i.accent { background: var(--color-primary-solid); opacity: 1; }
.ui-site__hero i.thin { height: 4px; background: var(--color-mock-ink); opacity: 1; margin-top: 2px; }
.ui-btn { width: 22%; height: 10px; border-radius: 5px; background: var(--color-primary-solid); margin-top: 4px; }
.ui-site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; flex: 1; }
.ui-site__cards span { border-radius: 4px; background: var(--color-accent-soft); border: 1px solid var(--color-line); }
.w70 { width: 70%; } .w60 { width: 60%; } .w45 { width: 45%; }

.ui-shop { position: relative; width: 100%; max-width: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ui-shop__item { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 10px; background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); }
.ui-shop__item i { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(160deg, var(--color-accent-soft), color-mix(in srgb, var(--color-primary-solid) 30%, var(--color-accent-soft))); }
.ui-shop__item b { height: 6px; width: 70%; border-radius: 3px; background: var(--color-mock-ink); }
.ui-shop__cart { position: absolute; right: -10px; top: -16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-solid); color: var(--color-on-accent); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--color-primary-solid) 90%, transparent); }
.ui-shop__cart svg { width: 22px; height: 22px; }
.ui-shop__cart em { position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-amber); border: 2px solid var(--color-surface); }

.svc--tall .svc__visual { overflow: hidden; }
.mock-phone { position: relative; width: 120px; aspect-ratio: 9 / 19; padding: 6px; border-radius: 22px; background: var(--color-mock-frame); box-shadow: var(--shadow-lg); z-index: 1; }
.mock-phone--back { position: absolute; left: calc(50% - 112px); top: 46px; width: 104px; z-index: 0; opacity: .9; transform: rotate(-8deg); }
.mock-phone__screen { height: 100%; border-radius: 17px; background: var(--color-surface); overflow: hidden; }
.ui-app { height: 100%; padding: 22% 12% 12%; display: flex; flex-direction: column; gap: 9px; }
.ui-app b { height: 8px; width: 50%; border-radius: 4px; background: var(--color-text); opacity: .8; }
.ui-app i { height: 5px; border-radius: 3px; background: var(--color-mock-ink); }
.ui-app span { flex: 1; border-radius: 8px; background: var(--color-accent-soft); border: 1px solid var(--color-line); }
.ui-app span.accent { flex: none; height: 16px; border: 0; background: var(--color-primary-solid); }
.ui-app--alt { padding-top: 30%; }
.ui-app--alt i { height: 26%; border-radius: 8px; background: var(--color-accent-soft); }

.ui-dash { width: 100%; max-width: 360px; aspect-ratio: 16 / 10; display: grid; grid-template-columns: 22% 1fr; border-radius: 10px; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--shadow-lg); }
.ui-dash__side { background: var(--color-band); display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; }
:root[data-theme="dark"] .ui-dash__side { background: var(--color-stage-top); }
.ui-dash__side i { height: 6px; border-radius: 3px; background: rgb(169 186 214 / .35); }
.ui-dash__side i.on { background: var(--blue-light); }
.ui-dash__main { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ui-dash__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-dash__row span { height: 30px; border-radius: 6px; background: var(--color-surface-2); border: 1px solid var(--color-line); }
.ui-dash__chart { flex: 1; display: flex; align-items: flex-end; gap: 7%; padding: 4px 4px 0; border-bottom: 1px solid var(--color-line); }
.ui-dash__chart b { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--color-mock-ink); }
.ui-dash__chart b.accent { background: var(--color-primary-solid); }

.ui-cal { width: 100%; max-width: 280px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 14px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--shadow-md); }
.ui-cal i { aspect-ratio: 1; border-radius: 6px; background: var(--color-surface-2); border: 1px solid var(--color-line); position: relative; }
.ui-cal i.dot::after { content: ""; position: absolute; left: 50%; bottom: 18%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--color-amber); }
.ui-cal i.on { background: var(--color-primary-solid); border-color: var(--color-primary-solid); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--color-primary-solid) 90%, transparent); }

.ui-speed { width: 100%; max-width: 280px; }
.ui-speed__track { stroke: var(--color-line); }
.ui-speed__fill { stroke: var(--color-primary-solid); }
.ui-speed__line { stroke: var(--color-accent); opacity: .5; stroke-dasharray: 4 6; }

@media (max-width: 1023px) {
	.svc--wide, .svc--wide-r { grid-column: span 12; }
	.svc:nth-child(2), .svc--tall, .svc--half { grid-column: span 6; }
	.svc--wide-r { order: 0; }
}
@media (max-width: 700px) {
	.svc-grid { gap: var(--space-4); }
	.svc--wide, .svc--wide-r { display: flex; flex-direction: column; }
	.svc--wide .svc__visual { order: -1; border-left: 0; border-bottom: 1px solid var(--color-line); }
	.svc--wide-r .svc__visual { border-right: 0; border-bottom: 1px solid var(--color-line); }
	.svc:nth-child(2), .svc--tall, .svc--half { grid-column: span 12; }
	.svc--tall .svc__visual { order: -1; border-top: 0; border-bottom: 1px solid var(--color-line); }
	.svc__body { padding: var(--space-6); }
	.svc__visual { min-height: 190px; padding: var(--space-6); }
}

/* ───────── Bands (dark contrast strips) ───────── */
.band { background: var(--color-band); color: var(--color-band-ink); --color-accent: var(--color-band-accent); }
.band .lead, .band p { color: var(--color-band-muted); }
.band .h2, .band .h3 { color: var(--color-band-ink); }
.band ::selection { background: var(--blue-light); color: var(--color-band-selection-ink); }

/* ───────── Process: a beam through four steps ───────── */
.band__light {
	position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: hidden;
	background:
		radial-gradient(40% 60% at 50% 0%, rgb(46 139 255 / .22), transparent 70%),
		radial-gradient(30% 50% at 92% 100%, var(--color-light-warm), transparent 70%);
}
.steps {
	--beam-y: 11px;
	position: relative; margin: 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8);
}
.steps::before, .steps::after {
	content: ""; position: absolute; left: 0; right: 0; top: var(--beam-y); height: 2px; border-radius: 2px;
}
.steps::before { background: var(--color-band-line); }
.steps::after {
	background: linear-gradient(90deg, color-mix(in srgb, var(--blue-light) 0%, transparent), var(--blue-light) 18%, var(--color-blue-pale) 60%, var(--color-amber));
	transform-origin: left center;
}
.step { position: relative; padding-top: 48px; }
.step__node {
	position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
	background: var(--color-band); border: 2px solid var(--blue-light);
}
.step__node::before { content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-light) 45%, transparent), transparent); }
.step__node::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--color-blue-pale); }
.step__label { display: block; font-size: var(--text-small); font-weight: 600; color: var(--color-band-accent); font-variant-numeric: tabular-nums; margin-bottom: var(--space-3); }
.step .h3 { margin-bottom: var(--space-3); }
.step p { max-width: 34ch; }

@media (max-width: 860px) {
	.steps { grid-template-columns: 1fr; gap: var(--space-12); padding-left: 48px; }
	.steps::before, .steps::after { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
	.steps::after { background: linear-gradient(180deg, var(--blue-light), var(--color-blue-pale) 60%, var(--color-amber)); transform-origin: center top; }
	.step { padding-top: 0; }
	.step__node { left: -48px; top: 2px; }
}

/* ───────── FAQ: quiet room ───────── */
.faq { background: var(--color-bg-alt); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-height) + 32px); margin: 0; }
.faq__head .h2 { max-width: 10ch; }
.accordion { border-top: 1px solid var(--color-line); }
.acc { border-bottom: 1px solid var(--color-line); }
.acc__h { font-size: inherit; margin: 0; }
.acc__q {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
	padding: var(--space-8) 0; background: none; border: 0; cursor: pointer; text-align: left;
	font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.01em;
	transition: color 160ms var(--ease-state);
}
.acc__q:hover { color: var(--color-accent); }
.acc__icon { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-line-strong); transition: background-color 240ms var(--ease-state), border-color 240ms var(--ease-state), transform 240ms var(--ease-out); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--ease-out); }
.acc__icon::after { transform: rotate(90deg); }
.acc.is-open .acc__icon { background: var(--color-primary-solid); border-color: var(--color-primary-solid); color: var(--color-on-accent); transform: rotate(180deg); }
.acc.is-open .acc__icon::after { transform: rotate(0deg); }
.acc__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 240ms var(--ease-state); }
.acc__inner { overflow: hidden; }
.acc__inner p { padding-bottom: var(--space-8); color: var(--color-text-muted); max-width: 60ch; }
html.js .acc:not(.is-open) .acc__a { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 240ms var(--ease-state), visibility 0s 240ms; }
@media (max-width: 860px) {
	.faq__grid { grid-template-columns: 1fr; }
	.faq__head { position: static; }
	.acc__q { padding: var(--space-6) 0; }
}

/* ───────── Contact: finale under the light ───────── */
.contact { background: linear-gradient(180deg, var(--color-band) 0%, var(--color-band-2) 100%); }
.contact__lights { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.contact__lens {
	position: absolute; left: 50%; top: 4%; width: min(900px, 130vw); aspect-ratio: 1; transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(46 139 255 / .28), rgb(46 139 255 / .08) 55%, transparent 72%);
}
.contact__lens::after {
	content: ""; position: absolute; inset: 22%; border-radius: 50%;
	border: 1px solid rgb(156 203 255 / .18);
	box-shadow: 0 0 0 60px rgb(156 203 255 / .025), 0 0 0 140px rgb(156 203 255 / .02);
}
.contact__warm {
	position: absolute; right: -8%; bottom: -10%; width: min(560px, 80vw); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(closest-side, rgb(255 176 84 / .16), transparent 70%);
}
.contact__head .h2 { margin-inline: auto; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__aside .lead { margin-top: 0; }
.contact__links { margin: var(--space-12) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.contact__links a { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-4); color: var(--color-band-ink); font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.contact__links a:hover { color: var(--color-band-accent); }

.form {
	padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-xl);
	background: var(--color-band-surface); color: var(--color-band-surface-ink);
	border: 1px solid var(--color-band-line);
	box-shadow: 0 2px 4px rgb(0 0 0 / .2), 0 50px 100px -40px rgb(0 0 0 / .7), 0 -1px 0 rgb(255 255 255 / .06) inset;
	display: grid; gap: var(--space-6);
	/* the form panel is light in the light theme and navy in the dark one (--color-band-surface) */
	/* field errors: B's red darkened toward the panel ink (light) / lightened (dark), both above 4.5:1 on the panel */
	--form-error: color-mix(in srgb, var(--red-500) 75%, var(--color-band-surface-ink));
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
/* fields are .sewma-field / .sewma-input / .sewma-textarea / .sewma-select (components.css); their
   --color-field-* tokens already give B's light panel in the light theme and the navy one in the dark */
.form .sewma-field > label, .form .sewma-input { color: var(--color-band-surface-ink); }
.captcha { display: flex; gap: var(--space-3); align-items: center; }
.captcha__img {
	flex: none; width: 150px; height: 32px; object-fit: cover; cursor: pointer;
	border-radius: var(--radius-xs); border: 1px dashed var(--color-field-line);
	background: var(--color-field-bg);
}
/* server-side errors under the fields (Nette {inputError}); the typed values stay */
.field__error { font-size: var(--text-small); font-weight: 600; line-height: 1.4; color: var(--form-error); }
.form .sewma-input.is-invalid { border-color: var(--form-error); }
.form .sewma-input.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red-500) 20%, transparent); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
/* the honeypot field (ContactFormGuard): out of view, out of the tab order (tabindex) and the accessibility tree */
.form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
	.contact__grid { grid-template-columns: 1fr; }
	.contact__links { margin-top: var(--space-6); }
}
@media (max-width: 560px) {
	.form__row { grid-template-columns: 1fr; }
	.captcha { flex-wrap: wrap; }
	.captcha .sewma-input { flex: 1 1 100%; }
	.form__foot .sewma-btn { width: 100%; }
}

/* ───────── Footer ───────── */
.footer { background: var(--color-footer); color: var(--color-footer-ink); padding: var(--space-24) 0 calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-footer-line); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); }
.footer__logo { height: 22px; width: auto; }
.footer__brand p { margin-top: var(--space-6); max-width: 36ch; color: var(--color-footer-muted); font-size: var(--text-small); }
.footer__h { font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; line-height: 1.6; letter-spacing: 0; color: var(--color-footer-ink); margin-bottom: var(--space-4); }
.footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.footer__col a { color: var(--color-footer-muted); text-decoration: none; font-size: var(--text-small); }
.footer__col a:hover { color: #FFFFFF; text-decoration: underline; }
.footer__bottom { margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--color-footer-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); color: var(--color-footer-muted); }
.footer :focus-visible { outline-color: var(--color-footer-accent); }
@media (max-width: 860px) {
	.footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; }
}
/* touch (phones in either orientation, tablets): footer and header links get 44px targets instead of 17–30px lines */
@media (max-width: 860px), (pointer: coarse) {
	.footer__col ul { gap: 0; }
	.footer__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
@media (min-width: 861px) and (pointer: coarse) {
	.nav__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-block: 0; }
}

/* ───────── Scroll-trigger reveals (only with JS, only with motion allowed) ───────── */
@media (prefers-reduced-motion: no-preference) {
	/* rise: short lift from an almost visible state */
	html.js [data-reveal="rise"] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
	html.js [data-reveal="rise"].is-visible { opacity: 1; transform: none; }

	/* light-on: card comes out of blur while its backlight brightens, like a screen switching on */
	html.js [data-reveal="light-on"] { opacity: 0; filter: blur(10px); transform: scale(.97); transition: opacity 800ms var(--ease-out), filter 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
	html.js [data-reveal="light-on"].is-visible { opacity: 1; filter: none; transform: none; }

	/* beam: the line of light runs through the steps, each step lights as the beam reaches it */
	html.js [data-reveal="beam"]::after { transform: scaleX(0); transition: transform 1400ms var(--ease-out) 150ms; }
	html.js [data-reveal="beam"].is-visible::after { transform: scaleX(1); }
	html.js [data-reveal="beam"] .step { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(250ms + var(--i) * 280ms); }
	html.js [data-reveal="beam"].is-visible .step { opacity: 1; transform: none; }
	@media (max-width: 860px) {
		html.js [data-reveal="beam"]::after { transform: scaleY(0); }
		html.js [data-reveal="beam"].is-visible::after { transform: scaleY(1); }
	}

	/* iris: the form panel opens from its centre */
	html.js [data-reveal="iris"] { clip-path: inset(12% 12% 12% 12% round 24px); opacity: 0; transition: clip-path 900ms var(--ease-out), opacity 600ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
	html.js [data-reveal="iris"].is-visible { clip-path: inset(0 0 0 0 round 24px); opacity: 1; }

	/* hero: one authored entrance on load */
	html.js .hero__content > * { animation: hero-in 1000ms var(--ease-out) both; }
	html.js .hero__title { animation-delay: 80ms; }
	html.js .hero__lead { animation-delay: 260ms; }
	html.js .hero__actions { animation-delay: 400ms; }
	html.js .hero__status { animation-delay: 540ms; }
	html.js .hero__light--back { animation: light-up 2200ms var(--ease-out) both; }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes light-up { from { opacity: 0; transform: translate(-50%, -46%) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }


/* ───────── Client sign-in and error pages: one card on the lit stage ─────────
   Sign/in.latte, Error/*.latte (500.latte has no layout and brings its own header). The hero vocabulary of B:
   the stage gradient with the backlight and the side light, a card like the form panel, the label as a tab
   on the card's top edge (.tab), the error code in the accent like the facts (.fact__num). */
.page {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: 100vh; min-height: 100svh;
	display: flex; align-items: center;
	padding-block: calc(var(--header-height) + clamp(var(--space-8), 6vh, var(--space-16))) clamp(var(--space-12), 8vh, var(--space-24));
	background: linear-gradient(180deg, var(--color-stage-top) 0%, var(--color-stage-bottom) 100%);
}
.page .hero__light--back { top: 62%; }
.page__card {
	position: relative; max-width: 480px; margin-inline: auto;
	padding: clamp(var(--space-8), 5vw, var(--space-12)); padding-top: clamp(var(--space-10), 6vw, var(--space-12));
	display: flex; flex-direction: column; gap: var(--space-6);
	background: var(--color-band-surface); color: var(--color-band-surface-ink);
	border: 1px solid var(--color-line); border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}
.page__card .h2 { font-size: var(--text-h2); line-height: 1.05; letter-spacing: -0.03em; }
.page__card p { color: var(--color-text-muted); }
.page__card .page__code { font-family: var(--font-display); font-weight: 600; font-size: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem); line-height: .9; letter-spacing: -0.04em; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.page__form { display: grid; gap: var(--space-5); }
.page__form .sewma-btn { justify-self: start; margin-top: var(--space-2); }
.page__foot { padding-top: var(--space-6); border-top: 1px solid var(--color-line); font-size: var(--text-small); }
.page__foot a { color: var(--color-accent); font-weight: 600; }
.page-check { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-size: var(--text-small); color: var(--color-text-muted); cursor: pointer; }
.page-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary-solid); }
/* errors: the form's red pulled toward the card ink, above 4.5:1 in both themes */
.page__card { --form-error: color-mix(in srgb, var(--red-500) 75%, var(--color-band-surface-ink)); }
.page__card .sewma-input.is-invalid { border-color: var(--form-error); }
.page__card .sewma-input.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red-500) 20%, transparent); }
.page__notice { padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--text-small); font-weight: 600; background: color-mix(in srgb, var(--color-primary-solid) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary-solid) 30%, transparent); }
.page__notice--error { background: color-mix(in srgb, var(--red-500) 10%, transparent); border-color: color-mix(in srgb, var(--red-500) 35%, transparent); color: var(--form-error); }
@media (max-width: 560px) {
	.page { align-items: flex-start; }
	.page__actions .sewma-btn, .page__form .sewma-btn { width: 100%; justify-self: stretch; }
}
@media (orientation: landscape) and (max-height: 500px) {
	.page { align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
	html.js .page__card { animation: hero-in 1000ms var(--ease-out) 80ms both; }
	html.js .page .hero__light--back { animation: light-up 2200ms var(--ease-out) both; }
}
/* 500.latte: the header without navigation */
.site-header--bare .site-header__tools { margin-left: auto; }

/* ───────── Notices: the site popup (notices.latte, front.js) ─────────
   Flash and notify() messages in one <dialog>, the card of the sign-in page (band surface, xl radius, deep shadow)
   lit from the corner by the message's own colour, like the stage lights. With JS a centred modal over a night
   veil; without JS the same card sits at the bottom of the screen and the cross (form method="dialog") still works. */
.notice {
	--notice-tone: var(--color-accent);
	position: fixed; z-index: 60; inset: auto 0 var(--content-gutter);
	width: min(30rem, calc(100% - 2 * var(--content-gutter))); max-width: none; max-height: calc(100% - 2 * var(--content-gutter));
	margin: 0 auto; padding: 0; border: 0; overflow: visible; /* the card scrolls, so its shadow is not cut square */
	background: transparent; color: var(--color-band-surface-ink);
}
.notice:modal { inset: 0; margin: auto; }
.notice--success, .notice__item--success { --notice-tone: color-mix(in srgb, var(--green-500) 70%, var(--color-band-surface-ink)); }
.notice--error, .notice__item--error { --notice-tone: color-mix(in srgb, var(--red-500) 78%, var(--color-band-surface-ink)); }
.notice__item--info { --notice-tone: var(--color-accent); }
.notice::backdrop { background: color-mix(in srgb, var(--color-footer) 55%, transparent); }
[data-theme="dark"] .notice::backdrop { background: color-mix(in srgb, var(--color-footer) 72%, transparent); }
[data-theme="dark"] .notice { --notice-glow: 22%; } /* a light in the dark reads stronger: the same glow needs more colour there */
html:has(.notice:modal) { overflow: hidden; }

.notice__card {
	position: relative; isolation: isolate; overflow: hidden auto; overscroll-behavior: contain;
	max-height: calc(100dvh - 2 * var(--content-gutter));
	display: grid; gap: var(--space-6);
	padding: var(--space-8) calc(var(--space-8) + 44px) var(--space-8) var(--space-8);
	background: var(--color-band-surface);
	border: 1px solid var(--color-line); border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}
/* the light: a soft glow of the message colour from the top left corner, behind the mark */
.notice__card::before {
	content: ""; position: absolute; z-index: -1; left: -30%; top: -60%; width: 90%; aspect-ratio: 1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--notice-tone) var(--notice-glow, 14%), transparent), transparent);
	pointer-events: none;
}
.notice__item { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-4); }
.notice__item + .notice__item { padding-top: var(--space-6); border-top: 1px solid var(--color-line); }
.notice__mark {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full);
	color: var(--notice-tone);
	background: color-mix(in srgb, var(--notice-tone) 12%, var(--color-band-surface));
	border: 1px solid color-mix(in srgb, var(--notice-tone) 35%, transparent);
	box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--notice-tone) 60%, transparent);
}
.notice__mark svg { width: 22px; height: 22px; }
.notice__body { display: grid; gap: var(--space-2); padding-top: 9px; min-width: 0; }
.notice__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-band-surface-ink); overflow-wrap: anywhere; }
.notice__title--only { font-size: var(--text-lead); letter-spacing: -0.01em; }
.notice__text { max-width: 60ch; font-size: var(--text-body); line-height: 1.55; color: var(--color-text-muted); overflow-wrap: anywhere; }
.notice__close-form { position: absolute; top: var(--space-4); right: var(--space-4); margin: 0; }
.notice__close {
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); cursor: pointer;
	transition: background-color 180ms var(--ease-state), color 180ms var(--ease-state);
}
.notice__close svg { width: 20px; height: 20px; }
.notice__close:hover { background: color-mix(in srgb, var(--color-band-surface-ink) 8%, transparent); color: var(--color-band-surface-ink); }
.notice__close:focus-visible { outline-offset: 0; }
.notice__close:active { background: color-mix(in srgb, var(--color-band-surface-ink) 14%, transparent); }

@media (max-width: 560px) {
	.notice__card { padding: var(--space-6) calc(var(--space-6) + 36px) var(--space-6) var(--space-6); gap: var(--space-5); }
	.notice__close-form { top: var(--space-2); right: var(--space-2); }
	.notice__item { gap: var(--space-3); }
	.notice__mark { width: 40px; height: 40px; }
	.notice__body { padding-top: 7px; }
}
/* one authored moment: the card rises into the light, the veil and the corner glow follow */
@media (prefers-reduced-motion: no-preference) {
	.notice:modal .notice__card { animation: notice-in 560ms var(--ease-out) both; }
	.notice:modal .notice__card::before { animation: notice-glow 1200ms var(--ease-out) 120ms both; }
	.notice:modal::backdrop { animation: notice-veil 360ms var(--ease-state) both; }
}
@keyframes notice-in { from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes notice-glow { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes notice-veil { from { opacity: 0; } to { opacity: 1; } }