/* ==========================================================================
   aiployee.io — Direction C "Just Message It"
   The shared stylesheet of every page (privacy, imprint and the 404 add
   legal.css on top). No third-party requests: the font is self-hosted
   (assets/fonts, SIL Open Font License — see OFL.txt).
   ========================================================================== */

/* Plus Jakarta Sans, variable (wght 200–800), split into the two subsets we
   need. The browser only downloads latin-ext when a page uses those
   characters (Czech, Polish …). The latin file is preloaded in <head>. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Design variables
   ========================================================================== */
:root {
  --bg: #F4F0E8;
  --bg-deep: #ECE5D8;
  --surface: #FFFFFF;
  --surface-2: #FBF9F5;
  --ink: #14201B;
  --ink-2: #47534D;
  --ink-3: #5E6863;
  --line: rgba(20, 32, 27, .09);
  --line-2: rgba(20, 32, 27, .17);

  --accent: #C2502A;          /* text-bearing accent (AA with white) */
  --accent-hover: #A8431F;
  --accent-bright: #E0643B;   /* decorative accent */
  --accent-soft: #F8E4D9;
  --accent-ink: #8F3A1B;      /* accent text on light backgrounds */
  --bubble-user: #F0EADF;

  --dark: #14201B;
  --on-dark: #F4F0E8;
  --on-dark-2: #B7C1BB;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-1: 0 1px 2px rgba(20, 32, 27, .04), 0 10px 30px -14px rgba(20, 32, 27, .16);
  --shadow-2: 0 2px 6px rgba(20, 32, 27, .04), 0 34px 70px -28px rgba(20, 32, 27, .28);

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --section: clamp(80px, 11vw, 148px);
  --header-h: 72px;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; overflow-wrap: break-word; text-wrap: balance; }
.stop { margin-left: -0.06em; }  /* tighter "." and "," in display headings (wrapped at build time by the "stops" helper) */
.sent { display: inline-block; }  /* a two-sentence heading breaks between its sentences first */
/* No automatic hyphenation: browsers' dictionaries break display headings ("napiš-te") and split
   Czech words in the wrong place, and real chat bubbles never hyphenate. Lines break between words;
   overflow-wrap only steps in for a word longer than its line. */
p, li { overflow-wrap: break-word; hyphens: manual; text-wrap: pretty; }
a { color: inherit; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--accent-soft); color: var(--ink); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0 0; }
.hero + .section { padding-top: clamp(48px, 6vw, 88px); }

.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 1rem/1.2 var(--font); letter-spacing: -0.005em; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.btn .icon { font-size: 18px; transition: transform .2s var(--ease); }
.btn:hover .icon { transform: translateX(2px); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -12px rgba(194, 80, 42, .8); }
.btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn--ghost { color: var(--ink); border-color: var(--line-2); background: transparent; }
.btn--ghost:hover { background: var(--surface); border-color: var(--line); }
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: #24342D; }
.btn--sm { min-height: 42px; padding: 9px 18px; font-size: .9375rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 240, 232, .86);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.header.is-scrolled { border-bottom-color: var(--line); }
.header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); border-radius: 10px; padding: 4px 2px; }
.brand__word { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.045em; line-height: 1; }
.brand__i { position: relative; display: inline-block; }
.brand__i::after {
  content: ''; position: absolute; left: 50%; top: .05em;
  width: .19em; height: .19em; border-radius: 50%;
  background: var(--accent-bright); transform: translateX(-50%);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  font-size: .9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.nav__link:hover { color: var(--ink); background: rgba(20, 32, 27, .05); }

.header__actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header__cta { max-width: 15rem; }
.header__cta .btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { min-width: 0; }
.nav__link { white-space: nowrap; }

/* Language switcher */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink);
  font: 600 .875rem/1 var(--font); letter-spacing: .02em; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.lang__btn:hover, .lang__btn[aria-expanded="true"] { background: var(--surface); border-color: var(--line); }
