/* Brainlook proposal template.
   The idea: a printed proposal brought to life. A cover with the particle sign, a contents page,
   numbered chapters on hairlines, serif display type, generous margins, one interactive concept.
   Motion lives in js/motion.js; this file is complete without it. */
:root {
  --coal: #0a0908;
  --graphite: #14110e;
  --ivory: #f2ede4;
  --paper: #e9e2d6;
  --ink-l: #f3eee6;
  --ink-d: #16120e;
  --mute-l: rgba(243, 238, 230, 0.62);
  --mute-d: rgba(22, 18, 14, 0.6);
  --line-l: rgba(243, 238, 230, 0.16);
  --line-d: rgba(22, 18, 14, 0.14);
  --red: #f0543c;
  --gold: #e3a23d;
  --accent: #c8502f;
  --grad: linear-gradient(100deg, var(--red), var(--gold));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Unbounded", "Noto Sans Armenian", system-ui, sans-serif;
  --text: "Unbounded", "Noto Sans Armenian", system-ui, sans-serif; /* the user's choice: Unbounded Light for reading too */
  --brand: "Unbounded", sans-serif;
  --gutter: 20px;
  --maxw: 1760px;
  --sec: 112px;
  --gap: 16px;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 48px; --sec: 160px; --gap: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 72px; --sec: 200px; --gap: 32px; } }
:lang(hy) { --serif: "Noto Sans Armenian", system-ui, sans-serif; --brand: "Noto Sans Armenian", sans-serif; --text: "Noto Sans Armenian", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--coal); }
html:not(.has-lenis) { scroll-behavior: smooth; }
html.has-lenis { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html:not(.has-lenis) { scroll-behavior: auto; } }
body { margin: 0; background: var(--coal); color: var(--ink-l); font: 300 16px/1.7 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: var(--coal); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
[id] { scroll-margin-top: 64px; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 60; padding: 8px 12px; border-radius: 8px; background: var(--ink-l); color: var(--coal); font-weight: 600; text-decoration: none; transition: transform 300ms var(--ease); }
.skip:focus { transform: translateY(96px); }
p { text-wrap: pretty; }

/* type: a light serif for everything said aloud, a quiet sans for reading */
.h2 { font: 400 clamp(30px, 4.6vw, 70px)/1.06 var(--serif); letter-spacing: -0.035em; text-wrap: balance; }
.h3 { font: 400 clamp(20px, 1.9vw, 27px)/1.25 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.h4 { font: 600 17px/1.4 var(--text); letter-spacing: 0.005em; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.62; }
:lang(hy) .h2 { font-weight: 500; font-size: clamp(28px, 4.2vw, 62px); line-height: 1.12; letter-spacing: -0.01em; }
:lang(hy) .h3 { letter-spacing: 0; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.12em; margin: 0 -0.04em -0.12em; }
.w > span { display: inline-block; }

/* motion: hidden only while motion.js runs; without it everything is simply there */
.motion-on:not(.motion-ready) #heroTitle, .motion-on:not(.motion-ready) .hero-side, .motion-on:not(.motion-ready) #heroEyebrow { opacity: 0; }
.motion-on #sections [data-m]:not([data-m="words"]) { opacity: 0; }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 28px; border-radius: 999px;
  font: 600 16px/1.2 var(--text); letter-spacing: 0.005em; text-decoration: none; cursor: pointer; isolation: isolate; overflow: hidden;
  transition: color 400ms var(--ease), background-color 400ms var(--ease), box-shadow 400ms var(--ease); }
/* a fill rises from below on hover */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--grad); transform: translateY(101%); transition: transform 500ms var(--ease); }
.btn:hover::before { transform: none; }
.btn:active { scale: 0.97; }
.btn-light { background: var(--ink-l); color: var(--coal); }
.btn-light:hover { color: var(--coal); }
.sec[data-tone="light"] .btn-light { background: var(--ink-d); color: var(--ivory); }
.sec[data-tone="light"] .btn-light:hover { color: var(--coal); }
.btn-grad { background: var(--grad); color: var(--coal); }
.btn-grad::before { background: var(--ink-l); }
.btn-small { min-height: 42px; padding: 8px 18px; font-size: 14px; background: var(--ink-l); color: var(--coal); }
.top.is-light .btn-small { background: var(--ink-d); color: var(--ivory); }
.top.is-light .btn-small:hover { color: var(--coal); }


/* ---------- header ---------- */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: 12px max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); color: var(--ink-l); transition: color 400ms var(--ease); }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 400ms var(--ease), background-color 400ms var(--ease);
  background: rgba(10, 9, 8, 0.94); }
.top.is-solid::before { opacity: 1; }
.top.is-light { color: var(--ink-d); }
.top.is-light::before { background: rgba(242, 237, 228, 0.96); }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: opacity 400ms var(--ease); }
.top.is-solid .progress { opacity: 1; }
/* scroll-linked moves run in the browser itself (scroll-driven CSS animations), never in a script:
   they stay in step with the finger; a browser without them shows everything at rest */
@supports (animation-timeline: scroll()) {
  .motion-on .progress { animation: grow linear both; animation-timeline: scroll(root); }
  .motion-on [data-draw] { transform-origin: 0 50%; animation: grow linear both; animation-timeline: view(); animation-range: entry 15% cover 60%; }
  .motion-on [data-drift] { animation: drift linear both; animation-timeline: view(); }
  .motion-on [data-rise] { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  .motion-on [data-parallax] { animation: parallax linear both; animation-timeline: view(); }
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drift { from { transform: translateX(10%); } to { transform: translateX(-22%); } }
@keyframes rise { from { transform: translateY(55%); } to { transform: none; } }
@keyframes parallax { from { transform: translateY(70px); } to { transform: translateY(-40px); } }
.brand { display: flex; align-items: center; gap: 10px; font: 500 15px/1 var(--brand); letter-spacing: -0.01em; text-decoration: none; }
.brand span { display: none; }
@media (min-width: 560px) { .brand span { display: inline; } }
.nav { display: none; gap: 2px; margin: 0 auto; }
.nav a { position: relative; padding: 10px 14px; font: 500 15px/1.2 var(--text); text-decoration: none; opacity: 0.66; transition: opacity 300ms var(--ease); }
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease); }
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav a:hover::after, .nav a[aria-current]::after { transform: none; }
.top-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#talkBtn { display: none; }
@media (min-width: 1100px) { .nav { display: flex; } .top-right { margin-left: 0; } .menu-btn { display: none; } #talkBtn { display: inline-flex; } }
.toggle { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, currentColor 8%, transparent); }
.toggle button { min-width: 40px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 13px/1 var(--text); letter-spacing: 0.02em; opacity: 0.6;
  transition: opacity 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease); }
.toggle button:hover { opacity: 1; }
.toggle button[aria-pressed="true"] { opacity: 1; background: var(--ink-l); color: var(--coal); }
.top.is-light .toggle button[aria-pressed="true"] { background: var(--ink-d); color: var(--ivory); }
.toggle button[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.menu-btn { height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, currentColor 8%, transparent); cursor: pointer; font: 600 14px/1 var(--text); }
.menu { position: fixed; inset: 0; z-index: 25; padding: 112px var(--gutter) 32px; background: rgba(10, 9, 8, 0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.menu nav { display: flex; flex-direction: column; }
.menu a { padding: 14px 0; border-bottom: 1px solid var(--line-l); font: 400 26px/1.15 var(--serif); letter-spacing: -0.02em; text-decoration: none; opacity: 0; transform: translateY(24px); animation: menuIn 600ms var(--ease) forwards; }
.menu a:nth-child(2) { animation-delay: 60ms; } .menu a:nth-child(3) { animation-delay: 120ms; } .menu a:nth-child(4) { animation-delay: 180ms; } .menu a:nth-child(5) { animation-delay: 240ms; }
@keyframes menuIn { to { opacity: 1; transform: none; } }
.menu a.pc-link { margin-top: 24px; border: 0; font: 600 16px/1.3 var(--text); letter-spacing: 0; color: var(--mute-l); text-decoration: underline; text-underline-offset: 4px; }
.ver { margin-top: 64px; text-align: center; }
.ver a { font-size: 15px; color: var(--mute-l); text-underline-offset: 4px; }
.menu-open .top { color: var(--ink-l); }
.menu-open .top::before { opacity: 0; }

/* the chapter you are in, bottom left (large screens) */
.where { position: fixed; z-index: 20; left: 22px; bottom: 32px; display: none; align-items: center; gap: 14px; writing-mode: vertical-rl; rotate: 180deg; font: 500 13px/1 var(--text); letter-spacing: 0.02em; color: var(--ink-l);
  opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease), transform 500ms var(--ease), color 400ms var(--ease); pointer-events: none; }
.where-n { font: 400 18px/1 var(--serif); color: var(--gold); writing-mode: horizontal-tb; rotate: 180deg; }
.where.is-on { opacity: 0.85; transform: none; }
.where.is-light { color: var(--ink-d); }
.where.is-light .where-n { color: var(--accent); }


/* ---------- the cover ---------- */
/* the particles live inside the sticky first screen, in its own coordinates: a phone's address bar
   changing the window height can no longer shift the sign onto the text */
#gl { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; pointer-events: none; display: block; }
.is-static #gl { display: none; }
/* the first screen scrolls like any page (no pinning, no script moving it): it can never lag the finger */
.hero { position: relative; z-index: 2; height: 100svh; min-height: 600px; }
.hero-stick { position: relative; height: 100%; max-width: var(--maxw); margin: 0 auto; padding: 84px var(--gutter) 28px;
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(120px, 1fr) auto auto; gap: 18px; }
/* who it is for, where and when: real facts in readable type, never a tiny label */
.hero-meta { grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font: 500 18px/1.35 var(--text); color: var(--ink-l); }
.hero-meta > span:first-child { flex-basis: 100%; }
.meta-fact { color: var(--gold); }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-l); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
/* the sign keeps clear air around it: the particles' glow never touches the text */
.hero-sign { position: relative; grid-row: 2; align-self: center; justify-self: center; height: min(calc(100% - 40px), 260px); aspect-ratio: 1; }
.hero-sign img { width: 100%; height: 100%; transition: opacity 700ms var(--ease), transform 900ms var(--ease); }
.gl-ready .hero-sign img { opacity: 0; transform: scale(0.92); }

.hero-glow { display: none; }
/* light from above: two warm ellipses rise over the cover on load */
.hero-light { position: absolute; z-index: -2; left: 50%; top: 0; width: min(1200px, 140vw); aspect-ratio: 2 / 1; translate: -50% -60%; pointer-events: none; }
.hero-light::before, .hero-light::after { content: ""; position: absolute; border-radius: 50%; }
.hero-light::before { inset: 0; background: radial-gradient(closest-side, rgba(240, 100, 56, 0.34), rgba(240, 84, 60, 0.1) 62%, transparent); animation: lightIn 1.4s var(--ease) both; }
.hero-light::after { inset: 20% 26%; background: radial-gradient(closest-side, rgba(255, 210, 150, 0.26), transparent); animation: lightIn 1.4s 0.2s var(--ease) both; }
@keyframes lightIn { from { opacity: 0; transform: scale(0.7) translateY(-10%); } }
/* the illuminated words: layered warm light under the key phrase of the title. Text shadows, drawn
   once into the text's own layer (an SVG blur filter was redrawn on the processor while scrolling) */
.hero h1 .glow, .hero h1 .glow-w > span { color: #fffaf6;
  text-shadow: 0 0 3px rgba(255, 246, 236, 0.75), 0 2px 14px rgba(255, 170, 100, 0.55), 0 2px 34px rgba(240, 120, 64, 0.5), 0 14px 64px rgba(200, 80, 40, 0.5); }
.hero h1.is-lit .w { overflow: visible; }
.hero h1 { grid-row: 3; font: 400 clamp(25px, 6.9vw, 36px)/1.1 var(--serif); letter-spacing: -0.035em; text-wrap: balance; }
:lang(hy) .hero h1 { font-weight: 500; font-size: clamp(25px, 7vw, 36px); line-height: 1.15; letter-spacing: -0.01em; }
.hero-side { grid-row: 4; display: grid; gap: 22px; justify-items: start; }
.hero-sub { font-size: 17px; line-height: 1.6; color: rgba(243, 238, 230, 0.78); }
.hero-cue { display: none; }
@media (max-width: 899px) and (max-height: 720px) { .hero-sign { height: min(calc(100% - 24px), 190px); } .hero-stick { padding-top: 76px; gap: 12px; } }
@media (min-width: 900px) {
  /* the whole width: the words own the left seven columns from top to bottom, the sign stands large
     and alone in the right five. Two zones side by side, so the particles never reach the text. */
  .hero-stick { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--gap); row-gap: 40px; padding-top: 104px; padding-bottom: 56px; }
  .hero-meta { grid-column: 1 / 8; grid-row: 1; gap: 6px 32px; font-size: clamp(18px, 1.3vw, 24px); }
  .hero-meta > span:first-child { flex-basis: 100%; }
  .hero-sign { grid-column: 8 / 13; grid-row: 1 / 4; align-self: center; justify-self: end; height: auto; width: min(100%, calc(100svh - 160px), 820px); }
  .hero h1 { grid-column: 1 / 8; grid-row: 2; align-self: end; font-size: clamp(40px, min(4.4vw, 8.4svh), 92px); line-height: 1.04; letter-spacing: -0.045em; }
  :lang(hy) .hero h1 { font-size: clamp(34px, min(3.8vw, 7.4svh), 80px); line-height: 1.1; }
  .hero-side { grid-column: 1 / 8; grid-row: 3; display: flex; align-items: flex-end; gap: 56px; }
  .hero-sub { max-width: 40ch; font-size: clamp(18px, 1.2vw, 21px); }
  .hero-side .btn { flex: none; }
}
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- chapters ---------- */
.sec { position: relative; z-index: 3; padding: var(--sec) 0; }
.sec[data-tone="light"] { background: var(--ivory); color: var(--ink-d); color-scheme: light; }
.sec[data-tone="dark"] { background: var(--graphite); }
/* two chapters of one tone read as one surface: one gap between them, not two paddings */
.sec[data-tone="light"] + .sec[data-tone="light"], .sec[data-tone="dark"] + .sec[data-tone="dark"] { padding-top: 0; }
/* the passage at the top of a chapter whose tone changes: half a screen of living gradient from the
   colour above into this chapter's own (canvas from grainient.js, the CSS gradient without WebGL) */
.sec { --flow: 44svh; }
@media (min-width: 900px) { .sec { --flow: 58svh; } }
.sec.has-flow { padding-top: calc(var(--flow) + var(--sec) * 0.25); }
.flow { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: var(--flow); pointer-events: none; }
.sec > .wrap { position: relative; z-index: 1; }
.grain-gl { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms var(--ease); }
.grain-gl.is-on { opacity: 1; }
.statement > :not(.grain-gl), .cost > :not(.grain-gl) { position: relative; z-index: 1; }
.statement:has(.grain-gl.is-on)::after, .cost:has(.grain-gl.is-on)::after { display: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.chap { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); font: 600 13px/1 var(--text); letter-spacing: 0.06em; }
.chap-n { font: 400 22px/1 var(--serif); letter-spacing: 0; color: var(--gold); }
[data-tone="light"] .chap-n { color: var(--accent); }
.chap-t { opacity: 0.7; }
.chap-rule { flex: 1; height: 1px; align-self: center; background: currentColor; opacity: 0.16; transform-origin: 0 50%; }
.tag { display: inline-block; padding: 8px 18px; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); font: 600 17px/1.3 var(--text); color: var(--gold); }

/* contents: the second page of the proposal */
.toc { background: var(--coal) !important; padding-top: clamp(56px, 6vw, 96px); }
.toc-head { display: grid; gap: 12px; margin-bottom: 48px; }
.toc-k { font: 400 clamp(30px, 4vw, 58px)/1.05 var(--serif); letter-spacing: -0.035em; }
.toc-meta { color: var(--mute-l); font-size: 18px; line-height: 1.5; }
.toc-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: baseline; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line-l); text-decoration: none; }
.toc-list li:last-child a { border-bottom: 1px solid var(--line-l); }
.toc-n { font: 400 clamp(18px, 2.1vw, 30px)/1.2 var(--serif); color: var(--gold); }
.toc-t { font: 400 clamp(18px, 2.1vw, 30px)/1.2 var(--serif); letter-spacing: -0.025em; transition: transform 500ms var(--ease), color 400ms var(--ease); }
.toc-t { overflow-wrap: anywhere; hyphens: auto; }
.toc-list i { width: 100%; height: 1px; align-self: center; background: currentColor; opacity: 0.4; transform-origin: 100% 50%; transform: scaleX(0.4); transition: transform 500ms var(--ease), opacity 400ms var(--ease); }
.toc-list a:hover .toc-t { transform: translateX(12px); color: #fff; }
.toc-list a:hover i { transform: none; opacity: 1; }
@media (min-width: 1000px) {
  .toc .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .toc-head { grid-column: 1 / 5; align-content: start; position: sticky; top: 120px; }
  .toc-list { grid-column: 6 / 13; }
  .toc-list a { grid-template-columns: 72px minmax(0, 1fr) 40px; padding: 26px 0; }
}

/* I. what we saw */
.seen-title { max-width: 19ch; }
.seen-grid { display: grid; gap: 48px; margin-top: 56px; }
.seen-side { display: grid; gap: 20px; align-content: start; }
.src { font-size: 17px; color: var(--mute-d); }
.src a { text-underline-offset: 3px; }
.facts-title { margin-bottom: 8px; }
.facts-list li { padding: 22px 0; border-top: 1px solid var(--line-d); font: 500 clamp(18px, 1.3vw, 22px)/1.45 var(--text); }
.facts-list li:last-child { border-bottom: 1px solid var(--line-d); }
.statement { margin-top: 72px; padding: 40px 28px; border-radius: 28px; background: var(--ink-d); color: var(--ivory); display: grid; gap: 20px; overflow: hidden; position: relative; }

.statement-t { position: relative; z-index: 1; font: 400 clamp(24px, 3.3vw, 60px)/1.15 var(--serif); letter-spacing: -0.035em; text-wrap: balance; max-width: 26ch; }
@media (min-width: 1000px) {
  .seen-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 80px; }
  .seen-side { grid-column: 1 / 6; }
  .facts { grid-column: 7 / 13; }
  .statement { margin-top: 120px; min-height: 56svh; align-content: end; padding: clamp(64px, 6vw, 120px); }
}

/* II. the proposal: a sticky title with an index that follows the reading */
.offer-grid { display: grid; gap: 40px; }
.offer-index { display: none; }
.offer-item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 36px 0; border-top: 1px solid var(--line-d); }
.offer-item:last-child { border-bottom: 1px solid var(--line-d); }
.offer-n { font: 300 30px/1 var(--serif); color: var(--accent); }
.offer-body { display: grid; gap: 18px; }
.get { margin-top: 6px; padding: 22px 24px; border-radius: 20px; background: var(--paper); }
.get-t { font: 600 18px/1.3 var(--text); color: var(--accent); margin-bottom: 8px; }
@media (min-width: 1000px) {
  .offer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .offer-head { grid-column: 1 / 6; position: sticky; top: 120px; }
  .offer-head .h2 { font-size: clamp(32px, 3.5vw, 54px); }
  .offer-index { display: grid; margin-top: 56px; counter-reset: i; }
  .offer-index li { counter-increment: i; display: grid; grid-template-columns: 36px 1fr; padding: 14px 0; border-top: 1px solid var(--line-d); font-weight: 600; font-size: 18px; opacity: 0.4; transition: opacity 500ms var(--ease); }
  .offer-index li::before { content: counter(i); font: 400 18px/1.3 var(--serif); }
  .offer-index li.is-on { opacity: 1; }
  .offer-list { grid-column: 7 / 13; }
  .offer-item { grid-template-columns: 72px 1fr; padding: 56px 0; }
  .offer-n { font-size: 44px; }
}

/* III. how it will work: a phone that stays while the story scrolls past it */
.how-title { max-width: 14ch; }
.story { position: relative; display: grid; margin-top: 48px; }
.story-device { position: sticky; top: 72px; z-index: 2; justify-self: center; display: grid; justify-items: center; gap: 14px; padding: 12px 0 36px; width: 100%;
  background: linear-gradient(var(--graphite) 86%, transparent); }
