/**
 * YanSyn theme styles.
 *
 * Design system: brand colour is configurable through the settings panel and
 * arrives as inline CSS variables. Everything else is neutral so that product
 * data stays readable.
 */

:root {
	--ys-blue: #085097;
	--ys-blue-400: #0a66be;
	--ys-blue-700: #063d73;
	--ys-blue-900: #04294d;
	--ys-red: #b01018;
	--ys-red-400: #d62a32;
	/* Light red tint: the only red that reaches AA on the dark navy surfaces. */
	--ys-red-100: #ff9ea2;
	--ys-red-700: #8e0c13;
	--ys-ink: #0f1621;
	--ys-ink-2: #3d4757;
	--ys-ink-3: #6b7686;
	--ys-ink-900: #0b1220;
	--ys-line: #e3e7ed;
	--ys-soft: #f5f7fa;
	--ys-bg: #ffffff;
	--ys-ok: #1e8e4e;
	--ys-warn: #c77a05;
	--ys-radius: 6px;
	--ys-radius-lg: 10px;
	--ys-shadow-1: 0 1px 3px rgba(4, 41, 77, .06);
	--ys-shadow-2: 0 10px 30px rgba(4, 41, 77, .10);
	--ys-ease: cubic-bezier(.2, .7, .3, 1);
	--ys-c: 1280px;
	--ys-header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Font stack: system UI only.
   "Inter" used to head this list but nothing ever loaded it — there is no
   @font-face and no font request anywhere in the theme — so it silently fell
   back here anyway, while making the stack look deliberate. Removed rather than
   loaded from a CDN: a Google Fonts request is a render-blocking dependency and
   has been ruled a GDPR problem in Germany, which matters for this market. If a
   brand face is wanted later, self-host the woff2 and preload it. */
/* The `hidden` attribute must actually hide.
   The browser's own `[hidden] { display: none }` lives in the user-agent sheet,
   so ANY author rule that sets `display` on the same element silently beats it.
   That is how the AI assistant panel ended up permanently open: its own
   `.ys-chat__panel { display: flex }` overrode the attribute, so the close
   button had nothing to toggle. Declaring it here, once, means a component can
   rely on `hidden` without knowing what its own display value is. */
[hidden] { display: none !important; }

body {
	margin: 0;
	background: var(--ys-bg);
	color: var(--ys-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.25; font-weight: 600; color: var(--ys-blue-900); }
h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
p { margin: 0 0 1em; }
a { color: var(--ys-blue); text-decoration: none; }
a:hover { color: var(--ys-blue-400); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
svg { width: 22px; height: 22px; }

:focus-visible { outline: 2px solid var(--ys-blue); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--ys-c); margin: 0 auto; padding: 0 24px; }

/* The skip link is styled once, at the bottom of this file, as a slide-down
   panel — an earlier duplicate here (off-screen left + z-index 999) was fully
   overridden by it and only hid the real rules. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 1px solid transparent; border-radius: var(--ys-radius);
	padding: 11px 20px; font-size: 15px; font-weight: 500; line-height: 1.2;
	cursor: pointer; transition: background-color .18s var(--ys-ease), color .18s var(--ys-ease), border-color .18s var(--ys-ease);
	text-align: center;
}
.btn-red { background: var(--ys-red); color: #fff; }
.btn-red:hover { background: var(--ys-red-700); color: #fff; }
.btn-blue { background: var(--ys-blue); color: #fff; }
.btn-blue:hover { background: var(--ys-blue-400); color: #fff; }
.btn-outline { border-color: var(--ys-blue); color: var(--ys-blue); background: transparent; }
.btn-outline:hover { background: var(--ys-blue); color: #fff; }
.btn-outline-light { border-color: rgba(255, 255, 255, .45); color: #fff; background: transparent; }
.btn-outline-light:hover { background: #fff; color: var(--ys-blue-900); }
.btn-ghost { border-color: var(--ys-line); color: var(--ys-ink-2); background: #fff; }
.btn-ghost:hover { border-color: var(--ys-blue); color: var(--ys-blue); }

/* Top bar */
.ys-topbar { background: var(--ys-blue-900); color: rgba(255, 255, 255, .8); font-size: 13px; height: 36px; display: flex; align-items: center; }
.ys-topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ys-topbar a { color: rgba(255, 255, 255, .85); }
.ys-topbar a:hover { color: #fff; }
.ys-topbar__meta { display: flex; gap: 20px; }
.ys-topbar__meta a { display: inline-flex; align-items: center; gap: 6px; }
.ys-topbar__meta svg { width: 14px; height: 14px; flex: none; }
.ys-topbar__tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Header */
.ys-header { position: sticky; top: 0; z-index: 90; background: #fff; border-bottom: 1px solid var(--ys-line); }
.ys-navbar { height: var(--ys-header-h); display: flex; align-items: center; gap: 28px; }

.ys-logo { display: flex; flex-direction: column; gap: 3px; flex: none; }
.ys-logo__text { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.ys-logo__text .y { color: var(--ys-red); font-style: normal; }
.ys-logo__text .s { color: var(--ys-blue); font-style: normal; }
.ys-logo__bar { display: block; height: 3px; width: 100%; background: var(--ys-red); border-radius: 2px; }

/* Custom logo: keep it inside the header and flush with the content edge.
   The export carries ~3% transparent padding on the left, so the box is pulled
   back by the same amount to make the visible mark line up with the nav. */
.ys-logo--image { flex-direction: row; align-items: center; gap: 0; margin-left: -3px; }
.ys-logo--image .custom-logo-link { display: flex; align-items: center; line-height: 0; }
.ys-logo img,
.ys-logo .custom-logo { max-height: 44px; max-width: 100%; width: auto; height: auto; display: block; }

.ys-nav-primary { flex: 1; min-width: 0; }
.ys-nav { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ys-nav > li { position: static; }
.ys-nav > li > a {
	display: flex; align-items: center; gap: 6px;
	height: var(--ys-header-h); padding: 0 14px;
	font-size: 15px; font-weight: 500; color: var(--ys-ink); white-space: nowrap;
	position: relative;
}
.ys-nav > li > a:hover { color: var(--ys-blue); }
.ys-nav > li.open > a { color: var(--ys-blue); }
.caret {
	width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .2s var(--ys-ease);
}
.ys-nav > li.open > a .caret { transform: rotate(-135deg) translateY(-2px); }
.ys-nav > li.ys-nav__skip { display: none; }
.ys-nav__icon { display: inline-flex; align-items: center; }
.ys-nav__icon svg { width: 18px; height: 18px; }
.ys-nav > li.has-mega > a::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
	background: var(--ys-blue); opacity: 0; transition: opacity .18s var(--ys-ease);
}
.ys-nav > li.open > a::after { opacity: 1; }

/* Mega menu */
.ys-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-top: 1px solid var(--ys-line); box-shadow: var(--ys-shadow-2);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s var(--ys-ease), transform .18s var(--ys-ease), visibility .18s;
}
.ys-nav > li.open .ys-mega { opacity: 1; visibility: visible; transform: none; }
/* The walker only inlines --ys-mega-cols (how many category columns the menu
   has); the tracks themselves are declared here so they can respond to the
   viewport — an inline grid-template-columns could not. */
.ys-mega-in {
	max-width: var(--ys-c); margin: 0 auto; padding: 28px 24px 0; display: grid; gap: 28px;
	grid-template-columns: repeat(var(--ys-mega-cols, 3), minmax(0, 1fr));
}
.ys-mega-in.has-promo { grid-template-columns: repeat(var(--ys-mega-cols, 3), minmax(0, 1fr)) 300px; }
.mega-col h4 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ys-ink-3); margin-bottom: 12px; }
.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-list li { margin: 0; }
.mega-list a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: var(--ys-radius); }
.mega-list a:hover { background: var(--ys-soft); }
.mega-list b { display: block; font-weight: 500; color: var(--ys-ink); font-size: 14.5px; }
.mega-list span { display: block; font-size: 12.5px; color: var(--ys-ink-3); line-height: 1.45; }
.mega-promo__card { background: var(--ys-soft); border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg); padding: 18px; }
.mega-promo__card h5 { font-size: 16px; margin-bottom: 4px; }
.mega-promo__card p { font-size: 13px; color: var(--ys-ink-3); }
.mega-foot { background: var(--ys-soft); border-top: 1px solid var(--ys-line); margin-top: 26px; padding: 14px 0; }
.mega-foot .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ys-ink-2); }
.mega-foot .btn { padding: 8px 16px; font-size: 14px; }

/* Header actions */
.ys-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.ys-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--ys-line); border-radius: var(--ys-radius); background: #fff; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.ys-burger span { display: block; width: 18px; height: 2px; background: var(--ys-ink); border-radius: 2px; }

/* Header search: icon button opens a panel hanging under the header. */
.ys-search { position: relative; display: flex; align-items: center; }
.ys-search__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; flex: none;
	border: 1px solid var(--ys-line); border-radius: var(--ys-radius);
	background: #fff; color: var(--ys-ink-2); cursor: pointer;
	transition: color .18s var(--ys-ease), border-color .18s var(--ys-ease), background-color .18s var(--ys-ease);
}
.ys-search__toggle:hover { border-color: var(--ys-blue); color: var(--ys-blue); background: var(--ys-soft); }
.ys-search.open .ys-search__toggle { border-color: var(--ys-blue); color: var(--ys-blue); background: var(--ys-soft); }
.ys-search__toggle svg { width: 19px; height: 19px; }
.ys-search__form {
	display: none; position: absolute; top: calc(100% + 14px); right: 0; z-index: 96;
	width: min(420px, 76vw); padding: 6px;
	align-items: center; gap: 4px;
	background: #fff; border: 1px solid var(--ys-line); border-radius: var(--ys-radius);
	box-shadow: var(--ys-shadow-2);
}
.ys-search.open .ys-search__form { display: flex; }
.ys-search__form::before {
	content: ""; position: absolute; top: -5px; right: 15px;
	width: 9px; height: 9px; transform: rotate(45deg);
	background: #fff; border-left: 1px solid var(--ys-line); border-top: 1px solid var(--ys-line);
}
.ys-search__form input {
	flex: 1; min-width: 0; border: 0; background: transparent;
	padding: 10px; font-size: 14.5px; color: var(--ys-ink);
}
/* The input itself carries no border/background, so only the outline is
   removed here; keyboard users get a visible ring from :focus-visible below. */
.ys-search__form input:focus { outline: none; }
.ys-search__form input:focus-visible { outline: 3px solid var(--ys-blue-400); outline-offset: 2px; }
.ys-search__form button {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 38px; height: 38px; border: 0; border-radius: var(--ys-radius);
	background: var(--ys-blue); color: #fff; cursor: pointer;
	transition: background-color .18s var(--ys-ease);
}
.ys-search__form button:hover { background: var(--ys-blue-700); }
.ys-search__form button svg { width: 18px; height: 18px; }

