/* Polish layer, loaded after main.css (review round 0.9.131). */

/* ---------- Cards: one hover sitewide ----------
   The Bluetooth Audio "Wired performance" photo cards set the feel: a slow, settling lift (700 ms, expo out),
   a soft navy shadow and the media easing forward. Every card now does the same; text cards ease their
   icon forward the way photo cards ease their photo. */
.canvas .card {
	transition: border-color 250ms var(--ease-out), transform 700ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1), background-color 250ms var(--ease-out);
}
/* After a card's entrance has played (main.js adds .settled), hover runs without the entrance stagger. */
.js .canvas .card.reveal.in.settled {
	transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), border-color 250ms var(--ease-out), transform 700ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1), background-color 250ms var(--ease-out);
	transition-delay: 0ms;
}
.canvas .card .ico { transform-origin: 30% 70%; transition: color 250ms var(--ease-out), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.canvas .photo-card .card-badge { transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), color 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.canvas .card:hover { transform: translateY(-3px); border-color: var(--cyan-line); box-shadow: 0 18px 40px -18px rgba(16, 45, 79, 0.35); }
	[data-theme="dark"] .canvas .card:hover { box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 175, 240, 0.12); }
	.canvas .card:hover .ico { transform: scale(1.14); }
	.canvas .photo-card:hover .card-badge { transform: translateY(-3px); }
	/* The How it works steps keep their bigger lift. */
	.canvas .role-how-it-works .card:hover { transform: translateY(-6px); }
}