.lang__btn .icon { font-size: 16px; }
.lang__btn .icon--chev { font-size: 14px; transition: transform .2s var(--ease); }
.lang__btn[aria-expanded="true"] .icon--chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 6px;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-2); border: 1px solid var(--line);
  z-index: 60;
}
.lang__menu[hidden] { display: none; }
.lang__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px; border-radius: 12px; text-decoration: none; font-size: .9375rem; font-weight: 500; color: var(--ink);
}
.lang__menu a:hover, .lang__menu a:focus-visible { background: var(--bg); outline-offset: -2px; }
.lang__menu a[aria-current="true"] { color: var(--accent-ink); font-weight: 600; }
.lang__abbr { font-size: .75rem; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }

@media (max-width: 1100px) { .nav__link { padding: 8px 10px; } }
@media (max-width: 860px) { .nav { display: none; } .header__actions { margin-left: auto; } }
@media (max-width: 480px) { .header__cta { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; }
@supports (overflow: clip) { .hero { overflow: visible; overflow-x: clip; } }  /* clip sideways only, so the card shadow is never cut */
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
  gap: clamp(40px, 6vw, 88px);
  min-height: min(calc(82svh - var(--header-h)), 680px);
  padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(56px, 6vw, 80px);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: .875rem; font-weight: 500; color: var(--ink-2); box-shadow: 0 1px 2px rgba(20, 32, 27, .04);
}
.eyebrow .avatar { width: 22px; height: 22px; }
@media (max-width: 400px) { .eyebrow { font-size: .8125rem; } }   /* keeps the longer languages (FR) on one line */
.hero h1 {
  margin-top: 28px;
  font-size: clamp(2.6rem, .9rem + 4.1vw, 4.5rem);
  line-height: 1.02; letter-spacing: -0.045em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead { margin-top: 24px; max-width: 34em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__notes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: .9375rem; color: var(--ink-3); }
.hero__notes li { display: inline-flex; align-items: center; gap: 8px; }
.hero__notes .icon { color: var(--accent); font-size: 16px; stroke-width: 2.2; }

.hero__visual { position: relative; justify-self: end; width: 100%; max-width: 460px; }

/* Orb (3D canvas lives in here; CSS gradient is the fallback) */
.orb {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(420px, 92%); aspect-ratio: 1 / 1;
  top: -118px; right: -128px;
}
.orb::before {
  content: ''; position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FCE6D8 0%, #F5AE8A 28%, #E77A50 62%, #D4633B 90%);
  box-shadow: inset -18px -24px 48px rgba(140, 50, 22, .16), inset 10px 12px 30px rgba(255, 240, 228, .45);
  filter: blur(1px);
  transition: opacity .6s ease;
}
.orb::after {
  content: ''; position: absolute; inset: -6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(224, 100, 59, .16) 0%, rgba(224, 100, 59, .07) 38%, rgba(224, 100, 59, 0) 66%);
}
.orb canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s ease; }
.orb.is-webgl::before { opacity: 0; }
.orb.is-webgl canvas { opacity: 1; }
.orb.is-settled::before, .orb.is-settled canvas { transition: none; }

/* Avatar (mini orb) */
.avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FCE2D2 0%, #F09A72 32%, #DC5E34 66%, #B5452A 100%);
  box-shadow: inset -2px -3px 6px rgba(110, 36, 16, .22);
}

/* ==========================================================================
   Chat (hero mock)
   ========================================================================== */