/* Language switcher */
/* Language flags — drawn in the theme, see yansyn_flag_svg(). */
.ys-flag { display: inline-flex; flex: none; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgba(15, 22, 33, .14); }
.ys-flag svg { display: block; width: 21px; height: 14px; }

.ys-lang { position: relative; }
/* min-width 140px: what actually shipped — a later `.ys-lang__list { min-width:
   140px }` block overrode the 168px written here. Consolidated into this rule
   so the override is gone; the name text is hidden under 1200px anyway, so the
   list never needs to be wider. */
.ys-lang__list { display: none; position: absolute; right: 0; top: 100%; margin: 0; min-width: 140px; background: #fff; border: 1px solid var(--ys-line); border-radius: var(--ys-radius); box-shadow: var(--ys-shadow-2); list-style: none; padding: 12px 6px 6px; z-index: 95; }
/* Hover opens it on desktop; .open (tap) and :focus-within keep it usable on
   touch screens and with the keyboard. Hover is scoped to pointer devices so a
   tap on a tablet does not leave the panel stuck open. */
@media (hover: hover) {
	.ys-lang:hover .ys-lang__list { display: block; }
}
.ys-lang:focus-within .ys-lang__list,
.ys-lang.open .ys-lang__list { display: block; }
/* Invisible bridge so the pointer can travel from the button to the list. */
.ys-lang__list::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.ys-lang__list a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; font-size: 13px; color: var(--ys-ink-2); transition: background-color .16s var(--ys-ease), color .16s var(--ys-ease); }
/* --ys-soft on white was almost invisible, so hover uses the brand blue. */
.ys-lang__list a:hover,
.ys-lang__list a:focus-visible { background: rgba(8, 80, 151, .1); color: var(--ys-blue); font-weight: 600; }
.ys-lang__list a[aria-current="page"] { color: var(--ys-blue); font-weight: 600; }
/* A language the current page has no translation for: shown, but muted, with a
   note — hiding it entirely made the language look unavailable. */
.ys-lang__list a.is-unavailable { opacity: .62; }
.ys-lang__list a.is-unavailable span { display: flex; flex-direction: column; line-height: 1.25; }
.ys-lang__hint { font-size: 10.5px; font-weight: 400; color: var(--ys-ink-3); letter-spacing: .01em; }
.ys-lang__list a.is-unavailable:hover .ys-lang__hint { color: var(--ys-blue); }

/* Inside the dark top bar the switcher drops its own chrome. */
.ys-topbar .ys-lang__current { background: transparent; border-color: transparent; padding: 4px 7px; border-radius: 6px; color: rgba(255, 255, 255, .88); }
.ys-topbar .ys-lang__current:hover,
.ys-topbar .ys-lang.open .ys-lang__current { background: rgba(255, 255, 255, .2); color: #fff; }
.ys-topbar .ys-lang__list { margin-top: 0; }
.ys-topbar .ys-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .32); }

/* Hero */
.ys-hero { position: relative; overflow: hidden; background: var(--ys-blue-900); color: #fff; padding: 88px 0; }
.ys-hero h1 { color: #fff; max-width: 18ch; }
.ys-hero p { color: rgba(255, 255, 255, .82); max-width: 60ch; margin-bottom: 28px; }
.ys-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ys-hero__inner { position: relative; z-index: 1; }
/* Optional background photo — uploaded under YanSyn Settings → Home page. */
.ys-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ys-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ys-hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(178deg, #06315c 0%, #041f3c 60%, #0a1526 100%);
	opacity: var(--ys-hero-overlay, .62);
}
.ys-hero--image { display: flex; align-items: center; min-height: min(74vh, 600px); padding: 100px 0; }
.ys-hero--image .wrap { width: 100%; }
.ys-hero--image h1 { max-width: 22ch; }

/* Trust badges */
.ys-badges { background: var(--ys-soft); border-bottom: 1px solid var(--ys-line); padding: 22px 0; }
/* Evenly divided figures with hairline dividers — fewer numbers carry more weight. */
.ys-badges ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 18px 0; }
.ys-badges li { display: flex; flex: 1 1 0; flex-direction: column; gap: 3px; min-width: 0; padding: 0 28px; border-left: 1px solid var(--ys-line); }
.ys-badges li:first-child { padding-left: 0; border-left: 0; }
.ys-badges b { font-size: 26px; font-weight: 700; color: var(--ys-blue-900); line-height: 1.15; }
.ys-badges span { font-size: 14px; font-weight: 500; color: var(--ys-ink-2); letter-spacing: .01em; }

/* Sections */
.ys-section { padding: 88px 0; }
.ys-section--soft { background: var(--ys-soft); }
.ys-section--page { padding: 48px 0 96px; }
.ys-section__head { max-width: 62ch; margin-bottom: 40px; }
.ys-section__head p { color: var(--ys-ink-2); margin: 0; }

.ys-main { min-height: 40vh; }

/* Grids and cards */
.ys-grid { display: grid; gap: 20px; }
.ys-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ys-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ys-card { display: block; border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg); padding: 18px; background: #fff; transition: transform .2s var(--ys-ease), box-shadow .2s var(--ys-ease); }
.ys-card:hover { transform: translateY(-2px); box-shadow: var(--ys-shadow-2); color: inherit; }
.ys-card h2, .ys-card h3 { font-size: 17px; margin: 12px 0 4px; }
.ys-card p { font-size: 13.5px; color: var(--ys-ink-3); margin: 0; }
.ys-card__meta { font-size: 12.5px; color: var(--ys-ink-3); }
.ys-card img { border-radius: 8px; width: 100%; }
/* Article card: media on top, then the body stacked so the meta line can be
   pushed to the bottom and line up across a row of cards of unequal length. */
.ys-card--post { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ys-card--post .ys-card__media { display: block; }
.ys-card--post .ys-card__media img,
.ys-card--post .ys-card__media .ys-placeholder { display: block; width: 100%; border-radius: 0; }
.ys-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }
.ys-card__cat {
	font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
	text-transform: uppercase; color: var(--ys-blue);
}
.ys-card__cat:hover { color: var(--ys-red); }
.ys-card__title { font-size: 18px; line-height: 1.35; margin: 0; }
.ys-card__title a { color: inherit; }
.ys-card__title a:hover { color: var(--ys-blue); }
.ys-card__excerpt { font-size: 13.5px; color: var(--ys-ink-3); margin: 0; }
.ys-card--post .ys-postmeta { margin-top: auto; padding-top: 4px; }

/* Home "Customer cases" cards render the title/excerpt as direct children of
   .ys-card--post (no .ys-card__body wrapper), so they sit flush against the
   border. Match the body inset so the text doesn't touch the edge. This only
   targets cards that omit the body wrapper, not the standard post cards. */
.ys-card--post > h3,
.ys-card--post > p { padding: 0 18px; }
.ys-card--post > h3 { margin-top: 14px; }
.ys-card--post > p { padding-bottom: 18px; }

.ys-feature { background: #fff; border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg); padding: 24px; }
.ys-feature h3 { border-left: 3px solid var(--ys-blue); padding-left: 12px; }
.ys-feature p { color: var(--ys-ink-2); font-size: 14.5px; margin: 0; }

.ys-shot { border-radius: var(--ys-radius-lg); overflow: hidden; }

.ys-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ys-tags li { background: #fff; border: 1px solid var(--ys-line); border-radius: 999px; padding: 8px 16px; font-size: 14px; color: var(--ys-ink-2); }
.ys-list { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 24px 0 0; padding: 0; }
.ys-list li { position: relative; padding-left: 16px; font-size: 14px; color: var(--ys-ink-2); }
.ys-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--ys-red); border-radius: 50%; }

/* Placeholder */
.ys-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(0deg, #eef2f7, #fff);
	border: 1px dashed var(--ys-line); border-radius: 8px; color: var(--ys-ink-3); font-size: 12px;
}
.ys-placeholder--16x9 { aspect-ratio: 16 / 9; }
.ys-placeholder--4x3 { aspect-ratio: 4 / 3; }
.ys-placeholder--1x1 { aspect-ratio: 1 / 1; }

/* Fallback image set in Theme settings — occupies the same box as the grey
   placeholder it replaces. Card containers already style `img` directly
   (.ys-card__media img, .ys-families__media img, .ys-cert__media img,
   .ys-case-card > img), so only the intrinsic box and fit are set here. */
.ys-ph-img { display: block; width: 100%; background: var(--ys-soft); }
.ys-ph-img--16x9 { aspect-ratio: 16 / 9; }
.ys-ph-img--4x3 { aspect-ratio: 4 / 3; }
.ys-ph-img--1x1 { aspect-ratio: 1 / 1; }
.ys-ph-img--cover { object-fit: cover; }
.ys-ph-img--contain { object-fit: contain; }

/* CTA band */
.ys-cta-band { background: var(--ys-blue-900); color: #fff; padding: 84px 0; }
.ys-cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ys-cta-band h2 { color: #fff; }
.ys-cta-band p { color: rgba(255, 255, 255, .8); margin: 0; max-width: 60ch; }

/* ---------- Home: hero extras ---------- */
/* The hero is always dark navy, so its accent text uses the light red tint
   (--ys-red-400 measures 2.96:1 on --ys-blue-900 at 13px, below AA). */
.ys-hero__eyebrow {
	margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ys-red-100);
}
.ys-hero__points {
	list-style: none; margin: 28px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.ys-hero__points li {
	position: relative; padding-left: 22px; font-size: 14px; color: rgba(255, 255, 255, .85);
}
.ys-hero__points li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--ys-red-100);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m9 16.2-4.2-4.2L3.4 13.8 9 19.4 21 7.4l-1.4-1.4z'/></svg>") center / 14px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m9 16.2-4.2-4.2L3.4 13.8 9 19.4 21 7.4l-1.4-1.4z'/></svg>") center / 14px no-repeat;
}

/* ---------- Home: product families ---------- */
/* Large lead card on the left, 2x2 family grid on the right. */
.ys-families-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.ys-families__lead {
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-lg); box-shadow: 0 1px 3px rgba(15, 22, 33, .06);
}
.ys-families__media { display: block; aspect-ratio: 16 / 10; background: var(--ys-soft); overflow: hidden; }
.ys-families__media img,
.ys-families__media .ys-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.ys-families__media img { transition: transform .45s var(--ys-ease); }
.ys-families__media:hover img { transform: scale(1.035); }
.ys-families__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px; }
.ys-families__body h3 { margin: 0; font-size: 20px; }
.ys-families__body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ys-ink-2); }
.ys-families__cta { margin-top: auto; }

.ys-families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ys-family { display: flex; flex-direction: column; padding: 22px 20px; }
.ys-family__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
	background: rgba(8, 80, 151, .08); color: var(--ys-blue);
}
.ys-family__icon svg { width: 23px; height: 23px; }
.ys-family h3 { margin: 0 0 8px; font-size: 17px; }
.ys-family p { font-size: 14px; line-height: 1.55; color: var(--ys-ink-2); }
.ys-family .ys-card__meta { margin-top: auto; padding-top: 10px; }
.ys-home-featured { margin-top: 48px; }
.ys-home-featured__title { font-size: 18px; margin: 0 0 18px; color: var(--ys-blue-900); }
.ys-section__more { margin-top: 32px; }