/* ---------- Tags (.chip) animate on hover ---------- */
.chip { transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.chip:hover { transform: translateY(-2px); border-color: #00aff0; background: rgba(0, 175, 240, 0.08); color: var(--navy, #102d4f); box-shadow: 0 8px 18px -10px rgba(0, 121, 179, 0.55); }
	[data-theme="dark"] .chip:hover { color: #fff; background: rgba(0, 175, 240, 0.14); }
	.island .chip:hover { color: #fff; }
}

/* ---------- Blog categories: a clear hover ---------- */
@media (hover: hover) and (pointer: fine) {
	.filter:hover:not([aria-pressed="true"]):not([aria-current="page"]) {
		border-color: #00aff0; background: rgba(0, 175, 240, 0.1); color: var(--navy, #102d4f); transform: translateY(-1px);
		box-shadow: 0 6px 16px -8px rgba(0, 121, 179, 0.6);
	}
	[data-theme="dark"] .filter:hover:not([aria-pressed="true"]):not([aria-current="page"]) { color: #fff; background: rgba(0, 175, 240, 0.16); }
}
.filter { transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.filter:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
	.canvas .card, .canvas .card .ico, .chip, .filter { transition-duration: 1ms; }
	.canvas .card:hover, .chip:hover, .filter:hover { transform: none !important; }
	.canvas .card:hover .ico { transform: none; }
}

/* ---------- Medical Devices: reliability and compliance (#compliance) ---------- */
.med-rel { display: flex; flex-wrap: wrap; gap: var(--sec-gap) 64px; align-items: flex-start; justify-content: space-between; }
.med-rel-list { flex: 1 1 420px; max-width: 560px; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.med-rel-list li { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.med-rel-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.med-rel-list .ico { flex: none; margin: 2px 0 0; }
.med-rel-list .strong { margin: 0 0 4px; }
.med-rel-list .muted { margin: 0; }
.canvas .med-std-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.med-std-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.med-std-top .ico { margin: 0; }
.med-std-code { padding: 4px 10px; border-radius: 999px; background: rgba(0, 175, 240, 0.1); color: var(--cyan-ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-align: right; }
.med-note { max-width: 860px; font-size: 0.875rem; }

/* ---------- Problem visuals (problem-visuals.js) ---------- */
/* Bluetooth Audio: waveforms drawn like an audio editor, one bar per block of samples. */
.pv-svg .pv-wave { fill: none; stroke: #0a84ff; stroke-width: 1.8; stroke-linecap: round; }
.pv-svg .pv-wave.bad { stroke: #ff6a5f; }
.pv-svg .pv-wave-axis { stroke: rgba(16, 45, 79, 0.12); stroke-width: 1; }
.pv-svg .pv-wave-gap { fill: none; stroke: rgba(16, 45, 79, 0.2); stroke-width: 1.5; stroke-dasharray: 2 3; }
.pv-svg .pv-wave-gap.bad { stroke: #ff6a5f; stroke-opacity: 0.6; }
/* NoxDrivers: packaged chips with pins, a pin-1 dot and etched markings. */
.pv-svg .pv-chippkg { fill: url(#pv-chip); filter: drop-shadow(0 10px 14px rgba(13, 21, 32, 0.28)) drop-shadow(0 2px 3px rgba(13, 21, 32, 0.25)); }
.pv-svg .pv-chipedge { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.pv-svg .pv-chippins rect { fill: url(#pv-pin); }
.pv-svg .pv-chipdot { fill: rgba(255, 255, 255, 0.22); }
.pv-svg .pv-chip-name { fill: #f4f7fb; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; }
.pv-svg .pv-chip-sub { fill: rgba(220, 232, 245, 0.55); font-size: 8.5px; font-weight: 500; letter-spacing: 0.14em; }
.pv-svg .pv-chipglow { fill: none; stroke: #00c2ff; stroke-width: 2; opacity: 0; transition: opacity 300ms ease; }
.pv-svg .pv-chipglow.live { opacity: 0.9; filter: drop-shadow(0 0 8px rgba(0, 194, 255, 0.7)); }

/* ---------- NoxTLS: the product logo beside the key facts ---------- */
.nxt-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 24px clamp(32px, 5vw, 72px); }
.nxt-facts > .grid-stats { flex: 1 1 520px; }
.nxt-logo { flex: none; display: flex; align-items: center; gap: 14px; margin: 0; }
.nxt-logo img { display: block; width: clamp(96px, 10vw, 132px); height: auto; filter: drop-shadow(0 10px 18px rgba(64, 60, 200, 0.25)); }
.nxt-logo figcaption { color: var(--text); font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Blog sidebar: Subscribe in Argenox navy and cyan ---------- */
.ba-card.ba-subscribe { position: relative; overflow: hidden; isolation: isolate; padding: 24px 22px 22px; border-radius: 18px;
	background: radial-gradient(120% 80% at 100% 0%, rgba(0, 175, 240, 0.32), transparent 60%), linear-gradient(160deg, #0b213c 0%, #06111f 90%);
	box-shadow: inset 0 0 0 1px rgba(0, 175, 240, 0.28), 0 24px 44px -28px rgba(5, 11, 20, 0.7); }
.ba-subscribe::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(0, 175, 240, 0.22) 1px, transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(70% 70% at 90% 10%, #000, transparent 75%); }
.ba-subscribe::after { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0a84ff, #00c2ff); }
.blog-aside .ba-subscribe h2 { color: #fff; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
.ba-subscribe p { color: #b8cadb; }
.ba-subscribe .ba-sub-row input { border-color: rgba(159, 220, 255, 0.25); background: rgba(5, 11, 20, 0.55); color: #fff; }
.ba-subscribe .ba-sub-row input::placeholder { color: rgba(184, 202, 219, 0.6); }
.ba-subscribe .ba-sub-row input:focus { border-color: #00c2ff; box-shadow: 0 0 0 4px rgba(0, 194, 255, 0.2); }
.ba-subscribe .ba-sub-row button { background: linear-gradient(135deg, #0a84ff, #00c2ff); box-shadow: 0 8px 18px -8px rgba(0, 175, 240, 0.8); }
@media (hover: hover) and (pointer: fine) { .ba-subscribe .ba-sub-row button:hover { background: linear-gradient(135deg, #0077ee, #00b2ef); } }
.ba-subscribe .ba-sub-msg.ok { color: #7ee2a8 !important; }
.ba-subscribe .ba-sub-msg.err { color: #ff9d94 !important; }

/* ---------- Header: the Company menu opens under its own button, like the others (it was pinned to the
   button's right edge, which pushed it well to the left). JS-free: it still fits at the narrowest desktop width. */
@media (min-width: 1041px) {
	.nav > .nav-item:last-child .nav-menu { left: 0; right: auto; }
}
.canvas .med-rel-list li::before, .med-rel-list li::before { content: none; display: none; }
.canvas .med-rel-list li { padding-left: 0; }

/* Guide and post headings: the argenox.com gradient bar under each H2 (#2452). */
.prose h2::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, #00aff0, #7b61ff); }
.guide-box-sub { margin: 2px 0 8px; color: #6e6e73; font-size: 0.75rem; letter-spacing: 0; text-transform: none; }

/* Home: the Nox stack items carry their main-menu icon (#2453). */
.canvas .stk .mi { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--c, 10, 132, 255), 0.14); color: rgb(var(--c, 10, 132, 255)); }
.canvas .stk .mi svg { width: 20px; height: 20px; }
.canvas .stk-cloud .mi { margin-bottom: 4px; }
.canvas .stk-cloud > .lnk { margin-top: 4px; } /* sits with the text in the middle of the card, not pinned to the bottom */

/* Home "Other teams integrate SDKs" (#2454): heading and text beside a photo. */
.canvas .code-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.canvas .code-photo { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -32px rgba(5, 20, 40, 0.45); }
@media (max-width: 900px) { .canvas .code-head { grid-template-columns: 1fr; } }

/* Card titles with a leading icon (RTLS use cases, #2455). */
.canvas .h-ic { display: flex; align-items: center; gap: 10px; }
.canvas .ico-inline { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--cyan-soft); color: var(--cyan-ink); }
.canvas .ico-inline svg { width: 18px; height: 18px; stroke-width: 2; }

/* Anchored sections land below the fixed header (#2460: footer "Device stack" → /#stack). */
.canvas section[id], .canvas [id].sec { scroll-margin-top: calc(var(--header-h, 73px) + 12px); }

/* Home stack: the application layer as a real layer (#2461). */
.canvas .stk-app-rich { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 14px 18px; text-align: left; }
.canvas .stk-app-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.canvas .stk-app-txt span { color: var(--muted); font-size: 0.875rem; letter-spacing: 0; }
.canvas .stk-app-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.canvas .stk-app-tags i { padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); font-size: 0.75rem; font-style: normal; font-weight: 600; white-space: nowrap; }
@media (max-width: 700px) { .canvas .stk-app-rich { flex-wrap: wrap; } }

/* Home: premium stat cards under "Other teams integrate SDKs" (#2462). */
.canvas .pstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.canvas .pstat { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 28px 28px 26px; border-radius: 22px; background: radial-gradient(120% 90% at 0% 0%, rgba(0, 175, 240, 0.22), transparent 55%), linear-gradient(160deg, #0f2747 0%, #081428 100%); color: #e7eef6; box-shadow: 0 30px 60px -34px rgba(5, 20, 40, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.canvas .pstat::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 65%); mask-image: linear-gradient(200deg, #000, transparent 65%); pointer-events: none; }
.canvas .pstat > * { position: relative; z-index: 1; margin: 0; }
.canvas .pstat-k { color: #5ac8ff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; }
.canvas .pstat-n { display: flex; align-items: baseline; gap: 10px; }
.canvas .pstat-n b { font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; background: linear-gradient(120deg, #ffffff 10%, #8fdcfa 55%, #7b61ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.canvas .pstat-n span { color: #cfe3f5; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.canvas .pstat-l { color: #a9bbd0; }
/* Timeline */
.canvas .pstat-tl { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding: 22px 0 0; list-style: none; }
.canvas .pstat-tl::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.canvas .pstat-tl::after { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #00aff0, #7b61ff); transform: scaleX(0); transform-origin: left; transition: transform 1600ms cubic-bezier(0.23, 1, 0.32, 1) 300ms; }
.canvas .pstats.in .pstat-tl::after, .no-js .pstat-tl::after { transform: scaleX(1); }
.canvas .pstat-tl li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0; color: #a9bbd0; font-size: 0.8125rem; line-height: 1.35; }
.canvas .pstat-tl li::before { content: ""; position: absolute; left: 0; top: -22px; width: 14px; height: 14px; border-radius: 50%; border: 0; background: #0f2747; box-shadow: inset 0 0 0 2px #5ac8ff, 0 0 0 4px rgba(0, 175, 240, 0.15); }
.canvas .pstat-tl li:nth-child(2) { align-items: center; text-align: center; } .canvas .pstat-tl li:nth-child(2)::before { left: calc(50% - 7px); }
.canvas .pstat-tl li:nth-child(3) { align-items: flex-end; text-align: right; } .canvas .pstat-tl li:nth-child(3)::before { left: auto; right: 0; background: #7b61ff; box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.25), 0 0 14px rgba(123, 97, 255, 0.8); }
.canvas .pstat-tl b { color: #fff; font-size: 0.9375rem; }
/* Radio chips */
.canvas .pstat-radios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.canvas .pstat-radios li { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: #cfe3f5; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; opacity: 0.35; transform: translateY(6px); transition: opacity 500ms ease, transform 600ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 500ms ease; transition-delay: calc(300ms + var(--i) * 110ms); }
.canvas .pstat-radios li::before { content: none; }
.canvas .pstats.in .pstat-radios li, .no-js .pstat-radios li { opacity: 1; transform: none; }
.canvas .pstat-radios span { display: grid; place-items: center; color: #5ac8ff; }
.canvas .pstat-radios svg { width: 16px; height: 16px; stroke-width: 2; }
@media (hover: hover) and (pointer: fine) { .canvas .pstat-radios li:hover { box-shadow: inset 0 0 0 1px rgba(90, 200, 255, 0.5), 0 8px 20px -10px rgba(0, 175, 240, 0.7); color: #fff; } }
@media (max-width: 900px) { .canvas .pstats { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .canvas .pstat-radios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .canvas .pstat-tl::after, .canvas .pstat-radios li { transition: none; } }

/* Home stack: the hardware layer as a circuit-board foundation (#2463). */
.canvas .stk-hw-rich { position: relative; overflow: hidden; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 16px 18px; text-align: left;
	background:
		radial-gradient(60% 140% at 0% 0%, rgba(0, 175, 240, 0.28), transparent 60%),
		linear-gradient(135deg, #133a63 0%, #0b2340 55%, #08182e 100%);
	box-shadow: inset 0 1px 0 rgba(90, 200, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 22px 40px -26px rgba(5, 20, 40, 0.8); }
.canvas .stk-hw-rich::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
	background-image:
		linear-gradient(90deg, transparent 0 22px, rgba(201, 150, 70, 0.22) 22px 23.5px, transparent 23.5px),
		linear-gradient(0deg, transparent 0 14px, rgba(201, 150, 70, 0.16) 14px 15.5px, transparent 15.5px),
		radial-gradient(circle at 23px 15px, rgba(230, 180, 90, 0.5) 0 2.4px, transparent 2.6px);
	background-size: 46px 30px, 46px 30px, 46px 30px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); }
.canvas .stk-hw-rich > * { position: relative; z-index: 1; }
.canvas .stk-hw-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #0a84ff, #00c2ff); color: #fff; box-shadow: 0 8px 18px -8px rgba(0, 175, 240, 0.9); }
.canvas .stk-hw-ic svg { width: 20px; height: 20px; stroke-width: 2; }
.canvas .stk-hw-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.canvas .stk-hw-txt strong { color: #8fdcfa; }
.canvas .stk-hw-txt span { color: #c3d3e4; font-size: 0.875rem; letter-spacing: 0; }
.canvas .stk-hw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.canvas .stk-hw-tags i { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #fff; font-size: 0.75rem; font-style: normal; font-weight: 600; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.canvas .stk-hw-tags span { display: grid; place-items: center; color: #5ac8ff; }
.canvas .stk-hw-tags svg { width: 14px; height: 14px; stroke-width: 2; }
@media (max-width: 700px) { .canvas .stk-hw-rich { flex-wrap: wrap; } }

/* Home signal path (#2465): the copy starts near the top of the stage, so the gap above the section is about half. */
.canvas .ax-signal-stage > .ax-flow-copy { align-self: start; padding-top: 20px; }

/* Home proof (#2464): more breathing room around the customer logos. */
.canvas .ax-proof-logos { margin-top: 28px; margin-bottom: 52px; padding: 18px 0; }

/* Home data-to-cloud (#2468): security badges centred on each loop of the path. */
.d2c-badge circle { fill: #ffffff; stroke: rgba(10, 132, 255, 0.35); stroke-width: 1.5; filter: drop-shadow(0 6px 10px rgba(0, 60, 120, 0.18)); }
.d2c-badge path, .d2c-badge rect { fill: none; stroke: #0a84ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Home HLC slide grid: the tag gets its own row (#2469); stacked layouts spread the devices evenly (#2470). */
.hs-art.hs-grid { grid-template-rows: auto repeat(3, clamp(104px, 10.5vw, 158px)); grid-template-areas: "tg tg tg" "hp hp eb" "hp hp ha" "sb sb sp"; aspect-ratio: auto; row-gap: 12px; }
.hs-art.hs-grid .hs-tag { grid-area: tg; position: static; justify-self: end; align-self: end; margin: 0; transform: none; }
@media (max-width: 940px) {
	.hs-art.hs-grid { flex: 1 1 100%; width: 100%; max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto clamp(120px, 19vw, 180px); grid-template-areas: "tg tg tg tg tg" "hp eb ha sb sp"; }
	.hs-art.hs-grid .hs-tag { justify-self: start; }
	.hs-art .hg-sb.cut img { padding: 14% 8% 26%; }
}
@media (max-width: 600px) {
	.hs-art.hs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(2, clamp(96px, 28vw, 140px)); grid-template-areas: "tg tg tg" "hp eb ha" "sb sb sp"; gap: 8px; }
}

/* Hero buttons carry a right chevron that nudges on hover (#2471): inner-page heroes and the home slider. */
.hero-actions .btn::after, .hs-slide .btn::after {
	content: ""; flex: none; width: 15px; height: 15px; margin-right: -4px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms var(--ease-out);
}
.hero-actions .btn, .hs-slide .btn { gap: 8px; }
@media (hover: hover) and (pointer: fine) { .hero-actions .btn:hover::after, .hs-slide .btn:hover::after { transform: translateX(3px); } }

/* ---------- Review round: Nov 10 (#2473–#2486) ---------- */
/* Bluetooth and BLE Design: heading on one line on wide screens (#2473). */
@media (min-width: 1100px) { .canvas .h2-oneline { white-space: nowrap; } }

/* Bluetooth and BLE Design: two cards beside a factory/audio split image (#2474). */
.canvas .ff-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--grid-gap); align-items: stretch; }
.canvas .ff-cards { display: grid; grid-template-rows: 1fr 1fr; gap: var(--grid-gap); }
.canvas .ff-cards .card .img-frame { aspect-ratio: 16 / 7; }
.canvas .ff-split { position: relative; margin: 0; min-height: 420px; border-radius: 22px; overflow: hidden; background: #050b14; box-shadow: 0 40px 70px -40px rgba(5, 20, 40, 0.7); }
.canvas .ff-split img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.canvas .ff-split .ff-a { clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); transform-origin: 50% 50%; transition: transform 900ms var(--ease-out); }
.canvas .ff-split .ff-b { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); object-position: 18% 50%; transition: transform 900ms var(--ease-out); }
.canvas .ff-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgba(0, 194, 255, 0.8)); pointer-events: none; }
.canvas .ff-line line { stroke: url(#ff-grad); stroke-width: 3.5px; vector-effect: non-scaling-stroke; }
.canvas .ff-tag { position: absolute; padding: 6px 12px; border-radius: 999px; background: rgba(5, 12, 24, 0.66); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 0.8125rem; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.canvas .ff-tag-a { left: 18px; top: 18px; } .canvas .ff-tag-b { right: 18px; bottom: 18px; }
@media (hover: hover) and (pointer: fine) { .canvas .ff-split:hover .ff-a { transform: scale(1.03); } .canvas .ff-split:hover .ff-b { transform: scale(1.03); } }
@media (max-width: 900px) { .canvas .ff-layout { grid-template-columns: 1fr; } .canvas .ff-split { min-height: 300px; } }

/* Wireless Product Design: a line from each numbered stop down to its card (#2476). */
.jm-conn { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0.7; }
.js .journey-map .jm-conn { opacity: 0; transition: opacity 500ms ease; }
.js .journey-map.in .jm-conn { opacity: 0.7; transition-delay: var(--d); }

/* Wireless Product Design: four steps with icons and colours (#2478). */
.canvas .steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.canvas .steps4 li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 20px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, var(--surface)), var(--surface) 60%); box-shadow: inset 0 3px 0 var(--c); color: var(--muted); line-height: 1.5; }
.canvas .steps4 li::before { content: none; }
.canvas .s4-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.canvas .s4-ic svg { width: 22px; height: 22px; stroke-width: 2; }
.canvas .s4-n { position: absolute; top: 18px; right: 20px; color: color-mix(in srgb, var(--c) 30%, transparent); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.canvas .steps4 b { color: var(--text); font-size: 1.0625rem; }
@media (max-width: 900px) { .canvas .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .canvas .steps4 { grid-template-columns: 1fr; } }

/* NoxTLS: a coloured icon for each protocol and crypto set (#2480). */
.canvas .nxt-spec-item .spec-ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.canvas .nxt-spec-item .spec-ic svg { width: 19px; height: 19px; stroke-width: 2; }

/* NoxTLS get started: NoxOS beside Zephyr (#2481). */
.canvas .os-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: auto; }
.canvas .noxos-mark { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 10px; background: linear-gradient(135deg, #102d4f, #0b2240); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.canvas .noxos-mark .mi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #0a84ff, #00c2ff); color: #fff; }
.canvas .noxos-mark .mi svg { width: 16px; height: 16px; }
.canvas .noxos-mark b { color: #fff; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.canvas .os-logos .os-logo img { height: 44px; }

/* Buttons in the closing call-to-action sections get the hero chevron too (#2482). */
.closing .btn::after, .cta .btn::after, #cta .btn::after, .cta-row .btn::after {
	content: ""; flex: none; width: 15px; height: 15px; margin-right: -4px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms var(--ease-out);
}
.closing .btn, .cta .btn, #cta .btn, .cta-row .btn { gap: 8px; }
@media (hover: hover) and (pointer: fine) { .closing .btn:hover::after, .cta .btn:hover::after, #cta .btn:hover::after, .cta-row .btn:hover::after { transform: translateX(3px); } }

/* Blog: lighter category chips (#2483). */
.blog-bar .filters { gap: 6px; }
.blog-bar .filter { padding: 5px 12px; font-size: 0.8125rem; line-height: 1.4; }

/* Blog posts: the lead image no longer pushes the text below the fold (#2484). */
.article-figure { max-height: min(30vh, 300px); margin-bottom: 28px; }
.article-figure img { width: 100%; height: min(30vh, 300px); max-height: min(30vh, 300px); object-fit: cover; }

/* Blog posts: previous and next with a centred chevron (#2485). */
.article-nav a { position: relative; justify-content: center; min-height: 92px; }
.article-nav .an-prev { padding-left: 58px; }
.article-nav .an-next { padding-right: 58px; }
.article-nav a::after { content: ""; position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--cyan-soft) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bb5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); transition: transform 220ms var(--ease-out); }
.article-nav .an-prev::after { left: 16px; transform: scaleX(-1); }
.article-nav .an-next::after { right: 16px; }
@media (hover: hover) and (pointer: fine) { .article-nav .an-prev:hover::after { transform: scaleX(-1) translateX(3px); } .article-nav .an-next:hover::after { transform: translateX(3px); } }

/* Footer: top padding halved to match the bottom (#2486). */
.site-footer { padding-top: 40px; }

/* Static chips are labels, not text to select: normal pointer, no I-beam (#2496). */
span.chip, .canvas span.pill { cursor: default; -webkit-user-select: none; user-select: none; }
.field-l { display: inline-flex; align-items: baseline; gap: 3px; }
.field .req { color: #00aff0; font-weight: 700; }

/* Wireless Testing: the cost of failing certification, as a premium image panel (#2489). */
.wt-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.wt-media { position: relative; margin: 0; min-height: 460px; }
.wt-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.wt-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(6, 16, 30, 0.85)), linear-gradient(0deg, rgba(6, 16, 30, 0.55), transparent 45%); }
.wt-tag { position: absolute; left: 20px; bottom: 20px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(6, 16, 30, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.wt-dot { width: 7px; height: 7px; border-radius: 50%; background: #20c997; box-shadow: 0 0 10px #20c997; }
.wt-copy { display: flex; flex-direction: column; gap: var(--sp-3, 16px); padding: clamp(28px, 4vw, 56px); }
.wt-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.wt-path { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.wt-path.is-bad { box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.35); background: linear-gradient(160deg, rgba(255, 107, 107, 0.1), rgba(255, 107, 107, 0.02)); }
.wt-path.is-good { box-shadow: inset 0 0 0 1px rgba(32, 201, 151, 0.4); background: linear-gradient(160deg, rgba(32, 201, 151, 0.12), rgba(32, 201, 151, 0.02)); }
.wt-k { margin: 0 0 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.is-bad .wt-k { color: #ff8f8f; }
.is-good .wt-k { color: #5ee6b8; }
.canvas .wt-path ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: wt; }
.canvas .wt-path li { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; color: #dbe6f2; font-size: 0.9375rem; line-height: 1.35; }
.canvas .wt-path li::before { content: counter(wt); counter-increment: wt; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; color: #06101e; background: #ff8f8f; position: static; transform: none; }
.canvas .is-good li::before { background: #5ee6b8; }
.canvas .is-bad li:last-child { color: #ffb3b3; font-weight: 600; }
.canvas .is-good li:last-child { color: #8ff2cf; font-weight: 600; }
@media (max-width: 980px) {
	.wt-panel { grid-template-columns: 1fr; }
	.wt-media { min-height: 280px; }
	.wt-media::after { background: linear-gradient(0deg, rgba(6, 16, 30, 0.7), transparent 50%); }
}
@media (max-width: 560px) { .wt-paths { grid-template-columns: 1fr; } }

/* Section heading with an icon tile to its left (#2503). */
.canvas .h2-ic { display: flex; align-items: center; gap: 18px; }
.h2-tile { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #14b8a6, #22d3ee); box-shadow: 0 14px 28px -12px rgba(20, 184, 166, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.25); color: #fff; }
.h2-tile svg { width: 28px; height: 28px; color: #fff; stroke: currentColor; }
@media (max-width: 600px) { .canvas .h2-ic { gap: 12px; } .h2-tile { width: 44px; height: 44px; border-radius: 13px; } .h2-tile svg { width: 22px; height: 22px; } }

/* About: the speaker plays sound from both sides and radiates wireless from the top (#2509). */
.spk-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spk-fx path { fill: none; stroke-width: 4; stroke-linecap: round; opacity: 0; }
.spk-snd path { stroke: #0a84ff; stroke-width: 5; filter: drop-shadow(0 0 8px rgba(10, 132, 255, 0.9)); animation: spk-wave 1.8s ease-out infinite; }
.spk-snd.r path { transform: translateX(-8px); }
.spk-snd.l path { transform: translateX(8px); }
.spk-snd path:nth-child(2) { animation-delay: 0.3s; }
.spk-snd path:nth-child(3) { animation-delay: 0.6s; }
@keyframes spk-wave { 0% { opacity: 0; } 25% { opacity: 0.95; } 100% { opacity: 0; transform: none; } }
.spk-rf path { stroke: #20c997; filter: drop-shadow(0 0 6px rgba(32, 201, 151, 0.8)); animation: spk-rf 2.4s ease-in-out infinite; }
.spk-rf path:nth-child(2) { animation-delay: 0.25s; }
.spk-rf path:nth-child(3) { animation-delay: 0.5s; }
.spk-rf circle { fill: #20c997; filter: drop-shadow(0 0 6px rgba(32, 201, 151, 0.9)); animation: spk-dot 2.4s ease-in-out infinite; }
@keyframes spk-rf { 0%, 15% { opacity: 0; } 35%, 60% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes spk-dot { 0%, 100% { opacity: 0.5; } 30%, 60% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spk-fx path { animation: none; opacity: 0.7; } }
/* About milestones: an icon on each card (#2510). */
.canvas .ms-card .ico { width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: rgba(0, 175, 240, 0.1); box-shadow: inset 0 0 0 1px rgba(0, 175, 240, 0.25); }
.canvas .ms-card .ico svg { width: 22px; height: 22px; }

/* Sensing: the pipeline diagram above the four stage cards (#2504). */
.pipe-diag { margin: 0 auto; width: 100%; padding: 18px 0 6px; border-radius: 24px; background: radial-gradient(60% 120% at 50% 0%, rgba(0, 175, 240, 0.12), transparent 70%), linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pipe-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.pipe-box { fill: rgba(8, 18, 34, 0.75); stroke: var(--c); stroke-opacity: 0.55; stroke-width: 1.5; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)); }
.pipe-k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
.pipe-l { fill: #c9d6e4; font-size: 13px; font-weight: 600; }
.pipe-conn { stroke: url(#pl); stroke-width: 2; stroke-dasharray: 3 6; opacity: 0.7; animation: pipe-dash 1s linear infinite; }
@keyframes pipe-dash { to { stroke-dashoffset: -18; } }
.pipe-pkt { fill: #fff; filter: drop-shadow(0 0 6px rgba(0, 194, 255, 0.95)); }
.pipe-raw { fill: none; stroke: #00c2ff; stroke-width: 1.6; stroke-linejoin: round; opacity: 0.9; }
.pipe-scroll { animation: pipe-scroll 4s linear infinite; }
@keyframes pipe-scroll { to { transform: translateX(-240px); } }
.pipe-chip rect { fill: rgba(139, 92, 246, 0.16); stroke: #8b5cf6; stroke-width: 1.5; }
.pipe-chip path { stroke: #8b5cf6; stroke-width: 2; stroke-linecap: round; }
.pipe-nn { fill: #c4b5fd; animation: pipe-nn 1.6s ease-in-out infinite; }
.pipe-nn:nth-of-type(2n) { animation-delay: 0.4s; }
.pipe-nn:nth-of-type(3n) { animation-delay: 0.8s; }
@keyframes pipe-nn { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.pipe-nnl { fill: none; stroke: #a78bfa; stroke-width: 0.8; opacity: 0.55; }
.pipe-clean { fill: none; stroke: #c4b5fd; stroke-width: 3.2; filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.8)); }
.pipe-scroll2 { animation: pipe-scroll2 4s linear infinite; }
@keyframes pipe-scroll2 { to { transform: translateX(-120px); } }
.pipe-ant path { stroke: #20c997; stroke-width: 3; stroke-linecap: round; }
.pipe-ant circle { fill: #20c997; filter: drop-shadow(0 0 6px #20c997); }
.pipe-arc { fill: none; stroke: #20c997; stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: pipe-arc 1.8s ease-out infinite; }
.pipe-arc.a2 { animation-delay: 0.3s; }
.pipe-arc.a3 { animation-delay: 0.6s; }
@keyframes pipe-arc { 20% { opacity: 1; } 100% { opacity: 0; } }
.pipe-tag { fill: rgba(32, 201, 151, 0.16); }
.pipe-tt { fill: #6ff0c0; font-size: 10.5px; font-weight: 600; text-anchor: middle; }
.pipe-dev { fill: rgba(255, 176, 32, 0.14); stroke: rgba(255, 176, 32, 0.5); animation: pipe-dev 2.25s ease-in-out infinite; }
@keyframes pipe-dev { 0%, 60%, 100% { fill: rgba(255, 176, 32, 0.14); } 20% { fill: rgba(255, 176, 32, 0.85); } }
.pipe-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.pipe-sec .pipe-cards .card { border-top: 3px solid var(--c); }
.pipe-cards .card:nth-child(1) { --c: #00c2ff; } .pipe-cards .card:nth-child(2) { --c: #8b5cf6; } .pipe-cards .card:nth-child(3) { --c: #20c997; } .pipe-cards .card:nth-child(4) { --c: #ffb020; }
.pipe-cards .card .kick { color: var(--c); }
@media (max-width: 900px) { .pipe-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pipe-diag { overflow-x: auto; } .pipe-svg { min-width: 760px; } }
@media (max-width: 560px) { .pipe-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pipe-svg * { animation: none !important; } }

/* Announcements list (templates/announcements.php, #2511). */
.news-list { padding-block: var(--sec-pad, 72px) clamp(96px, 10vw, 160px); }
.news { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.news-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; align-items: center; gap: 28px; padding: 24px 28px; border-radius: 20px; background: var(--card, #fff); box-shadow: inset 0 0 0 1px var(--border-2, rgba(11, 31, 54, 0.08)), 0 12px 30px -22px rgba(11, 31, 54, 0.35); color: inherit; text-decoration: none; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease; }
@media (hover: hover) and (pointer: fine) { .news-row:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0, 175, 240, 0.5), 0 20px 40px -24px rgba(0, 121, 179, 0.5); } .news-row:hover .news-go { background: #00aff0; color: #fff; transform: translateX(3px); } }
.news-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80px; border-radius: 16px; background: linear-gradient(150deg, #0b2a4a, #06111f); color: #fff; }
.news-date b { font-size: 1.25rem; letter-spacing: -0.02em; }
.news-date span { color: #8fd3ff; font-size: 0.8125rem; font-weight: 600; }
.news-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.news-kick { color: #00aff0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.news-title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.news-excerpt { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.news-thumb img { display: block; width: 168px; height: 105px; border-radius: 12px; object-fit: cover; }
.news-go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-2, rgba(11, 31, 54, 0.12)); color: #00aff0; transition: background 200ms ease, color 200ms ease, transform 200ms ease; }
.news-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.news-empty { padding: 48px; border-radius: 20px; text-align: center; box-shadow: inset 0 0 0 1px var(--border-2, rgba(11, 31, 54, 0.1)); }
@media (max-width: 760px) { .news-row { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px; } .news-date { height: 64px; } .news-thumb, .news-go { display: none; } }

/* RTLS: measured performance, preliminary (pages/solutions--rtls-location.html #performance). */
.perf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.perf-stat { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.perf-stat:first-child { background: linear-gradient(160deg, rgba(0, 175, 240, 0.22), rgba(0, 175, 240, 0.04)); box-shadow: inset 0 0 0 1px rgba(0, 194, 255, 0.45), 0 30px 60px -30px rgba(0, 150, 255, 0.5); }
.canvas .perf-v { margin: 0; color: #fff; font-size: clamp(2.25rem, 3.4vw, 3.25rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.perf-v em { margin-left: 4px; color: #5ac8ff; font-size: 0.45em; font-style: normal; letter-spacing: 0; }
.canvas .perf-k { margin: 6px 0 0; color: #fff; font-weight: 600; }
.canvas .perf-n { margin: 0; color: #9fb3c8; font-size: 0.875rem; line-height: 1.5; }
.perf-next { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--grid-gap); align-items: stretch; }
.perf-next-head { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.perf-cmp { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.canvas .perf-cmp-t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.perf-tag { padding: 3px 8px; border-radius: 999px; background: rgba(255, 196, 107, 0.14); color: #ffc46b; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.perf-bar { display: flex; flex-direction: column; gap: 5px; }
.perf-bar span { color: #9fb3c8; font-size: 0.8125rem; }
.perf-bar i { position: relative; display: block; height: 24px; width: var(--w); min-width: 74px; border-radius: 7px; background: rgba(255, 255, 255, 0.12); }
.perf-bar i.on { background: linear-gradient(90deg, #0a84ff, #00c2ff); box-shadow: 0 0 18px -4px rgba(0, 194, 255, 0.7); }
.perf-bar b { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 0.75rem; font-weight: 700; font-style: normal; white-space: nowrap; }
.canvas .perf-legend { margin: 0; display: flex; align-items: center; gap: 8px; color: #9fb3c8; font-size: 0.75rem; }
.perf-legend span { width: 12px; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); }
.perf-legend span.on { margin-left: 8px; background: #00c2ff; }
.canvas .perf-more { margin: auto 0 0; color: #9fb3c8; font-size: 0.8125rem; line-height: 1.5; }
.canvas .perf-disc { max-width: none; margin: 0; padding: 14px 18px; border-radius: 14px; background: rgba(255, 196, 107, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 196, 107, 0.25); color: #e8d7b8; font-size: 0.8125rem; line-height: 1.55; }
@media (max-width: 1100px) { .perf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .perf-next { grid-template-columns: 1fr 1fr; } .perf-next-head { grid-column: 1 / -1; } }
@media (max-width: 640px) { .perf-stats, .perf-next { grid-template-columns: 1fr; } }
/* Timeline dots are filled (#2515): solid colour along the gradient, with a soft glow. */
.canvas .pstat-tl li::before { z-index: 1; background: #00aff0; box-shadow: 0 0 0 4px rgba(0, 175, 240, 0.22), 0 0 12px rgba(0, 175, 240, 0.7); }
.canvas .pstat-tl li:nth-child(2)::before { background: #3d8bff; box-shadow: 0 0 0 4px rgba(61, 139, 255, 0.22), 0 0 12px rgba(61, 139, 255, 0.7); }
/* WPD journey cards keep their coloured top line on hover (#2518). */
@media (hover: hover) and (pointer: fine) {
	.canvas .journey-card:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: inset 0 3px 0 var(--c), 0 18px 40px -18px color-mix(in srgb, var(--c) 45%, rgba(16, 45, 79, 0.35)); }
	.canvas .role-how-it-works .journey-card:hover { box-shadow: inset 0 3px 0 var(--c), 0 24px 48px -28px color-mix(in srgb, var(--c) 50%, rgba(0, 60, 120, 0.45)); }
}
/* WPD journey: launch ends on a green check (#2517). */
.jm-end path { stroke: #fff; stroke-width: 3.5; stroke-linejoin: round; }
.jm-end .jm-ok { fill: #16a34a; filter: drop-shadow(0 0 8px rgba(22, 163, 74, 0.6)); }
.jm-end text { fill: #16a34a; }
.jm-end .jm-halo { fill: rgba(22, 163, 74, 0.16); }
/* WPD: the finished sensor broadcasts (#2519): rings spread from the device and arcs pulse from its top. */
.final-design { position: relative; }
.dev-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dev-ring circle { fill: none; stroke: #0a84ff; stroke-width: 6; opacity: 0; transform-box: fill-box; transform-origin: center; animation: dev-ring 3.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; filter: drop-shadow(0 0 10px rgba(10, 132, 255, 0.8)); }
.dev-ring circle:nth-child(2) { animation-delay: 1.2s; }
.dev-ring circle:nth-child(3) { animation-delay: 2.4s; }
@keyframes dev-ring { 0% { transform: scale(0.8); opacity: 0.85; } 100% { transform: scale(2.4); opacity: 0; } }
.dev-arcs path { fill: none; stroke: #00aff0; stroke-width: 8; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 12px rgba(0, 175, 240, 0.9)); animation: spk-rf 2.4s ease-in-out infinite; }
.dev-arcs path:nth-child(2) { animation-delay: 0.25s; }
.dev-arcs path:nth-child(3) { animation-delay: 0.5s; }
.dev-arcs circle { fill: #00aff0; filter: drop-shadow(0 0 10px #00aff0); animation: spk-dot 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dev-ring circle, .dev-arcs path { animation: none; opacity: 0.6; } }

/* Blog, post and announcement closing card: half the space below it (#2521). */
.cta.cta-plain { padding-bottom: clamp(32px, 4vw, 52px); }
/* Header menus stay open while the pointer crosses from the label to the panel (#2522): an invisible bridge
   fills the gap, and closing waits a beat so a brief slip outside doesn't make the panel blink. */
@media (hover: hover) and (pointer: fine) {
	.nav-menu::before { content: ""; position: absolute; left: -12px; right: -12px; top: -18px; height: 18px; }
	.nav-menu { transition: opacity 160ms var(--ease-out) 140ms, transform 160ms var(--ease-out) 140ms, visibility 0s linear 300ms; }
	.nav-item:hover .nav-menu, .nav-item.open .nav-menu { transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s; }
}
@media (hover: hover) and (pointer: fine) {
	/* Moving straight to another menu closes the previous one at once, so two panels never overlap. */
	.nav:has(.nav-item:hover) .nav-item:not(:hover):not(.open) .nav-menu { transition: opacity 100ms var(--ease-out), transform 100ms var(--ease-out), visibility 0s linear 100ms; }
}

/* BLE Design: every Bluetooth feature we work with (#2530). Four headline features, then the rest. */
.btf-bigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.btf-big { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 24px; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, rgba(255, 255, 255, 0.08)), 0 30px 60px -36px color-mix(in srgb, var(--c) 60%, transparent); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease; }
@media (hover: hover) and (pointer: fine) { .btf-big:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), 0 36px 70px -34px color-mix(in srgb, var(--c) 80%, transparent); } }
.btf-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.btf-big .btf-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); color: #fff; box-shadow: 0 10px 24px -8px var(--c); }
.btf-big .btf-ic svg { width: 24px; height: 24px; }
.btf-ver { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #c9d6e4; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; vertical-align: 2px; }
.btf-big .btf-ver::before { content: "Bluetooth "; font-weight: 500; color: #8ea3bb; }
.canvas .btf-big h3 { margin: 18px 0 0; color: #fff; font-size: 1.375rem; letter-spacing: -0.01em; }
.canvas .btf-big p { margin: 0; color: #b9c8d8; font-size: 0.9375rem; line-height: 1.5; }
.btf-sms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.btf-sm { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.btf-sm .btf-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(0, 175, 240, 0.12); color: #5ac8ff; }
.btf-sm .btf-ic svg { width: 18px; height: 18px; }
.canvas .btf-n { margin: 0; color: #fff; font-weight: 600; font-size: 0.9375rem; }
.btf-n .btf-ver { margin-left: 6px; padding: 1px 7px; font-size: 0.625rem; }
.canvas .btf-t { margin: 3px 0 0; color: #9fb3c8; font-size: 0.8125rem; line-height: 1.45; }
@media (max-width: 1100px) { .btf-bigs, .btf-sms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .btf-bigs, .btf-sms { grid-template-columns: 1fr; } .btf-big { min-height: 0; } }
/* BLE features section: deep blue with soft colour glows instead of near-black (#2531). */
.canvas .sec.bt-feat { position: relative; overflow: hidden; background:
	radial-gradient(60% 70% at 8% 0%, rgba(0, 175, 240, 0.28), transparent 60%),
	radial-gradient(50% 60% at 95% 15%, rgba(125, 92, 255, 0.26), transparent 60%),
	radial-gradient(60% 60% at 70% 110%, rgba(10, 132, 255, 0.3), transparent 65%),
	linear-gradient(160deg, #0c2a52 0%, #0a2246 45%, #071a38 100%); }
.canvas .sec.bt-feat::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(143, 220, 255, 0.12) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); }
.canvas .sec.bt-feat > .wrap { position: relative; }
.bt-feat .btf-sm { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(143, 220, 255, 0.14); }
.bt-feat .btf-big { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 32%, transparent), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); }
/* Post header: half the space above the kicker and below the meta line (#2532). The top keeps room for the fixed header. */
.page-hero.page-hero--post { padding: calc(var(--header-h, 73px) + clamp(40px, 4vw, 68px)) 0 clamp(36px, 4vw, 56px); }
/* Blog sidebar sign-up: a reason to subscribe (#2536). */
.ba-subscribe .ba-sub-kick { margin: 0 0 6px !important; color: #5ac8ff !important; font-size: 0.6875rem !important; font-weight: 700; letter-spacing: 0.14em; }
.ba-subscribe .ba-sub-list { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.ba-subscribe .ba-sub-list li { position: relative; padding-left: 22px; color: #c9d6e4; font-size: 0.8125rem; line-height: 1.4; }
.ba-subscribe .ba-sub-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 194, 255, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.5 2.2 2.2 4.8-5' fill='none' stroke='%235ac8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ba-subscribe .ba-sub-fine { margin: 8px 0 0 !important; color: rgba(184, 202, 219, 0.7) !important; font-size: 0.75rem !important; }
/* Trademark small print at the end of a post (#2542). */
.prose p.tm-small { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--dim, #6b7a8c); font-size: 0.8125rem; line-height: 1.5; }
/* Quote attribution: set apart from the quote and clearly styled (#2545). */
.prose blockquote cite { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: #0a84ff; font-size: 0.9375rem; font-style: normal; font-weight: 600; letter-spacing: 0.01em; }
.prose blockquote cite::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #00aff0, #0a84ff); }
[data-theme="dark"] .prose blockquote cite { color: #5ac8ff; }

/* Announcement headers (#2546): a deep blue gradient mesh with violet and cyan light, a fine grid and a slow-moving glow,
   instead of the plain dark post header. */
.is-announcement .page-hero--post, .is-announcement .page-hero--post:not(.has-ambient) { background:
	radial-gradient(45% 75% at 88% 10%, rgba(0, 194, 255, 0.42), transparent 62%),
	radial-gradient(40% 70% at 62% 100%, rgba(125, 92, 255, 0.38), transparent 65%),
	radial-gradient(50% 80% at 8% 0%, rgba(10, 132, 255, 0.35), transparent 60%),
	linear-gradient(135deg, #0d2c5c 0%, #0a2250 40%, #10164a 75%, #0a1838 100%); }
.is-announcement .page-hero--post .ph-ambient { display: none; }
.is-announcement .page-hero--post .page-hero-glow { background:
	linear-gradient(rgba(143, 220, 255, 0.07) 1px, transparent 1px) 0 0 / 44px 44px,
	linear-gradient(90deg, rgba(143, 220, 255, 0.07) 1px, transparent 1px) 0 0 / 44px 44px;
	-webkit-mask: radial-gradient(70% 90% at 75% 30%, #000, transparent 75%); mask: radial-gradient(70% 90% at 75% 30%, #000, transparent 75%); }
.is-announcement .page-hero--post .page-hero-glow::after { content: ""; position: absolute; inset: -20%; opacity: 1; background: radial-gradient(30% 40% at 70% 40%, rgba(90, 200, 255, 0.28), transparent 70%); animation: ann-drift 14s ease-in-out infinite alternate; -webkit-mask: none; mask: none; }
@keyframes ann-drift { from { transform: translate(-6%, -4%); } to { transform: translate(8%, 6%); } }
.is-announcement .page-hero--post::after { height: 2px; background: linear-gradient(90deg, transparent, #00c2ff 25%, #7d5cff 75%, transparent); }
.is-announcement .page-hero--post .kicker { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(143, 220, 255, 0.35); }
@media (prefers-reduced-motion: reduce) { .is-announcement .page-hero--post .page-hero-glow::after { animation: none; } }

/* Tables in posts and guides (#2547): a rounded card with a deep blue header, quiet zebra rows, a hover highlight
   and a bold first column. Wide tables scroll inside their card on phones. */
.prose .wp-block-table, .prose figure:has(> table) { margin: 32px 0; overflow-x: auto; border-radius: 16px; background: var(--surface, #fff); box-shadow: 0 0 0 1px var(--border), 0 20px 44px -28px rgba(11, 31, 54, 0.4); -webkit-overflow-scrolling: touch; }
.prose table, .guide-article .prose table { width: 100%; min-width: 480px; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.prose .wp-block-table table { border: 0; }
.prose thead th, .guide-article .prose thead th { padding: 14px 18px; border: 0; background: linear-gradient(135deg, #0d2c5c, #0a1f44); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.prose thead th:first-child { box-shadow: inset 3px 0 0 #00c2ff; }
.prose tbody td, .prose tbody th, .guide-article .prose tbody td { padding: 13px 18px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); color: var(--text); vertical-align: top; transition: background-color 150ms ease; }
.prose tbody tr:nth-child(even) td, .prose tbody tr:nth-child(even) th { background: color-mix(in srgb, #0a84ff 3.5%, transparent); }
.prose tbody tr:last-child td, .prose tbody tr:last-child th { border-bottom: 0; }
.prose tbody td:first-child, .prose tbody th:first-child { color: #0a4f9e; font-weight: 600; white-space: nowrap; }
[data-theme="dark"] .prose tbody td:first-child { color: #5ac8ff; }
@media (hover: hover) and (pointer: fine) { .prose tbody tr:hover td, .prose tbody tr:hover th { background: color-mix(in srgb, #00aff0 9%, transparent); } }
.prose .wp-block-table figcaption, .prose figure:has(> table) figcaption { margin: 0; padding: 10px 18px 12px; border-top: 1px solid var(--border); color: var(--dim, #6b7a8c); font-size: 0.8125rem; text-align: left; }
.prose table:not(.wp-block-table table):not(figure table) { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
/* Older guide tables have no header row in the markup; their first row is the header, so it gets the same look. */
.prose table:not(:has(thead)) tbody tr:first-child > * { padding: 14px 18px; background: linear-gradient(135deg, #0d2c5c, #0a1f44) !important; color: #fff !important; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: bottom; }
.prose table:not(:has(thead)) tbody tr:first-child > *:first-child { box-shadow: inset 3px 0 0 #00c2ff; }
.prose table:not(:has(thead)) tbody tr:nth-child(even) > * { background: transparent; }
.prose table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) > * { background: color-mix(in srgb, #0a84ff 3.5%, transparent); }

/* NetNox highlights (#2548): what the stack does, in four colour-coded tiles with the standards behind each. */
.nn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5, 32px); }
.canvas .nn-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.canvas .nn-facts li { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(150deg, #0d2c5c, #0a1f44); color: #fff; box-shadow: 0 16px 34px -22px rgba(11, 31, 54, 0.7); }
.canvas .nn-facts li::before { content: none; }
.canvas .nn-facts b { color: #fff; font-size: 1.125rem; letter-spacing: -0.01em; }
.nn-facts span { color: #9fd3ff; font-size: 0.8125rem; }
.nn-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.nn-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, var(--surface, #fff)), var(--surface, #fff) 55%); box-shadow: inset 0 3px 0 var(--c), 0 20px 40px -30px color-mix(in srgb, var(--c) 60%, transparent); }
.nn-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); color: #fff; box-shadow: 0 10px 22px -10px var(--c); }
.nn-ic svg { width: 22px; height: 22px; }
.canvas .nn-tile h3 { margin: 6px 0 0; font-size: 1.125rem; }
.canvas .nn-tile .muted { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.canvas .nn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0 !important; padding-top: 6px; }
.nn-chips span { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); color: color-mix(in srgb, var(--c) 75%, #0b1f36); font-size: 0.75rem; font-weight: 600; white-space: nowrap; cursor: default; }
@media (max-width: 1100px) { .nn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nn-tiles { grid-template-columns: 1fr; } }
/* Narrower screens (#2549): when the sidebar drops below the post, Share sits on its own row above the Briefing
   instead of squeezed beside it. */
@media (max-width: 1060px) {
	.blog-aside > .ba-block:has(.ba-social) { order: -1; grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
	.blog-aside > .ba-block:has(.ba-social) h2 { margin: 0; }
}
/* When a lead image overlaps the post header, keep clear space between it and the author line (#2551). */
#main:has(.article-figure) .page-hero.page-hero--post { padding-bottom: calc(40px + clamp(28px, 3vw, 40px)); }
@media (max-width: 1060px) { #main:has(.article-figure) .page-hero.page-hero--post { padding-bottom: calc(40px + 28px); } }
@media (max-width: 720px) { #main:has(.article-figure) .page-hero.page-hero--post { padding-bottom: calc(24px + 24px); } }

/* A card with its own button (Projects, Trago): the button sits at the bottom of the card, left-aligned. */
.canvas .card .card-cta { margin-top: auto; align-self: flex-start; }
.canvas .card:has(.card-cta) { gap: 12px; }

/* Sensor Networks use cases (#2558): four across, two by two on tablets, one column on phones. */
.uc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (max-width: 1100px) { .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uc-grid { grid-template-columns: 1fr; } }
/* Home, "faster and better": the second paragraph reads at the same size as the lead above it (#2559). */
.canvas .faster-top .muted { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; }

/* Journey map pin (main.js journeyPin, #2580): a map pin travels the route, pausing at each stop. */
.jm-pin { pointer-events: none; }
.jm-pin-body path { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 6px 10px rgba(11, 31, 54, 0.35)); transition: fill 300ms ease; }
.jm-pin-body circle { fill: #fff; }
.jm-pin-body { transform-box: fill-box; transform-origin: 50% 100%; }
.jm-pin-rest .jm-pin-body { animation: jm-pin-hop 650ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.jm-pin-shadow { fill: rgba(11, 31, 54, 0.22); }
@keyframes jm-pin-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-7px); } 100% { transform: translateY(0); } }

/* Defense page, #fpga: an FPGA radio's signal chain. A pulse runs the wire and each block lights as it passes. */
.canvas .sec.fpga-sec { position: relative; overflow: hidden; background:
	radial-gradient(45% 60% at 8% 0%, rgba(0, 175, 240, 0.2), transparent 60%),
	radial-gradient(40% 55% at 95% 100%, rgba(255, 179, 64, 0.1), transparent 60%),
	linear-gradient(165deg, #0a1f3d 0%, #071629 55%, #050f1e 100%); }
.canvas .sec.fpga-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(143, 220, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 220, 255, 0.05) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask: radial-gradient(70% 80% at 50% 40%, #000, transparent); mask: radial-gradient(70% 80% at 50% 40%, #000, transparent); }
.fpga-sec > .wrap { position: relative; display: flex; flex-direction: column; gap: var(--sec-gap); }
.fpga-head { display: flex; flex-direction: column; gap: var(--sp-3, 16px); max-width: 780px; }
.fpga-head .h2 { background: linear-gradient(180deg, #fff 30%, #bfe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fpga-chain { --run: 4.2s; position: relative; display: flex; align-items: stretch; gap: 22px; }
.fpga-chain::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; translate: 0 -1px; background: linear-gradient(90deg, rgba(90, 200, 255, 0.15), rgba(90, 200, 255, 0.45), rgba(90, 200, 255, 0.15)); }
.fpga-chain::after { content: ""; position: absolute; top: 50%; left: 4%; width: 90px; height: 4px; translate: 0 -2px; border-radius: 4px; background: linear-gradient(90deg, transparent, #7fdcff, #fff); box-shadow: 0 0 14px 2px rgba(0, 194, 255, 0.8); animation: fc-run var(--run) cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes fc-run { 0% { left: 4%; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(96% - 90px); opacity: 0; } }
.fc-fabric { position: relative; flex: 4 1 0; display: flex; gap: 14px; padding: 34px 14px 14px; border-radius: 20px; border: 1px solid rgba(90, 200, 255, 0.35); background: linear-gradient(160deg, rgba(0, 194, 255, 0.09), rgba(10, 132, 255, 0.03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.fc-fabric::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: radial-gradient(rgba(143, 220, 255, 0.16) 1px, transparent 1px); background-size: 12px 12px; -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); }
.fc-tag { position: absolute; left: 16px; top: 10px; font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #7fdcff; }
.fc-node { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, #0f2440, #0a182c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); animation: fc-lit var(--run) ease-in-out infinite; }
.fc-node b { font-size: 15px; font-weight: 600; color: #fff; }
.fc-node span:not(.fc-k) { font-size: 13px; line-height: 1.4; color: rgba(231, 238, 245, 0.66); }
.fc-k { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #7fdcff; }
.fc-end { flex: 1.15 1 0; align-self: center; }
.fc-end .fc-k { color: #ffcd82; }
.fpga-chain > .fc-node:first-child { animation-delay: calc(var(--run) * 0); }
.fc-fabric .fc-node:nth-of-type(1) { animation-delay: calc(var(--run) * 0.17); }
.fc-fabric .fc-node:nth-of-type(2) { animation-delay: calc(var(--run) * 0.32); }
.fc-fabric .fc-node:nth-of-type(3) { animation-delay: calc(var(--run) * 0.47); }
.fc-fabric .fc-node:nth-of-type(4) { animation-delay: calc(var(--run) * 0.62); }
.fpga-chain > .fc-node:last-child { animation-delay: calc(var(--run) * 0.8); }
@keyframes fc-lit { 0%, 18%, 100% { border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); } 6% { border-color: rgba(127, 220, 255, 0.85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(127, 220, 255, 0.35), 0 0 26px rgba(0, 194, 255, 0.35); } }
.fpga-pts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.fpga-pts > div { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(143, 220, 255, 0.2); }
.fpga-pts .ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #7fdcff; background: rgba(0, 194, 255, 0.12); border: 1px solid rgba(127, 220, 255, 0.25); }
.fpga-pts .ico svg { width: 18px; height: 18px; }
@media (max-width: 1100px) { .fpga-pts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
	.fpga-chain, .fc-fabric { flex-direction: column; }
	.fc-end { align-self: stretch; }
	.fpga-chain::before { left: 28px; right: auto; top: 3%; bottom: 3%; width: 2px; height: auto; translate: -1px 0; background: linear-gradient(180deg, rgba(90, 200, 255, 0.15), rgba(90, 200, 255, 0.45), rgba(90, 200, 255, 0.15)); }
	.fpga-chain::after { left: 28px; top: 3%; width: 4px; height: 70px; translate: -2px 0; background: linear-gradient(180deg, transparent, #7fdcff, #fff); animation-name: fc-run-v; }
	.fpga-chain::before, .fpga-chain::after { z-index: 2; }
	.fc-node { padding-left: 50px; }
	.fc-node::before { content: ""; position: absolute; z-index: 3; left: 23px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #0a182c; border: 1.5px solid rgba(127, 220, 255, 0.8); }
	.fc-fabric { padding: 38px 0 0; border: 0; background: none; box-shadow: none; }
	.fc-fabric::before { display: none; }
	.fc-tag { left: 50px; top: 14px; }
}
@keyframes fc-run-v { 0% { top: 3%; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(97% - 70px); opacity: 0; } }
@media (max-width: 560px) { .fpga-pts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fpga-chain::after, .fc-node { animation: none; } .fpga-chain::after { display: none; } }

/* Defense hero: the Argenox mark and the solution name above the title, so the page says where you are. */
.hero-badge { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; width: fit-content; margin: 0 0 4px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid rgba(127, 220, 255, 0.35); background: linear-gradient(160deg, rgba(14, 40, 70, 0.75), rgba(5, 14, 28, 0.6)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px -12px rgba(0, 0, 0, 0.6); font-size: 0.9rem; letter-spacing: 0.02em; color: rgba(231, 238, 245, 0.85); }
.hero-badge img { width: 22px; height: auto; display: block; }
.hero-badge b { font-weight: 600; color: #fff; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.25); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; }

/* Defense #fpga: an icon tile on each block of the chain. */
.fc-ic { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 10px; color: #7fdcff; background: rgba(0, 194, 255, 0.12); border: 1px solid rgba(127, 220, 255, 0.28); }
.fc-ic svg { width: 18px; height: 18px; }
.fc-end .fc-ic { color: #ffcd82; background: rgba(255, 179, 64, 0.12); border-color: rgba(255, 205, 130, 0.3); }
@media (max-width: 900px) { .fc-ic { position: absolute; left: 50px; top: 16px; margin: 0; } .fc-node { padding-left: 98px; min-height: 66px; } }

/* Sensor networks: the radios, each with its icon and what it is good for. */
.canvas .lk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.canvas .lk-grid li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface, #fff); transition: border-color 200ms var(--ease-out), transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms var(--ease-out); }
.canvas .lk-grid li::before { content: none; }
.canvas .lk-grid li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.canvas .lk-grid b { font-weight: 600; color: var(--text); }
.canvas .lk-grid .muted { font-size: 0.9rem; }
.lk-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #0a84ff; background: linear-gradient(160deg, rgba(0, 175, 240, 0.14), rgba(10, 132, 255, 0.06)); border: 1px solid rgba(0, 175, 240, 0.25); }
.lk-ic svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .canvas .lk-grid li:hover { transform: translateY(-2px); border-color: #00aff0; box-shadow: 0 10px 22px -14px rgba(0, 121, 179, 0.55); } }
@media (max-width: 900px) { .canvas .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .canvas .lk-grid { grid-template-columns: 1fr; } }

/* Homepage hero with a single slide: hide the carousel controls */
[data-hero-slider].is-single .hs-dots,[data-hero-slider].is-single .hs-arrow{display:none}

/* Blog lead post: `a.post` (flex column) outranked `.post-lead` (grid), so the card stacked and its image grew to its natural
   height (700px+). Make it the intended two-column card with a bounded image that fills its half. */
a.post.post-lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.post-lead .post-media { position: relative; aspect-ratio: auto; min-height: 340px; }
.post-lead .post-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
	a.post.post-lead { grid-template-columns: 1fr; }
	.post-lead .post-media { aspect-ratio: 16 / 10; min-height: 0; }
}