/* Chief Concept – phones and tablets: the DESKTOP design (same 13 chapters, same markup, same visuals and motion),
   re-flowed for a portrait touch screen. Kevin, 2026-10-18.
   Everything here is scoped to html[data-ccp], which only the phone/tablet mode sets (innerWidth < 820, or a touch
   screen narrower than 1100 px – see the head script and calcP() in index.html). Desktop never matches a rule.
   The desktop markup is positioned with inline styles on a 1440 × 900 stage, hence the !important overrides.
   The chapters stand one under the other and the page simply scrolls down (no sideways swipe); the string lies across
   the screen at 3/4 of its height and the content passes through it. Motion: grid/cc-motion-grid.js, mode 'p'. */

html[data-ccp] {
  --g: 20px;                                    /* side gutter */
  --hdr: calc(62px + env(safe-area-inset-top)); /* top bar: logo + HU·EN, chapter name under it */
  --bar: calc(56px + env(safe-area-inset-bottom)); /* chapter bar */
  --k1: .43;                                    /* hero monogram scale (desktop 340 px box) */
  --cw: calc(100vw - 2 * var(--g));             /* content column (tablets: capped and centred) */
}
/* Phones scroll the page DOWN through the 13 chapters, one under the other (Kevin, 2026-10-18): plain document
   scrolling – no sideways movement, no snap; the top bar, the chapter bar and the string stay fixed. */
html[data-ccp], html[data-ccp] body { overflow-x: clip !important; overflow-y: visible !important; height: auto !important; }
html[data-ccp] body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── stage, track and chapters: in the normal flow of the page ── */
html[data-ccp] [data-stage] {
  position: relative !important; inset: auto !important; width: auto !important; height: auto !important;
  transform: none !important; overflow: visible !important;
}
html[data-ccp] [data-track] {
  position: relative !important; inset: auto !important; width: auto !important; height: auto !important;
  display: block !important; overflow: visible !important; transform: none !important; will-change: auto !important;
}
html[data-ccp] [data-track] > [data-panel] {
  width: 100% !important; height: auto !important; min-width: 0;
  position: relative !important; overflow-x: clip !important; overflow-y: visible !important;
  box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch;
  padding: 64px calc((100vw - var(--cw)) / 2) 64px !important;
}
html[data-ccp] [data-track] > [data-panel]:first-child { padding-top: calc(var(--hdr) + 22px) !important; min-height: 100svh; }
html[data-ccp] [data-track] > [data-panel]:last-child { padding-bottom: calc(var(--bar) + 72px) !important; }
/* the fixed bars and the string's layer */
html[data-ccp] [data-stage] > header, html[data-ccp] [data-stage] > nav { position: fixed !important; }
html[data-ccp] [data-stage] > [data-curtain] { position: fixed !important; }

/* every block of the desktop composition joins the column flow… */
html[data-ccp] [data-panel] > *,
html[data-ccp] [data-panel] > [data-a="pin"] > * {
  position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
  width: auto !important; height: auto !important; margin-left: 0 !important; max-width: 100%;
  box-sizing: border-box; flex-shrink: 0;
}
/* …the pinned wrappers (06, 10) dissolve: their children are the blocks */
html[data-ccp] [data-panel] > [data-a="pin"] { display: contents !important; }
/* …and the soft white glows stay decoration behind the content */
html[data-ccp] [data-panel] > [aria-hidden="true"][style*="radial-gradient"],
html[data-ccp] [data-panel] > [data-a="pin"] > [aria-hidden="true"][style*="radial-gradient"] {
  position: absolute !important; left: 50% !important; top: 0 !important;
  width: 150vw !important; height: min(150vw, 100%) !important; margin-left: -75vw !important; max-width: none;
  z-index: 0; pointer-events: none;   /* never taller than the screen: a glow must not make a chapter scroll */
}
html[data-ccp] [data-panel]:nth-child(12) > [data-a="grow"] { top: 18% !important; height: 64% !important; }
html[data-ccp] [data-panel] > :not([aria-hidden="true"]) { z-index: 1; }

/* chapter label (II. MIT JELENT A VÁLTÁS?) – first line of every chapter, like the desktop's top-left label */
html[data-ccp] [data-panel] > [data-a="emerge"]:first-child,
html[data-ccp] [data-panel] > [data-a="pin"] > [data-a="emerge"]:first-child {
  gap: 12px !important; align-items: baseline !important; line-height: 1.5; margin: 0 0 18px; align-self: flex-start;
}
html[data-ccp] [data-panel] > [data-a="emerge"]:first-child > span:last-child,
html[data-ccp] [data-panel] > [data-a="pin"] > [data-a="emerge"]:first-child > span:last-child { min-width: 0; }
/* text: never wider than the screen – a word that could not fit would break instead of overflowing (none does, 360–768 px) */
html[data-ccp] [data-panel] h1, html[data-ccp] [data-panel] h2,
html[data-ccp] [data-panel] [data-goal-title], html[data-ccp] [data-panel] [data-area-t] {
  overflow-wrap: break-word; hyphens: manual;
}
html[data-ccp] [data-panel] p, html[data-ccp] [data-panel] [data-desc] { overflow-wrap: break-word; }