/* ---------- Home: WHY YanSyn ---------- */
.ys-why { align-items: stretch; gap: 32px; }
.ys-why__lead {
	display: flex; flex-direction: column; justify-content: center; overflow: hidden;
	background: #fff; border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg);
	padding: 34px 34px 36px; box-shadow: 0 1px 3px rgba(15, 22, 33, .06);
}
.ys-why__lead--image { justify-content: flex-start; padding: 0; }
.ys-why__media { aspect-ratio: 16 / 10; background: var(--ys-soft); }
.ys-why__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ys-why__lead--image .ys-why__body { padding: 28px 34px 34px; }
.ys-why__body { display: flex; flex-direction: column; }
.ys-why__body .ys-eyebrow { margin: 0 0 10px; font-size: 13px; }
.ys-why__body h3 { font-size: 22px; line-height: 1.3; margin: 0 0 14px; color: var(--ys-blue-900); }
.ys-why__body > p { font-size: 15.5px; line-height: 1.65; color: var(--ys-ink-2); margin: 0 0 22px; }
.ys-why__cta { align-self: flex-start; margin-top: 4px; }
.ys-why .ys-grid--2 { gap: 16px; }

/* Tick list, used by the why panel and case-study pages. */
.ys-checklist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.ys-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ys-ink); }
.ys-checklist svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ys-blue); }

.ys-feature--icon { display: flex; flex-direction: column; }
.ys-feature--icon .ys-feature__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 10px; margin-bottom: 14px;
	background: var(--ys-blue); color: #fff;
}
.ys-feature--icon .ys-feature__icon svg { width: 22px; height: 22px; }

.ys-certs { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--ys-line); }
.ys-certs__label { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ys-ink-3); text-transform: uppercase; margin: 0 0 16px; }
.ys-certs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ys-certs__list li {
	background: #fff; border: 1px solid var(--ys-line); border-radius: var(--ys-radius);
	padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--ys-ink-2);
	display: inline-flex; align-items: center; min-height: 52px;
}
.ys-certs__list li img { max-height: 40px; width: auto; }
.ys-certs__name { white-space: nowrap; }

/* ---------- Home: industries ---------- */
.ys-industry { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(15, 22, 33, .06); transition: transform .2s var(--ys-ease), box-shadow .2s var(--ys-ease); }
.ys-industry::after {
	content: ""; position: absolute; z-index: -1; top: -34px; right: -34px;
	width: 106px; height: 106px; border-radius: 50%;
	background: radial-gradient(circle, rgba(8, 80, 151, .07), rgba(8, 80, 151, 0) 70%);
	pointer-events: none;
}
.ys-industry:hover { transform: translateY(-2px); box-shadow: var(--ys-shadow-2); color: inherit; }
.ys-industry__badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
	background: linear-gradient(135deg, var(--ys-blue), var(--ys-blue-700));
	color: #fff; font-size: 20px; font-weight: 700;
	transition: transform .2s var(--ys-ease);
}
.ys-industry__badge svg { width: 24px; height: 24px; }
.ys-industry:hover .ys-industry__badge { transform: translateY(-1px); }
.ys-industry h3 { margin: 0 0 8px; font-size: 17px; }
.ys-industry p { font-size: 13.5px; color: var(--ys-ink-2); margin: 0 0 14px; }
.ys-industry__link {
	margin-top: auto; font-size: 12.5px; font-weight: 500; color: var(--ys-blue);
	display: inline-flex; align-items: center; gap: 4px;
}
.ys-industry__link::after { content: "→"; transition: transform .18s var(--ys-ease); }
.ys-industry:hover .ys-industry__link::after { transform: translateX(3px); }

/* ---------- Home: capabilities + process ---------- */
.ys-capabilities { gap: 14px 28px; }
.ys-process { gap: 22px; }
.ys-step {
	position: relative; background: #fff; border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-lg); padding: 26px 24px 24px;
	transition: transform .22s var(--ys-ease), box-shadow .22s var(--ys-ease);
}
.ys-step:hover { transform: translateY(-3px); box-shadow: var(--ys-shadow-2); }
/* Faint step number in the corner, filled from data-step. */
.ys-step::before {
	content: attr(data-step);
	position: absolute; top: 12px; right: 18px;
	font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -.04em;
	color: var(--ys-blue); opacity: .1; pointer-events: none;
}
.ys-step__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px;
	background: linear-gradient(140deg, var(--ys-blue), var(--ys-blue-700));
	color: #fff; box-shadow: 0 6px 14px rgba(8, 80, 151, .2);
}
.ys-step__icon svg { width: 23px; height: 23px; }
.ys-step h3 { font-size: 16.5px; margin: 0 0 8px; }
.ys-step p { font-size: 14px; color: var(--ys-ink-2); margin: 0; }
/* Connector sits on the card's vertical centre instead of near the top. */
.ys-step:not(:last-child)::after {
	content: "\2192";
	position: absolute; top: 50%; left: 100%; transform: translateY(-50%);
	margin-left: 2px;
	color: var(--ys-blue); font-size: 20px; line-height: 1; opacity: .5; pointer-events: none;
}

/* ---------- Home: customer cases ---------- */

/* Page */
.ys-page__title { margin-bottom: 20px; }
.ys-page--narrow { max-width: 720px; }
.ys-page__thumb { margin-bottom: 24px; border-radius: var(--ys-radius-lg); overflow: hidden; }
/* Long-form body. Every element a writer is likely to paste in from the editor
   is covered here; without it a technical post renders as one undifferentiated
   block of text with no hierarchy at all. */
.ys-content { font-size: 16.5px; line-height: 1.75; color: var(--ys-ink); }

.ys-content p,
.ys-content ul,
.ys-content ol,
.ys-content blockquote,
.ys-content pre,
.ys-content table,
.ys-content figure { margin: 0 0 1.2em; }

.ys-content h2,
.ys-content h3,
.ys-content h4 { line-height: 1.3; scroll-margin-top: calc(var(--ys-header-h, 72px) + 24px); }
.ys-content h2 { font-size: 25px; margin: 2em 0 .7em; padding-bottom: .35em; border-bottom: 1px solid var(--ys-line); }
.ys-content h3 { font-size: 20px; margin: 1.7em 0 .6em; }
.ys-content h4 { font-size: 17px; margin: 1.5em 0 .5em; }
.ys-content > h2:first-child,
.ys-content > h3:first-child { margin-top: 0; }

.ys-content ul,
.ys-content ol { padding-left: 1.35em; }
.ys-content li { margin-bottom: .45em; }
.ys-content ul > li::marker { color: var(--ys-red); }
.ys-content ol > li::marker { color: var(--ys-blue); font-weight: 600; }
.ys-content li > ul,
.ys-content li > ol { margin: .45em 0 0; }

.ys-content a { color: var(--ys-blue); text-decoration: underline; text-underline-offset: 2px; }
.ys-content a:hover { color: var(--ys-red); }

.ys-content blockquote {
	margin: 1.7em 0;
	padding: 2px 0 2px 22px;
	border-left: 3px solid var(--ys-blue);
	color: var(--ys-ink-2);
	font-size: 17px;
}
.ys-content blockquote p:last-child { margin-bottom: 0; }
.ys-content blockquote cite { display: block; margin-top: 8px; font-size: 13.5px; font-style: normal; color: var(--ys-ink-3); }

.ys-content code {
	background: var(--ys-soft); border: 1px solid var(--ys-line); border-radius: 4px;
	padding: 1px 5px; font-size: .88em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ys-content pre {
	background: #0f1b2d; color: #e6edf6; border-radius: var(--ys-radius-lg);
	padding: 18px 20px; overflow: auto; font-size: 13.5px; line-height: 1.6;
}
.ys-content pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.ys-content img { border-radius: 8px; max-width: 100%; height: auto; }
.ys-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 14.5px; }
.ys-content th, .ys-content td { border: 1px solid var(--ys-line); padding: 10px 12px; text-align: left; }
.ys-content th { background: var(--ys-blue-900); color: #fff; font-weight: 500; }

.ys-content figure { margin: 1.8em 0; }
.ys-content figure img { margin: 0 auto; display: block; }
.ys-content figcaption { font-size: 13px; color: var(--ys-ink-3); margin-top: 8px; text-align: center; }

.ys-content hr { border: 0; border-top: 1px solid var(--ys-line); margin: 2.4em 0; }

/* Editor alignment / width utilities that ship with core blocks. */
.ys-content .alignleft { float: left; margin: 0 1.4em 1em 0; }
.ys-content .alignright { float: right; margin: 0 0 1em 1.4em; }
.ys-content .aligncenter { margin-left: auto; margin-right: auto; }
.ys-content .wp-block-quote { border-left: 3px solid var(--ys-blue); padding-left: 22px; }

/* Breadcrumb */
.ys-crumbs { font-size: 13px; color: var(--ys-ink-3); margin-bottom: 20px; }
.ys-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ys-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ys-line); }

/* Industry archive: icon sitting inline with the H1. */
.ys-term__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 12px; margin-right: 12px;
	vertical-align: middle;
	background: rgba(8, 80, 151, .09); color: var(--ys-blue);
}
.ys-term__icon svg { width: 22px; height: 22px; }

/* Footer */
.ys-footer { background: var(--ys-blue-900); color: rgba(255, 255, 255, .78); padding: 56px 0 0; font-size: 14px; }
.ys-footer .widget-title, .ys-footer h3 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.ys-footer__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 32px 28px; padding-bottom: 40px; }
.ys-footer a { color: rgba(255, 255, 255, .8); }
.ys-footer a:hover { color: #fff; }
.ys-footer ul { list-style: none; margin: 0; padding: 0; }
.ys-footer__logo { display: block; max-height: 42px; width: auto; margin-bottom: 18px; }
.ys-footer__links li { margin-bottom: 10px; }
.ys-footer__contact li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; line-height: 1.5; }
.ys-footer__contact li > span { flex: 1; }
.ys-footer__contact a { display: flex; align-items: center; gap: 9px; word-break: break-word; }
.ys-footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }

/* The list reset used to come from .ys-footer ul, so a bare .ys-social on a
   page (contact sidebar) showed list markers. Reset it on the component. */
.ys-social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ys-social li { list-style: none; }
.ys-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px;
	transition: background-color .18s var(--ys-ease), border-color .18s var(--ys-ease);
}
.ys-social a:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); }
.ys-social svg { width: 19px; height: 19px; }
.ys-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.ys-footer__legal { display: flex; gap: 20px; }
.ys-footer__bottom p { margin: 0; }

/* Widgets dropped into the dark footer must use light text.
   Without this, widgets styled for a light sidebar render almost invisible. */