.phone { width: min(44vw, 180px); aspect-ratio: 9 / 18.5; border-radius: 34px; padding: 8px; background: #2a241e; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(243, 238, 230, 0.08); }
.phone-in { position: relative; height: 100%; border-radius: 27px; overflow: hidden; background: var(--ivory); color: var(--ink-d); }
.phone-cap { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mute-l); }
.phone-tag { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-l); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; }
.scr { position: absolute; inset: 0; padding: 30px 14px 14px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
.scr.is-on { opacity: 1; transform: none; }
.scr-h { font: 500 14px/1.25 var(--serif); letter-spacing: -0.02em; }
.scr-s { font-size: 11px; line-height: 1.4; color: var(--mute-d); }
.scr-l { font: 600 10px/1 var(--text); color: var(--mute-d); margin-top: 4px; }
.scr-f { height: 32px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-d); }
.scr-seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--paper); }
.scr-seg span { flex: 1; padding: 7px 2px; border-radius: 8px; text-align: center; font: 600 10px/1 var(--text); color: var(--mute-d); }
.scr-seg .on { background: #fff; color: var(--ink-d); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.scr-btn { margin-top: auto; padding: 12px; border-radius: 12px; background: var(--ink-d); color: var(--ivory); text-align: center; font: 600 12px/1 var(--text); }
.scr-ticket { align-items: center; text-align: center; }
.scr-ok { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); position: relative; }
.scr-ok::after { content: ""; position: absolute; left: 14px; top: 11px; width: 9px; height: 15px; border: solid var(--coal); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.scr-qr { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; width: 62%; aspect-ratio: 1; padding: 8px; margin: 6px 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-d); }
.scr-qr b { background: var(--ink-d); border-radius: 1px; }
.scr-pill { margin-top: auto; padding: 7px 12px; border-radius: 999px; background: #dfeedd; color: #2d5a2b; font: 600 11px/1 var(--text); }
.scr-rows li { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line-d); font-size: 11px; font-weight: 600; }
.scr-rows em { justify-self: start; padding: 4px 8px; border-radius: 999px; font: 600 10px/1 var(--text); }
.scr-rows .st0 { background: #e8e2f5; color: #4b3a7a; }
.scr-rows .st1 { background: #f6e6cf; color: #7a4d12; }
.scr-rows .st2 { background: #dfeedd; color: #2d5a2b; }
.scr .mock-film { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; padding: 10px;
  background: radial-gradient(70% 90% at 70% 30%, rgba(240, 84, 60, 0.85), rgba(227, 162, 61, 0.55) 45%, #3a2a1c 100%); color: #fff; }
.mock-film p { font: 600 11px/1.2 var(--text); }
.mock-play { position: absolute; left: 50%; top: 42%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); }
.mock-play::after { content: ""; position: absolute; left: 14px; top: 11px; border-left: 11px solid var(--ink-d); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.mock-h { font: 500 13px/1.25 var(--serif); letter-spacing: -0.02em; }
.mock-label { font: 600 10px/1.2 var(--text); color: var(--mute-d); }
.mock-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mock-gallery i { aspect-ratio: 1; border-radius: 6px; background: #d9cdbd; }
.mock-gallery i:nth-child(2n) { background: #cbbca8; }
.mock-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mock-logos i { height: 16px; border-radius: 4px; background: #e0d6c8; }
.mock-btn { margin-top: auto; padding: 10px; border-radius: 12px; background: var(--ink-d); color: var(--ivory); text-align: center; font: 600 11px/1.2 var(--text); }
.story-steps { position: relative; z-index: 1; }
.story-step { display: grid; gap: 20px; align-content: center; justify-items: start; min-height: 52svh; padding: 32px 0; opacity: 0.32; transition: opacity 600ms var(--ease); }
.story-h { font: 400 clamp(26px, 3.2vw, 56px)/1.08 var(--serif); letter-spacing: -0.035em; text-wrap: balance; max-width: 16ch; }
.story-step p:not(.tag) { font-size: clamp(17px, 1.25vw, 21px); line-height: 1.6; }
.phone-stage { position: relative; overflow: hidden; display: grid; place-items: center; padding: 20px 40px; border-radius: 28px; background: radial-gradient(80% 70% at 70% 80%, rgba(227, 146, 58, 0.5), transparent 70%), #2a1612; }
.phone-stage > .phone { position: relative; z-index: 1; }
/* with WebGL the phone gives way to the particles, which take the shape of each step */
.story-gl { position: absolute; inset: 0; z-index: 1; display: none; width: 100%; height: 100%; }
.story-fx .story-gl { display: block; }
.story-fx .phone-stage > .phone { display: none; }
@media (max-width: 899px) { .story-fx .phone-stage { width: 100%; height: 40svh; } }
.scr-f { display: flex; align-items: center; padding: 0 10px; font: 400 11px/1 var(--text); color: var(--ink-d); }
.scr-check { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 400 10px/1.3 var(--text); color: var(--mute-d); }
.scr-check i { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--ink-d); }
.story-step.is-on { opacity: 1; }
.is-static .story-step, .story-step:only-child { opacity: 1; }
.story-sep .tag { justify-self: start; }
.story-n { font: 300 clamp(56px, 6vw, 112px)/0.9 var(--serif); letter-spacing: -0.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story-step p:not(.tag):not(.lead) { color: var(--mute-l); max-width: 560px; }
@media (min-width: 900px) {
  .story { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 24px; }
  .story-steps { grid-column: 1 / 7; grid-row: 1; }
  .story-device { grid-column: 7 / 13; grid-row: 1; align-self: start; top: 12svh; height: 76svh; align-content: stretch; background: none; padding: 0; }
  .phone-stage { width: 100%; height: 100%; padding: 6svh 0; border-radius: 36px; }
  .phone { width: auto; height: min(62svh, 600px); }
  .scr-f { font-size: 13px; padding: 0 12px; } .scr-check { font-size: 12px; }
  .scr { padding: 40px 18px 18px; gap: 12px; }
  .scr-h { font-size: 17px; } .mock-h { font-size: 15px; }
  .scr-s, .scr-rows li { font-size: 12px; }
  .story-step { min-height: 88svh; }
  .story-step:first-child { min-height: 60svh; align-content: start; padding-top: 48px; }
}

/* IV. every service */
.svc-head { display: grid; gap: 24px; }
.svc-groups { display: grid; gap: 56px; margin-top: 72px; }
.svc-group .h4 { padding-bottom: 18px; color: var(--accent); }
.svc { border-top: 1px solid var(--line-d); }
.svc-group .svc:last-child { border-bottom: 1px solid var(--line-d); }
.svc summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 18px 0; cursor: pointer; list-style: none; }
.svc summary::-webkit-details-marker { display: none; }
.svc-name { flex: 1 1 180px; font: 600 17px/1.35 var(--text); transition: transform 500ms var(--ease); }
.svc summary:hover .svc-name { transform: translateX(6px); }
.pick { order: 3; flex: 0 0 100%; }
.pick b { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--ink-d); color: var(--ivory); font: 600 17px/1.3 var(--text); }
.svc-more { order: 2; }
.svc-more { position: relative; width: 14px; height: 14px; flex: none; }
.svc-more::before, .svc-more::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform 400ms var(--ease); }
.svc-more::after { transform: rotate(90deg); }
.svc[open] .svc-more::after { transform: rotate(0deg); }
.acc { overflow: hidden; }
.svc .acc p { padding: 0 0 22px; max-width: 620px; color: var(--mute-d); }
.svc-extra { margin-top: 64px; max-width: 760px; color: var(--mute-d); }
@media (min-width: 1000px) {
  .svc-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .svc-head .h2 { grid-column: 1 / 8; }
  .svc-head .lead { grid-column: 9 / 13; }
  .svc-groups { grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 104px; }
}

/* V. experience: the forum's name runs huge across the screen */
.case { overflow: hidden; }
.case .h2 { max-width: 17ch; }
.case-big { margin: 64px calc(var(--gutter) * -1) 48px; white-space: nowrap; }
.case-big p { display: inline-block; white-space: nowrap; text-wrap: nowrap; padding-left: var(--gutter); font: 400 clamp(60px, 12vw, 196px)/1 var(--serif); letter-spacing: -0.05em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case-grid { display: grid; gap: 40px; }
.case-card { display: grid; gap: 20px; justify-items: start; padding: 32px; border-radius: 28px; background: rgba(243, 238, 230, 0.05); box-shadow: inset 0 0 0 1px var(--line-l); }
.case-card > p:not(.case-name) { color: var(--mute-l); }
.case-card img { width: 100%; border-radius: 16px; }
.case-name { font: 500 21px/1.25 var(--serif); letter-spacing: -0.02em; display: grid; gap: 6px; }
.case-name span { font: 500 17px/1.4 var(--text); color: var(--mute-l); }
@media (min-width: 1000px) {
  .case-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .case-card { grid-column: 1 / 8; padding: 56px; }
  .case-lead { grid-column: 9 / 13; }
}

/* VI. plan and estimate */
.steps-track { position: relative; margin-top: 64px; }
.steps-line { display: none; }
.steps { display: grid; gap: 0; counter-reset: st; }
.steps li { position: relative; padding: 28px 0 28px 40px; border-left: 1px solid var(--line-d); margin-left: 8px; }
.step-dot { position: absolute; left: -8px; top: 32px; width: 15px; height: 15px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 6px var(--ivory); }
.steps .h4 { font: 500 19px/1.3 var(--serif); letter-spacing: -0.02em; margin-bottom: 10px; }
.steps p { color: var(--mute-d); }
@media (min-width: 900px) {
  .steps-track { margin-top: 96px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
  .steps li { padding: 0 24px 0 0; border: 0; margin: 0; }
  .step-dot { position: relative; left: auto; top: auto; display: block; width: 17px; height: 17px; margin-bottom: 36px; box-shadow: 0 0 0 8px var(--ivory); z-index: 1; }
  .steps-line { display: block; position: absolute; left: 8px; right: calc((100% - 2 * var(--gap)) / 3 - 8px); top: 8px; height: 1px; background: var(--grad); transform-origin: 0 50%; }
}
.cost { margin-top: 104px; padding: 36px 24px; border-radius: 32px; background: var(--ink-d); color: var(--ivory); display: grid; gap: 32px; position: relative; overflow: hidden; }

.cost-a { display: grid; gap: 20px; align-content: start; justify-items: start; }
.cost-a p, .cost-note { color: var(--mute-l); }
.cost .toggle { color: var(--ivory); }
.cost .toggle button { opacity: 0.8; font-size: 15px; }
.cost .toggle button[aria-pressed="true"] { background: var(--ivory); color: var(--ink-d); }
.cost .toggle button[aria-disabled="true"] { opacity: 0.35; }
.cost-rows { position: relative; z-index: 1; }
.cost-rows li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; padding: 20px 0; border-top: 1px solid var(--line-l); font-size: 18px; }
.cost-rows li:last-child { border-bottom: 1px solid var(--line-l); }
.cost-rows li > span:first-child { font: 600 17px/1.4 var(--text); }
.cost-v { font-weight: 600; font-size: 18px; white-space: nowrap; margin-left: auto; }
.cost-sep, .cost-all { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.cost-sep { margin-top: 24px; color: var(--mute-l); }
.cost-all { margin-top: 20px; }
.cost-all strong { font: 400 clamp(38px, 5.4vw, 80px)/1 var(--serif); letter-spacing: -0.045em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.cost-save { margin-top: 12px; text-align: right; font-weight: 600; color: var(--gold); }
@media (min-width: 900px) { .cost { grid-template-columns: 5fr 7fr; gap: 72px; padding: 64px; margin-top: 160px; } }
.faq { display: grid; gap: 40px; margin-top: 128px; }
@media (min-width: 900px) { .faq { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 112px); margin-top: 176px; align-items: start; } .faq-side { position: sticky; top: 120px; } }
.faq-eb { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(22, 18, 14, .06); font: 500 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d); }
.faq-eb i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px rgba(240, 84, 60, .14); }
.faq-h { margin-top: 22px; font: 400 clamp(34px, 4.2vw, 64px)/1.02 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.faq-lead { margin-top: 18px; max-width: 420px; color: var(--mute-d); font: 300 16px/1.55 var(--text); }
.faq-ask { margin-top: 36px; display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; padding: 20px; border-radius: 28px; background: var(--coal); color: var(--ink-l); max-width: 460px; position: relative; overflow: hidden; isolation: isolate; }
.faq-ask::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -90px; top: -150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 84, 60, .55), rgba(227, 162, 61, .18) 60%, transparent); animation: faq-glow 7s ease-in-out infinite alternate; }
@keyframes faq-glow { to { transform: translate(-60px, 40px) scale(1.15); } }
.faq-ava { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--grad); color: var(--coal); font: 600 15px/1 var(--brand); box-shadow: 0 0 0 3px var(--coal), 0 0 0 5px rgba(227, 162, 61, .7); }
.faq-ava img { width: 100%; height: 100%; object-fit: cover; }
.faq-ask-h { font: 500 16px/1.3 var(--text); }
.faq-ask-p { margin-top: 4px; font: 300 13px/1.45 var(--text); color: var(--mute-l); }
.faq-ask-b { grid-column: 1 / -1; min-height: 50px; }
.faq-list { display: grid; gap: 12px; counter-reset: q; }
.faq-it { --r: 26px; position: relative; border-radius: var(--r); background: rgba(255, 255, 255, .5); border: 1px solid var(--line-d); transition: background 500ms var(--ease), box-shadow 500ms var(--ease), transform 500ms var(--ease), border-color 500ms var(--ease); }
.faq-it::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 500ms var(--ease); pointer-events: none; }
@media (hover: hover) { .faq-it:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .78); box-shadow: 0 18px 40px -24px rgba(22, 18, 14, .35); } .faq-it:hover .faq-pm { transform: scale(1.06); } }
.faq-it[open]:not(.is-closing) { background: #fff; border-color: transparent; box-shadow: 0 30px 60px -34px rgba(120, 50, 20, .45); }
.faq-it[open]:not(.is-closing)::before { opacity: 1; }
.faq-it summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 1.6vw, 24px); padding: clamp(18px, 1.8vw, 26px) clamp(18px, 2vw, 30px); font: 500 clamp(16px, 1.25vw, 19px)/1.35 var(--text); letter-spacing: -.01em; }
.faq-it summary::-webkit-details-marker { display: none; }
.faq-it summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r); }
.faq-n { font: 500 13px/1 var(--brand); letter-spacing: .04em; color: var(--mute-d); min-width: 26px; transition: color 400ms var(--ease); }
.faq-it[open]:not(.is-closing) .faq-n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq-pm { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(22, 18, 14, .06); transition: background 450ms var(--ease), transform 450ms var(--ease), box-shadow 450ms var(--ease); }
.faq-pm::before, .faq-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; border-radius: 2px; background: var(--ink-d); transition: transform 450ms var(--ease), background 450ms var(--ease); }
.faq-pm::after { transform: rotate(90deg); }
.faq-it[open]:not(.is-closing) .faq-pm { background: var(--grad); transform: rotate(180deg); box-shadow: 0 10px 24px -10px rgba(240, 84, 60, .8); }
.faq-it[open]:not(.is-closing) .faq-pm::before, .faq-it[open]:not(.is-closing) .faq-pm::after { background: #fff; }
.faq-it[open]:not(.is-closing) .faq-pm::after { transform: rotate(0deg); }
.faq-it .acc p { padding: 0 clamp(18px, 2vw, 30px) clamp(20px, 2vw, 28px) calc(clamp(18px, 2vw, 30px) + 26px + clamp(14px, 1.6vw, 24px)); max-width: 760px; color: var(--mute-d); font: 300 15px/1.65 var(--text); }
@media (max-width: 899px) { .faq-it .acc p { padding-left: clamp(18px, 2vw, 30px); } .faq-pm { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .faq-ask::before { animation: none; } }

/* VII. a word from Alexey, contacts */
.contacts.sec { background: var(--coal); overflow: hidden; padding-bottom: 0; }
.letter { display: grid; gap: 32px; align-items: start; }
.letter-body { display: grid; gap: 28px; justify-items: start; }
.letter-body .lead { max-width: 640px; color: var(--mute-l); }
.letter-photo { width: 128px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 400 38px/1 var(--serif);
  background: radial-gradient(80% 70% at 30% 20%, rgba(240, 84, 60, 0.35), transparent 70%), #1c1813; box-shadow: inset 0 0 0 1px rgba(227, 162, 61, 0.35); }
.letter-photo span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.letter-photo img { width: 100%; height: 100%; object-fit: cover; }
/* the badge on its lanyard: the canvas takes the frame, the plain photo card is the fallback */
.lanyard { position: relative; }
.lanyard-gl { display: none; }
.has-lanyard { height: min(72svh, 640px); width: 100%; }
.has-lanyard .lanyard-gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
.has-lanyard .lanyard-gl.is-grab { cursor: grabbing !important; }
.has-lanyard .letter-photo { display: none; }
@media (min-width: 900px) {
  .lanyard { grid-column: 1 / 5; }
  .has-lanyard { grid-column: 1 / 6; height: min(86svh, 860px); margin-top: calc(var(--sec) * -0.35); }
}
.sign { display: grid; gap: 4px; }
.sign strong { font: 500 19px/1.3 var(--serif); letter-spacing: -0.02em; }
.sign span { color: var(--mute-l); font-size: 17px; }
@media (min-width: 900px) {
  .letter { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .letter-photo { grid-column: 1 / 5; width: 100%; max-width: 340px; border-radius: 28px; aspect-ratio: 4 / 5; font-size: 72px; }
  .letter-body { grid-column: 6 / 13; }
}
.reach { display: grid; gap: 40px; margin-top: 128px; }
.write { display: grid; gap: 16px; align-content: start; }
.write p { color: var(--mute-l); }
.contacts-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; padding: 22px 0; border-top: 1px solid var(--line-l); }
.contacts-list li:last-child { border-bottom: 1px solid var(--line-l); }
.contacts-list span { color: var(--mute-l); font-size: 17px; }
.contacts-list a { position: relative; font: 400 clamp(17px, 1.9vw, 25px)/1.3 var(--serif); letter-spacing: -0.02em; text-decoration: none; transition: color 300ms var(--ease); }
.contacts-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 500ms var(--ease); }
.contacts-list a:hover { color: var(--gold); }
.contacts-list a:hover::after { transform: none; transform-origin: 0 50%; }
@media (max-width: 639px) { .contacts-list li { flex-direction: column; } }
@media (min-width: 900px) { .reach { grid-template-columns: 5fr 7fr; gap: 72px; margin-top: 192px; } }
.wordmark { margin: 120px 0 0; overflow: hidden; text-align: center; white-space: nowrap; line-height: 0.82; }
.wordmark span { display: inline-block; font: 500 clamp(44px, 14.5vw, 200px)/0.95 var(--brand); letter-spacing: -0.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* plates: the important facts (where, when, what you get, what is in this proposal) are set on a
   solid block with two bars after it, like the labels on solais. Readable type, square corners. */
.meta-fact, .tag, .get-t, .pick b { --pl: var(--ink-l); --pt: var(--coal);
  position: relative; display: inline-flex; align-items: center; width: fit-content; margin-right: 26px; padding: 8px 14px; border: 0; border-radius: 0; opacity: 1;
  background: var(--pl); color: var(--pt); font: 500 clamp(15px, 1.05vw, 18px)/1.2 var(--text); letter-spacing: 0.04em; text-transform: uppercase; }
.meta-fact::after, .tag::after, .get-t::after, .pick b::after { content: ""; position: absolute; top: 0; bottom: 0; right: -22px; width: 15px;
  background: linear-gradient(90deg, var(--pl) 0 4px, transparent 4px 10px, var(--pl) 10px 14px, transparent 14px); transform-origin: 0 50%; }
[data-tone="light"] .tag, [data-tone="light"] .get-t, [data-tone="light"] .pick b { --pl: var(--ink-d); --pt: var(--ivory); }
.get-t { --pl: var(--accent) !important; --pt: #fff !important; margin-bottom: 14px; }
.hero-meta > .meta-fact:nth-child(2) { --pl: var(--gold); }
.hero-meta { align-items: center; row-gap: 14px; }
@media (min-width: 900px) { .meta-fact { padding: 10px 16px; } }
/* the bars draw in after the plate appears */
.motion-on .meta-fact::after { animation: bars 900ms 1.2s var(--ease) both; }
@keyframes bars { from { transform: scaleX(0); opacity: 0; } }
/* VI. the plan: the line is a progress bar of the reading. As the chapter scrolls up, the light runs
   from the first stage to the end; a stage is dim until the light reaches it, then it lights up.
   Scrolling back takes the light back. All on the browser's own scroll timeline (no script). */
.steps .h4 { font: 400 clamp(22px, 2.1vw, 36px)/1.12 var(--serif); letter-spacing: -0.035em; margin-bottom: 16px; }
.steps p { font-size: clamp(16px, 1.1vw, 19px); }
.steps-light { display: none; }
@supports (animation-timeline: view()) {
  .motion-on .steps-track { view-timeline: --plan block; }
  .motion-on .steps-light { display: block; position: absolute; pointer-events: none; z-index: 0; }
  .motion-on .steps-light b { position: absolute; display: block; border-radius: 999px; box-shadow: 0 0 16px 3px rgba(240, 120, 60, 0.55); }
  .motion-on .steps li > :not(.step-dot) { animation: stageText linear both; animation-timeline: --plan; }
  .motion-on .step-dot { animation: stageDot linear both; animation-timeline: --plan; }
  .motion-on .steps li:nth-child(1) > * { animation-range: cover 22% cover 24%; }
  .motion-on .steps li:nth-child(2) > * { animation-range: cover 33% cover 35%; }
  .motion-on .steps li:nth-child(3) > * { animation-range: cover 44% cover 46%; }
  @media (min-width: 900px) {
    .motion-on .steps-line { background: var(--line-d); transform: none !important; animation: none !important; }
    .motion-on .steps-light { left: 8px; right: 0; top: 7px; height: 3px; container-type: inline-size; }
    .motion-on .steps-light::before { content: ""; position: absolute; inset: 1px 0; background: var(--grad); transform-origin: 0 50%; animation: grow linear both; animation-timeline: --plan; animation-range: cover 22% cover 55%; }
    .motion-on .steps-light b { top: 0; left: 0; width: 140px; height: 3px; background: linear-gradient(90deg, transparent, rgba(240, 84, 60, 0.9) 55%, #ffe2b8 88%, #fff);
      animation: tipX linear both; animation-timeline: --plan; animation-range: cover 22% cover 55%; }
    .motion-on .steps-track::after { animation: stageDot linear both; animation-timeline: --plan; animation-range: cover 54% cover 56%; }
  }
  @media (max-width: 899px) {
    .motion-on .steps li { border-left-color: var(--line-d); }
    .motion-on .steps-light { left: 8px; top: 0; bottom: 0; width: 1px; container-type: size; }
    .motion-on .steps-light::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--red), var(--gold)); transform-origin: 50% 0; animation: growY linear both; animation-timeline: --plan; animation-range: cover 22% cover 55%; }
    .motion-on .steps-light b { left: -1px; top: 0; width: 3px; height: 120px; background: linear-gradient(180deg, transparent, rgba(240, 84, 60, 0.9) 55%, #ffe2b8 88%, #fff);
      animation: tipY linear both; animation-timeline: --plan; animation-range: cover 22% cover 55%; }
    .motion-on .steps li:nth-child(1) > * { animation-range: cover 22% cover 24%; }
    .motion-on .steps li:nth-child(2) > * { animation-range: cover 35% cover 37%; }
    .motion-on .steps li:nth-child(3) > * { animation-range: cover 48% cover 50%; }
  }
}
@media (min-width: 900px) {
  .steps-line { right: 0 !important; }
  .steps-track::after { content: ""; position: absolute; right: -4px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px var(--ivory), 0 0 18px 4px rgba(227, 162, 61, 0.7); }
}
@keyframes stageText { from { opacity: 0.3; } to { opacity: 1; } }
@keyframes stageDot { from { filter: grayscale(1) opacity(0.45); transform: scale(0.8); } to { filter: drop-shadow(0 0 10px rgba(240, 110, 50, 0.9)); transform: scale(1.15); } }
@keyframes tipX { from { transform: translateX(-140px); } to { transform: translateX(calc(100cqw - 140px)); } }
@keyframes tipY { from { transform: translateY(-120px); } to { transform: translateY(calc(100cqh - 120px)); } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }


/* ===== the cover, calmer: words on the left in one column, the sign on the right ===== */
.hero-light { display: none; }
@media (min-width: 900px) {
  .hero-stick { row-gap: 32px; padding-top: 116px; padding-bottom: 64px; }
  .hero-meta { font-size: clamp(17px, 1.15vw, 21px); }
  .hero-sign { grid-column: 8 / 13; justify-self: center; width: min(94%, calc(100svh - 280px), 640px); }
  .hero h1 { grid-column: 1 / 8; font-size: clamp(36px, min(3vw, 6.4svh), 64px); line-height: 1.08; letter-spacing: -0.04em; max-width: 23ch; }
  :lang(hy) .hero h1 { font-size: clamp(32px, min(2.7vw, 5.8svh), 58px); }
  .hero-side { grid-column: 1 / 6; display: grid; gap: 28px; justify-items: start; align-items: start; }
  .hero-sub { max-width: 42ch; font-size: clamp(17px, 1.1vw, 19px); }
}

/* ===== II. the proposal ===== */
.offer-n { font: 300 clamp(56px, 6.5vw, 128px)/0.82 var(--serif); letter-spacing: -0.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offer-item { grid-template-columns: 76px 1fr; }
.offer-item .h3 { font-size: clamp(22px, 2.1vw, 38px); line-height: 1.12; letter-spacing: -0.03em; }
.offer-body > p { font-size: clamp(16px, 1.05vw, 18px); }
.get { background: var(--ink-d); color: var(--ivory); padding: 28px 32px; border-radius: 24px; }
.get p:not(.get-t) { color: rgba(243, 238, 230, 0.84); }
.offer-index li { position: relative; }
.offer-index li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 800ms var(--ease); }
.offer-index li.is-on::after { transform: none; }
@media (min-width: 1000px) { .offer-item { grid-template-columns: minmax(120px, 0.3fr) 1fr; column-gap: 32px; padding: 80px 0; } }

/* ===== III. how it works: the heading opens the story, the particles float free ===== */
.story { margin-top: 0; }
.story-step:first-child .how-title { margin-bottom: 12px; }
.phone-stage { background: none; }
.story-fx .phone-stage { background: radial-gradient(closest-side, rgba(240, 84, 60, 0.12), transparent 72%); }
@media (min-width: 900px) {
  .story-step:first-child { padding-top: 0; min-height: 76svh; }
  .story-device { top: 10svh; height: 80svh; }
}

/* ===== V. the case: a film frame that opens the case ===== */
.case-frame { position: relative; isolation: isolate; display: grid; align-content: end; justify-items: start; gap: 22px; min-height: 64svh; padding: clamp(28px, 4vw, 72px);
  border-radius: 32px; overflow: hidden; color: var(--ivory); text-decoration: none; background: radial-gradient(80% 90% at 75% 30%, rgba(240, 84, 60, 0.4), transparent 70%), #1c1410; }
.case-frame > :not(.grain-gl):not(.case-poster) { position: relative; z-index: 1; }
.case-poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.case-play { position: absolute !important; left: 50%; top: 44%; width: clamp(88px, 9vw, 148px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(243, 238, 230, 0.94); transition: transform 700ms var(--ease); }
.case-play::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -32% -50%; border-left: 26px solid var(--coal); border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.case-play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(243, 238, 230, 0.6); animation: ring 2.6s var(--ease) infinite; }
@keyframes ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
.case-frame:hover .case-play { transform: scale(1.08); }
.case-tags { display: flex; flex-wrap: wrap; gap: 12px 0; }
.case-title { font: 400 clamp(34px, 5.4vw, 104px)/0.98 var(--serif); letter-spacing: -0.05em; }
.case-cols { display: grid; gap: 28px; margin-top: 64px; }
.case-cols p { font-size: clamp(18px, 1.4vw, 24px); line-height: 1.5; max-width: 34ch; }
.case-cols p + p { color: var(--mute-l); }
.case-big { margin-bottom: 24px; }
@media (min-width: 900px) {
  .case-frame { aspect-ratio: 21 / 9; min-height: 0; }
  .case-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 88px; }
  .case-cols p:first-child { grid-column: 1 / 7; } .case-cols p + p { grid-column: 8 / 13; }
}
@media (prefers-reduced-motion: reduce) { .case-play::before { animation: none; } }

/* ===== IV. the catalogue: one legend, a gradient tick on what this proposal includes ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.svc-legend { display: flex; align-items: center; gap: 14px; margin-top: 48px; font: 400 clamp(17px, 1.2vw, 20px)/1.3 var(--text); }
.svc-dot { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); }
.svc-dot::after { content: ""; position: absolute; left: 8px; top: 4.5px; width: 5px; height: 10px; border: solid var(--ivory); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.svc-dot.is-off { background: none; box-shadow: inset 0 0 0 1.5px var(--line-d); }
.svc-dot.is-off::after { display: none; }
.svc summary { flex-wrap: nowrap; gap: 14px; }
.svc-name { flex: 1 1 auto; }
.svc:not(.is-picked) .svc-name { opacity: 0.78; }
.svc.is-picked .svc-name { font-weight: 500; }
.svc-group .h4 { font: 400 clamp(19px, 1.5vw, 26px)/1.2 var(--serif); color: var(--ink-d); letter-spacing: -0.02em; padding-bottom: 22px; }
@media (min-width: 1000px) { .svc-groups { margin-top: 64px; } }

@media (max-width: 899px) { .case-frame { min-height: 70svh; } .case-play { top: 24%; } }


/* ===== III. how it works: a tour pinned to the screen ===== */
.tour { position: relative; }
.tour-text { display: grid; }
.tour-step { grid-area: 1 / 1; display: grid; gap: 22px; align-content: start; justify-items: start; }
.tour-step .story-h { max-width: 15ch; }
.tour-step p:not(.tag) { max-width: 40ch; font-size: clamp(17px, 1.3vw, 22px); line-height: 1.55; color: rgba(243, 238, 230, 0.8); }
.tour-step .lead { color: var(--ink-l); }
.tour-rail { display: none; }
.tour .phone-stage { width: 100%; height: 100%; padding: 0; }
/* without WebGL the steps simply stack, the phone mock beside them */
.is-static .tour-pin { display: grid; gap: 48px; }
.is-static .tour-text { gap: 64px; }
.is-static .tour-step { grid-area: auto; }
.is-gl .tour { height: calc(var(--n) * 90svh); }
.is-gl .tour-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: 42svh 1fr auto; gap: 20px; padding: 80px 0 28px; }
.is-gl .tour-stage { grid-row: 1; position: relative; }
.is-gl .tour-text { grid-row: 2; align-content: start; }
.is-gl .tour-step { opacity: 0; transform: translateY(28px); transition: opacity 600ms var(--ease), transform 800ms var(--ease); pointer-events: none; }
.is-gl .tour-step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.is-gl .tour-rail { grid-row: 3; display: flex; gap: 8px; }
.tour-rail i { flex: 1; height: 3px; border-radius: 2px; background: var(--line-l); position: relative; overflow: hidden; }
.tour-rail i::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--ease); }
.tour-rail i.is-on::after, .tour-rail i.is-past::after { transform: none; }
.is-gl .tour-step .how-title { font-size: clamp(28px, 4.2vw, 70px); }
@media (min-width: 900px) {
  .is-gl .tour { height: calc(var(--n) * 100svh); }
  .is-gl .tour-pin { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: var(--gap); row-gap: 32px; padding: 110px 0 56px; }
  .is-gl .tour-text { grid-column: 1 / 7; grid-row: 1; align-self: center; }
  .is-gl .tour-stage { grid-column: 7 / 13; grid-row: 1 / 3; }
  .is-gl .tour-rail { grid-column: 1 / 6; grid-row: 2; }
  .is-static .tour-pin { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .is-static .tour-text { grid-column: 1 / 7; } .is-static .tour-stage { grid-column: 8 / 13; }
}
@media (prefers-reduced-motion: reduce) { .tour-step, .tour-rail i::after { transition: none !important; } }


/* the proposal's contents: a reading guide. Read items in full ink, the one being read marked by a
   gradient bar on its left, the ones ahead dimmed; every item jumps to its part */
.offer-index li { position: relative; padding-left: 22px; opacity: 0.42; }
.offer-index li.is-past { opacity: 0.8; }
.offer-index li.is-on { opacity: 1; }
.offer-index li::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; border-radius: 2px; transform: scaleY(0); transform-origin: 50% 0; }
.offer-index li.is-on::after { transform: none; }
.offer-index a { color: inherit; text-decoration: none; transition: transform 500ms var(--ease); }
.offer-index li:hover { opacity: 1; }
.offer-index li:hover a { transform: translateX(6px); }


/* V. the case's name on two crossing event tapes (instead of one giant gradient word) */
.case-tape { position: relative; height: clamp(170px, 17vw, 280px); margin: 40px calc(50% - 50vw) 48px; overflow: hidden; pointer-events: none; }
.tape { position: absolute; left: -8%; right: -8%; top: 50%; padding: clamp(12px, 1.2vw, 20px) 0; white-space: nowrap; }
.tape-a { z-index: 2; background: var(--gold); color: var(--coal); transform: translateY(-50%) rotate(-3deg); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7); }
.tape-b { z-index: 1; background: var(--ink-l); color: var(--coal); transform: translateY(-50%) rotate(2.6deg); }
.tape p { display: inline-flex; align-items: center; gap: clamp(18px, 2vw, 34px); font: 500 clamp(26px, 3.6vw, 60px)/1 var(--text); letter-spacing: 0.02em; text-transform: uppercase; }
.tape p i { flex: none; width: 0.5em; height: 0.82em; background: linear-gradient(90deg, currentColor 0 30%, transparent 30% 60%, currentColor 60% 90%, transparent 90%); }
@supports (animation-timeline: view()) {
  .motion-on [data-drift-r] { animation: driftR linear both; animation-timeline: view(); }
}
@keyframes driftR { from { transform: translateX(-26%); } to { transform: translateX(4%); } }

.tape p, .tape span { white-space: nowrap; text-wrap: nowrap; flex-wrap: nowrap; }
.tape span { flex: none; }


/* the cover: with WebGL the drawn sign never shows first; the particles build it from the start
   (the image stays as the picture only when WebGL is not available) */
.is-gl .hero-sign img { opacity: 0; transition: none; }


/* ===================== Alexey's brief, 06.11.2026 ===================== */
/* EG-01: the greeting is readable at once; on a phone the cover is compact */
.motion-on:not(.motion-ready) #heroTitle, .motion-on:not(.motion-ready) .hero-side, .motion-on:not(.motion-ready) #heroEyebrow { opacity: 1; }
.motion-on #sections [data-m]:not([data-m="words"]) { opacity: 1; }
.motion-ready #sections [data-m]:not([data-m="words"]) { opacity: 0; }
@media (max-width: 899px) {
  .hero { height: auto; min-height: 0; }
  .hero-stick { height: auto; min-height: 0; grid-template-rows: auto auto auto auto; align-content: start; gap: 18px; padding: 84px var(--gutter) 48px; }
  .hero-sign { height: 132px; justify-self: start; }
  @media (max-height: 720px) { .hero-sign { height: 104px; } }
  .hero h1 { font-size: clamp(28px, 8.4vw, 40px); }
}
@media (min-width: 900px) { .hero h1 { font-size: clamp(40px, min(4.4vw, 8svh), 84px); max-width: 16ch; } .hero-sub { font-size: clamp(18px, 1.3vw, 22px); } }

/* EG-02: compact contents; the header's five links */
.toc { padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(64px, 6vw, 104px); }
.toc-k { font: 400 clamp(26px, 3vw, 44px)/1.1 var(--serif); letter-spacing: -0.03em; }
.toc-list a { padding: 16px 0; }
@media (min-width: 1000px) { .toc-list a { padding: 18px 0; } }
.nav a { padding: 10px 11px; }
h2[tabindex="-1"]:focus { outline: none; }
/* EG-08: the Armenian button reads its own name */
.toggle .lg-short { display: none; }
@media (max-width: 1279px) { .toggle .lg-full { display: none; } .toggle .lg-short { display: inline; } }