.chat {
  position: relative; z-index: 1;
  background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-2);
  border: 1px solid rgba(20, 32, 27, .06);
  overflow: hidden;
}
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat__head .avatar { width: 38px; height: 38px; }
.chat__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat__name { font-weight: 600; font-size: .9375rem; }
.chat__status { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ink-3); }
.chat__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2F8F62; box-shadow: 0 0 0 3px rgba(47, 143, 98, .15); }
/* Channel label (one per scene, stacked; the active one is visible) */
.chat__channels { margin-left: auto; display: grid; justify-items: end; min-width: 0; }
.chat__channel {
  grid-area: 1 / 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; background: rgba(20, 32, 27, .05);
  font-size: .75rem; font-weight: 600; line-height: 1.2; color: var(--ink-2);
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.chat__channel:not(.is-active) { opacity: 0; visibility: hidden; }
.chat__channel.is-active { transition: opacity .35s ease .1s, visibility 0s; }

/* Scenes share one grid cell: the log is always as tall as the longest scene (no layout shift). */
.chat__log { display: grid; padding: 22px 20px 18px; background: var(--surface-2); }
.scene {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-width: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.scene:not(.is-active) { opacity: 0; visibility: hidden; }
.scene.is-active { transition: opacity .35s ease, visibility 0s; }
.chat__day { align-self: center; font-size: .75rem; font-weight: 500; color: var(--ink-3); padding: 2px 10px; border-radius: 999px; background: rgba(20, 32, 27, .045); margin-bottom: 4px; }

.msg { display: flex; align-items: flex-end; gap: 8px; }
.msg--user { justify-content: flex-end; }
.msg__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 86%; }
.msg--user .msg__body { align-items: flex-end; }
.bubble { padding: 11px 15px; border-radius: 20px; font-size: .9375rem; line-height: 1.45; }
.bubble--user { background: var(--bubble-user); color: var(--ink); border-bottom-right-radius: 6px; }
.bubble--agent { background: var(--accent); color: #fff; border-bottom-left-radius: 6px; }
.msg__meta { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--ink-3); padding: 0 4px; }
.msg__meta .icon { color: #2F8F62; stroke-width: 2.4; font-size: 13px; }
.msg--agent .avatar { margin-bottom: 22px; }
.msg__slot { position: relative; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 36px; }
.chip { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(194, 80, 42, .35); color: var(--accent-ink); font-size: .8125rem; font-weight: 600; background: var(--surface); }

.typing {
  display: none; position: absolute; left: 0; bottom: 22px;
  align-items: center; gap: 4px; padding: 14px 16px; border-radius: 20px; border-bottom-left-radius: 6px;
  background: var(--accent-soft);
}
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); opacity: .45; animation: typing 1.1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }

.chat__composer { display: flex; align-items: center; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.composer__field { flex: 1; min-width: 0; padding: 11px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer__btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-3); }
.composer__btn--send { background: var(--accent); color: #fff; }
.composer__btn .icon { font-size: 18px; }

/* Voice note with its transcript (hero scene 4) */
.bubble--note { display: flex; flex-direction: column; gap: 8px; padding: 9px 14px 11px 9px; }
.note__row { display: flex; align-items: center; gap: 10px; }
.voice__wave--sm { width: 122px; }
.note__row .voice__time { margin-left: auto; padding-left: 4px; }
.note__text { padding-left: 4px; font-size: .875rem; line-height: 1.4; color: var(--ink-2); }

/* Chat animation (only when JS armed it; final state is the default) */
.chat.is-armed [data-step] { opacity: 0; transform: translateY(10px) scale(.98); transform-origin: bottom left; transition: opacity .45s ease, transform .55s var(--ease); }
.chat.is-armed .msg--user[data-step] { transform-origin: bottom right; }
.chat.is-armed [data-step].is-shown { opacity: 1; transform: none; }
.chat.is-armed .typing.is-shown { display: inline-flex; }

/* Rotation control + scene dots under the card. Kept (invisible) without JS so nothing moves when JS starts. */
.chat__nav { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 18px; }
html:not(.js) .chat__nav { visibility: hidden; }
.chat__play {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; margin-right: 4px;
  border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.chat__play:hover { background: var(--surface); color: var(--ink); }
.chat__play .icon { grid-area: 1 / 1; font-size: 14px; stroke-width: 2.4; }
.chat__play .icon--play { fill: currentColor; stroke-width: 1.6; }
.chat__play .icon--play, .chat__play.is-paused .icon--pause { display: none; }
.chat__play.is-paused .icon--play { display: block; }
.chat__tabs { display: flex; align-items: center; }
.chat__tab { display: grid; place-items: center; width: 30px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.chat__tab span { width: 8px; height: 8px; border-radius: 999px; background: rgba(20, 32, 27, .5); transition: width .3s var(--ease), background-color .3s ease; }   /* 3.2:1 on cream (WCAG 1.4.11) */
.chat__tab:hover span { background: rgba(20, 32, 27, .72); }
.chat__tab[aria-selected="true"] span { width: 22px; background: var(--accent); }
.chat__tab:focus-visible { outline-offset: 0; }

/* ==========================================================================
   Section headings
   ========================================================================== */
.head { max-width: 820px; }
.head--center { margin: 0 auto; text-align: center; }
.head--center p { text-wrap: balance; }
.head h2 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); letter-spacing: -0.04em; line-height: 1.05; }
.head p { margin-top: 18px; max-width: 36em; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); color: var(--ink-2); }