.ys-footer .widget,
.ys-footer .widget p,
.ys-footer .widget li,
.ys-footer .widget div,
.ys-footer .widget span,
.ys-footer .widget small,
.ys-footer .widget td,
.ys-footer .widget caption { color: rgba(255, 255, 255, .82); }
.ys-footer .widget a { color: rgba(255, 255, 255, .9); }
.ys-footer .widget a:hover { color: #fff; }
.ys-footer .ys-contact-list a { color: rgba(255, 255, 255, .88); }
.ys-footer .ys-contact-list a:hover { color: #fff; }
.ys-footer .ys-cta-box { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); }
.ys-footer .ys-cta-box h3 { color: #fff; }
.ys-footer .ys-cta-box p { color: rgba(255, 255, 255, .8); }

/* Floating rail */
.ys-float { position: fixed; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.ys-float--right { right: 14px; }
.ys-float--left { left: 14px; }
.ys-float__item {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; padding: 0;
	background: #fff; border: 1px solid var(--ys-line); border-radius: 50%;
	box-shadow: var(--ys-shadow-1); color: var(--ys-blue); cursor: pointer;
	transition: background-color .18s var(--ys-ease), color .18s var(--ys-ease), transform .18s var(--ys-ease);
}
.ys-float__item:hover { background: var(--ys-blue); color: #fff; transform: translateY(-2px); }
.ys-float__item svg { width: 20px; height: 20px; flex: none; }
.ys-float__top { color: var(--ys-ink-2); }

/* Label appears as a tooltip instead of stretching the button. */
.ys-float__item > span {
	position: absolute; right: calc(100% + 8px); top: 50%;
	transform: translateY(-50%) translateX(4px);
	background: var(--ys-blue-900); color: #fff;
	padding: 5px 10px; border-radius: 4px;
	font-size: 12px; line-height: 1.35; white-space: nowrap;
	box-shadow: var(--ys-shadow-1);
	opacity: 0; pointer-events: none;
	transition: opacity .16s var(--ys-ease), transform .16s var(--ys-ease);
}
.ys-float__item:hover > span,
.ys-float__item:focus-visible > span { opacity: 1; transform: translateY(-50%) translateX(0); }
.ys-float--left .ys-float__item > span { right: auto; left: calc(100% + 8px); transform: translateY(-50%) translateX(-4px); }
.ys-float--left .ys-float__item:hover > span,
.ys-float--left .ys-float__item:focus-visible > span { transform: translateY(-50%) translateX(0); }

/* Mobile bottom menu */
.ys-tabbar {
	display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--ys-line); padding-bottom: env(safe-area-inset-bottom, 0px);
	box-shadow: 0 -6px 24px rgba(4, 41, 77, .1);
	transition: transform .22s var(--ys-ease);
}
/* Brand hairline along the top edge. */
.ys-tabbar::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
	background: linear-gradient(90deg, var(--ys-blue) 0 62%, #1c6fb8 62% 79%, var(--ys-red) 79% 100%);
	opacity: .85;
}
.ys-tabbar.hide { transform: translateY(120%); }
.ys-tabbar ul { display: flex; list-style: none; margin: 0; padding: 0 4px; height: 66px; }
.ys-tabbar li { flex: 1 1 0; display: flex; min-width: 0; }
.ys-tabbar li a {
	position: relative; flex: 1 1 auto;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	padding: 9px 2px 10px; border-radius: 14px;
	font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: .01em; white-space: nowrap;
	color: var(--ys-ink-3); text-decoration: none;
	transition: color .18s var(--ys-ease), background-color .18s var(--ys-ease), transform .12s var(--ys-ease);
}
.ys-tabbar li a > svg { width: 23px; height: 23px; stroke-width: 1.85; transition: transform .18s var(--ys-ease); }
.ys-tabbar li a:hover { color: var(--ys-blue); }
.ys-tabbar li a:active { transform: scale(.94); color: var(--ys-blue); }
/* Current page: blue mark plus a bar hanging from the top edge. */
.ys-tabbar li a.is-active { color: var(--ys-blue); font-weight: 600; }
.ys-tabbar li a.is-active > svg { stroke-width: 2.2; transform: translateY(-1px); }
.ys-tabbar li a.is-active::after {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ys-blue);
}
/* Raised centre action. Selectors carry the extra .ys-tabbar__mid class so they always outrank the base rules above. */
.ys-tabbar__mid { position: relative; z-index: 2; }
.ys-tabbar li.ys-tabbar__mid a {
	position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
	width: 62px; height: 62px; padding: 0; gap: 2px; border-radius: 50%;
	border: 4px solid #fff;
	background: linear-gradient(165deg, #cc1a24 0%, var(--ys-red) 55%, #8c0b12 100%);
	color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .02em; line-height: 1.1;
	box-shadow: 0 8px 20px rgba(176, 16, 24, .32), 0 2px 6px rgba(4, 41, 77, .14);
	transition: transform .18s var(--ys-ease), box-shadow .18s var(--ys-ease);
}
.ys-tabbar li.ys-tabbar__mid a:hover,
.ys-tabbar li.ys-tabbar__mid a:focus-visible { color: #fff; transform: translateX(-50%) translateY(-2px) scale(1.03); box-shadow: 0 12px 26px rgba(176, 16, 24, .4), 0 2px 8px rgba(4, 41, 77, .16); }
.ys-tabbar li.ys-tabbar__mid a:active { color: #fff; transform: translateX(-50%) scale(.95); }
.ys-tabbar li.ys-tabbar__mid a > svg { width: 22px; height: 22px; stroke-width: 2; }
.ys-tabbar li.ys-tabbar__mid a.is-active { color: #fff; border-color: rgba(255, 255, 255, .95); box-shadow: 0 0 0 3px rgba(176, 16, 24, .18), 0 10px 24px rgba(176, 16, 24, .38); }
.ys-tabbar li.ys-tabbar__mid a.is-active::after { display: none; }

/* Drawer */
/* 230: above the cookie bar (210) — the drawer only opens on mobile, where the
   consent bar would otherwise sit on top of the panel and swallow its focus. */
.ys-drawer { position: fixed; inset: 0; z-index: 230; visibility: hidden; }
.ys-drawer.open { visibility: visible; }
.ys-drawer__mask { position: absolute; inset: 0; background: rgba(4, 41, 77, .45); opacity: 0; transition: opacity .25s var(--ys-ease); }
.ys-drawer.open .ys-drawer__mask { opacity: 1; }
.ys-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(88%, 380px);
	background: #fff; transform: translateX(100%); transition: transform .28s var(--ys-ease);
	display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ys-drawer.open .ys-drawer__panel { transform: none; }
.ys-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ys-line); font-weight: 500; }
.ys-drawer__close { width: 36px; height: 36px; border: 1px solid var(--ys-line); border-radius: var(--ys-radius); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.ys-drawer__body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
.ys-drawer__search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ys-line); border-radius: var(--ys-radius); padding: 8px 12px; margin: 12px 0; }
.ys-drawer__search input, .ys-searchform input { border: 0; outline: 0; width: 100%; font-size: 14px; font-family: inherit; background: transparent; }
.ys-drawer__menu { list-style: none; margin: 0; padding: 0; }
.ys-drawer__menu a { display: block; padding: 14px 0; border-bottom: 1px solid var(--ys-line); font-size: 15px; font-weight: 500; color: var(--ys-ink); }
.ys-drawer__menu .sub-menu { list-style: none; padding-left: 14px; }
.ys-drawer__menu .sub-menu a { font-size: 14px; font-weight: 400; color: var(--ys-ink-2); }
.ys-drawer__contact { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ys-line); font-size: 14px; color: var(--ys-ink-2); display: grid; gap: 6px; }
.ys-drawer__foot { border-top: 1px solid var(--ys-line); padding: 16px 20px; display: grid; gap: 10px; }

/* Cookie bar */
.ys-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; background: #fff; border-top: 1px solid var(--ys-line); box-shadow: 0 -4px 16px rgba(4, 41, 77, .1); padding: 14px 0; }
.ys-cookie .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ys-cookie p { margin: 0; font-size: 13.5px; color: var(--ys-ink-2); }
.ys-cookie__actions { display: flex; gap: 8px; }
.ys-cookie .btn { padding: 8px 14px; font-size: 13.5px; }

/* Search field (searchform.php) — the pill. Its 8px gap and the input styling
   are declared further down with the rest of the search UI. */
.ys-searchform { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ys-line); border-radius: var(--ys-radius); padding: 8px 12px; max-width: 520px; margin: 24px 0; }

/* Pagination */
.ys-pagination { margin-top: 44px; }
.ys-pagination .page-numbers { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ys-pagination .page-numbers li a, .ys-pagination .page-numbers li span { display: inline-block; padding: 8px 14px; border: 1px solid var(--ys-line); border-radius: var(--ys-radius); font-size: 14px; }
.ys-pagination .page-numbers li a:hover { border-color: var(--ys-blue); color: var(--ys-blue); }
.ys-pagination .page-numbers li .current { background: var(--ys-blue); color: #fff; border-color: var(--ys-blue); }
.ys-pagination .page-numbers li .dots { border-color: transparent; }
/* Pagination directly under a card grid needs its own breathing room, because
   the grid carries no bottom margin. */
.ys-pagination + .ys-section__more,
.ys-grid + .ys-pagination { margin-top: 44px; }

/* Sidebar */
.ys-sidebar { padding: 0 0 80px; }
.ys-sidebar .widget { border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg); padding: 20px; margin-bottom: 20px; }
.ys-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ys-contact-list a { display: flex; align-items: center; gap: 10px; color: var(--ys-ink-2); font-size: 14px; }
.ys-cta-box { background: var(--ys-soft); border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg); padding: 22px; }
.ys-cta-box h3 { font-size: 18px; }
.ys-cta-box p { color: var(--ys-ink-2); font-size: 14px; }

/* Product page */
.ys-product__hero { padding: 48px 0 24px; }
.ys-product__hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ys-product__tagline { font-size: 18px; color: var(--ys-ink-2); }
.ys-product__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.ys-product__promise { font-size: 13px; color: var(--ys-ink-3); margin: 0; }
/* Product hero media. Both images here are the same box: the featured image is
   the `yansyn-wide` (16:9) crop and the settings fallback is now asked for the
   same ratio in single-yansyn_product.php. Pinning the ratio — on top of the
   width/height attributes the media pipeline emits — keeps the reserved height
   correct before the bytes arrive, which is what stopped the layout jumping.
   A `contain` fallback is left alone: cropping a product outline is worse than
   a shorter box. */
.ys-product__media img { display: block; width: 100%; border-radius: var(--ys-radius-lg); }
.ys-product__media img:not(.ys-ph-img--contain) { aspect-ratio: 16 / 9; object-fit: cover; }

.ys-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ys-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* Specification table */
.ys-spec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ys-spec { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.ys-spec th {
	background: var(--ys-blue-900); color: #fff; font-weight: 500; text-align: left;
	padding: 12px 14px; white-space: nowrap;
}
.ys-spec td { border-bottom: 1px solid var(--ys-line); padding: 11px 14px; color: var(--ys-ink-2); }
.ys-spec tbody tr:nth-child(even) { background: var(--ys-soft); }
.ys-spec .ys-mono { font-weight: 500; color: var(--ys-ink); }
.ys-spec__action { text-align: center; }
.ys-spec__btn {
	display: inline-block; background: #fff; border: 1px solid var(--ys-red); color: var(--ys-red);
	border-radius: 999px; padding: 4px 14px; font-size: 12.5px; white-space: nowrap;
}
.ys-spec__btn:hover { background: var(--ys-red); color: #fff; }
.ys-spec__notes { font-size: 13px; color: var(--ys-ink-3); margin: 12px 0 0; }
.ys-spec__hint { font-size: 12px; color: var(--ys-ink-3); margin: 6px 0 0; }

/* ---------- Company intro (home page) ---------- */
.ys-about { align-items: center; gap: 40px; }
.ys-about__media { margin: 0; }
.ys-about__img { display: block; width: 100%; height: auto; border-radius: var(--ys-radius-lg); }
.ys-about__body h2 { margin: 0 0 14px; font-size: 26px; line-height: 1.3; }
.ys-about__body p { margin: 0 0 18px; color: var(--ys-ink-2); }

/* ---------- Video facade ----------
   The poster is shown until a click swaps in the real player, so the block
   keeps its 16:9 box even on networks where YouTube never answers. */
.ys-video { position: relative; border-radius: var(--ys-radius-lg); overflow: hidden; background: var(--ys-soft); }
.ys-video__link { display: block; position: relative; }
.ys-video__img { display: block; width: 100%; height: auto; }
.ys-video__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center;
	width: 68px; height: 68px; border-radius: 50%;
	background: rgba(255, 255, 255, .94); color: var(--ys-red);
	transition: transform .18s var(--ys-ease), background-color .18s var(--ys-ease);
}
.ys-video__play svg { width: 34px; height: 34px; }
.ys-video__link:hover .ys-video__play { transform: translate(-50%, -50%) scale(1.07); background: #fff; }
.ys-video__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.ys-video--playing { background: #000; }

/* ---------- QR codes ---------- */
.ys-qr { margin-top: 18px; }
.ys-qr__frame { width: 116px; padding: 8px; background: #fff; border-radius: var(--ys-radius); }
.ys-qr__frame img { display: block; width: 100%; height: auto; }
.ys-qr__label { margin: 10px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.ys-social__qr {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0;
	background: transparent; color: inherit; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px;
	transition: background-color .18s var(--ys-ease), border-color .18s var(--ys-ease);
}
.ys-social__qr:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); }
.ys-social__qr svg { width: 19px; height: 19px; }

/* QR pop-up */
.ys-qr-modal {
	position: fixed; inset: 0; z-index: 400;
	display: flex; align-items: center; justify-content: center;
	padding: 24px; background: rgba(6, 14, 25, .62);
}
.ys-qr-modal__panel {
	position: relative; width: 100%; max-width: 320px;
	padding: 28px; border-radius: var(--ys-radius-lg);
	background: #fff; box-shadow: 0 18px 48px rgba(4, 41, 77, .28); text-align: center;
}
.ys-qr-modal__panel img { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto; }
.ys-qr-modal__label { margin: 14px 0 0; font-size: 14px; color: var(--ys-ink-2); }
.ys-qr-modal__close {
	position: absolute; top: 6px; right: 10px;
	width: 34px; height: 34px; padding: 0;
	background: transparent; border: 0; cursor: pointer;
	font-size: 24px; line-height: 1; color: var(--ys-ink-3);
}

@media (max-width: 767px) {
	.ys-about { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.ys-about__body h2 { font-size: 22px; }
	.ys-video__play { width: 56px; height: 56px; }
	.ys-video__play svg { width: 28px; height: 28px; }
}

/* Specification table becomes cards on small screens */
@media (max-width: 767px) {
	.ys-spec__hint { display: none; }
	.ys-spec-scroll { overflow: visible; }
	.ys-spec { min-width: 0; }
	.ys-spec thead { display: none; }
	.ys-spec, .ys-spec tbody, .ys-spec tr, .ys-spec td { display: block; width: 100%; }
	.ys-spec tbody tr {
		border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg);
		padding: 12px 14px; margin-bottom: 12px; background: #fff;
	}
	.ys-spec tbody tr:nth-child(even) { background: #fff; }
	.ys-spec td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 5px 0; }
	.ys-spec td::before { content: attr(data-label); color: var(--ys-ink-3); font-size: 12px; flex: none; }
	.ys-spec__action { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ys-line); text-align: left; }
}

/* General specs */
.ys-genspec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; margin: 0; }
.ys-genspec > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ys-line); }
.ys-genspec dt { font-weight: 500; color: var(--ys-ink); }
.ys-genspec dd { margin: 0; color: var(--ys-ink-2); text-align: right; }