/* EG-03: three questions of the organiser on a living card */
.focus { display: grid; gap: 40px; }
.focus-h { position: relative; z-index: 1; font: 400 clamp(24px, 2.6vw, 44px)/1.15 var(--serif); letter-spacing: -0.03em; max-width: 22ch; }
.focus-list { display: grid; gap: 32px; }
.focus-list li { display: grid; gap: 14px; align-content: start; }
.focus-list .meta-fact { --pl: var(--ivory); --pt: var(--coal); }
.focus-list p:not(.meta-fact) { color: rgba(243, 238, 230, 0.86); font-size: clamp(16px, 1.1vw, 19px); line-height: 1.55; }
@media (min-width: 900px) { .focus-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.seen-grid { margin-top: 40px; }
@media (min-width: 1000px) { .seen-side { grid-column: 1 / 9; } }

/* EG-04: modules read without opening anything; details on demand */
.offer-b { font-size: clamp(18px, 1.35vw, 23px); line-height: 1.45; }
.more { border-top: 1px solid var(--line-d); }
.more summary { display: inline-flex; align-items: center; gap: 12px; padding: 16px 0 4px; cursor: pointer; list-style: none; font: 500 16px/1.3 var(--text); color: var(--accent); }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ""; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 400ms var(--ease); }
.more[open] summary::after { transform: rotate(45deg); }
.more .m-less, .more[open] .m-more { display: none; }
.more[open] .m-less { display: inline; }
.more .acc p { padding: 10px 0 4px; color: var(--mute-d); max-width: 60ch; }
.rp { display: flex; justify-content: center; padding: 24px 0 8px; }
.rp .phone { width: 270px; height: auto; aspect-ratio: 9 / 19; }
.rp-scr { position: absolute; inset: 0; opacity: 1; transform: none; padding: 26px 14px 14px; gap: 8px; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mock-stats i { height: 34px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-d); }
.mock-next { margin-top: auto; display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--paper); }
.mock-next p:first-child { font: 600 11px/1.2 var(--text); color: var(--mute-d); }
.mock-next .mock-btn { margin: 0; }
/* the morning video: an idea set apart, with its own estimate */
.morning { padding: 24px 0; }
.morning-card { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 20px; padding: clamp(28px, 3.4vw, 56px); border-radius: 28px; background: #1c1410; color: var(--ivory); }
.morning-card > :not(.grain-gl) { position: relative; z-index: 1; }
.morning-k { display: flex; flex-wrap: wrap; gap: 12px 0; }
.morning-k .meta-fact:first-child { --pl: var(--gold); }
.morning-t { font: 400 clamp(30px, 3.4vw, 58px)/1.05 var(--serif); letter-spacing: -0.04em; }
.morning-x { font-size: clamp(17px, 1.25vw, 21px); line-height: 1.55; max-width: 48ch; }
.morning-steps { display: grid; gap: 10px; counter-reset: none; }
.morning-steps li { display: flex; align-items: center; gap: 14px; font-size: clamp(16px, 1.05vw, 18px); }
.morning-steps b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(243, 238, 230, 0.14); font: 500 15px/1 var(--serif); color: var(--gold); }
.morning-note { font-size: 16px; line-height: 1.55; color: rgba(243, 238, 230, 0.72); max-width: 60ch; }
@media (min-width: 1200px) { .morning-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }

/* EG-05/06: one disclosure for the extra services */
.extra { margin-top: clamp(48px, 5vw, 88px); display: grid; justify-items: start; gap: 32px; }
.extra-body { width: 100%; animation: extraIn 500ms var(--ease); }
@keyframes extraIn { from { opacity: 0; transform: translateY(12px); } }
.extra-note { font-size: clamp(17px, 1.2vw, 20px); color: var(--mute-d); margin-bottom: 24px; }
.extra-list { display: grid; }
.extra-list > li { display: grid; gap: 10px; padding: 26px 0; border-top: 1px solid var(--line-d); }
.extra-list > li:last-child { border-bottom: 1px solid var(--line-d); }
.extra-t { font: 400 clamp(20px, 1.7vw, 28px)/1.2 var(--serif); letter-spacing: -0.02em; }
.extra-list p { color: var(--mute-d); max-width: 70ch; }
.extra-paths { display: grid; gap: 12px; margin-top: 8px; }
.extra-paths li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--paper); font: 500 16px/1.35 var(--text); }
.extra-paths b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink-d); color: var(--ivory); font: 500 14px/1 var(--serif); }
.extra-small { font-size: 15px; }
@media (min-width: 900px) {
  .extra-list > li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); }
  .extra-list > li > :not(.extra-t) { grid-column: 2; }
  .extra-list > li > .extra-t { grid-row: 1 / span 3; }
  .extra-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .extra-body { animation: none; } }

/* EG-07: the estimate as one clear sentence until a range is approved; contacts */
.cost-one { grid-template-columns: 1fr !important; }
.cost-phrase { font: 400 clamp(22px, 2.4vw, 40px)/1.2 var(--serif); letter-spacing: -0.03em; color: var(--ivory) !important; max-width: 24ch; }
.reach-solo { grid-template-columns: 1fr !important; }
.contacts-list li.minor a { font-size: clamp(15px, 1.3vw, 19px); color: var(--mute-l); }

/* narrow phones (320): nothing wider than the screen */
.offer-grid { grid-template-columns: minmax(0, 1fr); }
.offer-item { grid-template-columns: 56px minmax(0, 1fr); }
.offer-body, .morning-card, .extra, .extra-list > li { min-width: 0; }
.meta-fact, .tag, .get-t { max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (min-width: 1000px) { .offer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .offer-item { grid-template-columns: minmax(120px, 0.3fr) minmax(0, 1fr); } }.rp .phone { width: min(270px, 100%); }
@media (max-width: 639px) { .offer-item { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .offer-n { font-size: 56px; } }

/* ===== II. the proposal as a package: three cards, the one link shown, the option, the rest ===== */
.pk-head { display: grid; gap: 24px; }
.pk-lead { max-width: 44ch; }
.pk-cards { display: grid; gap: 16px; margin-top: 48px; }
.pk-card { position: relative; display: flex; flex-direction: column; gap: 22px; padding: clamp(26px, 2.6vw, 40px); border-radius: 28px; background: var(--paper);
  transition: transform 600ms var(--ease), box-shadow 600ms var(--ease); }
.pk-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(22, 18, 14, 0.45); }
.pk-n { font: 300 clamp(56px, 5vw, 92px)/0.8 var(--serif); letter-spacing: -0.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-t { font: 400 clamp(22px, 1.9vw, 32px)/1.12 var(--serif); letter-spacing: -0.03em; text-wrap: balance; }
.pk-part { display: grid; gap: 8px; }
.pk-k { font: 600 15px/1.2 var(--text); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.pk-part p:not(.pk-k) { font-size: clamp(16px, 1.05vw, 18px); line-height: 1.55; color: var(--mute-d); }
.pk-get { padding-top: 22px; border-top: 1px solid var(--line-d); }
.pk-get p:not(.pk-k) { color: var(--ink-d); font-weight: 400; }
.pk-card .more { margin-top: auto; }
.pk-example { display: grid; gap: 32px; margin-top: clamp(72px, 7vw, 120px); align-items: center; }
.pk-ex-t { font: 400 clamp(26px, 3vw, 50px)/1.1 var(--serif); letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance; }
.pk-ex-list { display: grid; gap: 0; margin-top: 28px; }
.pk-ex-list li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-d); font-size: clamp(17px, 1.2vw, 20px); }
.pk-ex-list li:last-child { border-bottom: 1px solid var(--line-d); }
.pk-ex-list li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--grad); }
.pk-example .rp { padding: 0; }
.pk-example .rp .phone { width: min(300px, 100%); }
.pk-morning { margin-top: clamp(64px, 6vw, 104px); }
.pk-morning .morning { padding: 0; }
@media (min-width: 900px) {
  .pk-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .pk-head .h2 { grid-column: 1 / 8; }
  .pk-lead { grid-column: 8 / 13; }
  .pk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 72px; }
  .pk-example { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .pk-ex-text { grid-column: 1 / 7; }
  .pk-example .rp { grid-column: 8 / 13; }
  .pk-morning .morning-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pk-morning .morning-steps li { align-items: flex-start; flex-direction: column; gap: 12px; }
  .pk-morning .morning-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; }
  .pk-morning .morning-card > * { grid-column: 1 / -1; }
  .pk-morning .morning-t { grid-column: 1; }
  .pk-morning .morning-x { grid-column: 2; align-self: end; }
}
@media (prefers-reduced-motion: reduce) { .pk-card { transition: none; } .pk-card:hover { transform: none; } }


/* "Ролик к утру", fixed: the living gradient fills the whole card (it must not take a grid cell),
   the field is deeper so every line reads, the notes sit side by side under the steps */
.morning-card > .grain-gl { grid-column: auto !important; grid-row: auto !important; }
.morning-steps b { background: var(--gold); color: var(--coal); font-weight: 500; }
.morning-steps span { text-wrap: balance; }
.morning-x, .morning-steps li { color: var(--ivory); }
.morning-notes { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(243, 238, 230, 0.18); }
.morning-note { color: rgba(243, 238, 230, 0.8); max-width: none; }
@media (min-width: 900px) {
  .pk-morning .morning-card { row-gap: 32px; }
  .morning-notes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; }
}

/* the two-column card only where there is room for it; on a phone everything stacks */
.pk-morning .morning-card { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .pk-morning .morning-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pk-morning .morning-card > :not(.grain-gl) { grid-column: 1 / -1; }
  .pk-morning .morning-card > .morning-t { grid-column: 1; }
  .pk-morning .morning-card > .morning-x { grid-column: 2; }
}
@media (max-width: 899px) { .morning-k .meta-fact { font-size: 14px; } }


/* ===== "Ролик к утру", recomposed: one reading column and the video itself ===== */
.mc { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 48px; padding: clamp(28px, 4.4vw, 80px); border-radius: 32px; background: #1c1410; color: var(--ivory); }
.mc > :not(.grain-gl) { position: relative; z-index: 1; }
.mc-main { display: grid; gap: 28px; align-content: start; }
.mc-t { font: 400 clamp(44px, 6vw, 108px)/0.95 var(--serif); letter-spacing: -0.055em; }
.mc-x { font-size: clamp(18px, 1.35vw, 23px); line-height: 1.5; max-width: 34ch; }
.mc-steps { position: relative; display: grid; gap: 18px; margin-top: 4px; }
.mc-steps::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--gold), rgba(227, 162, 61, 0.15)); }
.mc-steps li { position: relative; display: flex; align-items: center; gap: 20px; font-size: clamp(17px, 1.25vw, 21px); }
.mc-steps b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--coal); font: 500 15px/1 var(--serif); box-shadow: 0 0 0 6px rgba(28, 20, 16, 0.9); }
.mc-notes { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(243, 238, 230, 0.16); max-width: 56ch; }
.mc-notes p { font-size: 16px; line-height: 1.55; color: rgba(243, 238, 230, 0.74); }
.mc-story { display: grid; place-items: center; }
.sf { position: relative; width: min(300px, 72vw); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; rotate: -4deg;
  background: radial-gradient(90% 60% at 60% 30%, rgba(240, 84, 60, 0.75), transparent 70%), radial-gradient(80% 60% at 30% 80%, rgba(227, 162, 61, 0.6), transparent 70%), #2a1612;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(243, 238, 230, 0.18); }
.sf-bars { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; gap: 5px; }
.sf-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(243, 238, 230, 0.3); overflow: hidden; position: relative; }
.sf-bars i::after { content: ""; position: absolute; inset: 0; background: var(--ivory); transform: scaleX(0); transform-origin: 0 50%; animation: sfBar 10s linear infinite; }
.sf-bars i:nth-child(2)::after { animation-name: sfBar2; } .sf-bars i:nth-child(3)::after { animation-name: sfBar3; } .sf-bars i:nth-child(4)::after { animation-name: sfBar4; }
@keyframes sfBar { 0% { transform: scaleX(0); } 25%, 100% { transform: scaleX(1); } }
@keyframes sfBar2 { 0%, 25% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes sfBar3 { 0%, 50% { transform: scaleX(0); } 75%, 100% { transform: scaleX(1); } }
@keyframes sfBar4 { 0%, 75% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.sf-play { position: absolute; left: 50%; top: 46%; width: 76px; height: 76px; translate: -50% -50%; border-radius: 50%; background: rgba(243, 238, 230, 0.92); }
.sf-play::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-left: 20px solid var(--coal); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.sf-cap { position: absolute; left: 18px; right: 18px; bottom: 20px; font: 500 16px/1.2 var(--text); }
@media (min-width: 900px) {
  .mc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; }
  .sf { width: min(320px, 100%); }
}
@media (prefers-reduced-motion: reduce) { .sf-bars i::after { animation: none; transform: scaleX(1); } .sf-bars i:nth-child(n+2)::after { transform: scaleX(0); } }
.mc { padding: clamp(28px, 3.6vw, 64px); }
.mc-main { gap: 22px; }
.mc-t { font-size: clamp(44px, 5vw, 88px); }
.mc-steps { gap: 12px; }
.mc-notes { padding-top: 20px; gap: 8px; }
.mc-notes p { font-size: 15px; }
@media (min-width: 900px) { .sf { width: min(290px, 100%); } }
.case-tape { margin: 40px 0 48px; }
/* the particle canvas covers the cover section itself (100vw counted the scrollbar and stuck out) */
.hero-stick { position: static; }
#gl { left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; } /* a canvas does not stretch between left and right: it needs an explicit size */
.hero { overflow: clip; } /* the glow behind the sign must not widen the page */
.nav a { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1439px) { .nav a { padding: 10px 8px; font-size: 14px; } .top { gap: 16px; } }@media (min-width: 1100px) and (max-width: 1199px) { .nav { display: none; } .menu-btn { display: inline-block; } .top-right { margin-left: auto; } }
/* illustrative frames for the mockups (generated with Gemini in Figma, no logos or text):
   the film cover and the gallery on the results page, the Stories video. Real footage replaces them. */
.rp .mock-film { background: linear-gradient(to top, rgba(18, 12, 8, 0.78), rgba(18, 12, 8, 0) 58%), url("../assets/kp/expo-hall.webp") 50% 40% / cover; }
.rp .mock-play { background: rgba(243, 238, 230, 0.9); }
.rp .mock-gallery i { background: url("../assets/kp/expo-hall.webp") no-repeat; background-size: 330% auto; }
.rp .mock-gallery i:nth-child(1) { background-position: 8% 30%; }
.rp .mock-gallery i:nth-child(2) { background-image: url("../assets/kp/expo-story.webp"); background-size: 180% auto; background-position: 40% 35%; }
.rp .mock-gallery i:nth-child(3) { background-position: 92% 60%; }
.rp .mock-gallery i:nth-child(4) { background-image: url("../assets/kp/expo-story.webp"); background-size: 220% auto; background-position: 80% 55%; }
.rp .mock-gallery i:nth-child(5) { background-position: 55% 85%; }
.rp .mock-gallery i:nth-child(6) { background-position: 30% 70%; background-size: 420% auto; }
.sf { background: linear-gradient(180deg, rgba(10, 6, 4, 0.45), rgba(10, 6, 4, 0) 22%, rgba(10, 6, 4, 0) 58%, rgba(10, 6, 4, 0.82)), url("../assets/kp/expo-story.webp") 50% 30% / cover; }
.sf-play { width: 64px; height: 64px; background: rgba(243, 238, 230, 0.86); top: 50%; }
.sf-play::after { border-left-width: 17px; border-top-width: 10px; border-bottom-width: 10px; }
.sf-play { display: none; } /* Stories play by themselves: no button over the faces */


/* ===== round: header, iPhone, play button, glowing plan line, footer ===== */
/* header links: lighter and a touch smaller */
.nav a { font-weight: 300; font-size: 14px; letter-spacing: 0; }
.nav a[aria-current], .nav a:hover { font-weight: 400; }

/* an iPhone, not a rounded box: titanium edge, thin bezel, Dynamic Island, status bar, buttons */
.rp .phone { position: relative; padding: 10px; border-radius: 52px; aspect-ratio: 9 / 19.5;
  background: linear-gradient(145deg, #5a5650 0%, #262421 22%, #3b3834 50%, #1a1917 78%, #4a4742 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 0 3px #0b0a09, 0 60px 90px -45px rgba(22, 18, 14, 0.55), 0 24px 40px -28px rgba(22, 18, 14, 0.4); }
.rp .phone::before, .rp .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2c2a27, #55514b); }
.rp .phone::before { left: -3px; top: 17%; height: 6%; box-shadow: 0 11.5cqh 0 #3a3733; }
.rp .phone::after { right: -3px; top: 24%; height: 11%; }
.rp .phone { container-type: size; }
.rp .phone-in { border-radius: 42px; background: #f6f2ec; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.rp .phone-in::before { content: ""; position: absolute; z-index: 5; top: 9px; left: 50%; width: 32%; height: 24px; translate: -50% 0; border-radius: 20px; background: #050505; }
.rp .phone-in::after { content: "9:41"; position: absolute; z-index: 5; top: 13px; left: 9%; font: 600 13px/1 -apple-system, "SF Pro Text", "Manrope", system-ui, sans-serif; color: #111; letter-spacing: 0; }
.rp-scr { padding-top: 46px !important; }
.rp-scr::before { content: ""; position: absolute; top: 15px; right: 9%; width: 22px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.4px rgba(17, 17, 17, 0.85), inset 0 0 0 3px #f6f2ec, inset 0 0 0 9px #111; }

/* the case's play button: a glass ring around a solid disc, calm instead of a pulsing outline */
.case-play { background: rgba(243, 238, 230, 0.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(243, 238, 230, 0.4), 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.case-play::before { inset: 15%; border-radius: 50%; background: var(--ivory); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55); animation: none; opacity: 1; transform: none; transition: scale 600ms var(--ease); }
.case-play::after { z-index: 1; border-left-width: 22px; border-top-width: 13px; border-bottom-width: 13px; }
.case-frame:hover .case-play { transform: none; }
.case-frame:hover .case-play::before { scale: 1.08; }

/* the plan line: a soft glowing beam; the stages are lights on it, not stickers */
.step-dot, .steps-track::after { background: radial-gradient(circle, #fff4e2 0 16%, #ffbe7a 36%, #f0543c 66%, rgba(240, 84, 60, 0) 100%) !important;
  box-shadow: 0 0 16px 5px rgba(240, 110, 50, 0.42) !important; border-radius: 50%; transition: scale 500ms var(--ease), box-shadow 500ms var(--ease); }
.steps li:hover .step-dot { scale: 1.35; box-shadow: 0 0 30px 12px rgba(240, 110, 50, 0.6) !important; }
.motion-on .steps-light::before { border-radius: 3px; box-shadow: 0 0 14px 3px rgba(240, 100, 50, 0.55), 0 0 4px 1px rgba(255, 190, 120, 0.8); }
.motion-on .steps-light b { box-shadow: 0 0 28px 8px rgba(255, 160, 90, 0.6); filter: blur(0.6px); }
@media (min-width: 900px) {
  .step-dot { width: 24px; height: 24px; margin-top: -4px; margin-left: -4px; }
  .steps-track::after { width: 24px; height: 24px; top: -4px; right: -12px; }
  .motion-on .steps-line { top: 7px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(240, 84, 60, 0.22), rgba(227, 162, 61, 0.22)); filter: blur(1px); }
  .motion-on .steps-light { top: 7px; height: 3px; }
}
@media (max-width: 899px) { .step-dot { width: 22px; height: 22px; left: -11px; top: 30px; } }

/* the footer word fits at every width */
.wordmark span { font-size: clamp(40px, 12vw, 190px); }


/* the proposal cards, with a picture for each module: a dark card on the light page, the frame on
   top with its number, then what we do and what you get; a lift and a slow zoom on hover */
.pk-card.has-media { padding: 0; overflow: hidden; background: var(--ink-d); color: var(--ivory); gap: 0; isolation: isolate; }
.pk-card.has-media > :not(.pk-media) { margin: 0 clamp(24px, 2.4vw, 36px); }
.pk-card.has-media .pk-t { margin-top: 26px; color: var(--ivory); }
.pk-card.has-media .pk-part { margin-top: 18px; }
.pk-card.has-media .pk-get { border-top-color: rgba(243, 238, 230, 0.16); }
.pk-card.has-media .pk-k { color: var(--gold); }
.pk-card.has-media .pk-part p:not(.pk-k) { color: rgba(243, 238, 230, 0.72); }
.pk-card.has-media .pk-get p:not(.pk-k) { color: var(--ivory); }
.pk-card.has-media .more { margin-top: auto; padding-top: 20px; margin-bottom: 24px; border-top-color: rgba(243, 238, 230, 0.16); }
.pk-card.has-media .more summary { color: var(--gold); }
.pk-card.has-media .more .acc p { color: rgba(243, 238, 230, 0.72); }
.pk-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pk-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.pk-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 18, 14, 0) 45%, rgba(22, 18, 14, 0.85) 100%); }
.pk-media .pk-n { position: absolute; z-index: 1; left: clamp(20px, 2vw, 32px); bottom: 14px; font-size: clamp(64px, 5.6vw, 104px); background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ivory); text-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); }
.pk-card.has-media:hover .pk-media img { transform: scale(1.05); }
.pk-card.has-media:hover { box-shadow: 0 40px 70px -40px rgba(22, 18, 14, 0.7); }
#o-social .pk-media img { object-position: 50% 30%; }
#o-page .pk-media img { object-position: 55% 40%; }
@media (prefers-reduced-motion: reduce) { .pk-media img { transition: none; } .pk-card.has-media:hover .pk-media img { transform: none; } }

#o-shoot .pk-media img { object-position: 60% 45%; }
#o-social .pk-media img { object-position: 62% 40%; }
#o-page .pk-media img { object-position: 58% 50%; }


/* ===== "One link answers the questions": a live messenger ===== */
.chat-block { display: grid; gap: 40px; margin-top: clamp(72px, 7vw, 120px); align-items: center; }
.cb-text { display: grid; gap: 22px; align-content: start; }
.cb-t { font: 400 clamp(28px, 3.2vw, 54px)/1.08 var(--serif); letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance; }
.cb-lead { font-size: clamp(17px, 1.25vw, 21px); color: var(--mute-d); max-width: 40ch; }
.cb-qs { display: grid; gap: 10px; margin-top: 8px; }
.cb-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 22px; border: 0; border-radius: 18px; background: var(--paper); color: var(--ink-d);
  text-align: left; cursor: pointer; transition: background-color 400ms var(--ease), color 400ms var(--ease), transform 400ms var(--ease); }
.cb-q:hover { transform: translateX(4px); }
.cb-q:active { transform: scale(0.99); }
.cb-qt { font: 400 clamp(17px, 1.3vw, 22px)/1.25 var(--serif); letter-spacing: -0.02em; }
.cb-role { order: 2; flex: none; padding: 6px 12px; border-radius: 999px; background: rgba(22, 18, 14, 0.07); font: 500 14px/1 var(--text); color: var(--mute-d); }
.cb-q[aria-pressed="true"] { background: var(--ink-d); color: var(--ivory); }
.cb-q[aria-pressed="true"] .cb-role { background: var(--gold); color: var(--coal); }
.cb-phone { padding: 0 !important; }
.cb-phone .phone { width: min(330px, 100%) !important; }
@media (min-width: 900px) {
  .chat-block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .cb-text { grid-column: 1 / 7; }
  .cb-phone { grid-column: 8 / 13; }
}

/* the messenger inside the iPhone */
.cm { display: flex; flex-direction: column; background: #e9e1d5 !important; }
.cm-head { position: relative; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 44px 14px 10px; background: rgba(246, 242, 236, 0.96); box-shadow: 0 1px 0 rgba(22, 18, 14, 0.08); }
.cm-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: var(--coal); font: 600 12px/1 var(--text); }
.cm-name { font: 600 14px/1.2 var(--text); color: #111; }
.cm-st { font: 400 12px/1.2 var(--text); color: #2f8f4e; }
.cm-feed { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 12px; overflow-y: auto; scrollbar-width: none;
  background-image: radial-gradient(rgba(22, 18, 14, 0.05) 1px, transparent 1px); background-size: 14px 14px; }
.cm-feed::-webkit-scrollbar { display: none; }
.cm-msg { position: relative; max-width: 84%; padding: 9px 12px 18px; border-radius: 16px; background: #fff; color: #161310; font: 400 13px/1.38 var(--text); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  animation: msgIn 420ms var(--ease) both; }
.cm-msg.in { align-self: flex-start; border-bottom-left-radius: 5px; }
.cm-msg.out { align-self: flex-end; border-bottom-right-radius: 5px; background: #ffe7cf; }
.cm-from { font: 600 12px/1.2 var(--text); color: var(--accent); margin-bottom: 3px; }
.cm-time { position: absolute; right: 10px; bottom: 5px; font: 400 10px/1 var(--text); color: rgba(22, 18, 14, 0.45); }
.cm-typing { display: flex; gap: 4px; padding: 12px 14px; }
.cm-typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(22, 18, 14, 0.4); animation: dot 1s ease-in-out infinite; }
.cm-typing i:nth-child(2) { animation-delay: 0.15s; } .cm-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.cm-link { display: grid; gap: 3px; width: 84%; padding: 6px 6px 18px; border: 0; text-align: left; cursor: pointer; transition: transform 400ms var(--ease); }
.cm-link:hover { transform: translateY(-2px); }
.cm-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 11px; background: center / cover; margin-bottom: 5px; }
.cm-lt { padding: 0 6px; font: 600 13px/1.3 var(--text); }
.cm-ls { padding: 0 6px; font: 400 12px/1.3 var(--text); color: rgba(22, 18, 14, 0.65); }
.cm-ld { padding: 0 6px; font: 500 11px/1.3 var(--text); color: var(--accent); }
.cm-link.is-hint::after { content: ""; position: absolute; inset: -4px; border-radius: 19px; box-shadow: 0 0 0 2px rgba(240, 84, 60, 0.5); animation: hint 1.8s var(--ease) 2; pointer-events: none; }
@keyframes hint { 0% { opacity: 0; transform: scale(0.98); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.03); } }
.cm-input { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; margin: 0 10px 14px; padding: 10px 14px; border-radius: 22px; background: #fff; font: 400 13px/1 var(--text); color: rgba(22, 18, 14, 0.4); }
.cm-input i { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); }
/* the opened link: a page that slides up inside the phone */
.cm-sheet { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; top: 38px; border-radius: 22px 22px 0 0; background: #f6f2ec; box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, 0.35);
  transform: translateY(104%); transition: transform 600ms var(--ease); overflow: hidden; display: flex; flex-direction: column; }
.cm-sheet.is-open { transform: none; }
.cm-close { align-self: flex-end; margin: 10px 10px 0; padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(22, 18, 14, 0.08); font: 600 12px/1 var(--text); color: #161310; cursor: pointer; }
.cm-page { flex: 1; overflow-y: auto; scrollbar-width: none; }
.cm-page::-webkit-scrollbar { display: none; }
.cm-rp { position: static !important; display: flex; flex-direction: column; gap: 8px; padding: 8px 14px 16px !important; }
.cm-rp::before { display: none; }
.cp { display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 16px; }
.cp-h { font: 500 15px/1.25 var(--serif); letter-spacing: -0.02em; color: #161310; }
.cp-video { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; background: center / cover; display: flex; align-items: flex-end; padding: 10px; color: #fff; font: 600 12px/1.2 var(--text); }
.cp-video::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.6)); }
.cp-video p { position: relative; }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cp-grid i { aspect-ratio: 1; border-radius: 8px; background: center / cover; }
.cp-hero { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; background: center / cover; display: flex; align-items: flex-end; padding: 12px; color: #fff; font: 500 16px/1.2 var(--serif); }
.cp-hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.65)); }
.cp-hero p { position: relative; }
.cp-x { font: 400 13px/1.45 var(--text); color: rgba(22, 18, 14, 0.7); }
.cp-field { padding: 11px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 18, 14, 0.12); font: 400 12px/1 var(--text); color: rgba(22, 18, 14, 0.45); }
.cp-story { position: absolute; inset: 0; background: center / cover; }
.cp-story::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.35), transparent 25%, transparent 60%, rgba(0, 0, 0, 0.75)); }
.cp-story .sf-cap { color: #fff; z-index: 1; }
.cm-sheet:has(.cp-story) .cm-close { position: relative; z-index: 2; background: rgba(255, 255, 255, 0.85); }
@media (prefers-reduced-motion: reduce) { .cm-msg, .cm-sheet { animation: none; transition: none; } .cm-link.is-hint::after { display: none; } }


/* threads that arrive message by message (the night of the morning video, Alexey's letter) */
.mt { display: grid; gap: 10px; margin-top: 4px; max-width: 520px; }
.mt-msg { position: relative; max-width: 86%; padding: 10px 14px 22px; border-radius: 18px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.4; }
.mt-msg.me { justify-self: end; border-bottom-right-radius: 6px; background: #ffe7cf; color: #161310; }
.mt-msg.them { justify-self: start; border-bottom-left-radius: 6px; background: rgba(243, 238, 230, 0.1); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mt-who { font: 600 13px/1.2 var(--text); margin-bottom: 4px; }
.mt-msg.me .mt-who { color: var(--accent); }
.mt-msg.them .mt-who { color: var(--gold); }
.mt-time { position: absolute; right: 12px; bottom: 6px; font: 400 11px/1 var(--text); opacity: 0.55; }
.mt-video { position: relative; display: block; width: 120px; aspect-ratio: 9 / 16; margin: 4px 0 8px; border-radius: 12px; background: center / cover; }
.mt-video i { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, 0.9); }
.mt-video i::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-left: 11px solid #161310; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.motion-on [data-seq] .mt-msg, .motion-on [data-seq] .ac-replies { opacity: 0; transform: translateY(14px) scale(0.97); }
.motion-on [data-seq].is-play .mt-msg, .motion-on [data-seq].is-play .ac-replies { animation: msgIn 520ms var(--ease) both; animation-delay: calc(var(--i) * 650ms + 200ms); opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .motion-on [data-seq] .mt-msg, .motion-on [data-seq] .ac-replies { opacity: 1; transform: none; animation: none !important; } }

/* Alexey's letter as a chat with quick replies that open Telegram with the text filled in */
.ac { display: grid; gap: 10px; width: 100%; max-width: 620px; }
.ac-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.ac-ava { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--grad); color: var(--coal); font: 500 16px/1 var(--serif); }
.ac-ava img { width: 100%; height: 100%; object-fit: cover; }
.ac-name { font: 500 18px/1.2 var(--serif); letter-spacing: -0.02em; }
.ac-role { font-size: 15px; color: var(--mute-l); }
.ac-msg { padding-bottom: 12px; font-size: clamp(16px, 1.2vw, 19px); }
.ac-replies { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ac-reply { padding: 12px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(227, 162, 61, 0.55); color: var(--ivory); text-decoration: none; font: 500 15px/1.2 var(--text);
  transition: background-color 400ms var(--ease), color 400ms var(--ease), transform 400ms var(--ease); }
.ac-reply:hover { background: var(--gold); color: var(--coal); transform: translateY(-2px); }
.ac-reply:active { transform: scale(0.98); }
.mt-msg { width: fit-content; }


/* ===== II. the proposal as one stage with three tabs ===== */
.tb { margin-top: clamp(40px, 4vw, 64px); }
.tb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tb-tab { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px 20px; border: 0; border-radius: 20px 20px 0 0; background: transparent; color: var(--mute-d); text-align: left; cursor: pointer;
  transition: color 400ms var(--ease), background-color 400ms var(--ease); }
.tb-tab:hover { color: var(--ink-d); background: rgba(22, 18, 14, 0.04); }
.tb-n { flex: none; font: 300 clamp(30px, 2.6vw, 46px)/0.9 var(--serif); letter-spacing: -0.05em; }
.tb-l { font: 400 clamp(16px, 1.35vw, 22px)/1.2 var(--serif); letter-spacing: -0.02em; }
.tb-bar { position: absolute; left: 20px; right: 20px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--ease); box-shadow: 0 0 14px 2px rgba(240, 110, 50, 0.4); }
.tb-tab[aria-selected="true"] { color: var(--ink-d); }
.tb-tab[aria-selected="true"] .tb-n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-tab[aria-selected="true"] .tb-bar { transform: none; }
.tb-stage { position: relative; isolation: isolate; overflow: hidden; display: grid; margin-top: 8px; border-radius: 32px; background: #1c1410; color: var(--ivory); }
.tb-stage > :not(.grain-gl) { position: relative; z-index: 1; }
.tb-panel { grid-area: 1 / 1; display: grid; gap: 36px; padding: clamp(28px, 4vw, 72px); opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease), visibility 0s 500ms; }
.tb-panel.is-on { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease); }
.tb-panel .tb-visual { transform: translateY(24px) scale(0.98); transition: transform 900ms var(--ease); }
.tb-panel.is-on .tb-visual { transform: none; }
.tb-text { display: grid; gap: 0; align-content: start; }
.tb-text .pk-t { font-size: clamp(28px, 3vw, 52px); line-height: 1.05; color: var(--ivory); margin-bottom: 8px; }
.tb-text .pk-part { margin-top: 22px; }
.tb-text .pk-k { color: var(--gold); }
.tb-text .pk-part p:not(.pk-k) { color: rgba(243, 238, 230, 0.75); font-size: clamp(16px, 1.15vw, 19px); }
.tb-text .pk-get { border-top-color: rgba(243, 238, 230, 0.16); }
.tb-text .pk-get p:not(.pk-k) { color: var(--ivory); }
.tb-text .more { margin-top: 26px; border-top-color: rgba(243, 238, 230, 0.16); }
.tb-text .more summary { color: var(--gold); }
.tb-text .more .acc p { color: rgba(243, 238, 230, 0.72); }
.tb-visual { display: grid; place-items: center; }
@media (min-width: 900px) {
  .tb-panel { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: 560px; }
  .tb-text { grid-column: 1 / 6; }
  .tb-visual { grid-column: 6 / 13; }
}
@media (max-width: 639px) {
  .tb-tabs { gap: 2px; }
  .tb-tab { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 10px 18px; }
  .tb-l { font-size: 14px; }
  .tb-bar { left: 10px; right: 10px; }
}
/* the film: a wide player and a strip of photos */
.tv-film { width: 100%; display: grid; gap: 10px; }
.tv-player { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; background: center / cover; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); overflow: hidden; }
.tv-player::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.55)); }
.tv-play { position: absolute; z-index: 1; left: 50%; top: 46%; width: 84px; height: 84px; translate: -50% -50%; border-radius: 50%; background: rgba(243, 238, 230, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, 0.4); }
.tv-play::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: var(--ivory); }
.tv-play::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-left: 16px solid #161310; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.tv-play.sm { width: 56px; height: 56px; }
.tv-play.sm::after { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
.tv-bar { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; height: 4px; border-radius: 4px; background: rgba(243, 238, 230, 0.3); overflow: hidden; }
.tv-bar i { position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0.38); }
.tb-panel.is-on .tv-bar i { animation: tvBar 9s linear infinite; }
@keyframes tvBar { from { transform: scaleX(0.05); } to { transform: scaleX(1); } }
.tv-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tv-strip i { aspect-ratio: 4 / 3; border-radius: 12px; background: center / cover; }
/* short videos: a fan of three vertical clips */
.tv-fan { position: relative; width: 100%; height: clamp(300px, 34vw, 460px); }
.tv-reel { position: absolute; top: 50%; left: 50%; width: clamp(130px, 13vw, 200px); aspect-ratio: 9 / 16; border-radius: 22px; background: center / cover; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(243, 238, 230, 0.15);
  transition: transform 900ms var(--ease); }
