/* The site keeps its warm typography; Telegram is shown as a photographic collage. */
:root { --bot-qr-paper: #fff; }
.bot-promo { padding-block: 48px; }
.bot-promo h2, .bot-opening h1 { margin: 24px 0; max-width: 22ch; }
.bot-split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.35fr); gap: clamp(28px,3vw,56px); align-items: start; }
.bot-split-copy, .bot-split-telegram { min-width: 0; }
.bot-split-copy > h1, .bot-split-copy > h2 { margin-top: 20px; }
.bot-host { display: grid; grid-template-columns: minmax(120px,.85fr) minmax(0,1.15fr); gap: 24px; align-items: center; margin: 28px 0; }
.bot-host-photo { align-self: start; }
.bot-host-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-image); }
.bot-host-copy h3 { font-size: clamp(1.375rem,1.8vw,1.75rem); line-height: 1.25; margin: 0 0 18px; }
.bot-host-copy p { font-size: var(--type-body); line-height: 1.65; color: var(--type-copy-color); margin: 0; }
.bot-split-intro { color: var(--type-copy-color); max-width: 52ch; }
/* On the homepage the bot is a useful next step, after the personal story. */
.bot-promo { border-block: 1px solid var(--line); }
.bot-promo .bot-split { align-items: center; }
.bot-promo-benefits { margin: 24px 0; padding: 0; list-style: none; }
.bot-promo-benefits li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--type-copy-color); font-size: var(--type-body); line-height: 1.5; }
.bot-chat-identity { display: flex; gap: 14px; align-items: center; padding: 0 0 20px; }
.bot-chat-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: 0 0 48px; background: var(--surface); }
.bot-chat-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(3); }
.bot-chat-identity strong { display: block; font-size: 1.25rem; line-height: 1.4; }
.bot-chat-identity div > span { font-size: var(--type-detail); line-height: 1.5; color: var(--type-copy-color); }
.bot-chat-identity > a { display: grid; place-items: center; margin-left: auto; color: var(--action); min-width: 48px; min-height: 48px; }
.bot-telegram-poster { margin: 0; }
.bot-poster-zoom { display: block; position: relative; width: 100%; border-radius: var(--radius-image); overflow: hidden; cursor: zoom-in; }
.bot-poster-zoom img { display: block; width: 100%; height: auto; }
.bot-zoom-label { position: absolute; right: 14px; bottom: 14px; padding: 10px 14px; background: var(--ivory); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-field); font: 600 var(--type-detail)/1.5 var(--ui-font); }
.bot-telegram-poster figcaption { margin: 18px 0; color: var(--type-copy-color); font-size: var(--type-caption); line-height: 1.65; }
.bot-card-transcript { margin-top: 20px; border-top: 1px solid var(--line); padding: 18px 0 0; }
.bot-card-transcript summary, .bot-stages-transcript > summary { cursor: pointer; color: var(--action); font-size: var(--type-control); line-height: 1.6; padding-block: 10px; }
.bot-card-transcript[open] > summary { margin-bottom: 20px; }
.bot-stages-transcript { padding-block: 24px; }
.bot-stages-transcript .bot-flow { padding-inline: 0; width: 100%; }
.bot-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin: 28px 0; }
.bot-qr { display: flex; align-items: center; gap: 20px; max-width: 520px; margin-top: 32px; }
.bot-qr-image { flex: 0 0 132px; display: block; background: var(--bot-qr-paper); border: 1px solid var(--line); border-radius: var(--radius-field); overflow: hidden; }
.bot-qr-image img { width: 100%; height: auto; }
.bot-qr p { font-size: var(--type-detail); line-height: 1.6; color: var(--type-copy-color); margin: 0 0 8px; }
.bot-address { font-size: var(--type-detail); font-weight: 600; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 5px; padding-block: 10px; }
.bot-property { display: block; margin: 0 auto; width: 100%; max-width: 540px; min-width: 0; background: var(--ivory); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; }
.bot-property-head { display: flex; align-items: center; gap: 10px; padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: var(--type-detail); font-weight: 600; }
.bot-property-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--action); }
.bot-property-language { margin-left: auto; color: var(--muted); }
.bot-property-body { padding: 28px; }
.bot-property-project { font-size: var(--type-detail); line-height: 1.6; margin: 18px 0 10px; color: var(--type-copy-color); overflow-wrap: anywhere; }
.bot-property h3 { margin: 0 0 12px; font-size: clamp(1.5rem,2.1vw,1.875rem); line-height: 1.3; }
.bot-property-description { margin: 0 0 24px; font-size: var(--type-detail); line-height: 1.65; color: var(--type-copy-color); }
.bot-property-data { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 20px; margin: 0; }
.bot-property-data > div { min-width: 0; }
.bot-property-price { grid-column: 1/-1; padding: 20px 0; margin-bottom: 2px; border-block: 1px solid var(--line); }
.bot-property dt { font-size: var(--type-detail); line-height: 1.6; color: var(--type-copy-color); }
.bot-property dd { font-size: 1.25rem; line-height: 1.5; font-weight: 600; margin: 3px 0 0; overflow-wrap: anywhere; }
.bot-property-price dd { font-size: clamp(1.75rem,2.8vw,2.25rem); letter-spacing: -.02em; }
.bot-property-price dd span { font-size: 1rem; font-weight: 400; }
.bot-property-features { font-size: var(--type-detail); line-height: 1.65; color: var(--type-copy-color); margin: 22px 0; }
.bot-property-file { display: flex; align-items: center; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.bot-file-icon { display: grid; place-items: center; width: 50px; height: 60px; flex: 0 0 50px; border: 1px solid var(--field-border); border-radius: 8px; background: var(--surface); color: var(--action); font-size: var(--type-detail); font-weight: 700; }
.bot-property-file strong, .bot-property-file div > span { display: block; font-size: var(--type-detail); line-height: 1.6; }
.bot-property-file div > span { color: var(--type-copy-color); }
.bot-property figcaption { padding: 20px 28px; margin: 0; border-top: 1px solid var(--line); font-size: var(--type-caption); line-height: 1.65; color: var(--type-copy-color); }
.bot-opening { padding-block: 56px; }
.bot-guide { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 64px; padding-top: 40px; }
.bot-guide-heading h2 { margin-top: 20px; max-width: 18ch; }
.bot-steps { margin: 0; padding: 0; list-style: none; }
.bot-steps li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 20px; border-top: 1px solid var(--line); padding: 28px 0; }
.bot-step-number { font-size: var(--type-detail); color: var(--type-copy-color); padding-top: 5px; }
.bot-steps h3 { font-size: var(--type-subtitle); margin: 0 0 14px; }
.bot-steps p { margin: 0; color: var(--type-copy-color); }
.bot-personal { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 64px; align-items: center; background: var(--surface); }
.bot-personal-portrait { max-width: 460px; width: 100%; justify-self: center; }
.bot-personal-portrait img { width: 100%; height: auto; object-fit: contain; border-radius: var(--radius-image); }
.bot-personal h2 { margin: 24px 0; }
.bot-personal > div > p { color: var(--type-copy-color); }
.bot-terms { font-size: var(--type-detail); line-height: 1.65; max-width: 60ch; margin: 24px 0 0; }
.bot-faq { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 64px; }
.bot-faq > h2 { max-width: 18ch; }
.bot-flow { padding-block: 48px; }
.bot-flow > h2 { margin: 0 0 32px; }
.bot-flow-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.bot-flow-card { background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-panel); min-width: 0; overflow: hidden; }
.bot-flow-label { display: flex; gap: 12px; padding: 20px; background: var(--surface); border-bottom: 1px solid var(--line); min-height: 102px; }
.bot-flow-label > span { font-size: var(--type-detail); color: var(--type-copy-color); padding-top: 3px; }
.bot-flow-label h3 { font-size: 1.25rem; line-height: 1.4; margin: 0; }
.bot-flow-content { padding: 24px 20px; }
.bot-flow-content p { font-size: var(--type-detail); line-height: 1.65; margin: 0 0 20px; color: var(--type-copy-color); }
.bot-flow-content h4 { font-size: 1.25rem; line-height: 1.4; margin: 16px 0; }
.bot-flow-projects { list-style: none; padding: 0; margin: 0; }
.bot-flow-choice { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--type-detail); }
.bot-flow-content .text-link { font-size: var(--type-detail); width: auto; }
.bot-flow-content .bot-flow-price { font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.bot-flow-content dl { margin: 0 0 20px; font-size: var(--type-detail); }
.bot-flow-content dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bot-flow-content dt { color: var(--type-copy-color); }
.bot-flow-content dd { font-weight: 600; text-align: right; margin: 0; }
.bot-document-icon { display: grid; place-items: center; width: 72px; height: 96px; font-size: 1.25rem; font-weight: 700; color: var(--action); border: 1px solid var(--field-border); border-radius: var(--radius-field); background: var(--paper); }
.bot-flow-note { margin: 24px 0 16px; font-size: var(--type-detail); line-height: 1.65; color: var(--type-copy-color); }
@media (max-width:1200px) { .bot-flow-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:1200px) {
 .bot-split { grid-template-columns: minmax(0,1fr); gap: 40px; }
 .bot-host { grid-template-columns: minmax(0,220px) minmax(0,1fr); max-width: 760px; }
 .bot-property-head { padding-inline: 20px; }
 .bot-property-body { padding: 22px; }
 .bot-guide, .bot-personal, .bot-faq { gap: 36px; }
}
@media (max-width:760px) {
 .bot-guide, .bot-personal, .bot-faq { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .bot-flow-grid { grid-template-columns: minmax(0,1fr); }
 .bot-flow-label { min-height: 0; }
 .bot-promo, .bot-opening { padding-block: 40px; }
 .bot-promo h2, .bot-opening h1 { max-width: none; }
 .bot-personal-portrait { max-width: 320px; }
 .bot-qr { gap: 16px; }
 .bot-qr-image { flex-basis: 116px; }
}
@media (max-width:359px) {
 .bot-qr { align-items: flex-start; gap: 12px; }
 .bot-qr-image { flex-basis: 96px; }
 .bot-property-body { padding: 20px; }
 .bot-property-head { padding-inline: 16px; }
 .bot-property figcaption { padding: 18px 20px; }
}
@media (max-width:500px) {
 .bot-host { grid-template-columns: minmax(0,140px) minmax(0,1fr); gap: 18px; align-items: start; }
 .bot-host-copy h3 { font-size: 1.25rem; }
 .bot-host-copy p { font-size: var(--type-body); }
 .bot-zoom-label { position: static; display: block; margin: 0; border-radius: 0; border: 0; text-align: center; }
 .bot-chat-identity { gap: 10px; }
}
@media (max-width:359px) { .bot-host { grid-template-columns: minmax(0,1fr); } .bot-host-photo { max-width: 180px; } }

@media(max-width:760px){
 .bot-host{grid-template-columns:100px minmax(0,1fr);gap:16px;margin:20px 0;}
 .bot-host-photo{max-width:100px;}
 .bot-host-copy{display:contents;}
 .bot-host-copy h3{align-self:center;margin:0;font-size:1.25rem;}
 .bot-host-copy p{grid-column:1/-1;}
 .bot-actions{margin-block:20px;}
 .bot-split-copy{display:flex;flex-direction:column;}
 .bot-qr{order:10;margin-top:20px;}
 .bot-split{gap:24px;}
 .bot-promo-benefits{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
 .bot-promo-benefits li{padding:6px 10px;font-size:15px;border:1px solid var(--line);border-radius:var(--radius-field);}
 .bot-property-body{padding:20px;}
}

.bot-compact-card{border:1px solid var(--line);border-radius:var(--radius-panel);padding:20px;background:var(--ivory)}.bot-compact-card h3{margin:0 0 12px}.bot-compact-card p{margin:12px 0}.bot-qr-secondary summary{cursor:pointer;padding:12px 0;color:var(--action)}
@media(max-width:760px){.bot-opening .bot-split-copy>.eyebrow{order:0}.bot-opening .bot-split-copy>h1{order:1}.bot-opening .bot-host{order:2}.bot-opening .bot-actions{order:3}.bot-opening .bot-split-intro{order:4}.bot-opening .bot-host{grid-template-columns:76px minmax(0,1fr)}.bot-opening .bot-host-photo{max-width:76px}}