/* Option matrix */
.ys-matrix { width: 100%; border-collapse: collapse; font-size: 14px; }
.ys-matrix th { text-align: left; padding: 10px 12px; }
.ys-matrix thead th { background: var(--ys-blue-900); color: #fff; font-weight: 500; }
.ys-matrix tbody th { font-weight: 400; color: var(--ys-ink); border-bottom: 1px solid var(--ys-line); }
.ys-matrix td { border-bottom: 1px solid var(--ys-line); text-align: center; }
.ys-matrix tbody tr:nth-child(even) { background: var(--ys-soft); }
.ys-matrix__legend { font-size: 12.5px; color: var(--ys-ink-3); display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.ys-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.ys-dot--on { background: var(--ys-blue); }
.ys-dot--off { background: #fff; border: 1.5px solid var(--ys-ink-3); }
.ys-dot--na { background: var(--ys-line); }

/* Industry cross-reference (/solutions/): industries against product families.
   The table gets its own white card because the section behind it is --ys-soft,
   which was also the even-row colour — the stripes cancelled out and the whole
   grid read as one flat grey slab. The row headers are <th>, so they also need
   an explicit reset: .ys-spec th paints every th navy with white text. */
.ys-xref-card {
	border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-lg);
	background: #fff;
	overflow: hidden;
	box-shadow: var(--ys-shadow-1);
}
.ys-xref thead th {
	background: #e9f0f8;
	color: var(--ys-blue-900);
	border-bottom: 1px solid #d3e0ee;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.ys-xref thead th:not(:first-child) { text-align: center; }
.ys-xref tbody th[scope="row"] {
	background: transparent;
	color: var(--ys-ink);
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 1px solid #eef1f6;
}
.ys-xref tbody td { text-align: center; white-space: nowrap; border-bottom: 1px solid #eef1f6; }
.ys-xref tbody td:last-child {
	background: rgba(8, 80, 151, .035);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--ys-blue-900);
}
.ys-xref tbody tr:nth-child(even) { background: #f7f9fc; }
.ys-xref tbody tr:hover { background: #eef4fb; }
.ys-xref tbody tr:last-child th,
.ys-xref tbody tr:last-child td { border-bottom: 0; }
.ys-xref th[scope="row"] a { color: inherit; }
.ys-xref th[scope="row"] a:hover { color: var(--ys-blue); }
.ys-xref-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; }
.ys-xref-dot--on { background: var(--ys-blue); }
.ys-xref-dot--off { background: #e6ebf2; }

/* On phones the matrix turns into a list of what actually exists: rows stack,
   empty pairings drop out, and each dot keeps the family name beside it. */
@media (max-width: 767px) {
	.ys-xref-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
	.ys-xref, .ys-xref tbody, .ys-xref tr, .ys-xref th, .ys-xref td { display: block; width: 100%; }
	.ys-xref tbody tr {
		border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg);
		background: #fff; padding: 14px 16px; margin-bottom: 12px;
	}
	.ys-xref tbody tr:nth-child(even) { background: #fff; }
	.ys-xref tbody th[scope="row"] { padding: 0 0 8px; font-size: 15px; }
	.ys-xref tbody td {
		display: flex; align-items: center; justify-content: space-between; gap: 14px;
		border: 0; padding: 4px 0; text-align: left;
	}
	.ys-xref tbody td::before { content: attr(data-label); font-size: 12.5px; color: var(--ys-ink-3); }
	.ys-xref tbody td:last-child { background: transparent; padding-top: 10px; }
	.ys-xref tbody td.is-off { display: none; }
}

/* Filters */
.ys-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ys-filter__item {
	padding: 8px 16px; border: 1px solid var(--ys-line); border-radius: 999px;
	font-size: 14px; color: var(--ys-ink-2); background: #fff;
}
.ys-filter__item:hover { border-color: var(--ys-blue); color: var(--ys-blue); }
.ys-filter__item.is-active { background: var(--ys-blue); border-color: var(--ys-blue); color: #fff; }

/* Figures and post navigation */
.ys-figure { margin: 0; }
.ys-figure img { border-radius: var(--ys-radius-lg); background: var(--ys-soft); }
.ys-figure figcaption { font-size: 13px; color: var(--ys-ink-3); margin-top: 8px; }
.ys-postnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ys-line); font-size: 14px; }

/* ==========================================================================
   Articles
   ========================================================================== */

/* Meta line under a title: date · author · reading time. */
.ys-postmeta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 13px; color: var(--ys-ink-3); margin: 0;
}
.ys-postmeta__sep { color: var(--ys-line); }

.ys-terms { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ys-terms li { margin: 0; }
.ys-terms a {
	display: inline-block; padding: 5px 12px; border: 1px solid var(--ys-line);
	border-radius: 999px; background: #fff;
	font-size: 12.5px; color: var(--ys-ink-2);
}
.ys-terms a:hover { border-color: var(--ys-blue); color: var(--ys-blue); }

/* Single article: optional sidebar column. */
.ys-post__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; }
.ys-post__layout.has-aside { grid-template-columns: minmax(0, 1fr) 320px; }
.ys-post { max-width: 760px; }
.ys-post__layout.has-aside .ys-post { max-width: none; }
.ys-post__head { margin-bottom: 28px; }
.ys-post__head .ys-card__cat { display: block; margin-bottom: 10px; }
.ys-post__head h1 { margin: 0 0 14px; }
.ys-post__thumb { margin: 0 0 32px; border-radius: var(--ys-radius-lg); overflow: hidden; }
.ys-post__thumb img { display: block; width: 100%; height: auto; }
.ys-post__foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ys-line); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }

.ys-post__aside { position: sticky; top: calc(var(--ys-header-h, 72px) + 20px); }
.ys-post__aside .widget { border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg); padding: 20px; background: #fff; margin-bottom: 20px; }
.ys-post__aside .widget:last-child { margin-bottom: 0; }
.ys-post__aside .widget-title { font-size: 15px; margin: 0 0 12px; }
.ys-post__aside ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ys-post__aside li + li { margin-top: 8px; }

/* Table of contents, built from the H2/H3 headings in the body. */
.ys-toc {
	background: var(--ys-soft); border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-lg); padding: 20px 24px; margin: 0 0 32px;
}
.ys-toc__title {
	font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ys-ink-3); margin: 0 0 10px;
}
.ys-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: ys-toc; font-size: 14.5px; }
.ys-toc__item { margin-bottom: 6px; }
.ys-toc__item--h3 { padding-left: 20px; font-size: 13.5px; }
.ys-toc__item a { color: var(--ys-ink-2); }
.ys-toc__item a:hover { color: var(--ys-blue); }

