/* AI: the line is the page. Near-black with a sparse net of dots; one amber thread with a pulse running down it;
   headings are knots on the thread, steps are small beads, systems are panels plugged into it. */
body.page-ai { --amber: #FFB547; --text: #EEF1F5; --dim: #BCC5D2; --panel: #10161F; --rule: #253041; --tx: 23px; --gut: 62px; color: var(--text);
  background-image: radial-gradient(rgba(255, 181, 71, 0.14) 1px, transparent 1.6px); background-size: 30px 30px; }
.page-ai main { max-width: 1240px; margin: 0 auto; padding-top: clamp(20px, 4vh, 40px); }
.ai-head { display: flex; align-items: center; gap: 14px; }
.ai-head .mark { width: 46px; height: 46px; flex: none; }
.ai-head h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.ai-head p { align-self: flex-end; padding-bottom: 7px; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }

.ai-flow { position: relative; margin-top: 8px; padding: 0 0 12px var(--gut); display: grid; gap: clamp(52px, 9vh, 92px); }
.thread { position: absolute; left: calc(var(--tx) - 1px); top: 0; bottom: 0; width: 2px; background: var(--amber); }
.thread::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(to bottom, rgba(255, 245, 224, 0), #FFF5E0 50%, rgba(255, 245, 224, 0)) no-repeat 0 -120px / 100% 120px; animation: pulse 8s linear infinite; }
@keyframes pulse { to { background-position: 0 calc(100% + 120px); } }

.ai-flow .ai-lead { padding-top: 22px; max-width: 23ch; font-size: clamp(27px, 3.5vw, 46px); font-weight: 700; line-height: 1.14; letter-spacing: -0.018em; color: #fff; }
.ai-flow h2 { position: relative; margin-bottom: 22px; font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; letter-spacing: -0.015em; color: #fff; }
.knot { position: absolute; left: calc(var(--tx) - 8px - var(--gut)); top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--paper); border: 2px solid var(--amber); box-shadow: 0 0 0 5px var(--paper); }
.ai-flow p { font-size: 16.5px; line-height: 1.55; }
.ai-flow p.wide { max-width: 62ch; font-size: 18px; }
.ai-flow a { color: var(--amber); font-weight: 700; }
.more { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* the six steps: what I do on the left, the number that proves it on the right */
.steps { display: grid; }
.step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 360px); gap: 10px 56px; align-items: start; padding: 22px 0; border-top: 1px solid var(--rule); }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step::before { content: ''; position: absolute; left: calc(var(--tx) - 4px - var(--gut)); top: 30px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--paper); }
.step .n { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: var(--amber); }
.step h3 { margin-top: 3px; font-size: 21px; font-weight: 700; color: #fff; }
.step .what p { margin-top: 6px; color: var(--dim); }
.figs { display: grid; gap: 16px; align-content: start; }
.fig { display: grid; gap: 3px; align-content: start; min-width: 0; }
.fig b { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; color: var(--amber); }
.fig span { font-size: 14.5px; line-height: 1.4; color: var(--dim); overflow-wrap: anywhere; }
.figs.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.figs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin-top: 22px; }

/* a system: a panel plugged into the thread */
.cards { display: grid; gap: 22px; }
.sys { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 48px; align-items: start; padding: 26px 28px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; }
.sys::before { content: ''; position: absolute; left: calc(var(--tx) - var(--gut)); top: 40px; width: calc(var(--gut) - var(--tx)); height: 2px; background: var(--amber); }
.sys::after { content: ''; position: absolute; left: calc(var(--tx) - 4px - var(--gut)); top: 37px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.sys h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sys .name { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.sys .kind { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.sys-text > p { margin-top: 10px; }
.sys .credit { color: var(--dim); font-size: 15.5px; }
.principle { margin-top: 16px !important; padding: 11px 15px; border-left: 2px solid var(--amber); background: rgba(255, 181, 71, 0.08); }
.principle b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.two .sys { grid-template-columns: minmax(0, 1fr); }
.cards.two .sys + .sys::before, .cards.two .sys + .sys::after { display: none; }

.ai-quote { margin: clamp(34px, 6vh, 56px) 0 0; max-width: 34ch; font-size: clamp(21px, 2.2vw, 28px); font-weight: 600; line-height: 1.32; letter-spacing: -0.01em; color: #fff; }
.ai-quote p { font-size: inherit; line-height: inherit; }
.ai-quote p::before { content: open-quote; color: var(--amber); }
.ai-quote p::after { content: close-quote; color: var(--amber); }
.page-ai:lang(ru) { quotes: '«' '»'; }
.page-ai:lang(en) { quotes: '\201C' '\201D'; }

@media (max-width: 899px) {
  .step { grid-template-columns: minmax(0, 1fr); }
  .sys { grid-template-columns: minmax(0, 1fr); }
  .cards.two { grid-template-columns: minmax(0, 1fr); }
  .cards.two .sys + .sys::before, .cards.two .sys + .sys::after { display: block; }
}
@media (max-width: 599px) {
  .page-ai { --tx: 13px; --gut: 38px; }
  .ai-head .mark { width: 40px; height: 40px; }
  .sys { padding: 20px 18px; }
  .figs.three { grid-template-columns: minmax(0, 1fr); }
  .fig b { font-size: 30px; }
}
/* a narrow phone: one number to a line, so no two of them run together */
@media (max-width: 479px) {
  .figs.grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}