/* small desktop labels (10–11 px mono) are 12 px on a phone */
html[data-ccp] [data-stage] [style*="font-size: 10px"], html[data-ccp] [data-stage] [style*="font-size: 10.5px"],
html[data-ccp] [data-stage] [style*="font-size: 11px"] { font-size: 12px !important; }

/* ── top bar: logo · chapter name · HU | EN (phones: the chapter name runs under the logo row) ── */
html[data-ccp] [data-stage] > header {
  height: var(--hdr) !important; padding: env(safe-area-inset-top) var(--g) 0 !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 14px;
  align-content: start; align-items: center; column-gap: 12px;
}
html[data-ccp] [data-stage] > header > [data-go] { grid-row: 1; grid-column: 1; min-height: 44px; gap: 10px !important; min-width: 0; }
html[data-ccp] [data-stage] > header > [data-go] > span { font-size: 12px !important; letter-spacing: .2em !important; white-space: nowrap; }
html[data-ccp] [data-stage] > header > [aria-live] {
  grid-row: 2; grid-column: 1 / -1; justify-self: center; max-width: 100%; min-width: 0;
  font-size: 12px !important; letter-spacing: .1em !important; line-height: 14px; color: #5E5E66;
}
html[data-ccp] [data-stage] > header [data-idxname] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ccp] [data-stage] > header > :last-child { grid-row: 1; grid-column: 2; }
html[data-ccp] [data-stage] > header [data-lang-switch] { font-size: 12px !important; padding: 9px 14px !important; }
/* HU | EN: a 44 px tap area around the link without moving the pill */
html[data-ccp] [data-stage] > header [data-lang-switch] a { position: relative; }
html[data-ccp] [data-stage] > header [data-lang-switch] a::after { content: ''; position: absolute; inset: -14px -12px; }
html[data-ccp] [data-stage] > header [data-spec-open] { display: none !important; }

