/* ============================================================
   Video Call With Strangers — design system
   Direction: C-10 Thin Line-Art Minimal · Palette: A-2 Lavender (cool)
   Edges: E2-5 Swiss flat (hairline) · Header: E1-4 Card
   All colour via variables; dark theme is a soft, hue-keeping dark.
   ============================================================ */

:root {
	--font-head: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Noto Sans', 'Segoe UI', system-ui, sans-serif;

	/* light */
	--bg: #F7F5FC;
	--surface: #FFFFFF;
	--surface-2: #F0ECFA;      /* tint for alternating sections (accent strategy 2) */
	--text: #241F3D;
	--muted: #57527A;
	--accent: #6D5BD0;
	--accent-2: #B9AEF0;
	--on-accent: #FFFFFF;
	--line: #DCD5F1;           /* hairline borders */
	--line-strong: #B7ACE4;    /* icon / illustration strokes */
	--link: #5A48BC;           /* body links (split from CTA bg — passes AA on --bg) */
	--accent-text: #5A48BC;    /* accent used as small text (kicker) — readable, unlike CTA bg */
	--focus: #6D5BD0;

	/* spacing scale */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
	--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

	/* type scale (ratio ~1.25) */
	--fs-h1: clamp(2rem, 1.4rem + 3vw, 3rem);
	--fs-h2: clamp(1.4rem, 1.15rem + 1.3vw, 1.9rem);
	--fs-h3: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
	--fs-body: 1.0625rem;
	--fs-small: 0.9rem;

	--r-card: 8px;
	--r-btn: 8px;
	--r-chip: 6px;

	--col: 44rem;               /* readable column, in rem not ch */
	--container: 1180px;
	--pad: clamp(16px, 4vw, 32px);
	--header-h: 76px;
}

[data-theme="dark"] {
	--bg: #15131F;
	--surface: #1C1929;
	--surface-2: #221E33;
	--text: #E9E6F5;
	--muted: #A9A3C4;
	--accent: #6F5DD3;
	--accent-2: #9C8FE8;
	--on-accent: #FFFFFF;
	--line: #35304A;
	--line-strong: #6A5FA0;
	--link: #A99CF0;
	--accent-text: #A99CF0;
	--focus: #9C8FE8;
}

/* ---------- base ---------- */
html { scroll-padding-top: calc(var(--header-h) + 12px); }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
}

h1, h2, h3 { font-family: var(--font-head); line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-weight: 700; }