/* Share row. */
.ys-share { display: flex; align-items: center; gap: 12px; }
.ys-share__label { font-size: 13px; color: var(--ys-ink-3); }
.ys-share ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ys-share a, .ys-share button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border: 1px solid var(--ys-line); border-radius: 50%;
	background: #fff; color: var(--ys-ink-2); cursor: pointer; padding: 0;
}
.ys-share a:hover, .ys-share button:hover { border-color: var(--ys-blue); color: var(--ys-blue); }
.ys-share svg { width: 15px; height: 15px; }
/* Copy-link feedback (see main.js). The button is a 34px icon circle, so once
   it carries a word it has to widen into a pill. The message changes along with
   the colour, so the state is not carried by colour alone; the aria-live
   announcement reusing the same words is screen-reader text.
   `.ys-share` prefix keeps the hover rule above from painting the confirmation
   back to blue (equal-ish specificity, later source order). */
.ys-share .ys-share__copy.is-copied,
.ys-share .ys-share__copy.is-failed { width: auto; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.ys-share .ys-share__copy.is-copied { border-color: var(--ys-ok); color: var(--ys-ok); }
.ys-share .ys-share__copy.is-failed { border-color: var(--ys-warn); color: var(--ys-warn); }

/* Author box. */
.ys-authorbox {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--ys-soft); border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-lg); padding: 20px 22px; margin-top: 32px;
}
.ys-authorbox__avatar { border-radius: 50%; flex: none; }
.ys-authorbox__name { font-weight: 600; margin: 0 0 4px; }
.ys-authorbox__bio { font-size: 14px; color: var(--ys-ink-2); margin: 0 0 8px; }
.ys-authorbox__link { font-size: 13.5px; }

/* Related articles block. */
.ys-related { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--ys-line); }
.ys-related h2 { font-size: 20px; margin: 0 0 22px; }

/* Author archive header. */
.ys-authorhead { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; }
.ys-authorhead img { border-radius: 50%; flex: none; }
.ys-authorhead h1 { margin: 0 0 6px; }
.ys-authorhead p { margin: 0; color: var(--ys-ink-2); font-size: 14.5px; }
.ys-authorhead__count { font-size: 13px; color: var(--ys-ink-3); }

/* Empty state: used by search, archives with no results. */
.ys-empty {
	border: 1px dashed var(--ys-line); border-radius: var(--ys-radius-lg);
	background: #fff; padding: 40px 32px; text-align: center;
}
.ys-empty h2 { font-size: 19px; margin: 0 0 10px; }
.ys-empty p { color: var(--ys-ink-2); margin: 0 0 22px; }
.ys-empty .ys-searchform { max-width: 460px; margin: 0 auto 24px; }
.ys-empty__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.ys-searchcount { color: var(--ys-ink-3); font-size: 14px; margin: -18px 0 28px; }
.ys-searchcount strong { color: var(--ys-ink); }

/* The search form's input + submit button. `.ys-searchform` itself — the pill,
   its flex and its 8px gap — is styled once in the archive section above. */
.ys-searchform input[type="search"] {
	flex: 1; min-width: 0; padding: 11px 14px;
	border: 1px solid var(--ys-line); border-radius: var(--ys-radius);
	background: #fff; font-size: 15px; color: var(--ys-ink);
}
.ys-searchform input[type="search"]:focus { outline: 2px solid var(--ys-blue); outline-offset: 1px; }

/* ==========================================================================
   Downloads
   ========================================================================== */

.ys-dlgroup + .ys-dlgroup { margin-top: 52px; }
.ys-dlgroup > h2 { font-size: 21px; margin: 0 0 6px; }
.ys-dlgroup__lead { color: var(--ys-ink-2); font-size: 14.5px; margin: 0 0 22px; }

.ys-dllist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ys-dlitem {
	display: flex; align-items: flex-start; gap: 18px;
	background: #fff; border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-lg); padding: 20px 22px;
}
.ys-dlitem__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: none;
	border-radius: 12px; background: var(--ys-soft); color: var(--ys-blue);
}
.ys-dlitem__icon svg { width: 20px; height: 20px; }
.ys-dlitem__body { flex: 1; min-width: 0; }
.ys-dlitem__body h3 { font-size: 16.5px; margin: 0 0 5px; }
.ys-dlitem__meta { font-size: 12.5px; color: var(--ys-ink-3); margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 10px; }
.ys-dlitem__desc { font-size: 14px; color: var(--ys-ink-2); margin: 0; }
.ys-dlitem__action { flex: none; align-self: center; }
.ys-dlitem__action .btn { font-size: 13.5px; padding: 9px 16px; }

.ys-dl__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.ys-dl__facts { border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg); overflow: hidden; }
.ys-dl__facts dl { margin: 0; display: grid; grid-template-columns: 40% 60%; }
.ys-dl__facts dt, .ys-dl__facts dd { margin: 0; padding: 11px 16px; font-size: 14px; border-top: 1px solid var(--ys-line); }
.ys-dl__facts dt:first-of-type, .ys-dl__facts dd:first-of-type { border-top: 0; }
.ys-dl__facts dt { background: var(--ys-soft); color: var(--ys-ink-3); }
.ys-dl__facts dd { color: var(--ys-ink); }

/* Email gate shown in place of a direct download link. */
.ys-gate {
	border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg);
	background: #fff; padding: 26px 24px;
}
.ys-gate h2 { font-size: 18px; margin: 0 0 8px; }
.ys-gate__lead { font-size: 14px; color: var(--ys-ink-2); margin: 0 0 18px; }
.ys-gate__row { display: flex; flex-direction: column; gap: 10px; }
.ys-gate__row input {
	padding: 11px 14px; border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius); font-size: 15px; width: 100%;
}
.ys-gate__note { font-size: 12.5px; color: var(--ys-ink-3); margin: 12px 0 0; }
/* Consent control used by the download gate. The inquiry stylesheet that
   normally styles .ys-consent is not loaded on download pages, so the same
   control is styled here as well. Scoped to .ys-gate so it never overrides
   the inquiry form's own .ys-consent, which is styled by the plugin and needs
   a larger gap above the submit button. */
.ys-gate .ys-consent { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 12.5px; color: var(--ys-ink-3); line-height: 1.5; }
.ys-gate .ys-consent input { margin-top: 3px; flex: none; }
.ys-gate .ys-consent a { color: var(--ys-blue); }
.ys-gate .ys-consent em { color: var(--ys-red); font-style: normal; }
.ys-gate__result { margin-top: 14px; font-size: 14px; }
.ys-gate__result a { font-weight: 600; }
.ys-gate__result p { margin: 0 0 12px; }

/* A stack of cards in a document's sidebar. */
.ys-dl__aside > * + * { margin-top: 20px; }

/* Facts table nested inside a card already has a border around it. */
.ys-gate .ys-dl__facts { border: 0; }

.ys-related__heading { font-size: 20px; margin: 40px 0 18px; }
.ys-content--after-figure { margin-top: 32px; }

/* Shown when a certificate is past its valid-until date. Quiet, not alarming:
   an expired document is often still the correct historical evidence. */
.ys-cert__flag {
	display: inline-block; font-size: 13px; margin: 0 0 14px;
	background: #fff6e8; border: 1px solid #f0d9b5; color: #8a4b00;
	border-radius: var(--ys-radius); padding: 8px 12px;
}

/* ==========================================================================
   Certificates
   ========================================================================== */

.ys-certgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ys-cert {
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg);
}
.ys-cert__media { display: block; background: var(--ys-soft); }
.ys-cert__media img, .ys-cert__media .ys-placeholder { display: block; width: 100%; border-radius: 0; }
.ys-cert__body { padding: 18px; flex: 1; }
.ys-cert__body h2 { font-size: 16.5px; margin: 0 0 10px; }
.ys-cert__body h2 a { color: inherit; }
.ys-cert__meta { margin: 0; font-size: 13px; }
.ys-cert__meta div { display: flex; gap: 8px; margin-bottom: 5px; }
.ys-cert__meta dt { color: var(--ys-ink-3); flex: none; min-width: 82px; margin: 0; }
.ys-cert__meta dd { margin: 0; color: var(--ys-ink-2); }
.ys-cert__view { display: block; margin-top: 30px; border-radius: var(--ys-radius-lg); overflow: hidden; border: 1px solid var(--ys-line); background: var(--ys-soft); }
.ys-cert__view img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Legal pages
   ========================================================================== */

.ys-legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.ys-legal__nav { position: sticky; top: calc(var(--ys-header-h, 72px) + 20px); }
.ys-legal__nav h2 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ys-ink-3); margin: 0 0 12px; }
.ys-legal__nav ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ys-legal__nav li + li { margin-top: 8px; }
.ys-legal__nav a { color: var(--ys-ink-2); }
.ys-legal__nav a:hover, .ys-legal__nav a[aria-current="page"] { color: var(--ys-blue); }
.ys-legal__body { max-width: 760px; }
.ys-legal__updated { font-size: 13px; color: var(--ys-ink-3); margin: 0 0 26px; }

/* ==========================================================================
   HTML sitemap
   ========================================================================== */

.ys-sitemap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.ys-sitemap__group h2 { font-size: 17px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ys-line); }
.ys-sitemap__group ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ys-sitemap__group li { margin-bottom: 8px; color: var(--ys-ink-2); }
.ys-sitemap__group a { color: var(--ys-ink-2); }
.ys-sitemap__group a:hover { color: var(--ys-blue); }
.ys-sitemap__count { color: var(--ys-ink-3); font-size: 12.5px; }

.ys-empty__popular { margin: 26px 0 0; font-size: 14px; color: var(--ys-ink-2); }
.ys-empty__popular strong { color: var(--ys-ink); }
.ys-empty__popular a { color: var(--ys-blue); }

/* Honeypot field, shared with the inquiry form. The plugin stylesheet carries
   the same rule, but the download gate renders on pages where that stylesheet
   is not loaded — without this the field would be visible there. */
.ys-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   FAQ accordion — product page ("+" / "–" marker, tight stack)
   ========================================================================== */

/* A second, different `.ys-faq` further down styles the question *archive*
   (chevron marker, roomy stack). Both used the same plain class selectors, so
   the later block won and this one never reached the product page. The product
   block is rendered inside <section id="ys-faq"> (see yansyn_product_faq_block),
   which is unique to that page, so it is scoped by that id: id + class beats the
   archive rules and the two accordions can no longer overwrite each other. The
   properties the archive block also declares are reset explicitly here,
   otherwise its chevron (width/height/border/transform) leaks into the "+"
   marker. */