/* ── chapter bar: 01 / 13 · progress line · the 8 chips (a row that scrolls sideways, the current chip kept in view) ── */
html[data-ccp] [data-stage] > nav {
  height: var(--bar) !important; padding: 0 0 env(safe-area-inset-bottom) var(--g) !important; gap: 12px !important;
  align-items: flex-start !important;
}
html[data-ccp] [data-stage] > nav > [data-idx] { width: auto !important; flex: none; line-height: 56px; font-size: 12px !important; white-space: nowrap; }
html[data-ccp] [data-stage] > nav > div { height: 56px !important; min-width: 0; flex: 1 1 auto; }
html[data-ccp] [data-stage] > nav > div > [aria-hidden] { left: 0 !important; right: var(--g) !important; }
html[data-ccp] [data-stage] > nav > div > div:last-child {
  justify-content: flex-start !important; gap: 8px; overflow-x: auto; overflow-y: hidden; height: 56px; align-items: center;
  padding: 0 var(--g) 0 2px; box-sizing: border-box; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
}
html[data-ccp] [data-stage] > nav > div > div:last-child::-webkit-scrollbar { display: none; }
html[data-ccp] [data-stage] > nav [data-dock-item] {
  flex: none; position: relative; min-height: 36px; box-sizing: border-box; padding: 0 14px !important;
  font-size: 13px !important; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
html[data-ccp] [data-stage] > nav [data-dock-item]::after { content: ''; position: absolute; inset: -4px -4px; } /* 44 px tap height */
html[data-ccp] [data-stage] > nav [data-dock-item][aria-current="true"] { border-color: #69D98D !important; }

/* the curtain stays full screen; the desktop's upright gate line is not used on phones – the string lies across the
   screen instead (drawn by cc-motion-grid.js into the curtain); the motion spec drawer is a desktop tool */
html[data-ccp] [data-stage] > [data-curtain] { inset: 0 !important; }
html[data-ccp] [data-curtain] > [data-gate] { display: none !important; }
html[data-ccp] [data-stage] > aside[data-spec] { display: none !important; }

/* ═════════ 01 Kezdőlap – monogram, headline, the two buttons, the 12 areas ═════════ */
/* the monogram group (glow, C | D halves, the green hurdle line between them) keeps its desktop drawing, scaled */
html[data-ccp] [data-panel]:nth-child(1) > :nth-child(1) {
  position: absolute !important; left: 50% !important; top: calc(var(--hdr) + 12px - 110px * var(--k1)) !important;
  width: 0 !important; height: 900px !important; transform: scale(var(--k1)); transform-origin: 0 0; z-index: 0;
}
html[data-ccp] [data-panel]:nth-child(1) > :nth-child(2) {
  width: 100% !important; max-width: 640px; margin: 0 auto !important; padding-top: calc(340px * var(--k1) + 6px);
}
html[data-ccp] [data-panel]:nth-child(1) h1 { font-size: clamp(34px, 10.6vmin, 56px) !important; line-height: 1.04 !important; text-wrap: balance; }
html[data-ccp] [data-panel]:nth-child(1) h1 + p { font-size: 16px !important; margin-top: 14px !important; max-width: 31em !important; }
html[data-ccp] [data-panel]:nth-child(1) h1 ~ div:not(.cctk) { flex-wrap: wrap; justify-content: center; }
html[data-ccp] [data-panel]:nth-child(1) h1 ~ div[data-intro="up"] { gap: 10px !important; margin-top: 20px !important; }
html[data-ccp] [data-panel]:nth-child(1) h1 ~ div a { padding: 13px 22px !important; font-size: 16px !important; }
html[data-ccp] [data-panel]:nth-child(1) h1 ~ div[data-intro="fade"] { margin-top: 12px !important; }
html[data-ccp] [data-panel]:nth-child(1) .cctk {
  grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 100%; gap: 8px 0; margin-top: 24px !important;
}
html[data-ccp] [data-panel]:nth-child(1) .cctk a { padding: 6px 0; gap: 6px; min-width: 0; }
html[data-ccp] [data-panel]:nth-child(1) .cctk__n { font-size: 12px; }
html[data-ccp] [data-panel]:nth-child(1) .cctk__k { font-size: 12px; letter-spacing: -.015em; white-space: nowrap; }

/* round icon discs of the desktop (84–120 px) at phone size; the drawing inside follows the disc */
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 120px"] { width: 84px !important; height: 84px !important; }
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 120px"] > svg { width: 50px !important; height: 50px !important; }
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 84px"],
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 96px"] { width: 60px !important; height: 60px !important; }
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 84px"] > svg,
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 96px"] > svg { width: 36px !important; height: 36px !important; }
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 72px"],
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 68px"],
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 64px"] { width: 54px !important; height: 54px !important; }
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 72px"] > svg,
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 68px"] > svg,
html[data-ccp] [data-panel] span[aria-hidden="true"][style*="border-radius: 50%"][style*="width: 64px"] > svg { width: 32px !important; height: 32px !important; }

/* ═════════ 02 Szövegkreatívok – the four statements, one under the other ═════════ */
html[data-ccp] [data-panel]:nth-child(2) > [aria-hidden="true"] { display: none !important; }
html[data-ccp] [data-panel]:nth-child(2) > div:not([aria-hidden]):not([data-a]) {
  gap: 20px !important; min-height: min(48vh, 440px); justify-content: center; margin: 0 0 28px;
}
html[data-ccp] [data-panel]:nth-child(2) > div:not([aria-hidden]):not([data-a])::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 130vw; height: 130vw; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.32), rgba(255,255,255,0)); z-index: -1; pointer-events: none;
}
html[data-ccp] [data-panel]:nth-child(2) > div:not([aria-hidden]):not([data-a]) > div:last-child {
  font-size: clamp(30px, 8.8vmin, 48px) !important; line-height: 1.1 !important;
}

/* ═════════ 03 Ügyfelek és célok – who we work for, and the three goals ═════════ */
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(3) { margin: 4px 0 46px !important; }
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(3) > :nth-child(1) { margin-bottom: 14px !important; }
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(3) > :nth-child(2) { font-size: clamp(36px, 10.2vmin, 60px) !important; line-height: 1.04 !important; }
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(3) > :nth-child(3) { flex-wrap: wrap; justify-content: center; gap: 14px 22px !important; margin-top: 30px !important; }
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(3) > :nth-child(3) > div { gap: 10px !important; }
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(3) > :nth-child(3) span[style*="width: 84px"] { width: 52px !important; height: 52px !important; }
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(3) > :nth-child(3) span[style*="width: 84px"] > svg { width: 31px !important; height: 31px !important; }
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(3) > :nth-child(3) span[style*="font-size: 24px"] { font-size: 17px !important; white-space: nowrap; }
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(4) { gap: 22px !important; }
html[data-ccp] [data-panel]:nth-child(3) > :nth-child(4) > :nth-child(1) { flex-wrap: wrap; gap: 4px 14px !important; line-height: 1.5; }
html[data-ccp] [data-panel]:nth-child(3) [data-goal] { gap: 16px !important; }
html[data-ccp] [data-panel]:nth-child(3) [data-goal] > div:last-child { flex-wrap: wrap; gap: 10px 14px !important; min-height: 54px !important; }
html[data-ccp] [data-panel]:nth-child(3) [data-goal-title] { font-size: clamp(28px, 8.2vmin, 46px) !important; flex: 0 1 auto !important; min-width: 0; }
html[data-ccp] [data-panel]:nth-child(3) [data-goal-more] {
  flex: 1 1 100% !important; font-size: 16px !important; line-height: 1.5 !important;
  max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.15,.85,.35,1);
}
html[data-ccp] [data-panel]:nth-child(3) [data-goal][aria-expanded="true"] [data-goal-more] { max-height: 240px; }