/* ==========================================================================
   Ask it anything
   ========================================================================== */
.ask__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.ask-card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 24px;
  background: var(--surface); border-radius: var(--r-lg); border: 1px solid rgba(20, 32, 27, .05); box-shadow: var(--shadow-1);
}
.ask-card h3 { display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); line-height: 1.3; }
.ask-card h3 .badge { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.ask-card h3 .icon { font-size: 15px; }
.ask-card .msg__body { max-width: 90%; }
.ask-card .msg--user .msg__body { max-width: 84%; }
.ask-card .msg--agent .avatar { margin-bottom: 0; width: 24px; height: 24px; }
.ask-card .bubble { font-size: .9375rem; }
/* Inside the cards the agent answers in a soft tint (the hero keeps the strong terracotta bubble). */
.ask-card .bubble--agent { background: #FBEEE7; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(194, 80, 42, .1); }
.ask-card .msg--user { margin-top: 2px; }

.bubble--voice { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; }
.voice__play { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); flex: none; }
.voice__play svg { width: 12px; height: 12px; fill: currentColor; stroke: none; margin-left: 2px; }
.voice__wave { width: 96px; height: 24px; color: rgba(20, 32, 27, .55); }
.voice__time { font-size: .8125rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.ask__more { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 46em; text-align: center; color: var(--ink-3); font-size: 1.0625rem; text-wrap: balance; }
.ask__more strong { color: var(--ink); font-weight: 600; }

@media (max-width: 1080px) { .ask__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ask__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ==========================================================================
   Why it feels different (dark panel)
   ========================================================================== */
.why {
  background: var(--dark); color: var(--on-dark); border-radius: var(--r-xl);
  padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 80px) clamp(36px, 5vw, 56px);
  position: relative; overflow: hidden;
}
.why::before {
  content: ''; position: absolute; width: 520px; height: 520px; right: -180px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 100, 59, .22) 0%, rgba(224, 100, 59, 0) 65%);
  pointer-events: none;
}
.why .head h2 { color: var(--on-dark); }
.why__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); margin-top: clamp(40px, 5vw, 72px); }
.why__item .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: rgba(224, 100, 59, .14); color: #F08A62; }
.why__item .ic .icon { font-size: 22px; }
.why__item h3 { margin-top: 22px; font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.1rem); letter-spacing: -0.035em; color: var(--on-dark); }
.why__item p { margin-top: 12px; color: var(--on-dark-2); font-size: 1.0625rem; }
.trust {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid rgba(244, 240, 232, .12);
}
.trust li { display: flex; align-items: center; gap: 14px; font-size: 1rem; line-height: 1.4; color: var(--on-dark); }
.trust__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: rgba(224, 100, 59, .14); color: #F08A62; }
.trust .icon { font-size: 18px; stroke-width: 2; }
/* Desktop: icons, titles and texts line up across the three columns, however the titles wrap. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 961px) {
    .why__grid { row-gap: 0; }
    .why__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .why__item h3 { align-self: end; }
  }
}

@media (max-width: 960px) {
  .why__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .why__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; }
  .why__item .ic { grid-row: span 2; }
  .why__item h3 { margin-top: 4px; }
}
@media (max-width: 760px) {
  .trust { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .trust li { font-size: .9375rem; }
}
@media (max-width: 520px) {
  .why { border-radius: 26px; }
  .why__item { grid-template-columns: minmax(0, 1fr); }
  .why__item .ic { grid-row: auto; }
  .why__item h3 { margin-top: 18px; }
}

/* ==========================================================================
   Apps
   ========================================================================== */