.tv-reel .sf-bars { left: 10px; right: 10px; top: 10px; }
.tv-r0 { transform: translate(-50%, -50%) translateX(-78%) rotate(-9deg) scale(0.9); }
.tv-r1 { z-index: 2; transform: translate(-50%, -50%); }
.tv-r2 { transform: translate(-50%, -50%) translateX(78%) rotate(9deg) scale(0.9); }
.tb-panel:not(.is-on) .tv-r0, .tb-panel:not(.is-on) .tv-r2 { transform: translate(-50%, -50%) scale(0.85); }
.tv-fan:hover .tv-r0 { transform: translate(-50%, -50%) translateX(-92%) rotate(-12deg) scale(0.92); }
.tv-fan:hover .tv-r2 { transform: translate(-50%, -50%) translateX(92%) rotate(12deg) scale(0.92); }
/* the one link: a browser window with the results page */
.tv-browser { width: 100%; border-radius: 18px; overflow: hidden; background: #f6f2ec; color: #161310; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.tv-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #e6dfd4; }
.tv-chrome i { width: 11px; height: 11px; border-radius: 50%; background: rgba(22, 18, 14, 0.18); }
.tv-chrome span { margin-left: 12px; padding: 5px 14px; border-radius: 999px; background: #fff; font: 500 12px/1 var(--text); color: rgba(22, 18, 14, 0.6); }
.tv-page { display: grid; gap: 12px; padding: 14px; }
.tv-hero { position: relative; aspect-ratio: 21 / 9; border-radius: 12px; background: center / cover; display: flex; align-items: flex-end; padding: 14px; overflow: hidden; }
.tv-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0, 0, 0, 0.65)); }
.tv-hero p { position: relative; color: #fff; font: 500 clamp(14px, 1.3vw, 20px)/1.15 var(--serif); letter-spacing: -0.02em; max-width: 60%; }
.tv-hero .tv-play { top: 50%; }
.tv-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tv-gal i { aspect-ratio: 1; border-radius: 10px; background: center / cover; }
.tv-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #ebe4d9; font: 500 13px/1.2 var(--text); }
.tv-next b { padding: 8px 14px; border-radius: 999px; background: #161310; color: #fff; font-weight: 600; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .tb-panel, .tb-panel .tb-visual, .tv-reel { transition: none; } .tv-bar i { animation: none !important; } }
.tb-panel { padding: clamp(28px, 3.4vw, 56px); }
.tv-film, .tv-browser { max-width: 600px; }
.tv-gal i { aspect-ratio: 4 / 3; }
.tv-hero { aspect-ratio: 2.4 / 1; }
@media (min-width: 900px) { .tb-panel { min-height: 0; } .tv-fan { height: clamp(300px, 30vw, 420px); } }
@media (max-width: 899px) { .tb-visual { order: -1; } .tb-panel { gap: 28px; } .tv-fan { height: 300px; } .tv-reel { width: 132px; } }
@media (max-width: 899px) {
  .tv-hero .tv-play { left: auto; right: 12px; top: 12px; translate: none; width: 44px; height: 44px; }
  .tv-hero .tv-play::after { border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
  .tv-hero p { max-width: 75%; }
  .tv-reel { width: 118px; }
  .tv-r0 { transform: translate(-50%, -50%) translateX(-62%) rotate(-8deg) scale(0.9); }
  .tv-r2 { transform: translate(-50%, -50%) translateX(62%) rotate(8deg) scale(0.9); }
}
.tb-panel { grid-template-columns: minmax(0, 1fr); } .tb-visual { min-width: 0; } .tv-film, .tv-browser { width: 100%; min-width: 0; } .tv-gal, .tv-strip { min-width: 0; }
@media (min-width: 900px) { .tb-panel { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.tv-gal, .tv-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ===== II. "One day at Healthcare Expo": a day you drag through ===== */
.day { margin-top: clamp(40px, 4vw, 64px); display: grid; gap: 18px; }
.day-head { display: grid; gap: 14px; margin-bottom: 10px; }
.day-scene { position: relative; overflow: hidden; display: grid; gap: 28px; min-height: 520px; padding: clamp(24px, 4vw, 64px); border-radius: 32px; color: var(--ink-d); transition: color 700ms var(--ease); isolation: isolate; }
.day.is-dark .day-scene { color: var(--ivory); }
.day-sky { position: absolute; inset: 0; z-index: -2; }
.day-sky i { position: absolute; inset: 0; }
.day-sky::after { content: ""; position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.day-orb { position: absolute; z-index: -1; width: clamp(90px, 9vw, 150px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #fff8e6 calc(var(--moon, 0) * 100%), #ffd08a) 0 40%, color-mix(in srgb, rgba(243, 238, 230, 0.25) calc(var(--moon, 0) * 100%), rgba(255, 170, 90, 0.45)) 58%, transparent 72%);
  filter: blur(1px); box-shadow: 0 0 80px 30px color-mix(in srgb, rgba(243, 238, 230, 0.12) calc(var(--moon, 0) * 100%), rgba(255, 170, 90, 0.35)); }
.day-shots { display: grid; place-items: center; }
.day-shot { grid-area: 1 / 1; margin: 0; width: min(100%, 520px); aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(18px) rotate(-1.5deg) scale(0.97); transition: opacity 600ms var(--ease), transform 900ms var(--ease); }
.day-shot.is-on { opacity: 1; transform: rotate(-1.5deg); }
.day-shot img { width: 100%; height: 100%; object-fit: cover; }
.day-shot.is-tall { width: min(100%, 250px); aspect-ratio: 9 / 16; transform: translateY(18px) rotate(2deg) scale(0.97); }
.day-shot.is-tall.is-on { transform: rotate(2deg); }
.day-shot.is-page { aspect-ratio: auto; overflow: visible; box-shadow: none; transform: translateY(18px) scale(0.97); }
.day-shot.is-page.is-on { transform: none; }
.day-copy { display: grid; }
.day-txt { grid-area: 1 / 1; display: grid; gap: 10px; align-content: center; opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
.day-txt.is-on { opacity: 1; transform: none; }
.day-time { font: 300 clamp(56px, 7vw, 120px)/0.9 var(--serif); letter-spacing: -0.06em; }
.day-t { font: 400 clamp(22px, 2.2vw, 36px)/1.1 var(--serif); letter-spacing: -0.03em; }
.day-x { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; max-width: 36ch; opacity: 0.85; }
@media (min-width: 900px) {
  .day-scene { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .day-copy { grid-row: 1; grid-column: 1; }
  .day-shots { grid-row: 1; grid-column: 2; }
}
/* the slider */
.day-ctrl { display: grid; gap: 10px; padding: 6px 4px 0; }
.day-track { position: relative; }
.day-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: grab; margin: 0; }
.day-range:active { cursor: grabbing; }
.day-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #f3c47e, #ef8a4d 40%, #1a120e 60%, #c4613a 80%, #ece1cf); box-shadow: 0 0 18px 2px rgba(240, 110, 50, 0.25); }
.day-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #f3c47e, #ef8a4d 40%, #1a120e 60%, #c4613a 80%, #ece1cf); }
.day-range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -14px; border-radius: 50%; background: radial-gradient(circle, #fff4e2 0 22%, #ffbe7a 42%, #f0543c 74%); box-shadow: 0 0 0 6px rgba(243, 238, 230, 0.9), 0 0 24px 8px rgba(240, 110, 50, 0.55); transition: transform 300ms var(--ease); }
.day-range::-moz-range-thumb { width: 34px; height: 34px; border: 0; border-radius: 50%; background: radial-gradient(circle, #fff4e2 0 22%, #ffbe7a 42%, #f0543c 74%); box-shadow: 0 0 0 6px rgba(243, 238, 230, 0.9), 0 0 24px 8px rgba(240, 110, 50, 0.55); }
.day-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.day-range:focus-visible { outline: none; }
.day-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--gold), 0 0 24px 8px rgba(240, 110, 50, 0.55); }
.day-hint { position: absolute; left: 0; top: -38px; padding: 6px 12px; border-radius: 999px; background: var(--ink-d); color: var(--ivory); font: 500 14px/1 var(--text); pointer-events: none; animation: hintBob 1.6s var(--ease) infinite; transition: opacity 400ms var(--ease); }
.day.is-touched .day-hint { opacity: 0; animation: none; }
@keyframes hintBob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
.day-ticks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.day-tick { padding: 6px 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 clamp(13px, 1vw, 16px)/1.2 var(--text); color: var(--mute-d); transition: color 300ms var(--ease); }
.day-tick:last-child { text-align: right; }
.day-tick:hover, .day-tick.is-on { color: var(--ink-d); }
.day-tick.is-on { font-weight: 600; }
/* the inventory of results */
.day-inv { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 32px); border-radius: 26px; background: var(--paper); }
.day-inv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; }
.day-inv-t { font: 400 clamp(20px, 1.6vw, 26px)/1.2 var(--serif); letter-spacing: -0.02em; }
.day-count { font: 500 15px/1.3 var(--text); color: var(--mute-d); transition: color 400ms var(--ease); }
.day.is-done .day-count { color: var(--accent); font-weight: 600; }
.day-slots { display: grid; gap: 10px; }
.day-slot { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; border-radius: 18px; background: rgba(22, 18, 14, 0.04); color: var(--mute-d); text-align: left;
  box-shadow: inset 0 0 0 1.5px rgba(22, 18, 14, 0.12); font: 500 16px/1.3 var(--text); cursor: default; transition: background-color 500ms var(--ease), color 500ms var(--ease), box-shadow 500ms var(--ease), transform 400ms var(--ease); }
.day-slot[aria-disabled="true"] { opacity: 0.6; }
.day-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(22, 18, 14, 0.25); position: relative; }
.day-slot.is-got { background: var(--ink-d); color: var(--ivory); box-shadow: none; cursor: pointer; animation: slotGot 700ms var(--ease); }
.day-slot.is-got .day-ico { background: var(--grad); box-shadow: 0 0 16px 4px rgba(240, 110, 50, 0.45); }
.day-slot.is-got .day-ico::after { content: ""; position: absolute; left: 10px; top: 6px; width: 6px; height: 11px; border: solid var(--coal); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.day-slot.is-got:hover { transform: translateY(-2px); }
.day-slot[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--gold); }
@keyframes slotGot { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
.day-opt { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(227, 162, 61, 0.2); color: var(--gold); font-size: 13px; }
.day-slot:not(.is-got) .day-opt { color: var(--mute-d); background: rgba(22, 18, 14, 0.06); }
.day-detail { padding: 20px 22px; border-radius: 18px; background: var(--ink-d); color: var(--ivory); display: grid; gap: 12px; animation: extraIn 450ms var(--ease); }
.day-dt { font: 400 clamp(20px, 1.7vw, 28px)/1.15 var(--serif); letter-spacing: -0.02em; }
.day-dd { display: grid; gap: 14px; }
.day-dd .pk-k { color: var(--gold); margin-bottom: 4px; }
.day-detail p:not(.day-dt):not(.pk-k) { color: rgba(243, 238, 230, 0.8); }
.day-dn { font-size: 15px; }
@media (min-width: 900px) { .day-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } .day-slot { align-items: flex-start; flex-direction: column; min-height: 132px; } .day-opt { margin-left: 0; } .day-dd { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 639px) { .day-scene { min-height: 0; } .day-shot { width: 100%; } .day-tick { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .day-shot, .day-txt, .day-slot, .day-scene { transition: none; animation: none; } .day-hint { animation: none; } }

/* each time label sits right under its stop on the slider (the thumb is 34px wide) */
.day-ticks { position: relative; display: block; height: 30px; }
.day-tick { position: absolute; top: 0; left: calc(17px + var(--k) * (100% - 34px)); translate: -50% 0; text-align: center; white-space: nowrap; }
.day-tick:first-child { translate: -17px 0; text-align: left; }
.day-tick:last-child { translate: calc(-100% + 17px) 0; text-align: right; }
@media (max-width: 639px) { .day-tick { font-size: 13px; } .day-tick:not(.is-on):not(:first-child):not(:last-child) { font-size: 12px; } }

@media (max-width: 899px) {
  .day-scene { gap: 18px; padding: 22px; }
  .day-shot { width: min(100%, 300px); }
  .day-shot.is-tall { width: 140px; }
  .day-shot.is-page { width: 100%; }
  .day-time { font-size: 52px; }
  .day-t { font-size: 22px; }
  .day-x { font-size: 16px; }
  .day-orb { width: 80px; }
}
@media (max-width: 639px) {
  /* on a phone the stops are dots under the slider; the current time is large in the scene */
  .day-ticks { height: 22px; }
  .day-tick { width: 34px; height: 22px; padding: 0; font-size: 0 !important; translate: -50% 0 !important; }
  .day-tick:first-child { translate: -17px 0 !important; } .day-tick:last-child { translate: calc(-100% + 17px) 0 !important; }
  .day-tick::before { content: ""; position: absolute; left: 50%; top: 6px; width: 9px; height: 9px; translate: -50% 0; border-radius: 50%; background: rgba(22, 18, 14, 0.22); transition: background-color 300ms var(--ease), transform 300ms var(--ease); }
  .day-tick.is-past::before { background: rgba(240, 84, 60, 0.55); }
  .day-tick.is-on::before { background: var(--accent); transform: scale(1.4); }
}

/* ===== "One day", simplified: one scene, the day is dragged inside it ===== */
.dy { margin-top: clamp(40px, 4vw, 64px); display: grid; gap: 16px; }
.dy-scene { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; padding: clamp(24px, 3.6vw, 56px) clamp(24px, 3.6vw, 56px) clamp(18px, 2vw, 28px);
  border-radius: 32px; color: var(--ink-d); transition: color 600ms var(--ease); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.dy-scene:active { cursor: grabbing; }
.dy.is-dark .dy-scene { color: var(--ivory); }
.dy-sky { position: absolute; inset: 0; z-index: -2; }
.dy-sky i { position: absolute; inset: 0; }
.dy-orb { position: absolute; z-index: -1; width: clamp(90px, 9vw, 150px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, #fff8e6 calc(var(--moon, 0) * 100%), #ffd08a) 0 38%, color-mix(in srgb, rgba(243, 238, 230, 0.22) calc(var(--moon, 0) * 100%), rgba(255, 170, 90, 0.4)) 56%, transparent 72%); }
.dy-body { display: grid; gap: 22px; }
.dy-copy { display: grid; }
.dy-txt { grid-area: 1 / 1; display: grid; gap: 10px; align-content: center; will-change: transform, opacity; }
.dy-time { font: 300 clamp(56px, 6.5vw, 112px)/0.9 var(--serif); letter-spacing: -0.06em; }
.dy-t { font: 400 clamp(22px, 2.1vw, 34px)/1.12 var(--serif); letter-spacing: -0.03em; }
.dy-x { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; max-width: 34ch; opacity: 0.85; }
.dy-get { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; font: 500 clamp(15px, 1.1vw, 18px)/1.3 var(--text); }
.dy-get .meta-fact { --pl: var(--ink-d); --pt: var(--ivory); }
.dy.is-dark .dy-get .meta-fact { --pl: var(--gold); --pt: var(--coal); }
.dy-shots { position: relative; height: clamp(240px, 28vw, 380px); }
.dy-shot { position: absolute; inset: 0; margin: auto; height: 100%; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 22px; overflow: hidden; will-change: transform, opacity;
  box-shadow: 0 34px 70px -36px rgba(0, 0, 0, 0.6); }
.dy-shot img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dy-shot.is-tall { aspect-ratio: 9 / 16; }
.dy-shot.is-page { aspect-ratio: auto; width: min(100%, 540px); height: 100%; display: flex; align-items: center; overflow: visible; box-shadow: none; }
@media (min-width: 900px) {
  .dy-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
/* the rail inside the scene */
.dy-rail { position: relative; height: 64px; margin: 0 -6px; touch-action: pan-y; cursor: pointer; }
.dy-rail:focus-visible { outline: none; }
.dy-rail:focus-visible .dy-knob { box-shadow: 0 0 0 4px var(--gold), 0 0 26px 8px rgba(240, 110, 50, 0.55); }
.dy-line { position: absolute; left: 18px; right: 18px; top: 22px; height: 4px; border-radius: 4px; background: rgba(22, 18, 14, 0.14); overflow: hidden; transition: background-color 600ms var(--ease); }
.dy.is-dark .dy-line { background: rgba(243, 238, 230, 0.2); }
.dy-fill { position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.dy-stop { position: absolute; top: 24px; left: calc(18px + var(--k) * (100% - 36px)); translate: -50% -50%; display: grid; justify-items: center; gap: 12px; padding: 8px; border: 0; background: none; color: inherit; cursor: pointer; }
.dy-stop b { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: 0.3; transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.dy-stop.is-past b { opacity: 0.7; }
.dy-stop.is-on b { opacity: 0; }
.dy-stop em { position: absolute; top: 30px; font: 500 14px/1 var(--text); font-style: normal; white-space: nowrap; opacity: 0.55; transition: opacity 300ms var(--ease); }
.dy-stop.is-on em { opacity: 1; font-weight: 600; }
.dy-stop:first-child em { left: 2px; } .dy-stop:last-of-type em { right: 2px; }
.dy-knob { position: absolute; top: 24px; width: 36px; height: 36px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff4e2 0 22%, #ffbe7a 44%, #f0543c 76%); box-shadow: 0 0 0 5px rgba(243, 238, 230, 0.9), 0 0 26px 8px rgba(240, 110, 50, 0.5); }
.dy-hint { position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: var(--ink-d); color: var(--ivory); font: 500 14px/1 var(--text); white-space: nowrap;
  animation: dyHint 2.2s var(--ease) infinite; transition: opacity 400ms var(--ease); }
.dy.is-touched .dy-hint { opacity: 0; animation: none; }
@keyframes dyHint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
.dy-more { padding: 0 6px; }
.dy-more .acc { display: grid; gap: 18px; padding-top: 14px; }
.dy-mod { display: grid; gap: 6px; }
.dy-mt { font: 400 clamp(18px, 1.4vw, 22px)/1.25 var(--serif); letter-spacing: -0.02em; color: var(--ink-d); }
.dy-mod p:not(.dy-mt) { color: var(--mute-d); max-width: 70ch; }
.dy-mm { font-size: 15px; }
@media (max-width: 639px) {
  .dy-scene { padding: 22px 20px 14px; }
  .dy-shots { height: 230px; }
  .dy-time { font-size: 52px; }
  .dy-stop em { display: none; }
  .dy-stop.is-on em { display: block; }
  .dy-stop:not(:first-child):not(:last-of-type).is-on em { left: 50%; translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) { .dy-hint { animation: none; } }

.dy-rail { height: 76px; } .dy-stop em { top: 40px; }

.dy-stop { pointer-events: none; } /* the whole rail takes the finger; a tap goes to the nearest moment */

/* the hint stands still; the scene itself shows once that it moves (mountDay) */
.dy-hint { animation: none; }

/* stacked "One day" (phone, tablet): the photo on top, the copy under it always starts at the same
   line, so the time never jumps while the day is dragged; the free space falls above the rail */
@media (max-width: 899px) {
  .dy-shots { order: -1; }
  .dy-txt { align-content: start; }
  .dy-orb { display: none; }
  .dy-hint { left: -4px; translate: 0 0; }
}

/* ===== "One shoot, three results": three lines and one frame that takes the chosen shape ===== */
.fm { margin-top: clamp(40px, 4.5vw, 72px); display: grid; gap: 28px; }
.fm-list { display: grid; align-content: center; }
.fm-row { display: grid; grid-template-columns: clamp(44px, 3.6vw, 64px) 1fr; align-items: start; width: 100%; padding: clamp(16px, 1.6vw, 24px) 0; border: 0; background: none; color: var(--ink-d); text-align: left; cursor: pointer; font: inherit; }
.fm-n { font: 300 clamp(26px, 2.2vw, 38px)/1 var(--serif); letter-spacing: -0.04em; opacity: 0.28; transition: opacity 500ms var(--ease); }
.fm-row.is-on .fm-n { opacity: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fm-body { display: grid; min-width: 0; }
.fm-t { font: 400 clamp(22px, 2.1vw, 34px)/1.12 var(--serif); letter-spacing: -0.03em; opacity: 0.34; transition: opacity 500ms var(--ease); text-wrap: balance; }
.fm-row:hover .fm-t, .fm-row:hover .fm-n { opacity: 0.7; }
.fm-row.is-on .fm-t { opacity: 1; }
.fm-r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--ease); }
.fm-r > span { overflow: hidden; min-height: 0; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; color: var(--mute-d); max-width: 46ch; opacity: 0; transition: opacity 400ms var(--ease); }
.fm-row.is-on .fm-r { grid-template-rows: 1fr; }
.fm-row.is-on .fm-r > span { opacity: 1; padding-top: 12px; transition-delay: 120ms; }
.fm-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }

.fm-frame { position: relative; height: clamp(320px, 36vw, 600px); touch-action: pan-y; user-select: none; -webkit-user-select: none; --cx: 0px; --cy: 0px; }
.fm-clip { position: absolute; inset: 0; clip-path: inset(var(--cy) var(--cx) round clamp(20px, 2vw, 30px)); background: #1a1410; }
.fm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.06; transition: opacity 600ms var(--ease), scale 900ms var(--ease); }
.fm-img.is-on { opacity: 1; scale: 1; }
.fm-o { position: absolute; opacity: 0; transition: opacity 400ms var(--ease); pointer-events: none; }
.fm-o.is-on { opacity: 1; transition-delay: 220ms; }
.fm-play { left: 50%; top: 50%; width: clamp(64px, 5.6vw, 92px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255, 250, 242, 0.92); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); }
.fm-play i { position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--ink-d); }
.fm-prog { left: calc(var(--cx) + 28px); right: calc(var(--cx) + 28px); bottom: calc(var(--cy) + 26px); height: 4px; border-radius: 4px; background: rgba(255, 250, 242, 0.32); overflow: hidden; }
.fm-prog i { position: absolute; inset: 0 62% 0 0; background: var(--grad); }
.fm-bars { left: calc(var(--cx) + 16px); right: calc(var(--cx) + 16px); top: calc(var(--cy) + 16px); display: flex; gap: 5px; }
.fm-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 250, 242, 0.4); }
.fm-bars i:first-child { background: #fffaf2; }
.fm-url { left: 50%; top: calc(var(--cy) + 18px); translate: -50% 0; padding: 9px 18px; border-radius: 999px; background: rgba(255, 250, 242, 0.94); color: var(--ink-d); font: 500 15px/1 var(--text); white-space: nowrap; }
.fm-head { left: calc(var(--cx) + 28px); right: calc(var(--cx) + 28px); bottom: calc(var(--cy) + 26px); color: #fffaf2; font: 400 clamp(22px, 2.2vw, 36px)/1.08 var(--serif); letter-spacing: -0.03em; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55); text-wrap: balance; }
@media (min-width: 900px) {
  .fm { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 96px); align-items: center; }
}
@media (max-width: 899px) {
  .fm-frame { order: -1; height: min(92vw, 380px); }
  .fm-row { padding: 14px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-r, .fm-r > span, .fm-img, .fm-o { transition: none; }
}

/* the list starts at the frame's top line, so opening a line never shifts the others */
@media (min-width: 900px) { .fm { align-items: start; } .fm-list { align-content: start; } }
@media (max-width: 899px) { .fm { margin-top: 28px; gap: 20px; } .fm-frame { height: min(78vw, 340px); } }

/* ===== the offer as three panels: the chosen one opens wide and dark ===== */
.xp { --pad: clamp(24px, 2.4vw, 40px); margin-top: clamp(40px, 4.5vw, 72px); display: flex; gap: clamp(10px, 1vw, 16px); height: clamp(480px, 36vw, 620px); }
.xp-p { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; border-radius: clamp(22px, 2vw, 32px); overflow: hidden; background: #e7ddcf; color: var(--ink-d);
  transition: background-color 600ms var(--ease), color 600ms var(--ease), scale 500ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.xp-p:not(.is-on):hover { background: #dfd3c2; }
.xp-p:active { scale: 0.992; transition-duration: 600ms, 600ms, 120ms; }
.xp-p.is-on { background: #16110d; color: var(--ivory); }
.xp-hit { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: var(--pad); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.xp-p.is-on .xp-hit { cursor: default; }
.xp-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; border-radius: inherit; }
.xp-n { font: 300 clamp(28px, 2.4vw, 40px)/1 var(--serif); letter-spacing: -0.04em; }
.xp-p.is-on .xp-n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xp-l { font: 400 clamp(22px, 1.9vw, 32px)/1.1 var(--serif); letter-spacing: -0.03em; max-width: 11ch; transition: opacity 400ms var(--ease), translate 600ms var(--ease); text-wrap: balance; }
.xp-p.is-on .xp-l { opacity: 0; translate: 0 12px; }
.xp-c { position: absolute; inset: 0; z-index: 1; padding: var(--pad); pointer-events: none; }
.xp-in { width: calc(var(--fw, 900px) - var(--pad) * 2); height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  opacity: 0; translate: 32px 0; transition: opacity 300ms var(--ease), translate 300ms var(--ease); }
.xp-p.is-on .xp-in { opacity: 1; translate: 0 0; transition: opacity 600ms var(--ease) 140ms, translate 900ms var(--ease) 100ms; }
.xp-mark { align-self: flex-end; margin-top: -0.06em; font: 300 clamp(72px, 8.4vw, 168px)/0.86 var(--serif); letter-spacing: -0.065em; white-space: nowrap;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xp-txt { display: grid; gap: 12px; max-width: 54ch; }
.xp-t { font: 400 clamp(24px, 2.2vw, 38px)/1.1 var(--serif); letter-spacing: -0.03em; text-wrap: balance; }
.xp-b, .xp-r { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; color: rgba(243, 238, 230, 0.72); }
.xp-r { color: var(--ivory); }
.xp-get { margin-top: 6px; }
.xp-get .meta-fact { --pl: var(--gold); --pt: #16110d; }
/* phone and tablet: an accordion, the open panel shows its text under the header */
@media (max-width: 899px) {
  .xp { flex-direction: column; height: auto; }
  .xp-p { flex: none !important; }
  .xp-hit { position: relative; inset: auto; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 16px; width: 100%; padding: 22px var(--pad); }
  .xp-l { max-width: none; }
  .xp-p.is-on .xp-l { opacity: 1; translate: 0 0; }
  .xp-c { position: static; display: grid; grid-template-rows: 0fr; padding: 0 var(--pad); transition: grid-template-rows 700ms var(--ease); }
  .xp-p.is-on .xp-c { grid-template-rows: 1fr; }
  .xp-in { width: auto; height: auto; min-height: 0; overflow: hidden; translate: 0 16px; gap: 18px; }
  .xp-p.is-on .xp-in { padding-bottom: var(--pad); }
  .xp-mark { align-self: flex-start; font-size: clamp(56px, 17vw, 88px); }
}
@media (prefers-reduced-motion: reduce) { .xp-p, .xp-in, .xp-l, .xp-c { transition: none; } }

/* the light under the cursor on dark cards (mountLight) */
.lt { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease);
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 168, 92, 0.2), rgba(255, 168, 92, 0.06) 40%, transparent 70%); }
:hover > .lt { opacity: 1; }
.xp-p:not(.is-on) > .lt { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), transparent 65%); }

/* the cursor light is never a layout item: the cards' `> :not(.grain-gl)` rules made it relative and it took a grid cell */
.statement > .lt, .cost > .lt, .case-frame > .lt, .mc > .lt, .xp-p > .lt { position: absolute; inset: 0; z-index: 1; grid-area: auto; margin: 0; }
.lt { position: absolute !important; inset: 0 !important; }

/* another client's link: the default greeting never flashes before its own (index.html head script) */
.hero-wait #heroEyebrow, .hero-wait #heroTitle, .hero-wait #heroSub, .hero-wait #heroCta { visibility: hidden; }

/* typed headings (motion.js typeIn) */
.tw { display: inline-block; white-space: nowrap; }
.tc { opacity: 0; transition: opacity 90ms linear; }
.tc.on { opacity: 1; }
.tcur { position: relative; display: inline-block; width: 0; height: 1em; }
.tcur::after { content: ""; position: absolute; left: 0.04em; bottom: -0.14em; height: 1.04em; width: max(2px, 0.06em); border-radius: 1px; background: var(--accent); }
.tcur.done::after { animation: tcBlink 0.9s steps(1, end) 3, tcOut 0.5s var(--ease) 2.7s forwards; }
@keyframes tcBlink { 50% { opacity: 0; } }
@keyframes tcOut { to { opacity: 0; } }


/* ===================== 07.11: the 06.11 edits (ПРАВКИ.md), brought over from site/v2 ===================== */
/* 06.11 rework: shorter passages between chapters, so the computer never shows a whole empty screen */
.sec { --flow: 30svh; }
@media (min-width: 900px) { .sec { --flow: 34svh; } }
.sec:has(+ .sec.has-flow) { padding-bottom: calc(var(--sec) * 0.45); }
/* the "computer version" link only makes sense on a phone */
@media (min-width: 900px) { html:not(.is-pc) .ver, html:not(.is-pc) .menu a.pc-link { display: none; } }

/* language switch: a globe, so nobody wonders what RU / EN / AM are */
.toggle-ic { display: inline-grid; place-items: center; padding: 0 2px 0 8px; opacity: .6; }
/* the floating "Обсудить": always at hand on a phone, slides up after the first screen */
.fab-talk { position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 28px); padding: 14px 20px 14px 16px; border-radius: 999px; background: var(--grad); color: #160c06;
  font: 600 15px/1.2 var(--text); text-decoration: none; white-space: nowrap; box-shadow: 0 14px 36px rgba(240, 84, 60, .38), 0 2px 0 rgba(255,255,255,.25) inset;
  transform: translate(-50%, 140%) scale(.9); opacity: 0; pointer-events: none;
  transition: transform 620ms cubic-bezier(.2, 1.4, .35, 1), opacity 320ms ease; }
.fab-talk.is-on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.fab-talk:active { transform: translate(-50%, 0) scale(.96); transition-duration: 120ms; }
.fab-talk span#fabText { overflow: hidden; text-overflow: ellipsis; }
.fab-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #160c06; flex: none; }
.fab-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #160c06; opacity: 0; animation: fab-ping 2.4s ease-out infinite; }
@keyframes fab-ping { 0% { transform: scale(.4); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@media (min-width: 1100px) { html:not(.is-pc) .fab-talk { display: none; } }
@media (prefers-reduced-motion: reduce) { .fab-talk { transition: opacity 200ms; } .fab-dot::after { animation: none; } }
.legal { position: relative; z-index: 1; margin: 28px auto 0; padding: 0 var(--gutter) calc(92px + env(safe-area-inset-bottom)); max-width: 980px; text-align: center; font: 400 12px/1.6 var(--text); color: var(--mute-l); opacity: .75; }
@media (min-width: 1100px) { .legal { padding-bottom: 40px; } }
/* 06.11 owner: RU / EN / AM must look the same; the AM button carries lang="hy" and used to fall to Noto Sans Armenian */
.toggle button, .toggle button:lang(hy), :lang(hy) .toggle button { font-family: "Unbounded", system-ui, sans-serif; font-weight: 600; letter-spacing: 0.02em; }
/* 06.11 owner: the sources line is a footnote, not a paragraph */
.src { font-size: 12px; line-height: 1.5; opacity: .55; margin-top: 14px; }
.src a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.src:hover { opacity: .85; }
/* the phone opening: until stage 3 only the greeting is on screen */
.intro .hero-meta, .intro .hero-side { opacity: 0; }
.hero h1 .iw { display: inline-block; will-change: transform, opacity; }
.intro .hero h1 { will-change: transform; }

/* 06.11 owner: "Что ещё можем сделать" needs an accent, the space around it was empty */
.extra { margin-top: clamp(36px, 4vw, 64px); gap: 18px; width: 100%; }
.extra-btn { position: relative; overflow: hidden; isolation: isolate; gap: 12px; padding-right: 18px;
  box-shadow: 0 0 0 1.5px rgba(240, 84, 60, .55), 0 10px 30px rgba(240, 84, 60, .22); animation: extraGlow 2.8s ease-in-out infinite; }
.extra-btn::after { content: "+"; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #160c06;
  font: 600 18px/1 var(--text); transition: transform 500ms cubic-bezier(.2, 1.4, .35, 1); }
.extra-btn[aria-expanded="true"]::after { transform: rotate(135deg); }
.extra-btn::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 190, 120, .55) 50%, transparent 70%);
  transform: translateX(-120%); animation: extraShine 3.2s 1s ease-in-out infinite; }
.extra-btn[aria-expanded="true"] { animation: none; box-shadow: none; }
.extra-btn[aria-expanded="true"]::before { display: none; }
@keyframes extraShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes extraGlow { 50% { box-shadow: 0 0 0 1.5px rgba(240, 84, 60, .9), 0 14px 40px rgba(240, 84, 60, .4); } }
.extra-tease { width: 100%; overflow: hidden; cursor: pointer; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tease-track { display: flex; gap: 10px; width: max-content; animation: teaseRun 38s linear infinite; }
.tease-track span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-d); background: color-mix(in srgb, currentColor 5%, transparent); font: 500 14px/1.2 var(--text); white-space: nowrap; opacity: .8; }
@keyframes teaseRun { to { transform: translateX(-50%); } }
.extra:has(.extra-btn[aria-expanded="true"]) .extra-tease { display: none; }
@media (prefers-reduced-motion: reduce) { .extra-btn, .extra-btn::before, .tease-track { animation: none; } .tease-track { flex-wrap: wrap; width: auto; } }

/* 06.11 owner: the extra services read as one wall of text — now cards: number, title, short text, room to breathe */
.extra-list { counter-reset: ex; display: grid; gap: 12px; }
@media (min-width: 760px) { .extra-list { grid-template-columns: 1fr 1fr; gap: 16px; } .extra-list > .extra-reg { grid-column: 1 / -1; } }
.extra-list > li, .extra-list > li:last-child { counter-increment: ex; position: relative; gap: 8px; padding: 22px 20px 22px 68px; border: 0; border-radius: 22px;
  background: color-mix(in srgb, currentColor 5%, transparent); transition: transform 400ms var(--ease), background 400ms var(--ease); }
.extra-list > li:hover { transform: translateY(-3px); background: color-mix(in srgb, currentColor 8%, transparent); }
.extra-list > li::before { content: counter(ex, decimal-leading-zero); position: absolute; left: 18px; top: 22px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  background: var(--grad); color: #160c06; font: 600 13px/1 var(--text); }
.extra-t { font-size: clamp(18px, 1.5vw, 24px); }
.extra-list p { font-size: 15px; line-height: 1.55; }
.extra-body:not([hidden]) .extra-list > li { animation: exCard 600ms var(--ease) both; }
.extra-body:not([hidden]) .extra-list > li:nth-child(2) { animation-delay: 60ms; } .extra-body:not([hidden]) .extra-list > li:nth-child(3) { animation-delay: 120ms; }
.extra-body:not([hidden]) .extra-list > li:nth-child(4) { animation-delay: 180ms; } .extra-body:not([hidden]) .extra-list > li:nth-child(5) { animation-delay: 240ms; }
.extra-body:not([hidden]) .extra-list > li:nth-child(n+6) { animation-delay: 300ms; }
@keyframes exCard { from { opacity: 0; transform: translateY(18px) scale(.98); } }
/* 06.11 owner, again "much emptiness" between chapters on a phone: tighter still */
@media (max-width: 899px) { .sec { --flow: 22svh; --sec: 72px; } .sec.has-flow { padding-top: calc(var(--flow) + 16px); } .sec:has(+ .sec.has-flow) { padding-bottom: 24px; } }
/* 06.11 owner: empty space at the bottom, the badge took a whole screen */
@media (max-width: 899px) { .has-lanyard { height: min(54svh, 480px); } .reach { margin-top: 56px; } .letter { gap: 16px; } }
@media (min-width: 900px) { .reach { margin-top: 72px; } }
/* 06.11 owner: four stories in the frame, each with its own picture, changing in step with the bars (2.5 s each) */
.sf-slide { position: absolute; inset: 0; opacity: 0; animation: sfSlide 10s linear infinite; animation-delay: calc(var(--i) * 2.5s - 0s); }
.sf-slide img { width: 100%; height: 100%; object-fit: cover; animation: sfZoom 10s linear infinite; animation-delay: inherit; }
.sf-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 4, .5), transparent 24%, transparent 55%, rgba(10, 6, 4, .85)); }
.sf-slide .sf-cap { z-index: 1; display: grid; gap: 6px; font: 500 17px/1.25 var(--text); transform: translateY(14px); opacity: 0; animation: sfCap 10s ease-out infinite; animation-delay: inherit; }
.sf-cap small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.sf-bars { z-index: 2; }
@keyframes sfSlide { 0% { opacity: 0; } 2%, 25% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes sfZoom { 0% { transform: scale(1.12); } 27% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes sfCap { 0%, 3% { opacity: 0; transform: translateY(14px); } 8%, 23% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sf-slide, .sf-slide img, .sf-slide .sf-cap { animation: none; } .sf-slide:first-of-type, .sf-slide:first-of-type .sf-cap { opacity: 1; transform: none; } }


/* the invitation under the estimate */
.talk { display: grid; gap: 18px; margin-top: 16px; padding: clamp(22px, 2.4vw, 36px); border-radius: 28px; background: var(--paper); align-items: center; position: relative; overflow: hidden; }


.talk-ic { font-size: 28px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--ivory); }
.talk-h { font: 400 clamp(20px, 1.8vw, 28px)/1.15 var(--serif); letter-spacing: -0.02em; margin-bottom: 8px; }
.talk p { color: var(--mute-d); font-size: 15px; line-height: 1.55; max-width: 62ch; }
.talk-b { justify-self: start; position: relative; }
@media (min-width: 900px) { .talk { grid-template-columns: auto 1fr auto; gap: 28px; } }
@media (max-width: 899px) { .ask-phone .phone { height: min(50svh, 440px); width: min(86vw, 340px); } .ask { gap: 14px; } .ask-qs { margin-top: 12px; } }

/* 06.11 the estimate the client assembles himself: a tick on every row, the totals follow */
.cost-hint { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; font-size: 14px; line-height: 1.45; color: var(--mute-l); }
.cost-hint-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(227, 162, 61, .6); animation: hintPing 2.2s ease-out infinite; }
@keyframes hintPing { 0% { box-shadow: 0 0 0 0 rgba(227, 162, 61, .55); } 80%, 100% { box-shadow: 0 0 0 12px rgba(227, 162, 61, 0); } }
.cost-rows li.cost-row { padding: 0; align-items: center; flex-wrap: nowrap; gap: 14px; }
.cost-pick { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 18px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; font: 600 16px/1.38 var(--text); }
.cost-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.cost-box { flex: none; width: 26px; height: 26px; border-radius: 9px; border: 1.5px solid rgba(243, 238, 230, .35); display: grid; place-items: center; transition: background 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease); }
.cost-box svg { width: 16px; height: 16px; fill: none; stroke: var(--coal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 380ms 60ms var(--ease); }
.cost-row.is-on .cost-box { background: var(--grad); border-color: transparent; }
.cost-row.is-on .cost-box svg { stroke-dashoffset: 0; }
.cost-row .cost-v { transition: opacity 300ms var(--ease); }
.cost-row:not(.is-on) .cost-pick > span { color: var(--mute-l); text-decoration: line-through; text-decoration-color: rgba(243, 238, 230, .3); }
.cost-row:not(.is-on) .cost-v { opacity: .38; text-decoration: line-through; }
.cost-pick:active .cost-box { transform: scale(.88); }
.cost-more { color: var(--gold); }
:lang(hy) .cost-pick { font-weight: 500; }
@media (max-width: 560px) {
  .cost-rows li.cost-row { flex-wrap: wrap; gap: 0; }
  .cost-pick { flex: 1 1 100%; padding: 16px 0 4px; }
  .cost-row .cost-v { margin: 0 0 0 40px; padding-bottom: 16px; font-size: 17px; }
}

/* 06.11 the finale: the wordmark as tiles + the tags of the offer, with physics (js/playground.js).
   Without motion they simply stand in a row: the static layout is the fallback. */
.play { margin-top: 112px; }
.play-hint { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-bottom: 18px; color: var(--mute-l); font-size: 14px; line-height: 1.45; }
.play-hint span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--gold); vertical-align: 1px; animation: hintPing 2.2s ease-out infinite; }
.play-shake { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(243, 238, 230, .22); background: rgba(243, 238, 230, .06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink-l); font: 500 14px/1 var(--text); cursor: pointer; transition: background 300ms var(--ease), transform 300ms var(--ease); }
.play-shake:hover { background: rgba(243, 238, 230, .14); }
.play-shake:active { transform: scale(.94); }
.play-box { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 24px 0; border-radius: 36px; overflow: hidden;
  background: linear-gradient(160deg, #15110d 40%, #3a1a17 75%, #5a2a1c);
  border: 1px solid rgba(243, 238, 230, .1); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.play-box::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(243, 238, 230, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 238, 230, .05) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(transparent, #000 60%); }
.pl { flex: none; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; }
.pl.is-held { cursor: grabbing; z-index: 3; }
.pl-tile { display: grid; place-items: center; width: clamp(62px, 16vw, 150px); aspect-ratio: 1; border-radius: 22%; position: relative;
  background: linear-gradient(160deg, #3a2c22, #120f0c 70%) padding-box, var(--grad) border-box; border: 1.5px solid transparent;
  box-shadow: 0 18px 40px -18px rgba(240, 84, 60, .7), inset 0 1px 0 rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pl-tile b { font: 500 clamp(40px, 10.5vw, 104px)/1 var(--brand); letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(-.04em); }
.pl-tag { display: inline-block; padding: 12px 18px; border-radius: 999px; white-space: nowrap; font: 500 clamp(14px, 1.2vw, 18px)/1.1 var(--text); color: var(--ink-l);
  background: rgba(243, 238, 230, .09); border: 1px solid rgba(243, 238, 230, .2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pl-tag-alt { background: var(--ivory); color: var(--ink-d); border-color: transparent; }
.pl-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: 999px; white-space: nowrap; text-decoration: none; font: 600 clamp(15px, 1.3vw, 20px)/1 var(--text);
  color: var(--coal); background: var(--grad); box-shadow: 0 16px 40px -12px rgba(240, 84, 60, .8); }
/* live: everything is placed by the physics */
.play-box.is-live { display: block; height: clamp(520px, 72svh, 760px); padding: 0; }
.play-box.is-live .pl { position: absolute; left: 0; top: 0; will-change: transform; }
@media (min-width: 900px) { .play { margin-top: 160px; } .play-box.is-live { height: clamp(560px, 78vh, 820px); } }
:lang(hy) .pl-tag { font-weight: 400; }

.pl-tile:nth-child(3), .pl-tile:nth-child(7) { background: var(--grad); }
.pl-tile:nth-child(3) b, .pl-tile:nth-child(7) b { background: none; color: var(--coal); }
.pl-tile:nth-child(5) { background: linear-gradient(160deg, #fbf7f0, #e6ddcf) padding-box, var(--grad) border-box; }

/* 06.11 glass: the estimate and the "let's talk" card are frosted panes over slow warm lights */
.glass-stage { position: relative; isolation: isolate; margin-top: 104px; }
@media (min-width: 900px) { .glass-stage { margin-top: 160px; } }
.glass-stage > .cost { margin-top: 0; }






.cost-glass { background: linear-gradient(150deg, rgba(30, 22, 17, .72), rgba(14, 11, 9, .84)) !important; border: 1px solid rgba(255, 240, 225, .16);
  -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 80px -40px rgba(60, 20, 10, .6); }
.cost-glass::after { display: none; }
.glass-stage .talk { background: rgba(255, 250, 243, .42); border: 1px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.glass-stage .talk-ic { background: rgba(255, 255, 255, .6); }
.glass-stage .talk p { color: rgba(22, 18, 14, .72); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cost-glass { background: rgba(20, 16, 13, .92) !important; } .glass-stage .talk { background: rgba(255, 250, 243, .9); }
}
.cost-until { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(243, 238, 230, .22); font-size: 14px; line-height: 1.5; color: var(--mute-l); }
.talk-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-ghost { padding: 14px 20px; border-radius: 999px; border: 1px solid rgba(22, 18, 14, .25); background: rgba(255, 255, 255, .35); font: 500 15px/1 var(--text); color: var(--ink-d); cursor: pointer; }
.btn-ghost:hover { background: rgba(255, 255, 255, .6); }
.ps { max-width: 640px; padding: 18px 20px; border-radius: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-l);
  background: rgba(243, 238, 230, .06); border: 1px solid rgba(243, 238, 230, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* glass on the contacts and the header */
.contacts-list { padding: 4px 24px; border-radius: 28px; background: rgba(243, 238, 230, .045); border: 1px solid rgba(243, 238, 230, .12); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.contacts-list li:first-child { border-top: 0; } .contacts-list li:last-child { border-bottom: 0; }
.reach { position: relative; isolation: isolate; }




/* the phone header was 10 px wider than the screen and cut the logo: tighter gaps on narrow phones */
@media (max-width: 420px) {
  .top { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .top-right { gap: 6px; }
  #langSwitch button { padding-left: 8px; padding-right: 8px; }
  #langSwitch .toggle-ic { margin: 0 2px 0 6px; }
  #menuBtn { padding-left: 12px; padding-right: 12px; }
}


/* the invitation card: the brand sign instead of an emoji */
.talk-ic img { width: 30px; height: 30px; }

/* the case film over the page */
dialog.player { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(16px, 4vw, 56px); border: 0; display: grid; place-items: center;
  background: rgba(8, 7, 6, .82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--ink-l); opacity: 0; transition: opacity 240ms var(--ease); }
dialog.player::backdrop { background: transparent; }
dialog.player.is-open { opacity: 1; }
.player-in { width: min(1280px, 100%); transform: translateY(16px) scale(.97); transition: transform 420ms var(--ease); }
dialog.player.is-open .player-in { transform: none; }
.player-media { aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 40px 120px -40px rgba(240, 84, 60, .45); }
.player-media video, .player-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.player-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 14px; }
.player-foot a { color: var(--mute-l); text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { dialog.player, .player-in { transition: none; } }
/* the warm lights under the estimate and the contacts stuck out of the screen on a phone (the page could
   be dragged sideways): every chapter clips sideways at the screen edge; clip keeps sticky working */
#sections > .sec { overflow-x: clip; }
/* the invitation card with three actions: text beside the sign, the actions in one row under the text */
@media (min-width: 900px) {
  .talk { grid-template-columns: auto 1fr; column-gap: 28px; row-gap: 22px; }
  .talk > .talk-acts { grid-column: 2; }
  .talk-h { max-width: 24ch; }
}
.talk-acts .btn-ghost { transition: background-color 200ms ease, border-color 200ms ease; }
.talk-acts .btn-ghost[data-preset] { border-color: rgba(200, 80, 47, .45); }
/* 06.11 owner, "опять очень много пустоты" also on a computer: the passage and the air around it shorter,
   about a third of the screen between one chapter's last line and the next heading */
@media (min-width: 900px) {
  .sec { --flow: 26svh; }
  .sec.has-flow { padding-top: calc(var(--flow) + var(--sec) * 0.2); }
  .sec:has(+ .sec.has-flow) { padding-bottom: calc(var(--sec) * 0.3); }
  .glass-stage, .play { margin-top: 112px; }
  .focus { margin-bottom: 0; }
}

/* ===================== 07.11: the questions and the answer on one phone screen (edits 4, 12) ===================== */
@media (max-width: 899px) {
  .chat-block { gap: 14px; }
  .cb-text { gap: 12px; }
  .cb-qs { display: flex; gap: 8px; margin: 4px calc(var(--pad-g, 20px) * -1) 0; padding: 2px var(--pad-g, 20px) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cb-qs::-webkit-scrollbar { display: none; }
  .cb-q { flex: none; width: auto; scroll-snap-align: start; padding: 12px 14px 12px 16px; border-radius: 999px; gap: 10px; }
  .cb-q:hover { transform: none; }
  .cb-qt { font-size: 15px; white-space: nowrap; }
  .cb-role { font-size: 12px; padding: 4px 9px; }
  .cb-phone .phone { height: min(50svh, 440px) !important; aspect-ratio: auto !important; width: min(86vw, 340px) !important; }
  .rp.cb-phone { padding: 0; }
}

/* ===================== 07.11: glass, done properly =====================
   A pane of glass is not just a blur: it bends and saturates what is behind it, catches light on its rim
   (bright at the top left, a warm glint at the bottom right), glows faintly from the inside, carries a fine
   grain so the frosting reads as material, and floats above a vivid ground. Built in CSS only, so it holds
   in Safari on an iPhone too; without backdrop-filter it turns into a calm solid card. */
:root {
  --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass-rim-d: linear-gradient(140deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 22%, rgba(255, 255, 255, .02) 48%, rgba(255, 190, 140, .14) 78%, rgba(255, 214, 180, .45));
  --glass-rim-l: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .45) 26%, rgba(255, 255, 255, .2) 55%, rgba(240, 120, 80, .25) 82%, rgba(255, 255, 255, .8));
}
.glass-d, .cost-glass, .ps, .contacts-list, .play-shake {
  border: 1px solid transparent !important;
  background:
    var(--glass-grain) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 220, 190, .05)) padding-box,
    linear-gradient(rgba(24, 18, 14, .5), rgba(14, 11, 9, .62)) padding-box,
    var(--glass-rim-d) border-box !important;
  -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(1.05); backdrop-filter: blur(26px) saturate(185%) brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 0 48px rgba(255, 170, 110, .06),
    0 1px 1px rgba(0, 0, 0, .2), 0 24px 60px -24px rgba(0, 0, 0, .55), 0 50px 120px -60px rgba(240, 84, 60, .35) !important;
}
.glass-l, .glass-stage .talk, .chat-block.cb-glass {
  border: 1px solid transparent !important;
  background:
    var(--glass-grain) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .22) 40%, rgba(255, 255, 255, .12) 70%, rgba(255, 236, 220, .3)) padding-box,
    var(--glass-rim-l) border-box !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .35), inset 0 0 40px rgba(255, 255, 255, .25),
    0 1px 2px rgba(80, 30, 15, .08), 0 30px 70px -36px rgba(120, 40, 20, .45) !important;
}
/* the cursor leaves a white specular glint on the glass (mountLight), not a warm stain */
.cost-glass > .lt, .chat-block.cb-glass > .lt { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 45%, transparent 70%); mix-blend-mode: screen; }
.chat-block.cb-glass > .lt { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 65%); mix-blend-mode: normal; }
/* glass needs a vivid ground: the warm lights behind it are fuller and drift slowly */




/* the questions and the messenger on light glass over the same warm lights */
.chat-block.cb-glass { position: relative; isolation: isolate; padding: clamp(18px, 3vw, 52px); border-radius: clamp(28px, 3vw, 44px); --pad-g: clamp(18px, 3vw, 52px); }



.chat-block.cb-glass .cb-q:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(22, 18, 14, .06); }


/* the floating Telegram button: a glossy drop of the brand gradient */
.fab-talk { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 52%) padding-box, var(--grad) padding-box; border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(120, 30, 10, .25), 0 14px 36px rgba(240, 84, 60, .4); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-d, .cost-glass, .ps, .contacts-list, .play-shake { background: #1b1511 !important; }
  .glass-l, .glass-stage .talk, .chat-block.cb-glass { background: #f6efe5 !important; }
}
/* the estimate sits on the light page: thin dark glass over cream reads as grey mud, so this pane is
   denser (the numbers keep full contrast) and the warm lights show through as a glow at its edges */
.cost-glass {
  background:
    var(--glass-grain) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 220, 190, .05)) padding-box,
    linear-gradient(rgba(26, 19, 15, .82), rgba(14, 11, 9, .9)) padding-box,
    var(--glass-rim-d) border-box !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
}
/* 07.11 owner: the squat phone "does not exist". On a phone the mockup is a real iPhone (9 : 19.5) that
   rises out of the card and sinks into it below: only its top half is shown, fading out, and the chat
   lives in that visible part (the newest message sits at the fade, the input field is below it) */
@media (max-width: 899px) {
  .rp.cb-phone { position: relative; display: flex; justify-content: center; align-items: flex-start; height: min(52svh, 480px); overflow: hidden; padding: 0;
    -webkit-mask: linear-gradient(180deg, #000 76%, transparent 99%); mask: linear-gradient(180deg, #000 76%, transparent 99%); }
  .cb-phone .phone { flex: none; width: min(84vw, 340px) !important; height: auto !important; aspect-ratio: 9 / 19.5 !important; }
  .cb-phone .cm-feed { flex: none; height: calc(min(52svh, 480px) - 150px); }
  .cb-phone .cm-input { visibility: hidden; }
}

/* ===================== 07.11: no more powdered circles =====================
   The glass now floats over our own living grain gradient (grainient.js), not over blurred red blobs.
   The estimate: a deep slab of the field, the dark pane and the light invitation on it.
   The messenger: the same field in a light palette, cream on the text side. The footer box: the field, quiet. */
.glass-stage { padding: clamp(10px, 1.6vw, 24px); border-radius: clamp(38px, 3.6vw, 56px); overflow: hidden;
  background: linear-gradient(135deg, #15110d, #4a1720 40%, #b8392a 70%, #e3923a); }
.glass-stage > :not(.grain-gl) { position: relative; z-index: 1; }
.glass-stage .cost-glass { background:
    var(--glass-grain) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 220, 190, .04)) padding-box,
    linear-gradient(rgba(22, 17, 13, .66), rgba(14, 11, 9, .78)) padding-box,
    var(--glass-rim-d) border-box !important; }
.glass-stage .talk { margin-top: clamp(10px, 1.6vw, 24px); }
.chat-block.cb-glass { overflow: hidden; }
.chat-block.cb-glass > :not(.grain-gl):not(.lt) { position: relative; z-index: 1; }
.chat-block.cb-glass .cb-q:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.play-box > .grain-gl { z-index: 0; }
.play-box::before { z-index: 1; }
.play-box .pl { z-index: 2; }
.play-box .pl.is-held { z-index: 3; }
.play-box:not(.is-live) .pl { position: relative; }
.chat-block.cb-glass > .lt { z-index: 1; }

/* ===================== 07.11: the footer, a halftone wordmark =====================
   A studio line, the sections and the ways to reach us; under them the Brainlook wordmark in dots of the
   brand gradient, so large that the bottom edge of the page cuts it (halftone.js). The dots part around the
   pointer or a finger, warm up as they move, a tap sends a ring through them. */
.sec.contacts { padding-bottom: 0; }
.hf { position: relative; margin-top: clamp(96px, 10vw, 176px); }
.hf-top { display: grid; gap: 40px; }
@media (min-width: 900px) { .hf-top { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; align-items: start; gap: 48px; } }
.hf-line { display: flex; gap: 16px; align-items: flex-start; max-width: 32ch; font: 400 clamp(18px, 1.45vw, 24px)/1.45 var(--text); color: var(--ivory); text-wrap: pretty; }
.hf-line img { flex: none; width: clamp(28px, 2.4vw, 36px); height: auto; margin-top: .1em; }
.hf-line b { font-weight: 500; }
.hf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.hf-h { margin-bottom: 14px; font-size: 14px; color: var(--mute-l); }
.hf-cols ul { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.hf-cols a { color: var(--ivory); text-decoration: none; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; padding-bottom: 2px;
  background: linear-gradient(90deg, var(--red), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size 500ms var(--ease), color 300ms var(--ease); }
.hf-cols a:hover, .hf-cols a:focus-visible { background-size: 100% 1px; color: #ffd9a8; }
.hf-up { justify-self: start; display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 999px; font: 500 15px/1 var(--text); color: var(--ivory); text-decoration: none;
  border: 1px solid transparent; background: var(--glass-grain) padding-box, linear-gradient(rgba(243, 238, 230, .08), rgba(243, 238, 230, .03)) padding-box, var(--glass-rim-d) border-box;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform 300ms var(--ease), background 300ms var(--ease); }
.hf-up:hover { transform: translateY(-2px); }
.hf-up:active { transform: scale(.97); }
.hf .ver { margin-top: 48px; text-align: left; }
.hf .legal { margin: 56px 0 0; padding: 0; max-width: 70ch; text-align: left; }
.hf-mark { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: clamp(28px, 3.4vw, 56px); overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.hf-gl { display: block; }
/* no grain layer over the ground here: on the near-black it lifted the box into a grey band; the dots are the print */
.hf-cols ul { gap: 4px; }
.hf-cols a { display: inline-block; padding: 7px 0 5px; background-position: 0 calc(100% - 2px); }
@media (max-width: 599px) { .hf-cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; } .hf-cols a { font-size: 15px; } }

/* ===================== 07.11: the messenger card on a phone =====================
   The card spans the screen with an 8 px margin, so the text keeps the page gutter's rhythm and the phone
   gets real air on both sides (its frame and buttons were clipped). The phone stands whole in width and
   goes under the card's bottom edge instead of fading into grey, and rises a little as the card scrolls in. */
@media (max-width: 899px) {
  .chat-block.cb-glass { margin-inline: calc(8px - var(--gutter)); padding: 30px 20px 0; border-radius: 30px; --pad-g: 20px; gap: 22px; }
  .chat-block .cb-text { gap: 14px; }
  .chat-block .cb-lead { color: rgba(22, 18, 14, .74); }
  .chat-block .cb-qs { margin-top: 10px; scroll-padding-inline: 20px; }
  .chat-block .rp.cb-phone { height: min(56svh, 500px); padding: 4px 0 0; overflow: hidden; -webkit-mask: none; mask: none; }
  .chat-block .cb-phone .phone { width: min(76vw, 320px) !important; box-shadow: 0 30px 60px -24px rgba(90, 40, 15, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); }
  .chat-block .cb-phone .cm-feed { height: calc(min(56svh, 500px) - 140px); }
}
@supports (animation-timeline: view()) {
  @media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
    .chat-block .cb-phone .phone { animation: cbRise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes cbRise { from { transform: translateY(56px); } to { transform: none; } }

/* ===================== 07.11: alignment on phones =====================
   The estimate: a tick stands by the first line of its name, and the saving reads from the left like
   every other line of the card. The case frame: the play button keeps the same left edge as the text. */
.cost-pick { align-items: flex-start; }
.cost-box { margin-top: -2px; }
@media (max-width: 899px) {
  .cost-save { text-align: left; }
  /* the play button in the middle of the free picture above the text, not in the corner */
  .case-play { left: 50%; top: 35%; translate: -50% -50%; }
}

/* ===================== 07.11: the plan line, a glowing beam of our gradient =====================
   It starts at the first stage and ends at the last (--l0 / --l1 from app.js), the base is a soft
   blurred gradient, the fill glows, its tip is a hot blur, and the stages are lights of the same
   gradient that melt into the beam: dim and warm until the fill reaches them, then full. */
.steps-track { --l0: 41px; --l1: 0px; }
@keyframes stageDot { from { opacity: .4; transform: scale(.72); filter: saturate(.7); } to { opacity: 1; transform: scale(1.12); filter: saturate(1.15); } }
@media (min-width: 900px) { .motion-on .steps-light { clip-path: inset(-40px 0); } }
@media (max-width: 899px) {
  .steps li, .motion-on .steps li { border-left: 0; }
  .steps-track::before { content: ""; position: absolute; left: 6px; width: 5px; top: var(--l0); bottom: var(--l1); border-radius: 5px; pointer-events: none;
    background: linear-gradient(rgba(240, 84, 60, .3), rgba(227, 162, 61, .3)); filter: blur(2px); }
  .motion-on .steps-light { left: 6px; width: 5px; top: var(--l0); bottom: var(--l1); clip-path: inset(-14px -40px); }
  .motion-on .steps-light::before { border-radius: 5px; filter: blur(1.5px); box-shadow: 0 0 22px 6px rgba(240, 100, 50, .5); }
  .motion-on .steps-light b { left: -6px; width: 17px; height: 120px; border-radius: 50%; box-shadow: none;
    background: linear-gradient(180deg, transparent, rgba(240, 84, 60, .85) 45%, #ffd3a0 85%, #fff4e2); filter: blur(5px); }
  .step-dot { width: 30px; height: 30px; left: -15px; top: 26px; }
  .step-dot, .steps-track::after { background: radial-gradient(circle, #fff3e0 0 14%, #ffb877 32%, rgba(240, 84, 60, .78) 54%, rgba(240, 84, 60, 0) 72%) !important;
    box-shadow: 0 0 22px 8px rgba(240, 110, 50, .32) !important; }
}
/* the stage lights: no rim at all, a hot centre melting out into the beam's own gradient */
@keyframes stageDot { from { opacity: .45; transform: scale(.72); filter: saturate(.7) blur(1.5px); } to { opacity: 1; transform: scale(1.12); filter: saturate(1.15) blur(.8px); } }
@media (max-width: 899px) {
  .step-dot { width: 34px; height: 34px; left: -17px; top: 24px; }
  .step-dot, .steps-track::after { background: radial-gradient(circle, #fff6ea 0, #ffcf9c 16%, rgba(246, 130, 80, .78) 34%, rgba(240, 84, 60, .32) 52%, rgba(240, 84, 60, .08) 64%, rgba(240, 84, 60, 0) 72%) !important;
    box-shadow: 0 0 26px 6px rgba(240, 110, 50, .22) !important; }
}

/* ===================== 07.11: the plan line, clean =====================
   The blurred beam, its hot tip and the soft orbs looked smeared and cut on a real phone (filters and
   clipping on iOS). Now: a thin line of our gradient, a quiet base and a fill with a small glow; the
   stages are solid gradient dots with a warm glow, dim until the fill reaches them. No blur filters. */
@keyframes stageDot { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .steps-track::before { left: 7px; width: 2px; border-radius: 2px; filter: none; background: linear-gradient(rgba(240, 84, 60, .22), rgba(227, 162, 61, .22)); }
  .motion-on .steps-light { left: 7px; width: 2px; clip-path: none; }
  .motion-on .steps-light::before { border-radius: 2px; filter: none; box-shadow: 0 0 10px 1px rgba(240, 100, 50, .4); }
  .motion-on .steps-light b { display: none; }
  .step-dot { width: 14px; height: 14px; left: -7px; top: 34px; filter: none; }
  .step-dot, .steps-track::after { background: linear-gradient(135deg, #f05a3c, #e3a23d) !important; box-shadow: 0 0 14px 3px rgba(240, 100, 50, .45) !important; }
}

/* ===================== 07.11: the light under the cursor =====================
   On the open offer panel the cursor no longer drags a muddy brown blob: it opens a window onto our own
   living grain gradient (grainient.js, the .xp-glow field), soft-edged, that follows the pointer and
   fades in and out slowly. On the other dark cards the light is a clean warm sheen that brightens what
   is under it (screen), never a stain. */
.xp-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; border-radius: inherit; overflow: hidden;
  transition: opacity 800ms var(--ease);
  -webkit-mask: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), #000 0, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, .2) 55%, transparent 76%);
          mask: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), #000 0, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, .2) 55%, transparent 76%); }
.xp-p.is-on:hover > .xp-glow { opacity: .85; }
.xp-p.is-on > .lt { display: none; }
.statement > .lt, .case-frame > .lt, .mc > .lt { mix-blend-mode: screen;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 222, 186, .16), rgba(255, 180, 120, .05) 45%, transparent 70%); }
@media (prefers-reduced-motion: reduce) { .xp-glow { transition: none; } }

/* ===================== 07.11: headings, word by word out of a blur =====================
   motion.js splitWords: each word is an inline block in place; when the heading comes into view the
   words rise 20 px out of a 12 px blur to sharp, one after another (48 ms apart). After it has played
   the filter is dropped, so nothing keeps a blur layer while scrolling. */
.rw { display: inline-block; white-space: nowrap; }
.rw-wait .rw { opacity: 0; filter: blur(12px); transform: translateY(20px); }
.rw-in .rw { opacity: 1; filter: blur(0); transform: none;
  transition: opacity 700ms var(--ease), filter 800ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i) * 48ms); }
.rw-done .rw { filter: none; transition: none; }

/* 07.11: the sign in the "let's talk" card stands bare (no white tile) and level with the heading's
   first line instead of floating in the middle of the card */
.talk-ic, .glass-stage .talk-ic { width: auto; height: auto; border-radius: 0; background: none; align-self: start; }
.talk-ic img { display: block; width: clamp(34px, 2.6vw, 42px); height: auto; }
@media (min-width: 900px) { .talk-ic { margin-top: -.1em; } }

/* 07.11: the estimate pane: under the cursor the living gradient glows through the frosted glass
   (screen blend, soft mask), instead of a grey smudge; dim enough that the figures stay calm */
.cost > .cost-glow { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; border-radius: inherit; overflow: hidden;
  opacity: 0; mix-blend-mode: screen; transition: opacity 800ms var(--ease);
  -webkit-mask: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), #000 0, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .18) 55%, transparent 76%);
          mask: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), #000 0, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .18) 55%, transparent 76%); }
.cost-glass:hover > .cost-glow { opacity: .5; }
.cost-glass > .lt { display: none; }
@media (prefers-reduced-motion: reduce) { .cost > .cost-glow { transition: none; } }

/* ===================== 07.11: every cursor light is the living gradient =====================
   .hl (mountLight): a grain gradient field behind the content, seen only through a soft round window
   that follows the cursor and fades in slowly. Deep palette with a screen blend on the dark cards,
   the light palette on light surfaces (the messenger card, the closed offer panels). */
.hl { position: absolute !important; inset: 0 !important; z-index: 1; pointer-events: none; border-radius: inherit; overflow: hidden; margin: 0 !important; grid-area: auto !important;
  opacity: 0; mix-blend-mode: screen; transition: opacity 800ms var(--ease);
  -webkit-mask: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), #000 0, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .18) 55%, transparent 76%);
          mask: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), #000 0, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .18) 55%, transparent 76%); }
:hover > .hl { opacity: .55; }
.hl-l { mix-blend-mode: normal; }
:hover > .hl-l { opacity: .6; }
.xp-p.is-on > .hl-l { display: none; }
.statement > .lt, .case-frame > .lt, .mc > .lt, .chat-block.cb-glass > .lt, .xp-p > .lt { display: none; }
.xp-p:not(.is-on):hover { background: #e7ddcf; }
@media (prefers-reduced-motion: reduce) { .hl { transition: none; } }

/* 07.11: the whole estimate row is the switch (app.js bindCostPicks) */
.cost-row { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.cost-row:active .cost-box { transform: scale(.88); }

/* 07.11: the pair of marks on the first screen stands larger (hero3d.js lays them on a diagonal in this box) */
@media (min-width: 900px) { .hero .hero-sign { width: min(100%, calc(100svh - 200px), 760px); } }

/* 07.11: the cover's text says what the offer is: the title in two lines, the main button and a
   second, quieter way in (an example of the result) */
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero-alt { color: var(--ivory); font: 400 16px/1.3 var(--text); text-decoration: none; padding: 8px 0 4px;
  background: linear-gradient(90deg, var(--red), var(--gold)) 0 100% / 100% 1px no-repeat; transition: color 300ms var(--ease); }
.hero-alt:hover { color: #ffd9a8; }
@media (min-width: 900px) { .hero h1 { max-width: 21ch; font-size: clamp(36px, min(3.5vw, 7svh), 72px); } }

/* 07.11: the cover as in the user's layout (computer): a large three-line title on the left with the
   line and the two ways in under it in one row; on the right the two marks on a diagonal (hero3d.js) */
@media (min-width: 900px) {
  .hero h1 { grid-column: 1 / 8; max-width: 12.5ch; font-size: clamp(48px, min(5vw, 10.4svh), 108px); line-height: 1.0; letter-spacing: -0.045em; }
  :lang(en) .hero h1 { max-width: 15ch; }
  .hero-side { grid-column: 1 / 8; gap: clamp(28px, 2.6vw, 44px); }
  .hero-sub { font-size: clamp(20px, 1.65vw, 30px); line-height: 1.4; max-width: 34ch; }
  .hero-acts { flex-wrap: nowrap; gap: 36px; }
  .hero-alt { font-size: clamp(16px, 1.2vw, 20px); }
  .hero .hero-sign { grid-column: 8 / 13; justify-self: end; width: min(100%, calc(100svh - 170px), 780px); }
}

/* 07.11: on a computer the addressee and the place and dates grow with the large title */
@media (min-width: 900px) {
  .hero-meta { font-size: clamp(20px, 1.6vw, 30px); row-gap: 18px; column-gap: 40px; }
  .hero-meta .meta-fact { font-size: clamp(17px, 1.35vw, 26px); padding: 12px 20px; margin-right: 34px; }
  .hero-meta .meta-fact::after { right: -30px; width: 21px; background: linear-gradient(90deg, var(--pl) 0 6px, transparent 6px 14px, var(--pl) 14px 20px, transparent 20px); }
}

/* ============================ 08.11: Alexey's blocks, reworked ============================ */

/* --- hero: the mark, both plates gold, four facts in glass under the first screen --- */
.hero-meta > .meta-fact:nth-child(3) { --pl: var(--gold); }
.hm-on .hero-sign { overflow: visible; }
.hm-gl { position: absolute; left: 0; top: 0; display: block; touch-action: pan-y; }
.hero-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.intro .hero-facts { opacity: 0; }
.hk { display: grid; align-content: start; gap: 8px; min-height: 104px; padding: 16px 18px; border-radius: 22px; color: var(--ivory); text-decoration: none;
  border: 1px solid transparent;
  background: var(--glass-grain) padding-box, linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015) 45%, rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(rgba(26, 20, 15, .62), rgba(14, 11, 9, .78)) padding-box, var(--glass-rim-d) border-box;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 50px -32px rgba(0, 0, 0, .8);
  transition: transform 600ms var(--ease), box-shadow 600ms var(--ease); }
.hk:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 60px -30px rgba(240, 90, 60, .35); }
.hk-k { font: 400 14px/1.3 var(--text); color: var(--mute-l); }
.hk-v { font: 400 clamp(18px, 1.5vw, 27px)/1.15 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.hk-price { font-size: clamp(26px, 2.5vw, 44px); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hk-n { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mute-l); }
.hk-n b { padding: 3px 9px; border-radius: 999px; background: #e9533a; color: #fff; font: 600 13px/1.2 var(--text); }
.hk-hot { background: var(--glass-grain) padding-box, linear-gradient(160deg, rgba(240, 90, 60, .22), rgba(227, 162, 61, .05) 55%, rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(rgba(30, 20, 15, .6), rgba(16, 11, 9, .78)) padding-box, linear-gradient(140deg, rgba(255, 170, 110, .9), rgba(240, 90, 60, .35) 40%, rgba(255, 255, 255, .06) 70%, rgba(227, 162, 61, .5)) border-box; }
@media (max-width: 899px) {
  .hero-facts { grid-row: 5; }
  .hm-on .hero-sign { height: min(210px, 54vw); }
  /* a phone card is ~170px wide: the price and the values step down so nothing crosses the rim */
  .hk { padding: 14px 15px; gap: 7px; }
  .hk-v { font-size: clamp(15px, 4.2vw, 18px); }
  .hk-price { font-size: clamp(19px, 5.3vw, 26px); }
  .hk-n { flex-wrap: wrap; gap: 6px 8px; font-size: 13px; }
}
@media (min-width: 900px) {
  .hero { height: auto; min-height: max(100svh, 700px); }
  .hero-stick { height: auto; min-height: max(100svh, 700px); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .hero h1 { font-size: clamp(46px, min(4.8vw, 9svh), 100px); }
  .hero-facts { grid-column: 1 / -1; grid-row: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
  .hk { min-height: 128px; padding: 20px 24px; }
}

/* --- contents: five glass cards, the number large in outline; the first (or the hovered) one is lit --- */
.kp-sum .sum-h { max-width: 15ch; }
.sum-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: clamp(32px, 4vw, 56px); list-style: none; padding: 0; }
.sum-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 36px;
  min-height: clamp(250px, 24vw, 380px); padding: 22px 22px 24px; border-radius: 28px; color: var(--ivory); text-decoration: none;
  border: 1px solid transparent;
  background: var(--glass-grain) padding-box, linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01) 50%) padding-box,
    linear-gradient(rgba(24, 19, 15, .7), rgba(14, 11, 9, .82)) padding-box, var(--glass-rim-d) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px -40px rgba(0, 0, 0, .8);
  transition: transform 700ms var(--ease), color 500ms var(--ease); }
.sum-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 700ms var(--ease);
  background: var(--glass-grain), linear-gradient(150deg, #f05a3c 0%, #f08a4a 45%, #f3b26a 100%); }
.sum-card:hover, .sum-card:focus-visible { transform: translateY(-6px); }
.sum-card:hover::before, .sum-card:focus-visible::before, .sum-list:not(:hover) li:first-child .sum-card::before { opacity: 1; }
.sum-card:hover, .sum-list:not(:hover) li:first-child .sum-card { color: var(--coal); }
/* the number is filled with a soft gradient (an outline traced the overlapping contours of the font and
   showed angular seams inside the round letters) */
.sum-n { font: 300 clamp(64px, 6vw, 108px)/0.9 var(--serif); letter-spacing: -0.04em; color: transparent;
  background: linear-gradient(165deg, rgba(243, 160, 92, .95), rgba(227, 162, 61, .35) 90%); -webkit-background-clip: text; background-clip: text; }
.sum-card:hover .sum-n, .sum-list:not(:hover) li:first-child .sum-n { background-image: linear-gradient(165deg, rgba(22, 18, 14, .62), rgba(22, 18, 14, .22) 90%); }
.sum-body { display: grid; gap: 8px; }
.sum-ava { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; box-shadow: 0 0 0 2px rgba(240, 90, 60, .7); }
.sum-t { font: 400 clamp(22px, 1.75vw, 30px)/1.1 var(--serif); letter-spacing: -0.02em; }
.sum-x { font-size: 15px; line-height: 1.45; color: var(--mute-l); transition: color 500ms var(--ease); }
.sum-card:hover .sum-x, .sum-list:not(:hover) li:first-child .sum-x { color: rgba(22, 18, 14, .72); }
@media (max-width: 899px) {
  .sum-list { grid-template-columns: 1fr; gap: 10px; }
  .sum-card { min-height: 0; flex-direction: row; align-items: center; gap: 18px; padding: 18px; }
  .sum-n { font-size: 52px; flex: none; width: 2.1ch; }
}

/* --- what we saw: the facts in a row, then the three tasks as cards that change while the stage is in view --- */
.sv-head { display: grid; gap: 18px; }
.sv-lead { color: var(--mute-l); max-width: 44ch; }
.sv-have { margin-top: 32px; display: grid; gap: 12px; }
.sv-have-h { font-size: 15px; color: var(--mute-l); }
.sv-have ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sv-have li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; font-size: 15px; line-height: 1.35; color: var(--ivory);
  background: rgba(243, 238, 230, .045); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .1); }
.sv-have i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(227, 162, 61, .16); }
.sv-have svg { width: 14px; height: 14px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-run { position: relative; height: calc(var(--n) * 60svh + 40svh); margin-top: clamp(40px, 5vw, 72px); }
.sv-mark { position: absolute; left: 0; top: calc(var(--i) * 60svh); width: 1px; height: 60svh; pointer-events: none; }
.sv-pin { position: sticky; top: 12svh; height: 76svh; min-height: 460px; }
.sv-stage { position: relative; isolation: isolate; overflow: hidden; height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 20px;
  padding: clamp(24px, 3.4vw, 56px); border-radius: clamp(28px, 3vw, 44px); background: linear-gradient(150deg, #15110d, #4a1720 50%, #b8392a); }
.sv-stage > :not(.grain-gl) { position: relative; z-index: 1; }
.sv-h { font: 400 clamp(26px, 2.6vw, 46px)/1.08 var(--serif); letter-spacing: -0.03em; color: var(--ivory); max-width: 20ch; }
.sv-cards { position: relative; }
.sv-card { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 18px; align-items: end; max-width: 880px; padding: clamp(20px, 2.4vw, 36px); border-radius: 28px;
  border: 1px solid transparent; color: var(--ivory);
  background: var(--glass-grain) padding-box, linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 50%) padding-box,
    linear-gradient(rgba(22, 16, 12, .5), rgba(14, 10, 8, .66)) padding-box, var(--glass-rim-d) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 70px -40px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(70px) scale(.96); filter: blur(8px);
  transition: opacity 800ms var(--ease), transform 1000ms var(--ease), filter 800ms var(--ease); }
.sv-card.is-on { opacity: 1; transform: none; filter: none; }
.sv-card.is-past { opacity: 0; transform: translateY(-70px) scale(.96); filter: blur(8px); }
.sv-num { font: 300 clamp(72px, 8vw, 150px)/0.85 var(--serif); letter-spacing: -0.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-k { font-size: 14px; color: rgba(243, 238, 230, .6); }
.sv-t { font: 400 clamp(22px, 2vw, 34px)/1.15 var(--serif); letter-spacing: -0.02em; margin: 4px 0 14px; }
.sv-x { font-size: clamp(16px, 1.15vw, 20px); line-height: 1.5; color: rgba(243, 238, 230, .88); max-width: 42ch; }
.sv-dots { display: flex; gap: 8px; }
.sv-dots i { width: 26px; height: 3px; border-radius: 3px; background: rgba(243, 238, 230, .25); transition: width 600ms var(--ease), background-color 600ms var(--ease); }
.sv-dots i.is-on { width: 54px; background: var(--ivory); }
@media (min-width: 900px) {
  .sv-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; column-gap: var(--gap); }
  .sv-have { grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; }
  .sv-have ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-card { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-run { height: auto; } .sv-pin { position: static; height: auto; min-height: 0; }
  .sv-cards { display: grid; gap: 12px; } .sv-card, .sv-card.is-past { position: static; opacity: 1; transform: none; filter: none; }
  .sv-mark, .sv-dots { display: none; }
}

/* --- the offer: one shoot, four results; the branches draw in, a spark keeps running down each --- */
.tr { margin-top: clamp(28px, 3.6vw, 52px); text-align: center; }
.tr-src { display: inline-flex; align-items: center; gap: 12px; padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--ink-d); color: var(--ivory); font: 400 15px/1 var(--text); }
.tr-src b { font-weight: 500; }
.tr-src span:last-child { color: var(--mute-l); }
.tr-rec { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(240, 90, 60, .18); color: #ff8f72; font: 600 12px/1 var(--text); letter-spacing: .08em; }
.tr-rec i { width: 7px; height: 7px; border-radius: 50%; background: #f05a3c; animation: recBlink 1.6s steps(1, end) infinite; }
@keyframes recBlink { 50% { opacity: .2; } }
.tr-sub { margin-top: 18px; font: 400 clamp(24px, 2.4vw, 42px)/1.15 var(--serif); letter-spacing: -0.03em; }
.tr-lines { display: block; width: 100%; height: clamp(56px, 7vw, 110px); margin-top: 8px; overflow: visible; }
.tr-path { fill: none; stroke: url(#trg); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85;
  transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) calc(.15s + var(--i) * .14s); }
.tr.is-in .tr-path { stroke-dashoffset: 0; }
.tr-spark { fill: #ffe2bf; opacity: 0; transition: opacity .8s 1.6s; }
.tr.is-in .tr-spark { opacity: 1; }
.tr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); list-style: none; margin: 0; padding: 0; text-align: left; }
.tr-card { position: relative; overflow: hidden; border-radius: 24px; color: var(--ivory); background: #18120e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 60px -40px rgba(60, 25, 10, .65);
  opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease) calc(.7s + var(--i) * .12s), transform 1.1s var(--ease) calc(.7s + var(--i) * .12s), box-shadow .6s var(--ease); }
.tr.is-in .tr-card { opacity: 1; transform: none; }
.tr-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 70px -36px rgba(200, 80, 30, .45); }
.tr-vis { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #2c1e15, #120d0a 70%); }
.tr-text { display: grid; gap: 6px; padding: 16px 18px 20px; }
.tr-n { font: 500 13px/1 var(--text); color: var(--gold); }
.tr-t { font: 400 clamp(18px, 1.4vw, 24px)/1.15 var(--serif); letter-spacing: -0.02em; }
.tr-x { font-size: 14px; line-height: 1.45; color: rgba(243, 238, 230, .66); }
.tv { position: absolute; inset: 12px; }
.tv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tv-film { overflow: hidden; border-radius: 14px; }
.tv-film img { transition: transform 1.4s var(--ease); }
.tr-card:hover .tv-film img { transform: scale(1.07); }
.tv-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -50%; border-radius: 50%; background: rgba(255, 250, 243, .92); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); }
.tv-play::after { content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-left: 14px solid #16110d; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.tv-rec { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; background: rgba(10, 8, 6, .62); font: 600 11px/1 var(--text); color: #fff; }
.tv-rec i { width: 6px; height: 6px; border-radius: 50%; background: #f05a3c; animation: recBlink 1.6s steps(1, end) infinite; }
.tv-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.tv-bar b { display: block; width: 30%; height: 100%; border-radius: 3px; background: var(--grad); transition: width 3s linear; }
.tr-card:hover .tv-bar b { width: 86%; }
.tv-photo img { position: absolute; left: 20%; top: 12%; width: 60%; height: auto; aspect-ratio: 4 / 3; border-radius: 4px; border: 4px solid #fbf7f0;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .65); transform: rotate(calc((var(--i) - 1) * 7deg)) translateX(calc((var(--i) - 1) * 16%)); transition: transform 1s var(--ease); }
.tr-card:hover .tv-photo img { transform: rotate(calc((var(--i) - 1) * 12deg)) translateX(calc((var(--i) - 1) * 32%)) translateY(calc(var(--i) * -3%)); }
.tv-reels { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tv-reels span { position: relative; overflow: hidden; height: 86%; aspect-ratio: 9 / 16; border-radius: 10px; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .7);
  transform: rotate(calc((var(--i) - 1) * 5deg)); transition: transform 1s var(--ease); }
.tv-reels span:nth-child(2) { height: 100%; z-index: 1; }
.tv-reels span i { position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.tv-reels span i::after { content: ""; position: absolute; inset: 0 60% 0 0; border-radius: 2px; background: #fff; }
.tr-card:hover .tv-reels span { transform: rotate(calc((var(--i) - 1) * 8deg)) translateX(calc((var(--i) - 1) * 12%)) translateY(calc((var(--i) - 1) * (var(--i) - 1) * 4%)); }
.tv-link { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 8px; border-radius: 12px; background: #f4eee5; }
.tv-url { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 6px; background: #fff; font: 600 11px/1 var(--text); color: #2a241e; }
.tv-url i { width: 6px; height: 6px; border-radius: 50%; background: #d8cfc3; }
.tv-url b { margin-left: 6px; font-weight: 600; }
.tv-page { position: relative; overflow: hidden; border-radius: 8px; }
.tv-page .tv-play { width: 34px; height: 34px; } .tv-page .tv-play::after { border-left-width: 10px; border-top-width: 7px; border-bottom-width: 7px; }
.tv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.tv-grid img { aspect-ratio: 1; height: auto; border-radius: 4px; }
.tv-page img { transition: transform 1.4s var(--ease); }
.tr-card:hover .tv-page img { transform: scale(1.06); }
@media (min-width: 900px) { .tr-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* two cards side by side on a phone: «Фоторепортаж» must fit a ~170px card */
@media (max-width: 899px) {
  .tr-text { padding: 14px 14px 18px; }
  .tr-t { font-size: clamp(14px, 4.1vw, 18px); overflow-wrap: anywhere; hyphens: auto; }
  .tr-x { font-size: 13px; }
}
@media (max-width: 899px) { .tr-lines { display: none; } .tr-sub { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .tr-path { stroke-dashoffset: 0; transition: none; } .tr-card { opacity: 1; transform: none; transition: none; } .tr-spark { display: none; } }

/* --- a video by morning: the sky of the card turns from dusk to night to dawn as a light walks the line --- */
.mn-card { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 28px; padding: clamp(24px, 3.4vw, 56px); border-radius: clamp(28px, 3vw, 44px); color: var(--ivory); background: #1c1410; }
.mn-card > :not(.grain-gl) { position: relative; z-index: 1; }
.mn-card > .mn-sky { position: absolute !important; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .95;
  background: linear-gradient(90deg, rgba(255, 140, 70, .75) 0%, rgba(70, 50, 170, .8) 45%, rgba(40, 30, 120, .85) 55%, rgba(255, 175, 120, .75) 100%);
  background-size: 300% 100%; animation: mnSky 14s ease-in-out infinite; }
@keyframes mnSky { 0% { background-position: 0% 0; } 45%, 55% { background-position: 50% 0; } 100% { background-position: 100% 0; } }
.mn-t { margin-top: 16px; font: 400 clamp(40px, 5vw, 86px)/0.98 var(--serif); letter-spacing: -0.045em; }
.mn-x { margin-top: 14px; max-width: 34ch; font-size: clamp(17px, 1.3vw, 22px); line-height: 1.45; color: rgba(243, 238, 230, .9); }
.mn-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 0; padding: 0; list-style: none; }
.mn-line::before { content: ""; position: absolute; left: 22px; width: calc(66.66% + 0px); top: 21px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #f7a052, #8a7bff 50%, #ffc98e); opacity: .85; box-shadow: 0 0 10px rgba(255, 170, 110, .35); }
.mn-line li { position: relative; display: grid; gap: 4px; justify-items: start; }
.mn-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 10px;
  background: rgba(20, 14, 10, .55); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .18), inset 0 1px 0 rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mn-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff2e2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mn-line b { font: 400 clamp(24px, 2.1vw, 36px)/1 var(--serif); letter-spacing: -0.02em; }
.mn-line li > span:last-child { font-size: 14px; line-height: 1.35; color: rgba(243, 238, 230, .7); }
.mn-walk { position: absolute; top: 18px; left: 18px; width: 8px; height: 8px; border-radius: 50%; background: #fff6e8;
  box-shadow: 0 0 10px 3px rgba(255, 200, 140, .75); animation: mnWalk 14s ease-in-out infinite; }
@keyframes mnWalk { 0% { left: 18px; opacity: 0; } 6% { opacity: 1; } 40%, 55% { left: calc(33.33% + 18px); } 92% { left: calc(66.66% + 18px); opacity: 1; } 100% { left: calc(66.66% + 18px); opacity: 0; } }
.mn-reach { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.mn-reach li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(20, 14, 10, .4); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mn-reach b { font: 500 16px/1.3 var(--text); }
.mn-reach span { font-size: 14px; line-height: 1.45; color: rgba(243, 238, 230, .75); }
.mn-foot { margin-top: 16px; font-size: 14px; color: rgba(243, 238, 230, .6); }
.mn .mc-story { position: relative; }
.mn-clock { position: absolute; top: 14px; right: 14px; z-index: 4; padding: 6px 11px; border-radius: 999px; background: #fffaf3; color: #16110d; font: 600 13px/1 var(--text); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
@media (min-width: 900px) {
  .mn-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 4vw, 64px); }
  .mn-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .mn-card > .mn-sky, .mn-walk { animation: none; } .mn-walk { display: none; } }

/* --- what else we can do: tiles with a line icon, the last one opens Telegram --- */
.xt { margin-top: clamp(56px, 6vw, 96px); }
.xt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 20px; }
.xt-h { font: 400 clamp(26px, 2.4vw, 42px)/1.1 var(--serif); letter-spacing: -0.03em; }
.xt-n { font-size: 15px; color: var(--mute-d); }
.xt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.xt-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 118px; padding: 16px; border-radius: 20px;
  background: rgba(255, 255, 255, .64); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 18, 14, .04), 0 12px 30px -24px rgba(80, 40, 20, .4);
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.xt-tile:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 22px 40px -26px rgba(120, 50, 20, .45); }
.xt-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(240, 90, 60, .1); }
.xt-ic svg { width: 19px; height: 19px; fill: none; stroke: #e0583a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xt-t { font: 400 16px/1.3 var(--text); color: var(--ink-d); }
.xt-ask { padding: 0; overflow: hidden; background: var(--glass-grain), var(--grad); }
.xt-ask a { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; height: 100%; padding: 16px; color: var(--coal); text-decoration: none; }
.xt-ask .xt-t { font: 400 20px/1.15 var(--serif); color: var(--coal); }
.xt-a { font: 500 14px/1.3 var(--text); color: rgba(22, 18, 14, .78); }
@media (min-width: 900px) { .xt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .xt-tile { min-height: 132px; padding: 18px; } .xt-ask a { padding: 18px; } }

/* --- works: more cells under the main case --- */
.case-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.wk { position: relative; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 12px; aspect-ratio: 4 / 3; border-radius: 22px; color: rgba(243, 238, 230, .55); text-decoration: none; }
.wk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-empty { background: rgba(243, 238, 230, .025); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .1); transition: background-color 500ms var(--ease); }
.wk-empty:hover { background: rgba(243, 238, 230, .05); }
.wk-plus { position: relative; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .28); }
.wk-plus::before, .wk-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; translate: -50% -50%; background: rgba(243, 238, 230, .7); }
.wk-plus::after { rotate: 90deg; }
.wk-name { position: relative; font-size: 14px; text-align: center; padding: 0 12px; text-wrap: balance; }
@media (min-width: 900px) { .case-more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } }

/* --- the plan: each stage lights up with a crisp ring of light as the reader reaches it --- */
.step-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 196, 140, .95); opacity: 0; transform: scale(.5); pointer-events: none; }
.steps li.is-lit .step-dot::after { animation: stepRing 1.4s cubic-bezier(.22, 1, .36, 1) .1s both; }
.steps li.is-lit .step-dot { animation: stepPop 900ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes stepRing { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes stepPop { 0% { scale: .6; } 60% { scale: 1.25; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .steps li.is-lit .step-dot, .steps li.is-lit .step-dot::after { animation: none; } }
/* the five cards replace the old two-column contents: one column, the heading above the row of cards */
.toc.kp-sum .wrap { display: block; }
.kp-sum .sum-h { font: 400 clamp(34px, 4.2vw, 72px)/1.04 var(--serif); letter-spacing: -0.04em; max-width: 16ch; }
/* the Stories frame in the new night card: a fixed width (a percentage of an auto column resolves to nothing) */
.mn .sf { width: min(300px, 72vw); }
@media (min-width: 900px) { .mn .sf { width: clamp(240px, 21vw, 310px); } }
.mn-clock { top: 6px; right: -6px; }

/* ============ 08.11 b: what matters, shown through a camera (built like the messenger block) ============ */
.sc { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 28px; align-items: center; margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(18px, 3vw, 52px); border-radius: clamp(28px, 3vw, 44px); color: var(--ink-d); background: #efe6da; }
.sc > :not(.grain-gl):not(.lt) { position: relative; z-index: 1; }
.sc > .lt { z-index: 1; }
.sc-text { display: grid; gap: 22px; align-content: start; }
.sc-h { font: 400 clamp(26px, 2.8vw, 48px)/1.08 var(--serif); letter-spacing: -0.035em; max-width: 17ch; text-wrap: balance; }
.sc-qs { display: grid; gap: 10px; }
.sc-q { position: relative; overflow: hidden; display: grid; width: 100%; padding: 18px 22px; border: 0; border-radius: 20px; text-align: left; cursor: pointer; color: var(--ink-d);
  background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(22, 18, 14, .06);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  transition: background-color 500ms var(--ease), color 500ms var(--ease), transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.sc-q:hover { transform: translateX(4px); }
.sc-q[aria-selected="true"] { background: #16120e; color: var(--ivory); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 44px -26px rgba(22, 18, 14, .7); transform: none; }
.sc-top { display: flex; align-items: baseline; gap: 14px; }
.sc-n { flex: none; font: 400 15px/1 var(--text); color: var(--mute-d); transition: color 500ms var(--ease); }
.sc-q[aria-selected="true"] .sc-n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-qt { font: 400 clamp(17px, 1.35vw, 23px)/1.25 var(--serif); letter-spacing: -0.02em; }
/* the answer opens under the chosen task */
.sc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--ease); }
.sc-a > span { overflow: hidden; }
.sc-x { display: block; padding: 12px 0 2px 29px; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; color: rgba(243, 238, 230, .82);
  opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
.sc-q[aria-selected="true"] .sc-a { grid-template-rows: 1fr; }
.sc-q[aria-selected="true"] .sc-x { opacity: 1; transform: none; transition-delay: 150ms; }
/* the round: a thin light fills under the open task while it waits */
.sc-bar { position: absolute; left: 22px; right: 22px; bottom: 9px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; opacity: 0; }
.sc.is-tick .sc-q[aria-selected="true"] .sc-bar { opacity: .85; animation: scBar 5600ms linear forwards; }
@keyframes scBar { to { transform: scaleX(1); } }

/* the camera: a graphite body, a screen on the left, a dial and two buttons on the right */
.sc-cam { perspective: 1400px; display: grid; place-items: center; }
.cam { width: min(100%, 640px); transform-style: preserve-3d; animation: camFloat 7s ease-in-out infinite; }
@keyframes camFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.cam-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(10px, 1.4vw, 18px); align-items: center; padding: clamp(10px, 1.3vw, 16px);
  border-radius: clamp(24px, 2.4vw, 34px);
  background: linear-gradient(160deg, #4a433d 0%, #24201c 22%, #15120f 60%, #0d0b09 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 40px 70px -34px rgba(40, 22, 10, .55), 0 18px 30px -18px rgba(40, 22, 10, .45); }
.cam-scr { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: clamp(12px, 1.2vw, 16px); background: #0b0a09; cursor: pointer; touch-action: pan-y;
  box-shadow: 0 0 0 3px #0a0908, 0 0 0 4px rgba(255, 255, 255, .07); user-select: none; -webkit-user-select: none; }
.cam-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); filter: blur(14px);
  transition: opacity 600ms var(--ease), transform 1200ms var(--ease), filter 900ms var(--ease); }
.cam-img.is-on { opacity: 1; transform: none; filter: none; }
/* a quick shutter between shots */
.cam-scr::after { content: ""; position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; }
.cam-scr.is-shut::after { animation: camShut 420ms var(--ease); }
@keyframes camShut { 0% { opacity: 0; } 18% { opacity: .55; } 100% { opacity: 0; } }
.cam-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .22) calc(33.33% + .5px), transparent 0, transparent calc(66.66% - .5px), rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .22) calc(66.66% + .5px), transparent 0),
    linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .22) calc(33.33% + .5px), transparent 0, transparent calc(66.66% - .5px), rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .22) calc(66.66% + .5px), transparent 0); }
.cam-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  font: 500 clamp(10px, .8vw, 12px)/1 var(--text); letter-spacing: .04em; color: #fff; background: linear-gradient(rgba(0, 0, 0, .45), transparent); }
.cam-rec { display: inline-flex; align-items: center; gap: 6px; }
.cam-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: camRec 1.6s steps(1) infinite; }
@keyframes camRec { 50% { opacity: .25; } }
.cam-tc { font-variant-numeric: tabular-nums; opacity: .9; }
.cam-fmt { margin-left: auto; opacity: .8; }
/* the focus brackets slide onto the subject on a spring, then lock in gold */
.cam-af { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--w); height: var(--h); pointer-events: none;
  transition: left 850ms cubic-bezier(.34, 1.3, .64, 1), top 850ms cubic-bezier(.34, 1.3, .64, 1), width 850ms cubic-bezier(.34, 1.3, .64, 1), height 850ms cubic-bezier(.34, 1.3, .64, 1); }
.cam-af i { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .9); transition: border-color 300ms var(--ease); }
.cam-af i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; border-top-left-radius: 4px; }
.cam-af i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; border-top-right-radius: 4px; }
.cam-af i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-bottom-left-radius: 4px; }
.cam-af i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: 4px; }
.cam-af.is-lock i { border-color: #ffc56b; }
.cam-af.is-lock { animation: camLock 380ms var(--ease); }
@keyframes camLock { 40% { scale: .97; } }
.cam-shot { position: absolute; z-index: 3; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 999px; font: 500 clamp(11px, .85vw, 13px)/1 var(--text); color: #fff;
  background: rgba(16, 12, 9, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cam-shot.is-in { animation: camShot 700ms var(--ease) both; }
@keyframes camShot { from { opacity: 0; translate: 0 8px; filter: blur(4px); } }
.cam-ctl { display: grid; justify-items: center; gap: clamp(10px, 1.2vw, 16px); padding: 4px 2px; }
.cam-dial { width: clamp(38px, 4vw, 56px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #2a2521 0 46%, transparent 47%), repeating-conic-gradient(#5b534c 0 3deg, #1b1714 3deg 9deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px -4px rgba(0, 0, 0, .7); animation: camDial 18s linear infinite; }
@keyframes camDial { to { rotate: 1turn; } }
.cam-btn { width: clamp(16px, 1.6vw, 22px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff7a5c, #c8302a 70%); box-shadow: 0 0 0 3px #0e0c0a, 0 0 0 4px rgba(255, 255, 255, .08); }
.cam-pad { width: clamp(26px, 2.6vw, 36px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #1a1613 0 30%, #2c2723 31% 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(0, 0, 0, .6); }
@media (min-width: 900px) {
  .sc { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .sc-text { grid-column: 1 / 6; }
  .sc-cam { grid-column: 6 / 13; }
}
@media (max-width: 899px) {
  .sc { gap: 22px; }
  .sc-cam { order: -1; }
  .sc-text { gap: 16px; }
  .sc-q { padding: 15px 16px; border-radius: 18px; }
  .sc-bar { left: 16px; right: 16px; bottom: 7px; }
  .sc-x { padding-left: 0; }
  .cam-ctl { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .cam, .cam-dial, .cam-rec i { animation: none; } .cam-img, .cam-af, .sc-a, .sc-x { transition: none; } }

/* ============ 08.11 b: the night line, drawn by a light (mountNight sets --p, --hx and --fo) ============ */
.mn-line::before { display: none; }
.mn-track { position: absolute; left: 22px; top: 21px; width: 66.66%; height: 2px; border-radius: 2px; background: rgba(243, 238, 230, .14); pointer-events: none; }
.mn-fill { position: absolute; inset: 0; border-radius: inherit; opacity: var(--fo, 1);
  background: linear-gradient(90deg, #f7a052, #c06ad0 32%, #7d78ff 50%, #b48cff 70%, #ffc98e);
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.mn-head { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fffaf2; opacity: var(--fo, 1);
  transform: translateX(var(--hx, 0px)); box-shadow: 0 0 0 4px rgba(255, 236, 214, .14), 0 0 12px 2px rgba(255, 214, 170, .55); }
.mn-head::before { content: ""; position: absolute; right: 5px; top: 4px; width: 70px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 246, 234, .9)); }
.mn-line li { --lit: 0; }
.mn-ic { position: relative; z-index: 1; transition: background-color 700ms var(--ease), box-shadow 700ms var(--ease), transform 700ms var(--ease); }
.mn-line li .mn-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 700ms var(--ease); z-index: -1; }
.mn-line li:nth-child(1) .mn-ic::after { background: linear-gradient(150deg, #f7a052, #e0573c); }
.mn-line li:nth-child(2) .mn-ic::after { background: linear-gradient(150deg, #8f86ff, #4a3fb8); }
.mn-line li:nth-child(3) .mn-ic::after { background: linear-gradient(150deg, #ffd29a, #f08a4a); }
.mn-line li.is-on .mn-ic { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px rgba(0, 0, 0, .6); }
.mn-line li.is-on .mn-ic::after { opacity: 1; }
.mn-line li b, .mn-line li > span:last-child { transition: opacity 700ms var(--ease); }
.mn-line li:not(.is-on) b { opacity: .5; }
.mn-line li:not(.is-on) > span:last-child { opacity: .55; }
.mn-card > .mn-sky { animation: none; background-position: calc(var(--p, 0) * 100%) 0; }
.mn-clock { font-variant-numeric: tabular-nums; min-width: 54px; text-align: center; }

/* ============ 08.11 c: composition and scale ============ */
/* "already in place": one large line, the facts as glass pills whose ticks draw in one after another */
.sv-head { display: block; }
.svh { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1vw, 16px); margin-top: clamp(36px, 4.4vw, 72px);
  font: 400 clamp(19px, 2.35vw, 42px)/1.15 var(--serif); letter-spacing: -0.025em; }
.svh-k { color: var(--mute-l); margin-right: .25em; }
.svh-pill { display: inline-flex; align-items: center; gap: .5em; padding: .4em .85em .4em .4em; border-radius: 999px; color: var(--ivory);
  border: 1px solid transparent;
  background: var(--glass-grain) padding-box, linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015) 55%) padding-box,
    linear-gradient(rgba(30, 23, 18, .75), rgba(16, 12, 10, .85)) padding-box, var(--glass-rim-d) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 50px -30px rgba(0, 0, 0, .8);
  transition: transform 600ms var(--ease), box-shadow 600ms var(--ease); }
.svh-pill:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 60px -30px rgba(240, 90, 60, .45); }
.svh-ok { flex: none; display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -6px rgba(240, 90, 60, .7); }
.svh-ok svg { width: .72em; height: .72em; fill: none; stroke: #1a120c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; }
.svh.is-in .svh-ok svg { animation: svhTick 700ms var(--ease) calc(500ms + var(--i) * 180ms) forwards; }
@keyframes svhTick { to { stroke-dashoffset: 0; } }
html:not(.motion-on) .svh-ok svg { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .svh-ok svg { stroke-dashoffset: 0; animation: none !important; } }
@media (max-width: 599px) { .svh { gap: 8px; } .svh-k { width: 100%; margin-bottom: 2px; } }

/* section headings: a size step up on large screens, so every chapter opens with a real statement */
@media (min-width: 1100px) {
  #sections .sec:not(.toc) .h2 { font-size: clamp(56px, 6vw, 116px); line-height: 1; letter-spacing: -0.048em; }
  :lang(hy) #sections .sec:not(.toc) .h2 { font-size: clamp(44px, 4.8vw, 90px); line-height: 1.08; letter-spacing: -0.01em; }
  #seen .h2 { max-width: 14ch; }
}
/* the offer opens centred over its tree, unlike its neighbours */
.pk-head.pk-head-c { display: block; text-align: center; }
.pk-head.pk-head-c .h2 { margin-inline: auto; max-width: 15ch; }
/* the pills step down to the right, a cascade that leads the eye into the camera block below */
@media (min-width: 900px) {
  .svh { flex-direction: column; align-items: flex-start; gap: 14px; }
  .svh-k { margin: 0 0 6px; }
  .svh-pill { white-space: nowrap; max-width: 100%; }
  .svh-pill:nth-child(3) { margin-left: 10%; }
  .svh-pill:nth-child(4) { margin-left: 20%; }
  .svh-pill:nth-child(5) { margin-left: 30%; }
}

/* ============ 08.11 d: the scale step, carried on where the page had small type in big space ============ */
@media (min-width: 1100px) {
  /* the contents opens as big as the chapters */
  .kp-sum .sum-h { font-size: clamp(52px, 5.4vw, 100px); line-height: 1; letter-spacing: -0.048em; }
  /* the case: the story under the film reads as a statement, not a caption */
  .case-cols { display: block; }
  .case-cols p:first-child { font: 400 clamp(24px, 1.9vw, 34px)/1.3 var(--serif); letter-spacing: -0.025em; color: var(--ivory); max-width: 50ch; }
  /* the plan: the three stages are named large */
  .steps .h4 { font: 400 clamp(30px, 2.6vw, 48px)/1.05 var(--serif); letter-spacing: -0.035em; }
  .steps li > p { font-size: 18px; line-height: 1.55; max-width: 30ch; }
  /* the estimate: its title fills the empty left side of the pane */
  .cost-a .h3 { font-size: clamp(40px, 3.8vw, 68px); line-height: 1; letter-spacing: -0.04em; }
  /* "what else": a real sub-heading inside the offer */
  .xt-h { font-size: clamp(34px, 3.4vw, 60px); line-height: 1.02; letter-spacing: -0.04em; }
  /* the letter sits in a narrow column beside the photo: its heading stays a size down, or it breaks into six lines */
  #sections #contacts .h2 { font-size: clamp(46px, 4.3vw, 80px); line-height: 1.02; }
  #contacts .letter-body .lead { font-size: clamp(20px, 1.5vw, 25px); color: rgba(243, 238, 230, .78); }
}

/* ===== 09.11 merge: from Claude's version only the language question, «what we saw», works and the four currencies ===== */
/* --- 3. the task: dark, our reading beside the title, three plates, then the goals on glass over the hall --- */
.sec.seen { padding-top: clamp(40px, 5vw, 96px); background: radial-gradient(50% 30% at 100% 35%, rgba(240, 84, 60, 0.09), transparent 70%), var(--coal); }
.hero-meta > .meta-fact:nth-child(3) { --pl: var(--gold); }
.kt-head { display: grid; gap: 24px; }
.kt-chap { display: flex; align-items: center; gap: 16px; font: 500 12px/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute-l); margin-bottom: clamp(8px, 1.5vw, 24px); }
.kt-cn { font: 400 20px/1 var(--serif); letter-spacing: 0; color: var(--gold); }
.kt-chap i { flex: 1; height: 1px; background: currentColor; opacity: 0.3; }
.kt-title { max-width: 15ch; }
.kt-side { display: grid; gap: 4px; align-content: end; }
.kt-lead { font-size: clamp(16px, 1.15vw, 20px); line-height: 1.65; color: rgba(243, 238, 230, 0.8); max-width: 52ch; }
.seen .src { color: var(--mute-l); }
@media (min-width: 1000px) {
  .kt-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; }
  .kt-chap { grid-column: 1 / 13; }
  .kt-title { grid-column: 1 / 7; align-self: end; }
  .kt-side { grid-column: 8 / 13; }
}
.kt-have { display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 80px); }
.kt-have-t { font: 500 12px/1.3 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-l); }
.kt-have-list { list-style: none; display: grid; gap: 10px; }
.kt-have-list li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-b);
  font: 400 clamp(15px, 1.05vw, 18px)/1.35 var(--serif); letter-spacing: -0.01em; }
.kt-ok { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(227, 162, 61, 0.16); color: var(--gold); }
@media (min-width: 900px) {
  .kt-have { grid-template-columns: minmax(160px, 2fr) 10fr; align-items: center; column-gap: var(--gap); }
  .kt-have-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
}
.kt-stage { position: relative; isolation: isolate; margin-top: clamp(40px, 5vw, 88px); padding: clamp(24px, 5vw, 80px) clamp(16px, 4vw, 72px) clamp(20px, 4vw, 72px); border-radius: clamp(24px, 2.4vw, 40px); overflow: hidden;
  border: 1px solid var(--glass-b); background: #120d0a; }
.kt-photo { position: absolute; inset: 0; z-index: -2; }
.kt-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: saturate(0.75) contrast(1.05); transform: scale(1.04); }
.kt-photo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 85% 0%, rgba(240, 84, 60, 0.35), transparent 65%), linear-gradient(180deg, rgba(10, 9, 8, 0.55) 0%, rgba(10, 9, 8, 0.35) 35%, rgba(10, 9, 8, 0.92) 100%); }
.kt-focus-h { font: 400 clamp(26px, 3.2vw, 56px)/1.08 var(--serif); letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance; margin-bottom: clamp(28px, 4vw, 72px); }
.kt-cards { list-style: none; display: grid; gap: 12px; }
.kt-card { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 20px 24px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(24, 18, 14, 0.62), rgba(24, 18, 14, 0.42)); border: 1px solid rgba(255, 236, 216, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.kt-n { font: 300 clamp(44px, 4vw, 72px)/0.9 var(--serif); letter-spacing: -0.05em; background: linear-gradient(120deg, #ffd7a8, #f0543c); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; }
.kt-k { font: 500 11px/1.2 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-l); }
.kt-k + .meta-fact { margin-bottom: 14px; }
.kt-q { --pl: var(--ivory); --pt: var(--coal); }
.kt-card:nth-child(2) .kt-q { --pl: var(--gold); }
.kt-a { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; color: rgba(243, 238, 230, 0.88); }
@media (min-width: 900px) {
  .kt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .kt-card { padding: 30px 28px 32px; border-radius: 26px; }
}
@media (max-width: 899px) {
  .hero-doc { flex-wrap: wrap; gap: 4px 10px; font-size: 11px; letter-spacing: 0.1em; }
  .hero-doc i { display: none; }
  .hero-doc > * { white-space: nowrap; }
  .hero-doc span::before { content: "· "; color: var(--mute-l); }
  .ks-card a { min-height: 0; gap: 18px; padding: 20px 20px 22px; }
  .ks-n { font-size: 40px; }
  .ks-seen .ks-n { font-size: 64px; }
  .ks-seen a { min-height: 260px; }
  .kt-card { padding: 20px 18px 22px; }
  .kt-n { font-size: 40px; margin-bottom: 6px; }
}
.hf-fact.is-price .hf-k { padding-right: 52px; }
@media (min-width: 900px) { .hf-fact.is-price .hf-k { padding-right: 64px; } }
@media (max-width: 899px) { .hf-fact.is-price .hf-k { padding-right: 0; } .hf-fact.is-price .hf-badge { top: auto; bottom: 12px; right: 12px; } .hf-fact.is-price .hf-n { padding-right: 56px; } }
.hf-k { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 899px) { .hf-fact.is-price .hf-badge { position: static; justify-self: start; order: 3; } .hf-fact.is-price .hf-n { padding-right: 0; } }

/* --- the language question --- */
.lp { display: none; }
.pick-lang .lp { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; overflow: hidden; background: #0a0807; color: var(--ink-l);
  transition: opacity 900ms var(--ease), filter 900ms var(--ease), transform 900ms var(--ease); }
.pick-lang body { overflow: hidden; }
.pick-lang .top, .pick-lang .fab-talk { visibility: hidden; }
.lp.is-out { opacity: 0; filter: blur(14px); transform: scale(1.06); pointer-events: none; }
.lp-glow { position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(32% 30% at 30% 35%, rgba(240, 84, 60, 0.42), transparent 70%), radial-gradient(30% 28% at 72% 70%, rgba(227, 162, 61, 0.30), transparent 70%), radial-gradient(40% 40% at 50% 110%, rgba(184, 57, 42, 0.45), transparent 70%);
  filter: blur(20px); animation: lp-drift 14s ease-in-out infinite alternate; }
@keyframes lp-drift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.08); } 100% { transform: translate3d(-2%, 3%, 0) rotate(-6deg) scale(1.02); } }
.lp-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255, 236, 216, 0.16) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 50%, #000, transparent 80%); mask-image: radial-gradient(60% 55% at 50% 50%, #000, transparent 80%); }
.lp-in { position: relative; display: grid; justify-items: center; text-align: center; gap: 18px; width: min(100%, 980px); }
.lp-sign { width: 64px; height: 64px; filter: drop-shadow(0 0 24px rgba(240, 84, 60, 0.6)); animation: lp-in 1100ms var(--ease) both, lp-pulse 3.2s ease-in-out 1.1s infinite; }
@keyframes lp-pulse { 50% { filter: drop-shadow(0 0 42px rgba(240, 120, 60, 0.85)); transform: scale(1.04); } }
.lp-doc { font: 500 12px/1.2 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-l); animation: lp-in 1100ms 120ms var(--ease) both; }
.lp-t { display: grid; gap: 6px; margin: 8px 0 22px; }
.lp-t span { animation: lp-in 1200ms var(--ease) both; }
.lp-t span:nth-child(1) { font: 400 clamp(38px, 6.4vw, 96px)/1 var(--serif); letter-spacing: -0.045em; animation-delay: 200ms; }
.lp-t span:nth-child(2) { font: 300 clamp(20px, 2.4vw, 34px)/1.2 var(--serif); letter-spacing: -0.02em; color: rgba(243, 238, 230, 0.7); animation-delay: 330ms; }
.lp-t span:nth-child(3) { font: 400 clamp(18px, 2vw, 28px)/1.3 "Noto Sans Armenian", sans-serif; color: rgba(243, 238, 230, 0.5); animation-delay: 460ms; }
@keyframes lp-in { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
.lp-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
.lp-btns button { --d: 0; position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: start; gap: 30px; padding: 22px 24px 20px; border-radius: 26px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 236, 216, 0.18); background: linear-gradient(180deg, rgba(255, 246, 236, 0.08), rgba(255, 246, 236, 0.02)); color: var(--ink-l);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: lp-in 1200ms calc(600ms + var(--d) * 120ms) var(--ease) both; transition: transform 500ms var(--ease), border-color 400ms var(--ease), color 300ms; }
.lp-btns button::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: linear-gradient(140deg, #f0543c, #e8763a 55%, #e3a23d); transition: opacity 450ms var(--ease); }
.lp-btns b { font: 400 clamp(22px, 2.2vw, 32px)/1.1 var(--serif); letter-spacing: -0.03em; }
.lp-btns button[lang="hy"] b { font-family: "Noto Sans Armenian", sans-serif; font-weight: 500; letter-spacing: 0; }
.lp-btns small { font: 600 12px/1 var(--text); letter-spacing: 0.16em; color: var(--mute-l); justify-self: end; grid-row: 1; }
  .lp-btns button:hover { transform: translateY(-6px); border-color: transparent; color: #140c08; }
.lp-btns button:hover::before, .lp-btns button.is-picked::before { opacity: 1; }
.lp-btns button:hover small, .lp-btns button.is-picked small { color: rgba(20, 12, 8, 0.7); }
.lp-btns button.is-picked { color: #140c08; transform: scale(1.04); }
.lp-btns button:active { transform: scale(0.98); }
@media (max-width: 640px) {
  .lp-btns { grid-template-columns: 1fr; gap: 10px; }
  .lp-btns button { grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 20px; }
  .lp-btns small { grid-row: auto; }
  .lp-t { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .lp *, .lp { animation: none !important; transition: none !important; } }

/* --- 3. the task: lighter --- */
.kt-lead { font-size: clamp(17px, 1.4vw, 24px); line-height: 1.45; color: var(--ink-l); max-width: 30ch; font-family: var(--serif); letter-spacing: -0.015em; }
.kt-a { font-size: clamp(15px, 1.1vw, 19px); line-height: 1.45; }
.kt-card { gap: 8px; }

/* --- 8. works: the featured one, then the places for the rest --- */
.case-more { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.wk-card { position: relative; display: grid; align-content: end; aspect-ratio: 4 / 3; padding: 18px; border-radius: 22px; overflow: hidden; color: var(--ink-l); text-decoration: none; background: #1a1411; }
.wk-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wk-name { position: relative; z-index: 1; font: 400 clamp(15px, 1.1vw, 19px)/1.2 var(--serif); letter-spacing: -0.02em; }
.wk-empty { place-items: center; align-content: center; gap: 12px; text-align: center; background: transparent; border: 1.5px dashed rgba(243, 238, 230, 0.2); color: var(--mute-l); }
.wk-empty .wk-name { font: 400 13px/1.3 var(--text); }
.wk-plus { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(243, 238, 230, 0.25); }
.wk-plus::before, .wk-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; background: currentColor; }
.wk-plus::after { rotate: 90deg; }
@media (max-width: 899px) { .case-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wk-card { border-radius: 16px; padding: 12px; } }

/* --- 9. the estimate: four currencies --- */
#curSwitch button { min-width: 40px; }

.lp-btns button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* =====================================================================================================
   08.11 WORKS. Alexey sent seven works: the Voronezh forum is the big frame with a button per year,
   the other six are drawn cards (no stills yet), each with its own warm glow, tags, one line and VK.
   ===================================================================================================== */
.wk-head { display: grid; gap: 18px; }
.wk-count { display: flex; align-items: baseline; gap: 14px; color: var(--mute-l); font-size: clamp(14px, 1vw, 17px); }
.wk-count b { font: 300 clamp(56px, 6vw, 110px)/0.9 var(--serif); letter-spacing: -0.05em; background: linear-gradient(120deg, #ffd7a8, #f0543c); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 900px) { .wk-head { grid-template-columns: 1fr auto; align-items: end; column-gap: 48px; } .wk-count span { max-width: 14ch; } }
.wk-feat { gap: 18px; background: radial-gradient(70% 90% at 85% 20%, rgba(240, 84, 60, 0.45), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(227, 162, 61, 0.25), transparent 70%), #1c1410; }
.wk-dots { position: absolute !important; right: -6%; top: -18%; width: 62%; aspect-ratio: 1; z-index: 0 !important; border-radius: 50%; opacity: 0.55; pointer-events: none;
  background: radial-gradient(rgba(255, 214, 170, 0.5) 1.2px, transparent 1.6px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); animation: wk-spin 60s linear infinite; }
@keyframes wk-spin { to { transform: rotate(360deg); } }
.wk-feat .case-title { max-width: 16ch; font-size: clamp(32px, 4.4vw, 84px); }
.wk-x { max-width: 52ch; font-size: clamp(15px, 1.15vw, 20px); line-height: 1.5; color: rgba(243, 238, 230, 0.8); }
.wk-years { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.wk-y { display: inline-flex; align-items: center; gap: 8px; }
.wk-y svg { color: var(--hot); }
.wk-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.wk-c a { --h: 18; position: relative; isolation: isolate; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; height: 100%; min-height: 300px; padding: 24px 24px 22px; border-radius: 26px; overflow: hidden;
  color: var(--ink-l); text-decoration: none; background: linear-gradient(180deg, rgba(255, 246, 236, 0.06), rgba(255, 246, 236, 0.02)); border: 1px solid var(--glass-b);
  transition: transform 600ms var(--ease), border-color 400ms var(--ease), box-shadow 600ms var(--ease); }
.wk-c { --h: 18; }
.wk-c a::before { content: ""; position: absolute; inset: auto -30% -50% auto; width: 90%; aspect-ratio: 1; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, hsla(var(--h), 85%, 58%, 0.42), transparent); transition: transform 900ms var(--ease); }
.wk-c a::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none;
  background: radial-gradient(rgba(255, 220, 190, 0.35) 1px, transparent 1.4px) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(60% 60% at 100% 100%, #000, transparent); mask-image: radial-gradient(60% 60% at 100% 100%, #000, transparent); }
.wk-c a:hover { transform: translateY(-6px); border-color: hsla(var(--h), 90%, 70%, 0.45); box-shadow: 0 30px 70px -40px hsla(var(--h), 85%, 55%, 0.8); }
.wk-c a:hover::before { transform: translate(-18%, -14%) scale(1.25); }
.wk-top { display: flex; align-items: center; justify-content: space-between; }
/* 09.11 owner: the numbers drawn as in «Всё предложение на одной странице» (.sum-n): filled with a soft gradient */
.wk-n { font: 300 clamp(52px, 4.4vw, 80px)/0.9 var(--serif); letter-spacing: -0.04em; color: transparent;
  background: linear-gradient(165deg, rgba(243, 160, 92, .95), rgba(227, 162, 61, .35) 90%); -webkit-background-clip: text; background-clip: text; }
.wk-play { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(243, 238, 230, 0.94); color: var(--coal); transition: transform 600ms var(--ease), background 400ms; }
.wk-play svg { margin-left: 2px; }
.wk-c a:hover .wk-play { transform: scale(1.12); background: var(--grad); color: #fff; }
.wk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-tags span { padding: 5px 10px; border-radius: 999px; background: rgba(255, 246, 236, 0.08); border: 1px solid var(--glass-b); font: 500 11px/1.2 var(--text); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(243, 238, 230, 0.75); }
.wk-sde .wk-tags span { background: rgba(240, 84, 60, 0.18); border-color: rgba(240, 84, 60, 0.4); color: #ffb39c; }
.wk-t { font: 400 clamp(21px, 1.7vw, 30px)/1.12 var(--serif); letter-spacing: -0.03em; text-wrap: balance; }
.wk-p { font-size: clamp(13px, 0.95vw, 16px); line-height: 1.5; color: rgba(243, 238, 230, 0.66); }
.wk-go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--gold); }
:lang(hy) .wk-tags span { letter-spacing: 0.02em; }
@media (min-width: 900px) and (max-width: 1199px) { .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .wk-feat { min-height: 0 !important; padding: 26px 20px 22px; }
  .wk-feat .case-title { font-size: 25px; }
  .wk-years { gap: 8px; } .wk-y { padding: 10px 16px; font-size: 14px; }
  .wk-grid { grid-template-columns: 1fr; gap: 10px; }
  .wk-c a { min-height: 0; gap: 9px; padding: 18px 18px 16px; border-radius: 20px; }
  .wk-n { font-size: 46px; }
  .wk-play { width: 40px; height: 40px; }
  .wk-t { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .wk-dots { animation: none; } }

/* 09.11 review: the terms beside the estimate, readable on the gradient */
.cost-rec { color: rgba(243, 238, 230, .9) !important; }
.cost-terms { display: grid; gap: 12px; margin: 18px 0 0; }
.cost-terms dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold, #e3a23d); }
.cost-terms dd { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: rgba(243, 238, 230, .86); }

/* 09.11: the language question looks the same whatever the card's own language is (an Armenian card made it Noto) */
.lp:lang(hy), .lp :lang(hy) { --serif: "Unbounded", "Noto Sans Armenian", system-ui, sans-serif; --text: "Unbounded", "Noto Sans Armenian", system-ui, sans-serif; --brand: "Unbounded", "Noto Sans Armenian", sans-serif; }

/* ===== 10.11: the "strong version" blocks: proof line, site now/after, guarantees, deadline, payback ===== */
/* hero: the conversation first */
.hero-acts .hero-tg { min-height: 56px; box-shadow: 0 18px 40px -18px rgba(240, 84, 60, .85); }
@media (max-width: 899px) { .hero-acts:has(.hero-tg) { gap: 10px; } .hero-acts:has(.hero-tg) .btn { flex: 1 1 100%; } }
/* the names we filmed, as a quiet running line under the first screen */
.proof { position: relative; z-index: 2; display: grid; gap: 14px; align-items: center; padding: 22px 0 26px; background: var(--coal); color: var(--ivory); border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); overflow: hidden; }
.proof-k { padding: 0 var(--gutter); font: 500 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.proof-run { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.proof-tr { display: flex; align-items: center; width: max-content; animation: proof-run 38s linear infinite; }
.proof-tr span { font: 400 clamp(20px, 2.1vw, 34px)/1.1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.proof-tr span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px rgba(243, 238, 230, .7); }
.proof-tr i { flex: none; width: 10px; height: 10px; margin: 0 clamp(20px, 2.4vw, 40px); border-radius: 50%; background: var(--grad); box-shadow: 0 0 18px rgba(240, 84, 60, .9); }
.proof:hover .proof-tr { animation-play-state: paused; }
@keyframes proof-run { to { transform: translateX(-50%); } }
@media (min-width: 900px) { .proof { grid-template-columns: auto minmax(0, 1fr); gap: 8px; } .proof-k { padding-right: 28px; } }
@media (prefers-reduced-motion: reduce) { .proof-tr { animation: none; } }

/* the client's page, now and after */
.rd { display: grid; gap: 36px; margin-top: clamp(72px, 7vw, 120px); align-items: center; }
@media (min-width: 1000px) { .rd { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(40px, 4.5vw, 88px); } }
.rd-t { margin-top: 20px; font: 400 clamp(28px, 3.2vw, 54px)/1.06 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.rd-lead { margin-top: 16px; max-width: 46ch; color: var(--mute-d); font: 300 16px/1.6 var(--text); }
.rd-pts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.rd-pts li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line-d); align-items: baseline; }
.rd-pts li:last-child { border-bottom: 1px solid var(--line-d); }
.rd-pts i { font: 500 13px/1 var(--brand); font-style: normal; letter-spacing: .04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd-pts b { display: block; font: 500 16px/1.3 var(--text); }
.rd-pts span { display: block; margin-top: 3px; font: 300 14px/1.5 var(--text); color: var(--mute-d); }
.rd-stage { min-width: 0; }
.rd-cmp { position: relative; border-radius: clamp(16px, 1.6vw, 24px); overflow: hidden; background: #1b1714; box-shadow: 0 50px 90px -40px rgba(90, 30, 12, .55), 0 0 0 1px rgba(22, 18, 14, .12); transform: perspective(1600px) rotateX(0deg); }
.rd-chrome { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: #1b1714; }
.rd-chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.rd-chrome i:first-child { background: #f0543c; } .rd-chrome i:nth-child(2) { background: #e3a23d; }
.rd-chrome span { margin: 0 auto; padding: 5px 22px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(243, 238, 230, .7); font: 400 12px/1.2 var(--text); transform: translateX(-24px); }
.rd-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
@media (max-width: 719px) { .rd-view { aspect-ratio: 39 / 62; } }
.rd-view picture, .rd-view img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rd-view img { object-fit: cover; object-position: 50% 0; pointer-events: none; }
.rd-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.rd-bar { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 24px 2px rgba(255, 190, 140, .9); pointer-events: none; }
.rd-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); border: 2px solid #fff; box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .6); }
.rd-knob svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rd-cmp:not(.is-touched) .rd-knob { animation: rd-pulse 2.2s ease-in-out infinite; }
@keyframes rd-pulse { 50% { box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .6), 0 0 0 12px rgba(255, 255, 255, .22); } }
.rd-l { position: absolute; top: 14px; z-index: 2; padding: 7px 13px; border-radius: 999px; font: 500 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.rd-l-b { left: 14px; background: rgba(20, 16, 13, .78); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rd-l-a { right: 14px; background: var(--grad); color: var(--coal); }
.rd-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.rd-range:focus-visible ~ .rd-bar, .rd-view:has(.rd-range:focus-visible) .rd-knob { outline: 3px solid var(--gold); outline-offset: 3px; }
.rd-note { margin-top: 14px; font: 300 13px/1.5 var(--text); color: var(--mute-d); }
@media (prefers-reduced-motion: reduce) { .rd-knob { animation: none !important; } }

/* guarantees under the estimate */
.guar { list-style: none; margin: clamp(10px, 1.6vw, 24px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1000px) { .guar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.guar li { display: grid; gap: 12px; align-content: start; padding: clamp(14px, 1.5vw, 22px); border-radius: 22px; color: var(--ivory); background: var(--glass-grain), linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 240, 225, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.guar i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 10px 22px -10px rgba(240, 84, 60, .9); }
.guar svg { width: 16px; height: 16px; fill: none; stroke: var(--coal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.guar b { display: block; font: 500 clamp(14px, 1.1vw, 17px)/1.25 var(--text); }
.guar span { display: block; margin-top: 5px; font: 300 13px/1.45 var(--text); color: var(--mute-l); }

/* the deadline, as a live number */
.cost-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; padding: 10px 14px; border-radius: 16px; background: rgba(227, 162, 61, .12); border: 1px solid rgba(227, 162, 61, .38); font: 400 14px/1.3 var(--text); color: var(--ivory); }
.cost-dl i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(227, 162, 61, .7); animation: dl-ping 2s ease-out infinite; }
.cost-dl b { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: var(--grad); color: var(--coal); font: 600 13px/1.2 var(--text); white-space: nowrap; }
@keyframes dl-ping { to { box-shadow: 0 0 0 10px rgba(227, 162, 61, 0); } }
.cost-dl + .cost-until { border-top: 0; padding-top: 0; margin-top: 12px; }

/* payback in seats */
.roi { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 36px; margin-top: clamp(20px, 2.4vw, 32px); padding: clamp(22px, 3.4vw, 60px); border-radius: clamp(28px, 3vw, 44px); background: var(--glass-grain), radial-gradient(90% 120% at 100% 0%, rgba(255, 196, 150, .55), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(240, 84, 60, .12), transparent 65%), rgba(255, 255, 255, .62); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 18, 14, .06), 0 40px 80px -50px rgba(120, 50, 20, .45); }
@media (min-width: 1000px) { .roi { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 96px); align-items: center; } }
.roi-t { margin-top: 20px; font: 400 clamp(28px, 3.2vw, 54px)/1.06 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.roi-lead { margin-top: 16px; max-width: 46ch; color: var(--mute-d); font: 300 16px/1.6 var(--text); }
.roi-ctl { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px 16px; margin-top: 30px; padding: 20px; border-radius: 24px; background: var(--coal); color: var(--ivory); }
.roi-ctl label { font: 400 14px/1.3 var(--text); color: var(--mute-l); }
.roi-ctl output { font: 400 clamp(24px, 2.2vw, 34px)/1 var(--serif); letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.roi-ctl input { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 2px 0 0; background: transparent; cursor: pointer; --f: 50%; }
.roi-ctl input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f0543c, #e3a23d) 0 / var(--f) 100% no-repeat, rgba(243, 238, 230, .18); }
.roi-ctl input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f0543c, #e3a23d) 0 / var(--f) 100% no-repeat, rgba(243, 238, 230, .18); }
.roi-ctl input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(240, 84, 60, .35), 0 8px 18px rgba(0, 0, 0, .5); transition: box-shadow 300ms var(--ease); }
.roi-ctl input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(240, 84, 60, .35), 0 8px 18px rgba(0, 0, 0, .5); }
.roi-ctl input:active::-webkit-slider-thumb { box-shadow: 0 0 0 11px rgba(240, 84, 60, .3), 0 8px 18px rgba(0, 0, 0, .5); }
.roi-ctl input:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
.roi-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 300 12px/1 var(--text); color: var(--mute-l); }
.roi-eq { margin-top: 18px; font: 300 15px/1.6 var(--text); color: var(--mute-d); }
.roi-eq b { font-weight: 600; color: var(--ink-d); white-space: nowrap; }
.roi-note { margin-top: 12px; font: 300 13px/1.5 var(--text); color: var(--mute-d); max-width: 52ch; }
.roi-b { min-width: 0; }
.roi-num { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 18px; }
.roi-num strong { font: 400 clamp(84px, 11vw, 190px)/.82 var(--serif); letter-spacing: -.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; font-variant-numeric: tabular-nums; }
.roi-num span { max-width: 17ch; padding-bottom: .5em; font: 400 clamp(15px, 1.25vw, 20px)/1.3 var(--text); color: var(--ink-d); text-wrap: balance; }
.roi-hall { margin-top: clamp(22px, 2.4vw, 36px); padding: clamp(14px, 1.6vw, 24px) clamp(12px, 1.6vw, 24px) clamp(18px, 2.4vw, 34px); border-radius: 26px; background: var(--coal); }
.roi-stage { text-align: center; }
.roi-stage span { display: inline-block; width: 62%; padding: 7px 0; border-radius: 6px 6px 40px 40px / 6px 6px 14px 14px; background: linear-gradient(180deg, rgba(243, 238, 230, .2), rgba(243, 238, 230, .05)); font: 500 10px/1 var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--mute-l); }
.roi-seats { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(3px, .45vw, 7px); margin-top: 14px; }
.roi-seats i { aspect-ratio: 1; border-radius: 34% 34% 22% 22%; background: rgba(243, 238, 230, .1); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .14); transform: translateY(calc(var(--c) * 1px)) scale(1); transition: background 380ms var(--ease), box-shadow 380ms var(--ease), transform 380ms var(--ease); }
.roi-seats i.on { background: linear-gradient(160deg, #ff7a4d, #e3a23d); box-shadow: 0 0 14px rgba(240, 84, 60, .75); transform: translateY(calc(var(--c) * 1px - 2px)) scale(1.08); }
.roi-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; font: 400 13px/1.4 var(--text); color: var(--ink-d); }
.roi-cap i { flex: none; width: 12px; height: 12px; border-radius: 34% 34% 22% 22%; background: rgba(22, 18, 14, .16); }
.roi-cap i:not(:first-child) { margin-left: 10px; }
.roi-cap i.on { background: var(--grad); }
.roi-src { margin-top: 8px; font: 300 12px/1.5 var(--text); color: var(--mute-d); }
@media (max-width: 599px) { .roi-num { grid-template-columns: 1fr; } .roi-num span { padding-bottom: 0; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .cost-dl i { animation: none; } .roi-seats i { transition: none; } }

/* one-tap answers under the letter: each opens Telegram with the text already typed */
.lq { margin-top: 26px; }
.lq-k { margin-bottom: 10px; font: 300 14px/1.4 var(--text); color: var(--mute-l); }

/* the "something else?" tile closes the row instead of leaving a hole */
@media (max-width: 899px) { .xt-grid > .xt-ask:last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 900px) { .xt-grid > .xt-ask:last-child:nth-child(4n+3) { grid-column: span 2; } .xt-grid > .xt-ask:last-child:nth-child(4n+2) { grid-column: span 3; } }

/* 10.11 owner: a three-second moment loops behind a work card (still frame, alive under the cursor), the VK player opens inside the page */
.wk-bg { position: absolute !important; inset: 0; z-index: -2 !important; overflow: hidden; border-radius: inherit; background: #140e0b; }
.wk-bg img, .wk-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-bg img { filter: saturate(.72) brightness(.76) contrast(1.05); transform: scale(1.06); transition: filter 900ms var(--ease), transform 1400ms var(--ease); }
.wk-bg video { opacity: 0; transition: opacity 500ms var(--ease); }
.wk-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 11, .46), rgba(20, 14, 11, .26) 34%, rgba(20, 14, 11, .86)); transition: opacity 700ms var(--ease); }
.is-live > .wk-bg video, .is-live .wk-bg video { opacity: 1; }
.wk-c a:hover .wk-bg img, .is-live .wk-bg img { filter: saturate(1) brightness(.86); transform: none; }
.is-live .wk-bg::after { opacity: .9; }
.wk-c.has-loop a { border-color: rgba(243, 238, 230, .14); min-height: 340px; }
.wk-c.has-loop a::before { opacity: .55; }
.wk-c.has-loop a::after { display: none; }
.wk-c.has-loop .wk-p { color: rgba(243, 238, 230, .86); }
.wk-c.has-loop .wk-t, .wk-c.has-loop .wk-p, .wk-c.has-loop .wk-n { text-shadow: 0 1px 18px rgba(12, 8, 6, .55); }
.wk-c.has-loop .wk-n { background: linear-gradient(165deg, #ffd9b0, rgba(243, 170, 92, .78) 90%); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.wk-c.has-loop .wk-tags span { background: rgba(20, 14, 11, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(243, 238, 230, .92); }
.wk-feat.has-loop { background: #140e0b; }
.wk-feat.has-loop .wk-bg { z-index: 0 !important; }
.wk-feat.has-loop .wk-bg::after { background: linear-gradient(90deg, rgba(20, 14, 11, .92), rgba(20, 14, 11, .68) 55%, rgba(20, 14, 11, .22)), linear-gradient(0deg, rgba(20, 14, 11, .6), transparent 50%); }
.wk-feat.has-loop .wk-bg img { filter: saturate(.8) brightness(.8); transform: none; }
.wk-feat.has-loop .wk-dots { opacity: .28; }
@media (max-width: 899px) { .wk-c.has-loop a { min-height: 250px; } .wk-feat.has-loop .wk-bg::after { background: linear-gradient(180deg, rgba(20, 14, 11, .55), rgba(20, 14, 11, .9)); } }
.player-t { margin-bottom: 14px; font: 400 clamp(20px, 2vw, 32px)/1.15 var(--serif); letter-spacing: -0.03em; color: var(--ivory); }
.player-media { position: relative; }
.player-media iframe { position: relative; z-index: 1; }
.player-wait { position: absolute; inset: 0; display: grid; place-items: center; place-content: center; gap: 14px; font-size: 14px; color: var(--mute-l); }
.player-wait i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(243, 238, 230, .18); border-top-color: var(--gold); animation: pl-spin 900ms linear infinite; }
@keyframes pl-spin { to { rotate: 360deg; } }
.player-no { position: absolute; inset: 0; display: grid; place-items: center; place-content: center; gap: 18px; padding: 24px; text-align: center; color: var(--ivory);
  background: radial-gradient(70% 90% at 80% 10%, rgba(240, 84, 60, .35), transparent 70%), #1c1410; }
.player-no p { max-width: 30ch; font: 400 clamp(18px, 1.8vw, 28px)/1.25 var(--serif); letter-spacing: -0.02em; }
@media (max-width: 899px) { dialog.player { padding: 12px; } .player-media { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .player-wait i { animation: none; } .wk-bg img, .wk-bg video { transition: none; } }

/* 10.11 (owner): "call us to the next events" line under the P.S. */
.inv { display: flex; align-items: center; gap: 14px; max-width: 640px; margin-top: 12px; padding: 14px 18px; border-radius: 20px; text-decoration: none;
  font-size: 15px; line-height: 1.5; color: var(--ink-l); border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); transition: border-color .25s, transform .25s, background .25s; }
.inv b { color: #fff; font-weight: 650; }
.inv-i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: #fff; background: color-mix(in srgb, var(--gold) 32%, transparent); }
.inv:hover { transform: translateY(-2px); border-style: solid; background: color-mix(in srgb, var(--gold) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .inv { transition: none; } .inv:hover { transform: none; } }