#ys-faq .ys-faq { display: grid; gap: 10px; max-width: 860px; }
#ys-faq .ys-faq__item {
	background: #fff; border: 1px solid var(--ys-line); border-color: var(--ys-line);
	border-radius: var(--ys-radius-lg); overflow: hidden; margin-bottom: 0; box-shadow: none;
}
#ys-faq .ys-faq__item summary {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
	padding: 16px 20px; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none;
}
#ys-faq .ys-faq__item summary::-webkit-details-marker { display: none; }
#ys-faq .ys-faq__item summary::after {
	content: "+"; flex: none; width: auto; height: auto; border: 0;
	transform: none; transition: none;
	font-weight: 400; font-size: 20px; line-height: 1; color: var(--ys-blue);
}
#ys-faq .ys-faq__item[open] { border-color: var(--ys-line); box-shadow: none; }
#ys-faq .ys-faq__item[open] summary { border-bottom: 1px solid var(--ys-line); }
#ys-faq .ys-faq__item[open] summary::after { content: "–"; transform: none; }
#ys-faq .ys-faq__answer { padding: 16px 20px; font-size: 15px; color: var(--ys-ink-2); }
#ys-faq .ys-faq__answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Comments
   ========================================================================== */

.ys-comments { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--ys-line); }
.ys-comments__title { font-size: 20px; margin: 0 0 24px; }
.ys-comments__list { list-style: none; margin: 0 0 32px; padding: 0; }
.ys-comments__list ol.children { list-style: none; margin: 16px 0 0 44px; padding: 0; }
.ys-comments__list li.comment { margin-bottom: 20px; }
.ys-comments__list .comment-body {
	background: #fff; border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-lg); padding: 18px 20px;
}
.ys-comments__list .comment-meta { font-size: 13px; color: var(--ys-ink-3); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.ys-comments__list .comment-author img { border-radius: 50%; margin-right: 8px; }
.ys-comments__list .comment-author .fn { font-style: normal; font-weight: 600; color: var(--ys-ink); }
.ys-comments__list .comment-content p:last-child { margin-bottom: 0; }
.ys-comments__list .reply { margin-top: 10px; font-size: 13.5px; }
.ys-comments__closed { color: var(--ys-ink-3); }
.ys-comments .comment-form { max-width: 640px; }
.ys-comments .comment-form p { margin: 0 0 16px; }
.ys-comments .comment-form label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--ys-ink-2); }
.ys-comments .comment-form input[type="text"],
.ys-comments .comment-form input[type="email"],
.ys-comments .comment-form input[type="url"],
.ys-comments .comment-form textarea {
	width: 100%; padding: 11px 14px; border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius); font-size: 15px; font-family: inherit;
}
.ys-comments .comment-form textarea { min-height: 140px; resize: vertical; }
.ys-comments .comment-form .form-submit { margin-bottom: 0; }

@media (max-width: 1023px) {
	.ys-post__layout.has-aside { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.ys-post__aside { position: static; }
	.ys-dl__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ys-legal { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ys-legal__nav { position: static; }
	.ys-certgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ys-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ys-content { font-size: 16px; }
	.ys-content h2 { font-size: 21px; }
	.ys-content h3 { font-size: 18px; }
	.ys-dlitem { flex-wrap: wrap; gap: 14px; }
	.ys-dlitem__action { width: 100%; }
	.ys-dlitem__action .btn { width: 100%; text-align: center; }
	.ys-certgrid, .ys-sitemap { grid-template-columns: minmax(0, 1fr); }
	.ys-post__foot { flex-direction: column; align-items: flex-start; }
}

/* Customer cases: archive cards */
.ys-case-card { padding: 0; overflow: hidden; }
.ys-case-card > img, .ys-case-card .ys-placeholder { border-radius: 0; display: block; width: 100%; }
.ys-case-card__body { display: block; padding: 16px 18px 18px; }
.ys-case-card__tag {
	display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; color: var(--ys-blue); margin-bottom: 8px;
}
.ys-case-card h3 { margin: 0 0 6px; font-size: 17px; }
.ys-case-card p { font-size: 13.5px; color: var(--ys-ink-3); margin: 0; }

/* Customer case detail */
.ys-case__hero { background: var(--ys-soft); border-bottom: 1px solid var(--ys-line); padding: 36px 0 44px; }
.ys-case__hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.ys-case__intro .ys-eyebrow { margin-bottom: 10px; }
.ys-case__intro h1 { margin-bottom: 14px; }
.ys-case__lead { font-size: 17px; line-height: 1.6; color: var(--ys-ink-2); margin: 0 0 22px; max-width: 62ch; }
.ys-case__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.ys-case__chips li {
	display: inline-flex; align-items: center; gap: 7px;
	background: #fff; border: 1px solid var(--ys-line); border-radius: 999px;
	padding: 6px 14px; font-size: 13.5px; color: var(--ys-ink-2);
}
.ys-case__chips svg { width: 15px; height: 15px; flex: none; color: var(--ys-blue); }
.ys-case__media { border-radius: var(--ys-radius-lg); overflow: hidden; box-shadow: var(--ys-shadow-2); }
.ys-case__media img { display: block; width: 100%; height: auto; }

.ys-case__body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, .85fr); gap: 48px; align-items: start; }
.ys-case__points { margin: 0 0 34px; padding: 20px 22px; background: var(--ys-soft); border-radius: var(--ys-radius-lg); }
.ys-case__block { margin-bottom: 30px; }
.ys-case__block h2 { font-size: 20px; margin: 0 0 12px; }
.ys-case__block h2::after { content: ""; display: block; width: 38px; height: 3px; margin-top: 10px; background: var(--ys-red); border-radius: 2px; }
.ys-case__block p { font-size: 16px; line-height: 1.7; color: var(--ys-ink-2); margin: 0 0 12px; }
.ys-case__quote { margin: 34px 0 0; padding: 22px 26px; border-left: 3px solid var(--ys-blue); background: var(--ys-soft); border-radius: 0 var(--ys-radius-lg) var(--ys-radius-lg) 0; }
.ys-case__quote p { font-size: 17px; font-style: italic; color: var(--ys-ink); margin: 0 0 8px; }
.ys-case__quote cite { font-size: 13.5px; color: var(--ys-ink-3); font-style: normal; }
.ys-case__aside { position: sticky; top: calc(var(--ys-header-h) + 20px); display: grid; gap: 18px; }
.ys-case__card { background: #fff; border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg); padding: 24px; box-shadow: 0 1px 3px rgba(15, 22, 33, .06); }
.ys-case__card--soft { background: var(--ys-soft); box-shadow: none; }
.ys-case__card-title { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--ys-ink-3); margin: 0 0 16px; }
.ys-case__dl { margin: 0 0 20px; }
.ys-case__dl dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ys-ink-3); margin-top: 14px; }
.ys-case__dl dt:first-child { margin-top: 0; }
.ys-case__dl dd { margin: 4px 0 0; font-size: 15px; color: var(--ys-ink); }
.ys-case__cta { width: 100%; justify-content: center; }
.ys-case__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }

/* Order & delivery facts (product page) */
.ys-facts {
	margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0; background: #fff; border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-lg); overflow: hidden;
	box-shadow: var(--ys-shadow-1);
}
.ys-facts__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 15px 22px; border-bottom: 1px solid #eef1f6; }
.ys-facts__row:nth-child(odd) { border-right: 1px solid #eef1f6; }
.ys-facts__row:nth-last-child(-n+2) { border-bottom: 0; }
.ys-facts dt { font-size: 13px; font-weight: 600; color: var(--ys-ink-3); letter-spacing: .01em; }
.ys-facts dd { margin: 0; font-size: 14.5px; color: var(--ys-ink); line-height: 1.5; }

/* FAQ — question archive (chevron marker, one group per category).
   Several declarations below (item overflow, the summary's flex layout and
   typography, the open-state rule line) repeat what this block used to pick up
   from the product accordion above. They were inherited, not chosen — now that
   the product block is id-scoped they would vanish, so they are stated here and
   the archive renders exactly as before. */
.ys-faq { display: grid; gap: 40px; max-width: 880px; }
.ys-faq__group h2 { font-size: 18px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ys-line); }
.ys-faq__item { background: #fff; border: 1px solid var(--ys-line); border-radius: var(--ys-radius); margin-bottom: 8px; overflow: hidden; }
.ys-faq__item[open] { border-color: rgba(8, 80, 151, .28); box-shadow: var(--ys-shadow-1); }
.ys-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.ys-faq__item summary::-webkit-details-marker { display: none; }
.ys-faq__item[open] summary { border-bottom: 1px solid var(--ys-line); }
.ys-faq__q { flex: 1; font-size: 15.5px; font-weight: 500; color: var(--ys-ink); }
.ys-faq__item summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.8px solid var(--ys-ink-3); border-bottom: 1.8px solid var(--ys-ink-3); transform: rotate(45deg); transition: transform .18s var(--ys-ease); }
.ys-faq__item[open] summary::after { transform: rotate(-135deg); }
.ys-faq__a { padding: 0 18px 16px; color: var(--ys-ink-2); }
.ys-faq__a p { margin: 0 0 10px; }
.ys-faq__more { margin: 0; font-size: 13.5px; }

.ys-faq-single { max-width: 820px; }
.ys-faq-single__answer {
	background: var(--ys-soft); border-left: 3px solid var(--ys-blue);
	border-radius: 0 var(--ys-radius) var(--ys-radius) 0;
	padding: 20px 24px; margin: 0 0 28px; font-size: 16px; color: var(--ys-ink);
}
.ys-faq-single__answer p:last-child { margin-bottom: 0; }
.ys-faq-single__cta { margin: 32px 0 0; }
.ys-faq-single__related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ys-line); }
.ys-faq-single__related h2 { font-size: 17px; }

/* Cloudflare Turnstile, when switched on */
.ys-form__turnstile { margin: 4px 0 14px; }

