/* 2026-08-25 v1.7
 * - Added the compact Dutch and English language switch
 * - Extended the homepage screenshot slider edge-to-edge across the viewport
 * - Replaced the side-card shadow overlay with brightness-only dimming
 * - Preserved the transparency and native shadows of macOS window captures
 * - Exposed and dimmed the neighbouring cards in the horizontal stack
 * - Added the horizontal Swiper screenshot card stack
 *
 * 2026-08-25 v1.1
 * - Added navigation, content pages, download page and responsive call-to-action styling
 *
 * 2026-08-25 v1.0
 * - Added the responsive CAT Recorder marketing-site styling
 */

:root {
	--sky:#bce0f2;
	--sky-light:#e8f5f8;
	--orange:#ee6601;
	--ink:#24323a;
	--muted:#5b6b73;
	--cream:#f8f7f4;
	--line:rgba(36,50,58,.12);
	font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--ink);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--cream); color:var(--ink); margin:0; }
a { color:inherit; }
img { display:block; max-width:100%; }
.site-shell { margin:0 auto; max-width:75rem; padding-left:1.5rem; padding-right:1.5rem; }
.site-header { background:rgba(248,247,244,.94); border-bottom:1px solid var(--line); position:relative; z-index:2; }
.header-inner { align-items:center; display:flex; justify-content:space-between; min-height:4.75rem; }
.brand { align-items:center; display:inline-flex; font-size:1.08rem; font-weight:850; gap:.65rem; letter-spacing:-.035em; text-decoration:none; }
.brand img { border-radius:.68rem; height:2.5rem; object-fit:cover; width:2.5rem; }
.site-nav { align-items:center; display:flex; gap:1.4rem; }
.site-nav a { color:var(--muted); font-size:.86rem; font-weight:800; text-decoration:none; }
.language-switch { align-items:center; display:flex; gap:.3rem; }
.site-nav .language-switch a { font-size:.7rem; letter-spacing:.04em; }
.site-nav .language-switch .is-active { color:var(--ink); text-decoration:underline; text-underline-offset:.22rem; }
.site-nav .nav-download { background:var(--ink); border-radius:999px; color:#fff; padding:.72rem 1rem; }
.platform-label,.requirements span { border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.78rem; font-weight:800; padding:.55rem .78rem; }
.hero { background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 69%,var(--sky) 69%,var(--sky-light) 100%); overflow:hidden; }
.hero-inner { padding-bottom:6rem; padding-top:6.8rem; text-align:center; }
.eyebrow { color:var(--orange); font-size:.76rem; font-weight:850; letter-spacing:.1em; margin:0 0 1.15rem; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(3.6rem,8vw,7rem); letter-spacing:-.075em; line-height:.9; margin:0 auto 1.6rem; max-width:12ch; text-wrap:balance; }
.hero-intro { color:var(--muted); font-size:clamp(1.05rem,2vw,1.22rem); line-height:1.65; margin:0 auto; max-width:42rem; text-wrap:balance; }
.button-row { align-items:center; display:flex; flex-wrap:wrap; gap:1.15rem; }
.hero-buttons { justify-content:center; margin-top:1.8rem; }
.button { align-items:center; border-radius:999px; display:inline-flex; font-size:.9rem; font-weight:850; justify-content:center; min-height:3.2rem; padding:.75rem 1.3rem; text-decoration:none; }
.button-primary { background:var(--orange); color:#fff; }
.button-dark { background:var(--ink); color:#fff; }
.text-link { font-size:.9rem; font-weight:850; text-decoration:none; }
.requirements { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-top:1.65rem; }
.requirements span { background:rgba(255,255,255,.58); }
.cat-showcase.swiper { margin:4.4rem calc(50% - 50vw) 0; max-width:none; overflow:visible; perspective:75rem; position:relative; width:100vw; }
.cat-showcase .swiper-wrapper { align-items:center; }
.cat-showcase .swiper-slide { backface-visibility:hidden; margin:0; transform-style:preserve-3d; width:min(82vw,70rem); }
.cat-showcase-card { align-items:center; aspect-ratio:253/161; display:flex; justify-content:center; transition:filter .62s ease; }
.cat-showcase .swiper-slide:not(.swiper-slide-active) .cat-showcase-card { filter:brightness(.76); }
.cat-showcase-card img { height:100%; object-fit:contain; width:100%; }
.cat-showcase-button { align-items:center; background:var(--ink); border:0; border-radius:999px; color:#fff; cursor:pointer; display:flex; font-size:1.05rem; height:3rem; justify-content:center; padding:0; position:absolute; top:calc(50% - 1.5rem); width:3rem; z-index:20; }
.cat-showcase-prev { left:1.5rem; }
.cat-showcase-next { right:1.5rem; }
.cat-showcase .swiper-button-disabled { cursor:default; opacity:.3; }
.features { padding:7rem 0; }
.features h2 { font-size:clamp(2.25rem,4vw,3.65rem); letter-spacing:-.06em; line-height:.95; margin-bottom:2.7rem; }
.feature-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
.feature-grid article { background:#fff; border-radius:1.1rem; min-height:15rem; padding:1.6rem; }
.feature-grid article > span { color:var(--orange); display:block; font-size:.78rem; font-weight:850; letter-spacing:.09em; margin-bottom:3.4rem; }
.feature-grid h3 { font-size:1.22rem; letter-spacing:-.04em; margin-bottom:.65rem; }
.feature-grid p { color:var(--muted); line-height:1.58; margin-bottom:0; }
.feature-grid article a { display:inline-block; font-size:.85rem; font-weight:800; margin-top:1.25rem; text-decoration:none; }
.content-hero { background:linear-gradient(135deg,var(--cream) 35%,var(--sky-light)); }
.content-hero-inner { padding-bottom:6rem; padding-top:7rem; }
.content-hero h1,.download-hero h1 { font-size:clamp(3.4rem,7vw,6.5rem); margin:0 0 1.7rem; max-width:12ch; }
.content-hero .hero-intro,.download-hero .hero-intro { margin:0; max-width:43rem; text-wrap:initial; }
.content-hero .button-row { margin-top:2rem; }
.content-hero .button-row > span { color:var(--muted); font-size:.8rem; font-weight:800; }
.content-section { padding:6.5rem 0; }
.article-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
.article-grid article { border-top:1px solid var(--line); padding:1.5rem .4rem 0; }
.article-grid article > span { color:var(--orange); display:block; font-size:.78rem; font-weight:850; letter-spacing:.08em; margin-bottom:3rem; }
.article-grid h2 { font-size:clamp(1.55rem,2.3vw,2.1rem); letter-spacing:-.05em; line-height:1.05; }
.article-grid p,.related-grid p,.trust-grid > p { color:var(--muted); line-height:1.65; }
.related-section { background:var(--sky); padding:6.5rem 0; }
.related-grid { align-items:center; display:grid; gap:5rem; grid-template-columns:.8fr 1.2fr; }
.related-grid h2,.faq-section h2,.install-section h2,.trust-section h2,.cta-section h2 { font-size:clamp(2.4rem,5vw,4.3rem); letter-spacing:-.065em; line-height:.95; }
.related-grid figure { background:#fff; border-radius:1.25rem; box-shadow:0 1.5rem 3.5rem rgba(36,50,58,.18); margin:0; overflow:hidden; padding:.5rem; transform:rotate(.8deg); }
.related-grid figure img { border-radius:.85rem; }
.faq-section { padding:6.5rem 0; }
.narrow { max-width:50rem; }
.faq-section details { border-top:1px solid var(--line); }
.faq-section details:last-child { border-bottom:1px solid var(--line); }
.faq-section summary { cursor:pointer; font-size:1.05rem; font-weight:800; list-style:none; padding:1.4rem 2.5rem 1.4rem 0; position:relative; }
.faq-section summary::after { content:'+'; position:absolute; right:.2rem; }
.faq-section details[open] summary::after { content:'−'; }
.faq-section details p { color:var(--muted); line-height:1.6; padding:0 2rem 1.4rem 0; }
.cta-section { background:var(--orange); color:#fff; padding:5rem 0; }
.cta-inner { align-items:center; display:flex; gap:2rem; justify-content:space-between; }
.cta-section .eyebrow { color:#fff; opacity:.76; }
.cta-section h2 { margin:0; max-width:13ch; }
.download-hero { background:linear-gradient(145deg,var(--cream) 45%,var(--sky)); padding:6.5rem 0; }
.download-grid { align-items:center; display:grid; gap:5rem; grid-template-columns:1.25fr .75fr; }
.download-button { margin-top:2rem; }
.download-meta { color:var(--muted); font-size:.78rem; font-weight:750; margin-top:1rem; }
.download-art { margin:0; }
.download-art img { border-radius:25%; filter:drop-shadow(0 2rem 2.2rem rgba(36,50,58,.24)); margin:0 auto; max-width:18rem; }
.install-section { padding:7rem 0; }
.install-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); list-style:none; margin:3rem 0 0; padding:0; }
.install-grid li { background:#fff; border-radius:1.1rem; display:flex; gap:1rem; padding:1.5rem; }
.install-grid li > span { align-items:center; background:var(--sky-light); border-radius:999px; display:flex; flex:0 0 2.4rem; font-weight:850; height:2.4rem; justify-content:center; }
.install-grid h3 { font-size:1.1rem; margin:.45rem 0 .55rem; }
.install-grid p { color:var(--muted); line-height:1.55; margin:0; }
.trust-section { background:var(--sky-light); padding:6rem 0; }
.trust-grid { align-items:end; display:grid; gap:5rem; grid-template-columns:1fr 1fr; }
.trust-grid h2 { margin-bottom:0; }
.site-footer { background:var(--ink); color:#fff; padding:2rem 0; }
.footer-grid { display:grid; gap:3rem; grid-template-columns:1fr 1.3fr; }
.footer-grid > div > p { margin-top:1rem; }
.footer-grid nav { display:grid; gap:.75rem; grid-template-columns:repeat(2,1fr); }
.footer-grid nav a { color:#bed7e3; font-size:.82rem; text-decoration:none; }
.footer-brand img { height:2.25rem; width:2.25rem; }
.site-footer p { color:#bed7e3; font-size:.84rem; margin:0; }

@media (max-width:760px) {
	.site-shell { padding-left:1.1rem; padding-right:1.1rem; }
	.header-inner { min-height:4.25rem; }
	.brand img { height:2.25rem; width:2.25rem; }
	.site-nav { gap:.85rem; }
	.site-nav > a:first-child { display:none; }
	.hero { background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 73%,var(--sky) 73%,var(--sky-light) 100%); }
	.hero-inner { padding-bottom:4rem; padding-top:4.6rem; }
	h1 { font-size:clamp(3.1rem,15vw,4.6rem); }
	.hero-intro { font-size:1.03rem; line-height:1.58; }
	.cat-showcase.swiper { margin-top:3.2rem; }
	.cat-showcase .swiper-slide { width:88vw; }
	.cat-showcase-button { height:2.7rem; top:calc(100% + 1rem); width:2.7rem; }
	.cat-showcase-prev { left:calc(50% - 3rem); }
	.cat-showcase-next { right:calc(50% - 3rem); }
	.hero-inner { padding-bottom:6.2rem; }
	.features { padding:4.5rem 0; }
	.features h2 { margin-bottom:2rem; }
	.feature-grid { grid-template-columns:1fr; }
	.feature-grid article { min-height:0; }
	.feature-grid article > span { margin-bottom:2rem; }
	.content-hero-inner { padding-bottom:4.5rem; padding-top:4.8rem; }
	.content-hero h1,.download-hero h1 { font-size:clamp(3rem,14vw,4.5rem); }
	.article-grid,.install-grid { grid-template-columns:1fr; }
	.content-section,.related-section,.faq-section,.install-section,.trust-section { padding:4.5rem 0; }
	.related-grid,.download-grid,.trust-grid { gap:3rem; grid-template-columns:1fr; }
	.related-grid figure { transform:none; }
	.cta-inner { align-items:flex-start; flex-direction:column; }
	.download-hero { padding:4.5rem 0; }
	.download-art { grid-row:1; }
	.download-art img { max-width:11rem; }
	.footer-grid { grid-template-columns:1fr; }
	.footer-grid nav { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
	html { scroll-behavior:auto; }
	.cat-showcase .swiper-wrapper,.cat-showcase .swiper-slide,.cat-showcase-card { transition-duration:0ms!important; }
}