.apps__groups { display: grid; gap: 36px; margin-top: clamp(40px, 5vw, 56px); }
.apps__label { text-align: center; font-size: .875rem; font-weight: 600; color: var(--ink-3); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 32, 27, .04);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); flex: none; }
.pill--soft { background: transparent; box-shadow: none; border: 1px dashed var(--line-2); font-weight: 500; color: var(--ink-2); }
.pill--soft::before { display: none; }

/* ==========================================================================
   Pricing — a simple path: Start (one-time) → Care (monthly) → Extend (individual)
   ========================================================================== */
.path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.path__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.path__tag { display: flex; align-items: center; gap: 12px; }
.path__tag span {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: .9375rem; font-weight: 700; letter-spacing: -0.01em;
}
.path__tag span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); }
.path__col:not(:last-child) .path__tag::after { content: ''; flex: 1; margin-right: -20px; border-top: 1.5px dashed var(--line-2); }

.step {
  flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 28px;
  border-radius: var(--r-lg); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .35);
}
.step--main { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-2); }
.step h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.price__amount { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.price__amount--text { font-size: clamp(1.5rem, 1.3rem + .5vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.15; white-space: normal; }   /* a word, not a number */
.price__unit { font-size: .9375rem; color: var(--ink-3); font-weight: 500; line-height: 1.3; }
.price__unit--stack { display: inline-flex; flex-direction: column; flex: 1 1 7.5em; min-width: 0; }   /* "/ month" on the number's baseline, "depending on scope" below */

.checks { display: grid; align-content: start; gap: 9px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.checks .icon { margin-top: 3px; color: var(--accent); stroke-width: 2.4; font-size: 15px; }
.step--main .checks li { color: var(--ink); }

.step__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.step__foot .icon { color: var(--accent); font-size: 17px; }
.step__foot a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.step__foot a:hover { text-decoration-color: var(--accent); }

.pricing__note { margin-top: 28px; text-align: center; font-size: .9375rem; color: var(--ink-3); }

/* Desktop: the three cards share their rows (title, price, list, foot line), so prices and lists line up. */
@media (min-width: 1181px) {
  @supports (grid-template-rows: subgrid) {
    .path { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .path__col { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 0; }
    .path__tag { margin-bottom: 16px; }
    .step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 18px; }
    .step__foot { align-self: end; }
    .price__amount--text { padding-top: .3em; }   /* same baseline as the numbers in the cards next to it */
  }
}
@media (max-width: 1180px) {
  .path { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .path__col:not(:last-child) .path__tag::after { display: none; }
}
/* Tablet: each step reads left-to-right (title + price | list) */
@media (min-width: 700px) and (max-width: 1180px) {
  .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 40px; row-gap: 14px; align-items: start; }
  .step > h3 { grid-column: 1; grid-row: 1; }
  .step > .price { grid-column: 1; grid-row: 2; }
  .step > .checks { grid-column: 2; grid-row: 1 / span 2; }
  .step > .step__foot { grid-column: 1 / -1; margin-top: 6px; }
}
@media (max-width: 600px) {
  .step { padding: 22px; }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final {
  position: relative; overflow: hidden; text-align: center;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1);
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
}
.final__hello { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.final__hello::before {
  content: ''; position: absolute; left: 28px; top: 50%; width: 240px; height: 240px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(224, 100, 59, .14) 0%, rgba(224, 100, 59, 0) 62%); pointer-events: none;
}
.final__hello > * { position: relative; }
.final__hello .avatar { width: 56px; height: 56px; }
.final__hello .typing { position: static; display: inline-flex; }
.final h2 { position: relative; margin: 28px auto 0; max-width: 14em; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); letter-spacing: -0.045em; line-height: 1.04; }
.final p { position: relative; margin: 18px auto 0; max-width: 32em; color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.final__ctas { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 36px; }
.final .final__mail { margin: 0; max-width: none; font-size: .9375rem; color: var(--ink-3); }
.final__mail a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.final__mail a:hover { text-decoration-color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .final__hello .avatar { animation: breathe 6s ease-in-out infinite; }
  @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
}

/* "Say hello" card with the contact form (home page). Plain .final is still used by the 404 page. */
.final--contact {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); align-items: center;
  gap: clamp(36px, 5vw, 72px); text-align: left;
  padding: clamp(24px, 5vw, 64px);
}
.final__intro { position: relative; min-width: 0; }
.final--contact h2 { margin: 28px 0 0; max-width: 11em; font-size: clamp(2.1rem, 1.4rem + 2vw, 3.1rem); }
.final--contact .final__text { margin: 18px 0 0; max-width: 26em; text-wrap: balance; }
.final__book { margin-top: 28px; }
.final__book[href=""] { display: none; }   /* shown only when site.config.json → contact.bookingUrl is set */
.final--contact .final__mail { margin-top: 24px; }
.final__book:not([href=""]) + .final__mail { margin-top: 16px; }

/* ==========================================================================
   Contact form
   ========================================================================== */
.form { --error: #B3261E; position: relative; min-width: 0; padding: clamp(20px, 3vw, 32px); background: var(--bg); border-radius: var(--r-lg); }
.form__fields { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field__label { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.field__opt { font-weight: 500; color: var(--ink-3); }
.field__input {
  display: block; width: 100%; min-height: 50px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--ink);
  font: 500 1rem/1.45 var(--font); letter-spacing: -0.005em;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field__input:hover { border-color: rgba(20, 32, 27, .32); }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(194, 80, 42, .14); }
.field__input--area { min-height: 116px; resize: vertical; }
.field__input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--error), 0 0 0 5px rgba(179, 38, 30, .14); }
.field__error { display: flex; align-items: flex-start; gap: 7px; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--error); }
.field__error[hidden] { display: none; }
.field__error::before {
  content: '!'; display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
  background: var(--error); color: #fff; font-size: .6875rem; font-weight: 800; line-height: 1;
}
.form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 4px; }
.form__note { flex: 1 1 220px; min-width: 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
.form__note a { color: var(--ink-2); font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.form__note a:hover { text-decoration-color: var(--accent); }
.form__mailnote { display: block; margin-top: 2px; }
.form:not([data-endpoint=""]) .form__mailnote { display: none; }   /* only true when there is no form endpoint */
.form__submit { flex: none; }
.form__submit.is-busy { opacity: .75; cursor: progress; }
.form__msg { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; font-size: .9375rem; font-weight: 500; line-height: 1.45; }
.form__msg[hidden] { display: none; }
.form__msg .icon { margin-top: 2px; font-size: 18px; stroke-width: 2.2; }
.form__msg--ok { background: #E5F1E9; color: #1D553A; }
.form__msg--fail { background: #FBE8E5; color: #8C1D15; }
.form__msg a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form.is-sent .form__fields { display: none; }
.form.is-sent .form__msg { margin-top: 0; padding: 20px 22px; font-size: 1.0625rem; }
.form__msg:focus { outline: none; }

@media (max-width: 960px) {
  .final--contact { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .final--contact h2 { max-width: 13em; }
}
@media (max-width: 560px) {
  .final--contact { padding: 28px 16px 16px; border-radius: 26px; }
  .final__intro { padding: 0 6px; }
  .form { padding: 18px 16px; border-radius: 20px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .form__submit { width: 100%; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.faq__list { display: grid; gap: 10px; }
.faq__lead a { color: var(--ink); font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.faq__lead a:hover { text-decoration-color: var(--accent); }
.faq__item { background: var(--surface); border-radius: var(--r-md); border: 1px solid rgba(20, 32, 27, .05); box-shadow: var(--shadow-1); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 22px; border-radius: var(--r-md); cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: -2px; }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); transition: transform .25s var(--ease), background-color .2s ease; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; border-radius: 2px; background: var(--accent-ink); transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item summary:hover .faq__icon { background: #F4D6C6; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item p { padding: 0 22px 20px; max-width: 40em; color: var(--ink-2); font-size: 1rem; }
@media (min-width: 901px) { .faq > .head { position: sticky; top: calc(var(--header-h) + 32px); } }
@media (max-width: 900px) { .faq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .faq__item summary { padding: 16px 18px; font-size: 1rem; }
  .faq__item p { padding: 0 18px 18px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: clamp(56px, 7vw, 88px) 0 40px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.footer .brand__word { font-size: 1.25rem; }
.footer__legal { display: flex; flex-wrap: wrap; column-gap: 8px; font-size: .875rem; line-height: 1.6; color: var(--ink-3); }
.footer__legal > span { white-space: nowrap; }
.footer__sep { color: var(--ink-3); opacity: .5; }
.footer__start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-width: 0; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: .9375rem; }
.footer__links a { color: var(--ink-2); text-decoration: none; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* When a long company line pushes the links onto their own row, they stay on the right. */
@media (min-width: 561px) { .footer__inner > nav { margin-left: auto; } }
/* Phones: wordmark, company line and links stacked on the left. */
@media (max-width: 560px) {
  .footer__legal { flex-direction: column; }
  .footer__sep { display: none; }
  .footer__start { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Responsive: hero
   ========================================================================== */
@media (max-width: 1080px) {
  .orb { right: -64px; top: -76px; width: min(360px, 88%); }
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 72px; padding-top: 40px; }
  .hero h1 { font-size: clamp(2.6rem, 1rem + 5.4vw, 4rem); }
  .hero__visual { justify-self: center; max-width: 460px; }
  .orb { width: min(340px, 78%); right: -84px; top: -96px; }
}
@media (max-width: 520px) {
  .orb { width: 250px; right: -72px; top: -84px; }
  .chat { border-radius: 24px; }
  .chat__log { padding: 18px 14px 14px; }
  .chat__head { padding: 14px 16px; }
  .chips { padding-left: 36px; }
  .hero__ctas .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Scroll reveal (only when JS is running and motion is OK)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .9s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .ask__grid .reveal:nth-child(3n+2) { transition-delay: .08s; }
  .js .ask__grid .reveal:nth-child(3n) { transition-delay: .16s; }
}
/* Snaps a finished transition to its end state (keeps headless captures and slow devices crisp). */
.js .is-settled { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .typing span { animation: none; opacity: .8; }
  .orb::before, .orb canvas, .btn, .btn .icon { transition: none; }
  .scene, .scene.is-active, .chat__channel, .chat__channel.is-active, .chat__tab span, .faq__icon { transition: none; }
  .chat__play { display: none; }   /* nothing rotates by itself, so there is nothing to pause */
}

/* ==========================================================================
   Language menu without JavaScript: the menu opens while the switcher has focus.
   ========================================================================== */
html:not(.js) .lang:focus-within .lang__menu[hidden] { display: block; }

/* ==========================================================================
   Cookie consent (partials/consent.html, js/consent.js)
   A slim bar centred at the bottom on wide screens, a small card at the bottom
   left on tablets, a bottom sheet on phones. It is fixed, so it never moves the
   page, and it only appears when JavaScript runs and no choice has been made
   yet. "Reject all" and "Accept all" share one size and style. It sits just
   below the sticky header (z-index 50), so an open language menu always stays
   on top of it, for example on phones held sideways.
   ========================================================================== */
.cc {
  position: fixed; z-index: 45; left: 24px; bottom: 24px;
  width: min(380px, calc(100vw - 48px));
  display: grid; gap: 12px; padding: 20px 22px 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid rgba(20, 32, 27, .06); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.cc[hidden] { display: none; }
.cc__body, .cc__actions { display: contents; }   /* one column; they become the two halves of the wide-screen bar */
.cc__title { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.015em; }
.cc__text { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.cc-dialog a {
  color: var(--ink); font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
}
.cc-dialog a:hover { text-decoration-color: var(--accent); }
.cc__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.cc__btn { min-width: 0; padding-left: 12px; padding-right: 12px; }
.cc__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.cc__link {
  margin: 0; padding: 6px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: 600 .875rem/1.3 var(--font); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
}
.cc .cc__link { display: inline-block; white-space: nowrap; }
.cc__link:hover { color: var(--ink); text-decoration-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .cc { animation: cc-in .5s var(--ease) both; }
  @keyframes cc-in { from { opacity: 0; transform: translateY(16px); } }
}
@media (max-width: 560px) {
  .cc {
    left: 0; right: 0; bottom: 0; width: auto; gap: 10px;
    padding: 18px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px -16px rgba(20, 32, 27, .28);
  }
}
/* Wide screens: one slim bar, centred at the bottom (text left, buttons right). A tall card at the left
   would cover the hero's call to action on common laptop screens (1280×720, 1366×768, 1536×864). */
@media (min-width: 860px) {
  .cc {
    left: 24px; right: 24px; bottom: 20px; width: auto; max-width: 980px; margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) 344px; align-items: center; gap: 0 36px;
    padding: 18px 18px 14px 28px;
  }
  .cc__body, .cc__actions { display: grid; gap: 4px; }
  .cc .cc__btns { margin-top: 0; }
}

/* Settings dialog (native <dialog>: focus moves in, Esc closes, focus returns) */
.cc-dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2);
}
.cc-dialog::backdrop { background: rgba(20, 32, 27, .42); }
.cc-dialog__inner { display: grid; gap: 18px; padding: 26px 26px 24px; }
.cc-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cc-dialog h2 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.025em; }
.cc-dialog__close {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -8px -6px 0;
  border: 0; border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 18px; cursor: pointer;
}
.cc-dialog__close:hover { background: var(--bg-deep); }
.cc-dialog__close:focus-visible { border-radius: 50%; }
.cc-dialog__intro { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.cc-cats { display: grid; gap: 10px; }
.cc-cat { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.cc-cat__head { display: flex; align-items: center; gap: 10px; }
.cc-cat__name { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; }
.cc-cat__always { padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .75rem; font-weight: 700; }
.cc-cat__text { margin-top: 4px; font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
/* On/off switch: a real checkbox (role="switch"); the off track keeps 3:1 contrast against white */
.cc-switch {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; margin: 0 0 0 auto;
  width: 44px; height: 26px; border-radius: 999px; background: rgba(20, 32, 27, .55); cursor: pointer;
  transition: background-color .2s ease;
}
.cc-switch::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(20, 32, 27, .25); transition: transform .2s var(--ease);
}
.cc-switch:checked { background: var(--accent); }
.cc-switch:checked::before { transform: translateX(18px); }
.cc-switch:disabled { opacity: .5; cursor: default; }
.cc-switch:focus-visible { border-radius: 999px; }
.cc-dialog .cc__btns { margin-top: 2px; }
@media (max-width: 560px) {
  .cc-dialog__inner { padding: 20px 18px 18px; }
  .cc__btn { padding-left: 8px; padding-right: 8px; }   /* room for longer labels ("Akceptuj wszystko") on one line */
}
/* Narrow phones: the two dialog buttons stack, still the same size and style, so no label wraps in any language */
@media (max-width: 399px) {
  .cc-dialog .cc__btns { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-switch, .cc-switch::before { transition: none; }
}