@media (max-width: 767px) {
	.ys-facts { grid-template-columns: 1fr; }
	.ys-facts__row:nth-child(odd) { border-right: 0; }
	.ys-facts__row:nth-last-child(-n+2) { border-bottom: 1px solid #eef1f6; }
	.ys-facts__row:last-child { border-bottom: 0; }
	.ys-facts__row { grid-template-columns: 1fr; gap: 3px; }
}

/* Contact page. The aside holds a handful of short lines, so a 1fr column left
   it with a lot of dead space — capped, and turned into a card so the remaining
   room reads as intended rather than as an empty gap. */
.ys-contact { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.ys-contact__aside {
	background: var(--ys-soft);
	border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-lg);
	padding: 28px 26px;
	position: sticky;
	top: calc(var(--ys-header-h) + 20px);
}
.ys-contact__aside > :last-child { margin-bottom: 0; }
.ys-contact__aside .ys-contact__list { margin-bottom: 0; }
.ys-contact__aside h2 { font-size: 18px; }
.ys-contact__aside h2:first-child { margin-top: 0; }
/* "Follow us" sits under a rule so the two groups read apart. */
.ys-contact__aside ul + h2 {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--ys-line);
}
.ys-contact__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; }
.ys-contact__list li { display: flex; gap: 12px; align-items: flex-start; }
.ys-contact__list a { display: flex; gap: 12px; color: var(--ys-ink-2); }
.ys-contact__list a:hover { color: var(--ys-blue); }
.ys-contact__list svg { width: 20px; height: 20px; flex: none; color: var(--ys-blue); margin-top: 2px; }
.ys-contact__list span { display: flex; flex-direction: column; font-size: 14.5px; }
.ys-contact__list strong {
	font-size: 11.5px; font-weight: 600; color: var(--ys-ink-3);
	text-transform: uppercase; letter-spacing: .06em;
}
.ys-contact__map { margin-top: 48px; border-radius: var(--ys-radius-lg); overflow: hidden; border: 1px solid var(--ys-line); }
.ys-contact__map iframe { width: 100%; height: 380px; border: 0; display: block; }
.ys-social--light a { border-color: var(--ys-line); color: var(--ys-blue); }
.ys-social--light a:hover { background: var(--ys-blue); border-color: var(--ys-blue); color: #fff; }

/* Page sections (About and other content pages) */
.ys-eyebrow {
	margin: 0 0 10px;
	font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ys-blue);
}
.ys-page__head { margin-bottom: 28px; }
.ys-page__head--center { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.ys-lead {
	margin: 14px 0 0; font-size: 19px; line-height: 1.65; color: var(--ys-ink-2);
}
.ys-lead--center { max-width: 720px; margin-left: auto; margin-right: auto; }

.ys-stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	margin: 40px 0; padding: 28px; border-radius: var(--ys-radius-lg);
	background: var(--ys-ink-900); color: #fff;
}
.ys-stats__item { text-align: center; }
.ys-stats__num {
	display: block; font-size: 30px; font-weight: 800; line-height: 1.1;
	color: #fff;
}
.ys-stats__label { display: block; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.72); }

.ys-features {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0;
}
/* The .ys-feature box (white card, hairline border, radius, 24px padding) is
   declared once, in the cards section above — this block only adds the
   typography used by the "why choose us" layout. A duplicate copy of the box
   rule lived here; it declared the same four values, so it changed nothing
   except hiding the fact that the real rule is elsewhere. */
.ys-feature__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px;
	background: rgba(8, 80, 151, .10); color: var(--ys-blue);
}
.ys-feature__icon svg { width: 22px; height: 22px; }
.ys-feature h3 { margin: 0 0 8px; font-size: 17px; }
.ys-feature p { margin: 0; color: var(--ys-ink-2); font-size: 14.5px; line-height: 1.6; }

/* CTA above the footer. width:100% + max-width keeps it on the same grid as
   .wrap content both at the top level (front page, archives) and when a
   template renders it inside its own .wrap — so it never has to know where it
   sits. Full-bleed never worked here: the card has rounded corners. */
.ys-cta {
	width: 100%;
	max-width: calc(var(--ys-c) - 48px);
	/* Matched to the .ys-section rhythm (88px), and equal top and bottom.
	   The old 84/36 pair made the card sit 36px above the footer while leaving
	   172px above it — and since the card and the footer are both dark, that
	   36px read as the two blocks colliding. */
	margin: 88px auto;
	padding: 52px 44px;
	border-radius: var(--ys-radius-lg);
	background: linear-gradient(135deg, var(--ys-ink-900), var(--ys-blue-900));
	color: #fff;
	box-shadow: var(--ys-shadow-2);
}
/* Narrower than the wrap breakpoint, the card brings its own side gutters. */
@media (max-width: 1328px) {
	.ys-cta { width: auto; margin-left: 24px; margin-right: 24px; }
}
.ys-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.ys-cta__text { max-width: 56ch; }
.ys-cta__text h2 { margin: 0 0 10px; font-size: 24px; color: #fff; }
.ys-cta__text p { margin: 0; color: rgba(255,255,255,.78); }
.ys-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* About template */
.ys-about { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.ys-about__body .ys-content { font-size: 16px; line-height: 1.75; }
.ys-about__card {
	position: sticky; top: 100px;
	padding: 24px; border: 1px solid var(--ys-line); border-radius: var(--ys-radius-lg); background: var(--ys-soft);
}
.ys-about__card h2 { margin: 0 0 14px; font-size: 16px; }
.ys-about__card dl { margin: 0; }
.ys-about__card dl > div { padding: 10px 0; border-top: 1px solid var(--ys-line); }
.ys-about__card dt { font-size: 12.5px; color: var(--ys-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.ys-about__card dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--ys-ink-900); }

/* -------------------------------------------------------------------------
 * Global refinements: accessibility, typography, print
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
}

h1, h2, h3 {
	text-wrap: balance;
}

::selection {
	background: var(--ys-blue);
	color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.ys-card:focus-visible {
	outline: 3px solid var(--ys-blue-400, #4f9bd8);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Skip link: hidden until focused. */
.ys-skip {
	position: absolute;
	left: 12px;
	top: -48px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--ys-blue);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	transition: top 0.2s ease;
}

.ys-skip:focus {
	top: 12px;
	color: #fff;
}

/* Language switcher toggle. */
.ys-lang__current {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: transparent;
	border: 1px solid var(--ys-line);
	border-radius: 999px;
	color: var(--ys-ink);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

/* Caret for the language switcher. It gets a class of its own on purpose: the
   nav dropdown reuses .caret, which carries rotate(45deg), and that inherited
   transform is exactly what turned this triangle into a slanted arrow. */
.ys-lang__caret {
	flex: none;
	width: 6px;
	height: 6px;
	border-right: 1.7px solid currentColor;
	border-bottom: 1.7px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .8;
	transition: transform .18s var(--ys-ease);
}

.ys-lang__current[aria-expanded="true"] .ys-lang__caret {
	transform: translateY(2px) rotate(-135deg);
}

.ys-lang__code {
	display: inline-block;
	min-width: 22px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ys-blue);
}

@media (max-width: 1200px) {
	.ys-lang__current .ys-lang__name {
		display: none;
	}
}
@media (min-width: 1201px) {
	.ys-lang__code {
		display: none;
	}
}

/* Print: hide chrome, reveal content and links. */
@media print {
	.ys-topbar,
	.ys-header,
	.ys-float,
	.ys-cookie,
	.ys-tabbar,
	.ys-chat,
	.ys-cta-band,
	.ys-footer {
		display: none !important;
	}
	a[href]::after {
		content: " (" attr(href) ")";
		color: #555;
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Responsive */
@media (max-width: 1200px) {
	.ys-nav > li > a { padding: 0 10px; font-size: 14.5px; }
}

@media (max-width: 1023px) {
	.ys-topbar { display: none; }
	.ys-nav-primary { display: none; }
	.ys-burger { display: flex; }
	.ys-actions__cta { display: none; }
	.ys-navbar { height: 60px; justify-content: space-between; }
	.ys-logo img, .ys-logo .custom-logo { max-height: 36px; }
	.ys-tabbar { display: block; }
	.ys-float { top: auto; bottom: calc(66px + env(safe-area-inset-bottom, 0px) + 14px); transform: none; flex-direction: column; }
	.ys-section { padding: 56px 0; }
	.ys-hero { padding: 56px 0; }
	/* Card grids: 3/4-up → 2-up on tablets and small laptops. Collapsing
	   straight to one column left every card ~700px wide with a 118px image and
	   the rest of the row empty; the <=640px rule finishes the job on phones. */
	.ys-grid--3, .ys-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Tablet: the families lead card stacks above its grid; industries and
	   process go 4-up → 2-up (the <=640 rule finishes the job on phones). */
	.ys-families-split { grid-template-columns: 1fr; }
	.ys-industries, .ys-process { grid-template-columns: repeat(2, 1fr); }
	.ys-step::after { display: none; }
	.ys-hero--image { padding: 72px 0; min-height: 440px; }
	.ys-why .ys-grid--2 { grid-template-columns: 1fr; }
	.ys-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.ys-main { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
	/*
	 * The bottom tab bar is position:fixed and ~67px tall. .ys-main reserves
	 * room for it — but the footer sits *after* main and had no equivalent
	 * guard, so at the very end of the page its last row (the copyright line)
	 * ended up underneath the bar: measured 51px hidden on a 500px-wide
	 * viewport. Give the footer the same clearance.
	 */
	.ys-footer { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
	.ys-cookie { bottom: calc(66px + env(safe-area-inset-bottom, 0px) + 10px); }
	.ys-product__hero-grid { grid-template-columns: 1fr; gap: 24px; }
	.ys-grid--2 { grid-template-columns: 1fr; }
	.ys-genspec { grid-template-columns: 1fr; }
	.ys-contact { grid-template-columns: 1fr; gap: 28px; }
	.ys-contact__aside { position: static; }
	.ys-about { grid-template-columns: 1fr; gap: 28px; }
	.ys-about__card { position: static; }
	/* Case detail: single column, no sticky side panel. */
	.ys-case__hero-grid, .ys-case__body { grid-template-columns: 1fr; gap: 28px; }
	.ys-case__aside { position: static; }
	/* Why panel: tighter padding once the two columns stack. */
	.ys-why__lead { padding: 26px 24px 28px; }
	.ys-why__lead--image .ys-why__body { padding: 24px; }
	.ys-stats { grid-template-columns: repeat(2, 1fr); }
	.ys-features { grid-template-columns: 1fr; }
	.ys-cta { margin-top: 56px; margin-bottom: 56px; padding: 40px 28px; }
	.ys-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* Safety net: the primary nav — and with it the mega menu — is hidden from
   1023px down, so this only fires if a menu is ever rendered at phone width.
   Without it the fixed 300px promo track forces horizontal overflow. */
@media (max-width: 767px) {
	.ys-mega-in,
	.ys-mega-in.has-promo { grid-template-columns: 1fr; }
	.ys-mega-in.has-promo .mega-promo { display: none; }
}

@media (max-width: 640px) {
	.wrap { padding: 0 18px; }
	/* .wrap gutters shrink on phones, so the CTA card follows. */
	.ys-cta { margin-left: 18px; margin-right: 18px; margin-top: 48px; margin-bottom: 48px; padding: 34px 22px; }
	.ys-cta__text h2 { font-size: 21px; }
	.ys-case__hero { padding: 22px 0 30px; }
	.ys-case__block h2 { font-size: 18px; }
	.ys-footer__cols { grid-template-columns: 1fr; }
	/* Trust bar: two figures per row, dividers only between columns. */
	.ys-badges ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
	.ys-badges li { padding: 0 16px; }
	.ys-badges li:nth-child(odd) { padding-left: 0; border-left: 0; }
	.ys-hero__actions .btn { flex: 1; }
	.ys-hero--image { padding: 64px 0; min-height: 380px; }
	/* Families keep a 2-up rhythm on phones. */
	.ys-families { gap: 14px; }
	.ys-family { padding: 18px 16px; }
	.ys-family h3 { font-size: 15.5px; }
	.ys-family p { font-size: 13.5px; }
	.ys-families__body { padding: 20px; }
	.ys-industries, .ys-process { grid-template-columns: 1fr; }
	/* Phones: the card grids go single column, one card per screen. */
	.ys-grid--3, .ys-grid--4 { grid-template-columns: minmax(0, 1fr); }
}