/* ═════════ 04 Ki a Chief Concept Creator? ═════════ */
html[data-ccp] [data-panel]:nth-child(4) > :nth-child(3) { margin: auto 0 !important; }
html[data-ccp] [data-panel]:nth-child(4) > :nth-child(3) > :nth-child(1) { font-size: clamp(28px, 8vmin, 46px) !important; line-height: 1.1 !important; }
html[data-ccp] [data-panel]:nth-child(4) > :nth-child(3) > :nth-child(2) { flex-direction: column; gap: 22px !important; margin-top: 34px !important; }
html[data-ccp] [data-panel]:nth-child(4) > :nth-child(3) > :nth-child(2) > div { gap: 16px !important; align-items: center !important; }
html[data-ccp] [data-panel]:nth-child(4) > :nth-child(3) > :nth-child(2) > div > div { font-size: 16px !important; }

/* ═════════ 05 Mit csinál a CCC? – the twelve role tiles (2 per row; 3 on tablets) and the AI | HI card ═════════ */
html[data-ccp] [data-track] > [data-panel]:nth-child(5) {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start;
}
html[data-ccp] [data-panel]:nth-child(5) > :nth-child(1),
html[data-ccp] [data-panel]:nth-child(5) > :nth-child(2),
html[data-ccp] [data-panel]:nth-child(5) > [data-aihi] { grid-column: 1 / -1; }
html[data-ccp] [data-panel]:nth-child(5) > :nth-child(1) { margin-bottom: 6px; }
html[data-ccp] [data-panel]:nth-child(5) > :nth-child(2) { margin-bottom: 14px; }
html[data-ccp] [data-panel]:nth-child(5) > :nth-child(2) h2 { font-size: clamp(32px, 9vmin, 52px) !important; }
html[data-ccp] [data-panel]:nth-child(5) > :nth-child(2) > :nth-child(2) { margin-top: 14px !important; }
html[data-ccp] [data-panel]:nth-child(5) > :nth-child(2) > :nth-child(3) { margin-top: 10px !important; font-size: 15px !important; }
html[data-ccp] [data-panel]:nth-child(5) > [data-tilt] {
  aspect-ratio: 5 / 6; padding: 14px 12px 16px !important; border-radius: 24px !important; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
html[data-ccp] [data-panel]:nth-child(5) > [data-tilt] [data-ico] { gap: 8px !important; }
html[data-ccp] [data-panel]:nth-child(5) > [data-tilt] [data-ico] > span[style*="width: 112px"] { width: 78px !important; height: 78px !important; }
html[data-ccp] [data-panel]:nth-child(5) > [data-tilt] [data-ico] svg { width: 72px !important; height: 72px !important; }
html[data-ccp] [data-panel]:nth-child(5) > [data-tilt] > div[style*="font-size: 19px"] { font-size: 15px !important; }
html[data-ccp] [data-panel]:nth-child(5) > [data-tilt] [data-desc] { left: 14px !important; right: 14px !important; top: 34px !important; font-size: 15px !important; line-height: 1.4 !important; }
html[data-ccp] [data-panel]:nth-child(5) > [data-aihi] {
  min-height: 460px; height: auto !important; padding: 26px !important; border-radius: 32px !important; margin-top: 18px; gap: 26px;
}
html[data-ccp] [data-panel]:nth-child(5) > [data-aihi] [data-aihi-glyph] { top: 104px; font-size: 96px; }
html[data-ccp] [data-panel]:nth-child(5) > [data-aihi] [data-aihi-pulse] { animation-name: aihiRunM; }
html[data-ccp] [data-panel]:nth-child(5) > [data-aihi] div[style*="font-size: 64px"] { font-size: 44px !important; }
html[data-ccp] [data-panel]:nth-child(5) > [data-aihi] div[style*="font-size: 20px"] { font-size: 16px !important; }

/* ═════════ 06 Tanácsadási területek – the twelve areas as one list (the desktop rolls it inside a pinned view) ═════════ */
html[data-ccp] [data-panel]:nth-child(6) > [data-a="pin"] > :nth-child(3) { margin-bottom: 28px; }
html[data-ccp] [data-panel]:nth-child(6) > [data-a="pin"] > :nth-child(3) h2 { font-size: clamp(32px, 9vmin, 52px) !important; }
html[data-ccp] [data-panel]:nth-child(6) > [data-a="pin"] > :nth-child(4) {
  overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important;
}
html[data-ccp] [data-panel]:nth-child(6) [data-a="roll"] { gap: 26px !important; transform: none !important; }
html[data-ccp] [data-panel]:nth-child(6) [data-a="roll"] > div { gap: 16px !important; align-items: flex-start !important; }
html[data-ccp] [data-panel]:nth-child(6) [data-area-t] { font-size: 16.5px !important; letter-spacing: .02em !important; }
html[data-ccp] [data-panel]:nth-child(6) [data-a="roll"] div[style*="font-size: 16px"] { font-size: 15px !important; }

/* ═════════ 07 Fejlesztési rendszer – the film strip with the six stages, turned upright ═════════ */
html[data-ccp] [data-track] > [data-panel]:nth-child(7) { display: grid !important; grid-template-columns: minmax(0, 1fr); align-content: start; }
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(2) { margin-bottom: 26px; }
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(2) h2 { font-size: clamp(32px, 9vmin, 50px) !important; }
/* the „TANÁCSOK” bracket: upright, beside the 2nd–4th stage (cc-motion-grid.js measures --ccp-bt / --ccp-bh) */
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(3) {
  grid-row: 3; grid-column: 1; justify-self: start; align-self: start; z-index: 2;
  width: var(--ccp-bh, 0px) !important; height: 48px !important; margin-top: var(--ccp-bt, 0px);
  transform-origin: 0 0; transform: translateX(calc(var(--cw) + 16px)) rotate(90deg);
}
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) {
  grid-row: 3; grid-column: 1; margin-right: 28px; padding: 18px 28px !important; border-radius: 12px !important;
  display: flex; flex-direction: column; gap: 16px;
}
/* sprocket holes run down both sides */
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > :nth-child(1),
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > :nth-child(2) {
  position: absolute !important; top: 0 !important; bottom: 0 !important; width: 26px; left: 0 !important; right: auto !important;
}
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > :nth-child(2) { left: auto !important; right: 0 !important; }
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > :nth-child(1) > div,
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > :nth-child(2) > div {
  inset: 0 !important; height: auto !important; flex-direction: column; justify-content: space-around !important;
}
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > :nth-child(1) > div > span,
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > :nth-child(2) > div > span { width: 12px !important; height: 22px !important; }
/* the rising green line of the desktop: here it runs down the strip, behind the cards */
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > svg { display: none !important; }
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4)::before {
  content: ''; position: absolute; left: 50%; top: 22px; bottom: 22px; width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: #2FB266; box-shadow: 0 0 6px #69D98D;
}
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > [data-a="emerge"] {
  position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important;
  padding: 18px 18px 20px !important; gap: 14px;
}
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > [data-a="emerge"] span[style*="font-size: 110px"] { font-size: 72px !important; }
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > [data-a="emerge"] span[style*="width: 100px"] { width: 64px !important; height: 64px !important; }
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > [data-a="emerge"] span[style*="width: 100px"] > svg { width: 64px !important; height: 64px !important; }
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > [data-a="emerge"] div[style*="font-size: 25px"] { font-size: 19px !important; }
html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > [data-a="emerge"] div[style*="font-size: 15.5px"] { font-size: 15px !important; }