::selection { background: var(--accent-2); color: #1c1633; }           /* F-8 */
[data-theme="dark"] ::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

.csm-skip {
	position: absolute; left: -9999px; top: 0; z-index: 60;
	background: var(--surface); color: var(--text);
	padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-btn);
}
.csm-skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* ---------- buttons (line-art / swiss flat) ---------- */
.csm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: 44px; padding: 0 var(--sp-5);
	font-family: var(--font-head); font-weight: 600; font-size: 1rem;
	color: var(--on-accent); background: var(--accent); background-image: none;
	border: 1px solid var(--accent); border-radius: var(--r-btn);
	text-decoration: none; cursor: pointer;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.csm-btn:hover { background: color-mix(in srgb, var(--accent) 88%, #000); transform: translateY(-1px); }
.csm-btn:active { transform: translateY(0); }
.csm-btn--lg { min-height: 52px; padding: 0 var(--sp-6); font-size: 1.05rem; }

/* ============================================================
   HEADER — E1-4 Card
   ============================================================ */
.csm-header { position: sticky; top: 0; z-index: 30; padding: var(--sp-3) var(--pad); }
.csm-header__card {
	max-width: var(--container); margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
	background: var(--surface);
	background: color-mix(in srgb, var(--surface) 82%, transparent);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border: 1px solid var(--line); border-radius: 12px;
	padding: 10px var(--sp-4);
	transition: padding .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.csm-header.is-scrolled .csm-header__card {
	padding-block: 6px;
	box-shadow: 0 6px 20px -12px rgba(31, 24, 60, .3);
	border-color: color-mix(in srgb, var(--line) 70%, var(--accent));
}

.csm-logo { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; text-decoration: none; color: var(--text); }
.csm-logo__mark { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--accent); }
.csm-logo__mark svg { width: 30px; height: 30px; }
.csm-logo__live { color: var(--accent-2); }
[data-theme="dark"] .csm-logo__mark { color: var(--accent-2); }
.csm-logo__name {
	font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.csm-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

/* icon-only buttons: fixed size, grid-centred (never svg{max-width:100%}) */
.csm-icon-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
	padding: 0; color: var(--text); background: transparent;
	border: 1px solid transparent; border-radius: var(--r-btn); cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.csm-icon-btn:hover { background: var(--surface-2); border-color: var(--line); }

.csm-toggle__moon { display: none; }
[data-theme="dark"] .csm-toggle__sun { display: none; }
[data-theme="dark"] .csm-toggle__moon { display: block; }

/* desktop language dropdown */
.csm-lang { position: relative; }
.csm-lang__toggle {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	min-height: 40px; padding: 0 var(--sp-3);
	color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: var(--r-btn);
	font-size: .95rem; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.csm-lang__toggle:hover { background: var(--surface-2); }
.csm-lang__chev { transition: transform .2s ease; }
.csm-lang__toggle[aria-expanded="true"] .csm-lang__chev { transform: rotate(180deg); }
.csm-lang__menu {
	position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
	padding: var(--sp-2); box-shadow: 0 14px 34px -18px rgba(31, 24, 60, .4);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.csm-lang.is-open .csm-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.csm-lang__list { list-style: none; margin: 0; padding: 0; }
.csm-lang__list li a,
.csm-lang__menu a {
	display: flex; align-items: center; gap: var(--sp-2);
	padding: 10px var(--sp-3); min-height: 40px; border-radius: 6px;
	color: var(--text); text-decoration: none; font-size: .95rem;
}
.csm-lang__menu a:hover { background: var(--surface-2); }
.csm-lang__menu img { width: 20px; height: auto; border-radius: 3px; }

/* the desktop dropdown hides on mobile — scoped so the in-sheet list stays visible */
.csm-burger { display: none; }

/* ============================================================
   MOBILE SHEET
   ============================================================ */
.csm-sheet { position: fixed; inset: 0; z-index: 50; }
.csm-sheet[hidden] { display: none; }
.csm-sheet__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(20, 16, 34, .48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .22s ease; }
.csm-sheet__panel {
	position: absolute; z-index: 2; top: 0; right: 0; height: 100%; width: min(86vw, 340px);
	background: var(--surface); border-left: 1px solid var(--line);
	padding: var(--sp-5) var(--sp-5) var(--sp-6);
	display: flex; flex-direction: column; gap: var(--sp-3);
	transform: translateX(100%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
	overflow-y: auto;
}
.csm-sheet.is-open .csm-sheet__scrim { opacity: 1; }
.csm-sheet.is-open .csm-sheet__panel { transform: translateX(0); }
.csm-sheet__close { margin-left: auto; }
.csm-sheet__label { font-family: var(--font-head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: var(--sp-2); }
.csm-sheet__langlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.csm-sheet__langlist li a,
.csm-sheet__lang a {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-2); min-height: 46px; border-radius: 6px;
	color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line);
}
.csm-sheet__lang a:hover { background: var(--surface-2); }
.csm-sheet__lang img { width: 22px; height: auto; border-radius: 3px; }
.csm-sheet__links { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.csm-sheet__links a { color: var(--muted); text-decoration: none; font-size: .95rem; padding: var(--sp-2) 0; }
.csm-sheet__links a:hover { color: var(--text); }

/* ============================================================
   MAIN + reading column
   ============================================================ */
.csm-main { max-width: var(--container); margin-inline: auto; padding: var(--sp-7) var(--pad) var(--sp-8); }
.csm-entry { }

/* every direct child shares one centred column; only the gate is exempt */
.csm-entry > :where(*:not(.csm-gate)) { max-width: var(--col); margin-inline: auto; }
.csm-entry > * + * { margin-block-start: var(--sp-5); }

/* explicit re-centre for classed block-elements a reset might blanket margin:0
   (Onyx / Ripple column-break guard — higher specificity than the 0,1,0 rule) */
.csm-entry > .csm-illus-wrap,
.csm-entry > .csm-chips,
.csm-entry > .csm-compare,
.csm-entry > .csm-features,
.csm-entry > .csm-quote { max-width: var(--col); margin-inline: auto; }

.csm-entry h2 { font-size: var(--fs-h2); margin-block: var(--sp-7) 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.csm-entry h2:first-of-type { }
.csm-h1 { font-size: var(--fs-h1); margin-block: 0 var(--sp-2); }
.csm-entry p { margin-block: 0; }
.csm-entry > p + p { margin-block-start: var(--sp-4); }

/* body links (not buttons) */
.csm-entry a:not([class]) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.csm-entry a:not([class]):hover { text-decoration-thickness: 2px; }

/* ============================================================
   AGE GATE — D-6 Boarding Pass
   ============================================================ */
.csm-gate { max-width: 780px; margin: 0 auto var(--sp-7); }
.csm-ticket {
	display: flex; align-items: stretch;
	background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px;
	overflow: hidden;
}
.csm-ticket__main { flex: 1 1 auto; padding: clamp(20px, 4vw, 34px); }
.csm-ticket__kicker { font-family: var(--font-head); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-text); margin: 0 0 var(--sp-3); }
.csm-ticket__q { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.25rem, 1rem + 1.6vw, 1.7rem); line-height: 1.25; margin: 0 0 var(--sp-5); color: var(--text); }
.csm-ticket__fine { font-size: var(--fs-small); color: var(--muted); margin: var(--sp-4) 0 0; max-width: 46ch; }
.csm-gate__go { }

.csm-ticket__stub {
	flex: 0 0 132px; display: grid; place-items: center; position: relative;
	border-left: 2px dashed var(--line-strong); background: var(--surface-2);
}
/* perforation cut-outs */
.csm-ticket__stub::before,
.csm-ticket__stub::after {
	content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--bg); border: 1.5px solid var(--line-strong);
}
.csm-ticket__stub::before { top: -9px; }
.csm-ticket__stub::after { bottom: -9px; }
.csm-ticket__stamp {
	font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--accent);
	border: 2px dashed var(--accent); border-radius: 10px; padding: 10px 14px;
	transform: rotate(-7deg); background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

/* ============================================================
   ILLUSTRATION — H-12 shuffle stack (all colour via classes)
   ============================================================ */
.csm-illus-wrap { margin-block: var(--sp-6); text-align: center; }
.csm-illus { width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.csm-illus__card { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.csm-illus__card--back { fill: var(--surface-2); stroke: var(--line); }
.csm-illus__card--mid { fill: var(--surface); stroke: var(--line); }
.csm-illus__card--front rect { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.csm-illus__fig { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.csm-illus__live { fill: var(--accent-2); stroke: none; }
.csm-illus__cycle { fill: none; stroke: var(--line-strong); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.csm-illus-cap { font-size: var(--fs-small); color: var(--muted); margin-top: var(--sp-3); }

/* ============================================================
   WHO YOU'LL MEET — chip grid (stays inside the column)
   ============================================================ */
.csm-chips { }
.csm-chips__lead { font-weight: 500; color: var(--muted); margin: 0 0 var(--sp-3); }
.csm-chips__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.csm-chips__list li {
	padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
	font-size: .92rem; color: var(--text); background: var(--surface);
	transition: background .15s ease, border-color .15s ease;
}
.csm-chips__list li:hover { background: var(--surface-2); border-color: var(--accent); }

/* ============================================================
   QUOTE CALLOUT
   ============================================================ */
.csm-quote {
	position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-7);
	border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-card);
	background: var(--surface-2);
	font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, 1rem + 0.7vw, 1.35rem);
	line-height: 1.4;
}
.csm-quote::before {
	content: "\201C"; position: absolute; left: 12px; top: 2px;
	font-size: 2.4rem; color: var(--accent-2); font-family: Georgia, serif;
}
.csm-quote p { margin: 0; }

/* ============================================================
   COMPARE — two paired cards
   ============================================================ */
.csm-compare { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.csm-compare__card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); background: var(--surface); }
.csm-compare__card--alt { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.csm-compare__head { font-size: var(--fs-h3); margin: 0 0 var(--sp-3); font-family: var(--font-head); font-weight: 700; }
.csm-compare__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.csm-compare__card li { position: relative; padding-left: var(--sp-5); font-size: .98rem; color: var(--text); }
.csm-compare__card li::before {
	content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px;
	border: 1.5px solid var(--muted);
}
.csm-compare__card--alt li::before { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ============================================================
   FEATURES — line-art icon cards
   ============================================================ */
.csm-features { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.csm-feature { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); background: var(--surface); transition: border-color .15s ease, transform .15s ease; }
.csm-feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.csm-feature svg { color: var(--accent); margin-bottom: var(--sp-3); }
.csm-feature h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); font-family: var(--font-head); font-weight: 700; }
.csm-feature p { margin: 0; font-size: .96rem; color: var(--muted); }

/* ============================================================
   COOKIE + STICKY CTA
   ============================================================ */
.csm-cookie {
	position: fixed; left: 50%; bottom: var(--sp-4); transform: translateX(-50%) translateY(12px);
	z-index: 45; width: min(680px, calc(100vw - 2 * var(--pad)));
	display: flex; align-items: center; gap: var(--sp-4);
	background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
	padding: var(--sp-4); box-shadow: 0 16px 40px -20px rgba(31, 24, 60, .5);
	opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.csm-cookie.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.csm-cookie[hidden] { display: none; }
.csm-cookie__text { margin: 0; font-size: .92rem; color: var(--muted); }
.csm-cookie__text a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.csm-cookie__ok { flex: 0 0 auto; }

.csm-stickycta {
	position: fixed; left: 50%; transform: translateX(-50%) translateY(12px); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
	z-index: 40; display: none; align-items: center; gap: var(--sp-2);
	min-height: 48px; padding: 0 var(--sp-5);
	background: var(--accent); color: var(--on-accent); border-radius: 999px; text-decoration: none;
	font-family: var(--font-head); font-weight: 600; box-shadow: 0 12px 30px -14px rgba(31, 24, 60, .55);
	opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.csm-stickycta[hidden] { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.csm-footer { border-top: 1px solid var(--line); background: var(--surface); }
.csm-footer__inner {
	max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--pad);
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.csm-footer__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.csm-footer__list a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.csm-footer__list a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.csm-footer__copy { margin: 0; color: var(--muted); font-size: .9rem; }

/* ============================================================
   404
   ============================================================ */
.csm-404 { max-width: var(--col); margin: var(--sp-7) auto; text-align: center; padding-inline: var(--pad); }
.csm-404__code { font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 3rem + 8vw, 8rem); line-height: 1; color: var(--accent-2); margin: 0; }
.csm-404__title { font-size: var(--fs-h2); margin: var(--sp-3) 0; }
.csm-404__lead { color: var(--muted); margin: 0 0 var(--sp-5); }

/* ============================================================
   REVEAL — F-18 (scroll-driven, base-visible; no JS, never hides content)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.csm-entry h2,
		.csm-illus-wrap,
		.csm-chips,
		.csm-compare,
		.csm-features,
		.csm-quote {
			animation: csm-reveal linear both;
			animation-timeline: view();
			animation-range: entry 2% cover 20%;
		}
		@keyframes csm-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
	.csm-compare { grid-template-columns: 1fr 1fr; }
	.csm-features { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	/* only the desktop dropdown hides — the in-sheet language list is unaffected */
	.csm-lang--desk { display: none; }
	.csm-burger { display: inline-grid; }
	.csm-stickycta { display: inline-flex; }
	.csm-stickycta.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
	.csm-cookie.is-visible ~ .csm-stickycta.is-visible { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
	.csm-ticket { flex-direction: column-reverse; }
	.csm-ticket__stub { flex-basis: auto; border-left: none; border-top: 2px dashed var(--line-strong); padding: var(--sp-4); }
	.csm-ticket__stub::before { left: -9px; top: auto; bottom: -9px; }
	.csm-ticket__stub::after { left: auto; right: -9px; bottom: -9px; top: auto; }
	.csm-cookie { flex-direction: column; align-items: stretch; text-align: left; }
	.csm-cookie__ok { width: 100%; }
}

@media (max-width: 400px) {
	.csm-logo__name { font-size: .92rem; }
	.csm-header__actions { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; scroll-behavior: auto !important; }
	.csm-cookie, .csm-lang__menu, .csm-sheet__panel, .csm-sheet__scrim { transition: none !important; }
}