/* ═════════ 08 Szolgáltatási formák – the forms of work as one list ═════════ */
html[data-ccp] [data-panel]:nth-child(8) > :nth-child(2) { margin-bottom: 24px; }
html[data-ccp] [data-panel]:nth-child(8) > :nth-child(2) h2 { font-size: clamp(32px, 9vmin, 50px) !important; }
html[data-ccp] [data-panel]:nth-child(8) > :nth-child(3) { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
html[data-ccp] [data-panel]:nth-child(8) > :nth-child(3) > div { font-size: 17.5px !important; gap: 14px !important; }
html[data-ccp] [data-panel]:nth-child(8) > :nth-child(3) > div:first-child { font-size: 21px !important; margin-bottom: 4px; }
html[data-ccp] [data-panel]:nth-child(8) > :nth-child(3) svg { width: 32px !important; height: 32px !important; }

/* ═════════ 09 Potenciál fejlesztési koncepció – the two arched tablets, the definitions, the watershed diagram ═════════ */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(2) h2 { font-size: clamp(30px, 8.6vmin, 48px) !important; }
html[data-ccp] [data-panel]:nth-child(9) > [data-tabs] { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
html[data-ccp] [data-panel]:nth-child(9) [data-tab] {
  position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important;
  padding: 34px 22px 26px !important; border-radius: 170px 170px 26px 26px / 118px 118px 26px 26px !important;
}
html[data-ccp] [data-panel]:nth-child(9) [data-tab] div[style*="font-size: 30px"] { font-size: 25px !important; }
html[data-ccp] [data-panel]:nth-child(9) [data-tab] > div[style*="font-size: 16.5px"] { font-size: 15.5px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(4) { display: none !important; } /* the green seam between the tablets (side by side on desktop) */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(6) { gap: 24px !important; margin-top: 44px; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(6) > :nth-child(1) { font-size: clamp(26px, 7.4vmin, 40px) !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(6) div[style*="font-size: 21px"] { font-size: 16.5px !important; }
/* the watershed diagram, turned upright: „csináltat” above the line, „csinál” below it; the leader's chain on the left,
   the senior leader's on the right, each running down to its result */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) { width: 320px !important; height: 604px !important; margin: 40px auto 0 !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > * { position: absolute !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(1) { left: 30px !important; top: 100px !important; width: 260px !important; height: 400px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(2) { left: 100px !important; top: 246px !important; width: 120px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(3) { left: 0 !important; top: 236px !important; width: 320px !important; height: 2px !important; transform-origin: 0 50% !important;
  background: linear-gradient(90deg, rgba(105,217,141,0), rgba(105,217,141,.9) 12%, rgba(105,217,141,.9) 88%, rgba(105,217,141,0)) !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(4),
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(5) { left: 0 !important; right: 0 !important; display: flex; justify-content: center; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(4) { top: 0 !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(5) { top: 552px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(4) > div,
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(5) > div { font-size: 44px !important; }
/* the two chains: lines (and the light travelling down them) */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(6),
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(14) { width: 2px !important; transform-origin: 50% 0 !important; background: linear-gradient(180deg, #151518, #69D98D) !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(6) { left: 79px !important; top: 176px !important; height: 306px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(14) { left: 239px !important; top: 96px !important; height: 386px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(7),
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(15) { width: 8px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(7) { left: 76px !important; top: 176px !important; height: 306px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(15) { left: 236px !important; top: 96px !important; height: 386px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(7) > span,
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(15) > span { left: 0 !important; top: -4px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(7) > span { animation-name: ccpTravelA !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(15) > span { animation-name: ccpTravelB !important; }
@keyframes ccpTravelA { 0% { transform: translateY(0); opacity: 0 } 8%, 86% { opacity: 1 } 100% { transform: translateY(306px); opacity: 0 } }
@keyframes ccpTravelB { 0% { transform: translateY(0); opacity: 0 } 8%, 86% { opacity: 1 } 100% { transform: translateY(386px); opacity: 0 } }
/* pills, step labels and results: the leader's column (x 0–160) and the senior leader's (x 160–320) */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :is(:nth-child(8), :nth-child(10), :nth-child(12), :nth-child(16), :nth-child(18), :nth-child(20), :nth-child(22)) { width: 160px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :is(:nth-child(9), :nth-child(11), :nth-child(13), :nth-child(17), :nth-child(19), :nth-child(21), :nth-child(23)) { width: 120px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :is(:nth-child(8), :nth-child(10), :nth-child(12)) { left: 0 !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :is(:nth-child(9), :nth-child(11), :nth-child(13)) { left: 20px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :is(:nth-child(16), :nth-child(18), :nth-child(20), :nth-child(22)) { left: 160px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :is(:nth-child(17), :nth-child(19), :nth-child(21), :nth-child(23)) { left: 180px !important; }
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(16) { top: 74px !important; }   /* Felsővezető */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(17) { top: 132px !important; }  /* 1. lépés */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(8),
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(18) { top: 154px !important; }  /* Vezető · vezetők */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(9),
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(19) { top: 268px !important; }  /* 1. · 2. lépés */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(10),
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(20) { top: 290px !important; }  /* munkatársak */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(11),
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(21) { top: 358px !important; }  /* 2. · 3. lépés */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(12),
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(22) { top: 380px !important; }  /* folyamatok */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(13),
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) > :nth-child(23) { top: 452px !important; }  /* eredmény */
html[data-ccp] [data-panel]:nth-child(9) > :nth-child(7) [data-a="pop"][style*="height: 52px"] {
  height: 44px !important; padding: 0 14px 0 10px !important; font-size: 15px !important; gap: 8px !important;
}

/* ═════════ 10 Koncepcióalkotók – dr. Csikesz Tamás large, the team in a grid under him ═════════ */
html[data-ccp] [data-panel]:nth-child(10) > [data-a="pin"] > :nth-child(3) { margin-bottom: 26px; }
html[data-ccp] [data-panel]:nth-child(10) > [data-a="pin"] > :nth-child(3) h2 { font-size: clamp(34px, 9.6vmin, 56px) !important; }
html[data-ccp] [data-panel]:nth-child(10) > [data-a="pin"] > :nth-child(3) > div { margin-top: 16px !important; }
html[data-ccp] [data-panel]:nth-child(10) [data-team] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: auto;
  width: auto !important; height: auto !important; gap: 12px !important; transform: none !important;
}
html[data-ccp] [data-panel]:nth-child(10) [data-team] > [data-tm-lead] { grid-column: 1 / -1 !important; grid-row: auto !important; padding: 26px 18px 24px !important; }
html[data-ccp] [data-panel]:nth-child(10) [data-team] > [data-tm-lead] img { width: 140px !important; height: 140px !important; }
html[data-ccp] [data-panel]:nth-child(10) [data-team] > [data-tm-lead] div[style*="font-size: 32px"] { margin-top: 24px !important; font-size: 27px !important; }
html[data-ccp] [data-panel]:nth-child(10) [data-team] > [data-tm]:not([data-tm-lead]) { padding: 18px 8px 16px !important; }
html[data-ccp] [data-panel]:nth-child(10) [data-team] > [data-tm]:not([data-tm-lead]) > :first-child { width: 72px !important; height: 72px !important; }
html[data-ccp] [data-panel]:nth-child(10) [data-team] div[style*="font-size: 17px"] { font-size: 15.5px !important; margin-top: 12px !important; }
html[data-ccp] [data-panel]:nth-child(10) [data-team] div[style*="font-size: 10.5px"] { letter-spacing: .06em !important; }

/* ═════════ 11 Díjazás – „Egyedi” ═════════ */
html[data-ccp] [data-panel]:nth-child(11) > :nth-child(3) { margin: auto 0 !important; }
html[data-ccp] [data-panel]:nth-child(11) > :nth-child(3) div[style*="font-size: 160px"] { font-size: clamp(84px, 26vmin, 150px) !important; }
html[data-ccp] [data-panel]:nth-child(11) > :nth-child(3) div[style*="font-size: 24px"] { font-size: 18px !important; }
html[data-ccp] [data-panel]:nth-child(11) > :nth-child(3) > div[style*="gap: 60px"] { flex-direction: column; gap: 18px !important; margin-top: 30px !important; }
html[data-ccp] [data-panel]:nth-child(11) > :nth-child(3) > div[style*="gap: 60px"] div[style*="font-size: 24px"] { font-size: 19px !important; }
html[data-ccp] [data-panel]:nth-child(11) > :nth-child(3) > [data-a="emerge"]:last-child { margin-top: 28px !important; padding: 13px 20px !important; font-size: 15px !important; text-align: center; }

/* ═════════ 12 Kezdjük? ═════════ */
html[data-ccp] [data-panel]:nth-child(12) > :nth-child(3) { margin: auto 0 !important; }
html[data-ccp] [data-panel]:nth-child(12) > :nth-child(3) div[style*="font-size: 82px"],
html[data-ccp] [data-panel]:nth-child(12) > :nth-child(3) span[style*="font-size: 82px"] { font-size: clamp(34px, 10vmin, 60px) !important; white-space: normal !important; }
html[data-ccp] [data-panel]:nth-child(12) > :nth-child(3) div[style*="font-size: 82px"] { line-height: 1.06 !important; }
html[data-ccp] [data-panel]:nth-child(12) > :nth-child(3) > div:last-child { margin-top: 18px !important; }
html[data-ccp] [data-panel]:nth-child(12) [data-go="12"] { gap: 16px !important; padding: 2px 10px 8px 16px !important; margin-left: -16px !important; }
html[data-ccp] [data-panel]:nth-child(12) [data-go="12"] > span[data-a="pop"] { width: 54px !important; height: 54px !important; font-size: 26px !important; }

/* ═════════ 13 Kapcsolat ═════════ */
html[data-ccp] [data-panel]:nth-child(13) > :nth-child(2) { margin: auto 0 !important; gap: 18px !important; }
html[data-ccp] [data-panel]:nth-child(13) > :nth-child(2) > :nth-child(1) { transform: scale(.8); margin: -12px 0; }
html[data-ccp] [data-panel]:nth-child(13) h2 { font-size: clamp(28px, 8.2vmin, 48px) !important; }
html[data-ccp] [data-panel]:nth-child(13) > :nth-child(2) > div[style*="gap: 12px"] { flex-wrap: wrap; justify-content: center; gap: 10px !important; }
html[data-ccp] [data-panel]:nth-child(13) > :nth-child(2) > div[style*="gap: 12px"] a { padding: 13px 22px !important; font-size: 16px !important; }
html[data-ccp] [data-panel]:nth-child(13) > :nth-child(2) > div[style*="gap: 30px"] { flex-direction: column; gap: 12px !important; }
html[data-ccp] [data-panel]:nth-child(13) .qpc8-credit-row--d { display: flex; flex-direction: column; align-items: center; gap: 14px; line-height: 1.6; padding: 0 8px; }
html[data-ccp] [data-panel]:nth-child(13) .qpc8-credit-row--d .qpc8-credit { margin-left: 0; padding: 10px 6px; }
/* comfortable tap areas for the e-mail / phone links (the look is unchanged) */
html[data-ccp] [data-panel]:nth-child(13) a[href^="mailto:"]:not([style*="border-radius"]),
html[data-ccp] [data-panel]:nth-child(13) a[href^="tel:"] { display: inline-block; padding: 12px 0; }

/* the soft glows breathe on the compositor (desktop: per frame in cc-motion.js) */
@keyframes ccpBreathe { 0% { transform: scale(.94); opacity: .3 } 100% { transform: scale(1.06); opacity: 1 } }
html[data-ccp] [data-breathe] { animation: ccpBreathe 5.4s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { html[data-ccp] [data-breathe] { animation: none; } }

/* ═════════ tablets (≥ 600 px): a wider column, closer to the desktop arrangement ═════════ */
@media (min-width: 600px) {
  html[data-ccp] { --g: 40px; --k1: .56; --cw: min(720px, calc(100vw - 80px)); --hdr: calc(60px + env(safe-area-inset-top)); }
  /* top bar in one row, as on desktop: logo · chapter name · HU | EN */
  html[data-ccp] [data-stage] > header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 60px; align-content: center; }
  html[data-ccp] [data-stage] > header > [aria-live] { grid-row: 1; grid-column: 2; }
  html[data-ccp] [data-stage] > header > :last-child { grid-column: 3; justify-self: end; }
  html[data-ccp] [data-stage] > header > [data-go] > span { font-size: 13px !important; letter-spacing: .24em !important; }
  html[data-ccp] [data-panel]:nth-child(1) .cctk { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 0; }
  html[data-ccp] [data-panel]:nth-child(1) .cctk__k { font-size: 13px; }
  html[data-ccp] [data-panel]:nth-child(1) h1 + p { font-size: 18px !important; }
  html[data-ccp] [data-track] > [data-panel]:nth-child(5) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  html[data-ccp] [data-panel]:nth-child(5) > [data-tilt] > div[style*="font-size: 19px"] { font-size: 17px !important; }
  html[data-ccp] [data-panel]:nth-child(5) > [data-aihi] { justify-self: center; width: 520px !important; min-height: 600px; }
  html[data-ccp] [data-panel]:nth-child(5) > [data-aihi] [data-aihi-glyph] { top: 168px; font-size: 132px; }
  html[data-ccp] [data-panel]:nth-child(6) [data-area-t] { font-size: 19px !important; }
  html[data-ccp] [data-panel]:nth-child(7) > :nth-child(4) > [data-a="emerge"] div[style*="font-size: 25px"] { font-size: 22px !important; }
  html[data-ccp] [data-panel]:nth-child(8) > :nth-child(3) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 28px !important; }
  html[data-ccp] [data-panel]:nth-child(8) > :nth-child(3) > div:first-child { grid-column: 1 / -1; }
  html[data-ccp] [data-panel]:nth-child(9) > [data-tabs] { flex-direction: row; gap: 4px; }
  html[data-ccp] [data-panel]:nth-child(9) [data-tab] { flex: 1 1 0; min-width: 0; padding: 40px 26px 30px !important; border-radius: 180px 180px 28px 28px / 140px 140px 28px 28px !important; }
  html[data-ccp] [data-panel]:nth-child(9) > :nth-child(6) { max-width: 560px; }
  html[data-ccp] [data-panel]:nth-child(10) [data-team] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
  html[data-ccp] [data-panel]:nth-child(10) [data-team] > [data-tm-lead] { grid-column: 1 / span 2 !important; grid-row: 1 / span 2 !important; }
  html[data-ccp] [data-panel]:nth-child(11) > :nth-child(3) > div[style*="gap: 60px"] { flex-direction: row; gap: 40px !important; }
  html[data-ccp] [data-panel]:nth-child(13) > :nth-child(2) > div[style*="gap: 30px"] { flex-direction: row; gap: 30px !important; }
  html[data-ccp] [data-panel]:nth-child(13) .qpc8-credit-row--d { display: block; }
  html[data-ccp] [data-panel]:nth-child(13) .qpc8-credit-row--d .qpc8-credit { margin-left: 24px; }
}
/* short phones (≤ 700 px tall, e.g. 360 × 640): a smaller monogram so the headline stays in the first screen */
@media (max-height: 700px) and (max-width: 599px) { html[data-ccp] { --k1: .36; } }
/* phones held sideways: the type follows the short side (vmin above); a smaller monogram */
@media (max-height: 500px) and (min-width: 600px) { html[data-ccp] { --k1: .34; } }