/* Homepage navigator only. /materials/ keeps the original shared stylesheet. */
.online-conversion { overflow-x: visible; }
.online-conversion .on-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.online-conversion .on-header { display: flex; align-items: center; gap: 24px; padding: 24px 0; }
.online-conversion .on-brand { display: grid; gap: 5px; font-size: 23px; font-weight: 700; line-height: 1.2; }
.online-conversion .on-brand-suffix { color: var(--vm-accent); }
.online-conversion .on-brand small { color: var(--vm-text-soft); font-size: 12px; font-weight: 400; }
.online-conversion .on-nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; }
.online-conversion .on-nav a { padding: 10px 0; }
.online-conversion .on-lang { display: flex; gap: 4px; }
.online-conversion .on-lang button { font: inherit; font-size: 14px; color: var(--vm-text-soft); border: 1px solid transparent; background: transparent; min-height: 40px; min-width: 40px; border-radius: 8px; cursor: pointer; }
.online-conversion .on-lang button[aria-pressed="true"] { color: var(--vm-text); border-color: var(--vm-line-strong); }
.online-conversion .on-menu { display: none; position: relative; }
.online-conversion .on-menu summary { cursor: pointer; padding: 12px 0; }
.online-conversion .on-menu nav { position: absolute; z-index: 5; right: 0; top: 48px; min-width: 210px; padding: 14px 20px; border: 1px solid var(--vm-line-strong); border-radius: 12px; background: #0f1813; box-shadow: var(--vm-shadow); }
.online-conversion .on-menu nav a { display: block; padding: 12px 0; }
.online-conversion .on-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding: 38px 0 54px; }
.online-conversion h1 { font-size: clamp(36px, 4.1vw, 55px); line-height: 1.08; letter-spacing: -.035em; margin: 14px 0 24px; max-width: 13ch; }
.online-conversion h2 { font-size: clamp(27px, 3vw, 37px); line-height: 1.18; letter-spacing: -.025em; margin: 0 0 20px; }
.online-conversion h3 { font-size: 23px; line-height: 1.25; margin: 0 0 16px; }
.online-conversion p { line-height: 1.65; max-width: 65ch; }
.online-conversion .on-kicker { font: 600 12px/1.5 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--vm-accent-2); margin: 0 0 14px; }
.online-conversion .on-lead { font-size: 19px; color: var(--vm-text-soft); margin: 0 0 26px; }
.online-conversion .on-actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.online-conversion .on-actions .btn { font-size: 16px; min-height: 50px; padding: 12px 20px; }
.online-conversion .on-text-link { color: var(--vm-accent); text-decoration: underline; text-underline-offset: 4px; line-height: 1.6; }
.online-conversion .on-fine { color: var(--vm-text-soft); font-size: 14px; line-height: 1.6; }
.online-conversion .on-hero .on-fine { margin: 20px 0 0; max-width: 55ch; }
.online-conversion .on-signpost { border: 1px solid var(--vm-line-strong); border-radius: 20px; padding: 23px; background: radial-gradient(ellipse at center, rgba(61,220,151,.09), transparent 75%),#08120e; box-shadow:0 20px 55px #0003; }
.online-conversion .on-map-label { color:var(--vm-accent-2); font:600 11px/1.6 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em; margin:0 0 12px; }
.online-conversion .on-map-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; position:relative; }
.online-conversion .on-map-tools::after { content:""; position:absolute; left:16.6%; right:16.6%; bottom:-15px; height:15px; border:1px solid #37614a; border-top:0; pointer-events:none; }
.online-conversion .on-map-node { --map-accent:#56d6a5; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; padding:12px 11px; border:1px solid #35513f; border-top-color:var(--map-accent); border-radius:12px; background:linear-gradient(150deg,#13201b,#0b1210); min-width:0; min-height:103px; text-decoration:none; }
.online-conversion .on-map-node>span { color:var(--map-accent); font:600 11px/1.5 'IBM Plex Mono',monospace; }
.online-conversion .on-map-node strong { color:#edf6f0; font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
.online-conversion .on-map-node small { color:var(--vm-text-soft); font-size:11px; margin-top:auto; }
.online-conversion .on-map-node:hover { border-color:var(--map-accent); background:#18261f; }
.online-conversion .on-map-node--studio { --map-accent:#dba8fa; }
.online-conversion .on-map-node--builder,.online-conversion .on-map-node--vk { --map-accent:#7ebcf4; }
.online-conversion .on-map-node--telegram { --map-accent:#75c8f5; }
.online-conversion .on-map-node--max { --map-accent:#c3a6fa; }
.online-conversion .on-map-center { position:relative; display:grid; justify-items:center; margin:25px 25px 21px; padding:14px 12px; border:1px solid #2d6952; border-radius:16px; background:radial-gradient(ellipse at top,#17483155,transparent 85%); text-align:center; }
.online-conversion .on-map-center::before { content:""; position:absolute; width:1px; height:26px; top:-26px; left:50%; background:#37614a; pointer-events:none; }
.online-conversion .on-map-center img { display:block; width:190px; max-width:100%; height:auto; }
.online-conversion .on-map-center a { color:#b7cabe; font-size:12px; line-height:1.6; max-width:240px; margin-top:6px; text-decoration:underline; text-underline-offset:3px; }
.online-conversion .on-map-channels .on-map-node { min-height:70px; }
.online-conversion .on-map-note { color:var(--vm-text-soft); font-size:12px; line-height:1.6; margin:15px 0 0; }
.online-conversion .on-index { color: var(--vm-accent-2); font: 400 13px/1.5 'IBM Plex Mono', monospace; }
.online-conversion .on-section { padding: 54px 0; border-top: 1px solid var(--vm-line-strong); }
.online-conversion .on-section-lead { color: var(--vm-text-soft); margin: 0 0 26px; }
.online-conversion .on-task-list { border-bottom: 1px solid var(--vm-line); }
.online-conversion .on-task-list > a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 22px 4px; border-top: 1px solid var(--vm-line); }
.online-conversion .on-task-list > a > span:nth-child(2) { display: grid; gap: 6px; }
.online-conversion .on-task-list strong { font-size: 19px; font-weight: 600; line-height: 1.35; }
.online-conversion .on-task-list small { color: var(--vm-text-soft); font-size: 15px; line-height: 1.5; }
.online-conversion .on-task-list .on-index { width:30px; min-height:30px; display:grid; place-items:center; border:1px solid #335b46; border-radius:8px; background:#16332255; }
.online-conversion .on-task-list>a:nth-child(5) .on-index { color:#dba8fa; border-color:#73518c; background:#55326233; }
.online-conversion .on-task-list>a:nth-child(6) .on-index { color:#7ebcf4; border-color:#3d6086; background:#25466433; }
.online-conversion .on-tool { color: var(--vm-accent); font-size: 15px; text-align: right; }
.online-conversion .on-task-list > a:hover, .online-conversion .on-task-list > a:focus-visible { background: rgba(61,220,151,.045); }
.online-conversion .on-extra-tools { display: flex; gap: 10px 22px; align-items: baseline; flex-wrap: wrap; margin-top: 22px; font-size: 15px; }
.online-conversion .on-extra-tools > span { color: var(--vm-text-soft); }
.online-conversion .on-extra-tools a { text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; }
.online-conversion .on-where, .online-conversion .on-account, .online-conversion .on-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.online-conversion .on-where { margin-top: 30px; }
.online-conversion .on-where p, .online-conversion .on-account p:not(.on-kicker), .online-conversion .on-editorial p:not(.on-kicker), .online-conversion .on-support p { color: var(--vm-text-soft); }
.online-conversion .on-about-links { margin-top: 24px; font-size: 14px; }
.online-conversion .on-about-links a { color: var(--vm-text); text-decoration: underline; text-underline-offset: 3px; }
.online-conversion .on-about-products>p { margin:0 0 10px; }
.online-conversion .on-about-products>a { display:grid; gap:4px; padding:12px 0 12px 15px; border-left:2px solid #3c8c63; margin-top:9px; text-decoration:none; }
.online-conversion .on-about-products>a:nth-of-type(2) { border-color:#9564b4; }
.online-conversion .on-about-products>a:nth-of-type(3) { border-color:#4b80b5; }
.online-conversion .on-about-products strong { font-size:15px; text-decoration:underline; text-underline-offset:3px; }
.online-conversion .on-about-products span { color:var(--vm-text-soft); font-size:14px; line-height:1.5; }
.online-conversion .on-channel-list { list-style: none; padding: 0; margin: 20px 0 0; }
.online-conversion .on-channel-list li { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--vm-line); }
.online-conversion .on-channel-list a:first-child { color: var(--vm-accent); font-weight: 600; }
.online-conversion .on-channel-list a:last-child { color: var(--vm-text-soft); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.online-conversion .on-reading-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; }
.online-conversion .on-reading-list a { display: block; padding: 16px 0; border-bottom: 1px solid var(--vm-line); color: var(--vm-accent); }
.online-conversion .on-editorial { background: linear-gradient(90deg, rgba(255,180,84,.035), transparent 70%); }
.online-conversion .on-author-links { padding-left: 20px; color: var(--vm-accent); }
.online-conversion .on-author-links li { margin: 14px 0; line-height: 1.5; }
.online-conversion .on-support { display: flex; justify-content: space-between; gap: 40px; align-items: center; }
.online-conversion .on-support h2 { font-size: 27px; }
.online-conversion .on-support .on-actions { flex-shrink: 0; flex-direction: column; align-items: flex-start; }
.online-conversion .on-footer { padding: 28px 0 34px; border-top: 1px solid var(--vm-line-strong); color: var(--vm-text-soft); font-size: 14px; display: flex; gap: 28px; justify-content: space-between; }
.online-conversion .on-footer p { margin: 0; flex-shrink: 0; }
.online-conversion .on-footer nav { display: flex; gap: 10px 22px; flex-wrap: wrap; }
.online-conversion a:hover { color: #9af0c8; }
.online-conversion :focus-visible { outline: 3px solid #83f3bc; outline-offset: 4px; }
.online-conversion :target { scroll-margin-top: 24px; }
.online-conversion .on-skip { position: absolute; z-index: 20; top: 10px; left: 12px; transform: translateY(-160%); background: #0f1813; border: 2px solid var(--vm-accent); padding: 12px; }
.online-conversion .on-skip:focus { transform: none; }
@media (max-width: 900px) {
  .online-conversion .on-header { gap: 16px; }
  .online-conversion .on-nav { gap: 16px; }
  .online-conversion .on-hero { gap: 32px; }
  .online-conversion .on-where, .online-conversion .on-account, .online-conversion .on-editorial { gap: 36px; }
  .online-conversion .on-signpost { padding: 22px; }
}
@media (max-width: 720px) {
  .online-conversion .on-shell { width: calc(100% - 40px); }
  .online-conversion .on-header { gap: 16px; padding: 18px 0; flex-wrap: wrap; }
  .online-conversion .on-brand { font-size: 21px; }
  .online-conversion .on-brand small { font-size: 11px; }
  .online-conversion .on-lang { margin-left: auto; }
  .online-conversion .on-nav { display: none; }
  .online-conversion .on-menu { display: block; margin-left: auto; font-size: 14px; }
  .online-conversion .on-menu summary { padding: 5px 0; }
  .online-conversion .on-menu nav { top: 32px; }
  .online-conversion .on-hero { display: block; padding: 24px 0 36px; }
  .online-conversion h1 { font-size: clamp(35px, 9.4vw, 46px); margin: 12px 0 20px; }
  .online-conversion .on-lead { font-size: 17px; margin-bottom: 22px; }
  .online-conversion .on-hero .on-actions { gap: 18px; align-items: flex-start; flex-direction: column; }
  .online-conversion .on-hero .btn { width: 100%; }
  .online-conversion .on-signpost { margin-top: 28px; padding: 19px 15px; }
  .online-conversion .on-map-node { padding:10px 9px; min-height:100px; }
  .online-conversion .on-map-node strong { font-size:13px; }
  .online-conversion .on-map-center { margin-left:15px; margin-right:15px; }
  .online-conversion .on-map-center img { width:175px; }
  .online-conversion .on-section { padding: 36px 0; }
  .online-conversion .on-task-list > a { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 14px; padding: 18px 0; }
  .online-conversion .on-task-list > a > .on-index { align-self: start; }
  .online-conversion .on-task-list strong { font-size: 18px; }
  .online-conversion .on-tool { grid-column: 2; text-align: left; margin-top: 4px; }
  .online-conversion .on-where, .online-conversion .on-account, .online-conversion .on-editorial { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .online-conversion .on-reading-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .online-conversion .on-support, .online-conversion .on-footer { display: block; }
  .online-conversion .on-support .on-actions { margin-top: 22px; }
  .online-conversion .on-footer nav { margin-top: 18px; }
}
/* A finite route motif, including an accent above the fold on narrow screens. */
.online-conversion .on-hero .on-kicker { position:relative; }
.online-conversion .on-hero .on-kicker::after {
  content:""; position:absolute; left:0; bottom:-7px; width:94px; height:2px;
  background:repeating-linear-gradient(90deg,#72efab 0 18px,transparent 18px 26px);
  pointer-events:none; opacity:.65; transform-origin:left center;
}
.online-conversion .on-hero .on-signpost { position:relative; }
.online-conversion .on-hero .on-signpost::before,
.online-conversion .on-hero .on-signpost::after {
  content:""; position:absolute; width:50px; height:50px;
  pointer-events:none; opacity:.65;
}
.online-conversion .on-hero .on-signpost::before {
  top:10px; right:10px; border-top:2px solid #72efab; border-right:2px solid #72efab;
  border-radius:0 13px 0 0; transform-origin:top right;
}
.online-conversion .on-hero .on-signpost::after {
  bottom:10px; left:10px; border-bottom:2px solid #9ed6c9; border-left:2px solid #9ed6c9;
  border-radius:0 0 0 13px; transform-origin:bottom left;
}
@media (prefers-reduced-motion:no-preference) {
  .online-conversion .on-hero .on-kicker::after { animation:onHeroRoute 3.2s ease-out 1; }
  .online-conversion .on-hero .on-signpost::before,
  .online-conversion .on-hero .on-signpost::after { animation:onHeroCorners 4.4s ease-out 1; }
  .online-conversion .on-hero .on-signpost > img { animation:onHeroLogo 3.6s ease-out 1; }
}
@keyframes onHeroRoute {
  0% { transform:translateX(-10px) scaleX(.7); opacity:.25; }
  45% { transform:translateX(5px) scaleX(1); opacity:.9; }
  100% { transform:translateX(0) scaleX(1); opacity:.65; }
}
@keyframes onHeroCorners {
  0% { transform:scale(.6); opacity:.2; }
  46% { transform:scale(1.08); opacity:1; }
  100% { transform:scale(1); opacity:.65; }
}
@keyframes onHeroLogo {
  0% { transform:translateX(8px) rotate(2deg); }
  45% { transform:translateX(-3px) rotate(-.5deg); }
  100% { transform:translateX(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.online-conversion) { scroll-behavior: auto; }
  .online-conversion *, .online-conversion *::before, .online-conversion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Opus 10.10: one pass of light along the map, tools -> account -> channels, so the hero shows the route
   instead of only its frame. Opacity-only pseudo-elements; nodes and links are never hidden. */
.online-conversion .on-hero .on-map-node,
.online-conversion .on-hero .on-map-center { position:relative; }
.online-conversion .on-hero .on-map-node::after,
.online-conversion .on-hero .on-map-center::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0;
  box-shadow:0 0 0 1px var(--map-accent,#72efab), 0 0 22px -2px var(--map-accent,#72efab);
}
@media (prefers-reduced-motion:no-preference) {
  .online-conversion .on-hero .on-map-node::after,
  .online-conversion .on-hero .on-map-center::after { animation:onMapPulse 1.1s ease-out both; }
  .online-conversion .on-hero .on-map-tools .on-map-node:nth-child(1)::after { animation-delay:.45s; }
  .online-conversion .on-hero .on-map-tools .on-map-node:nth-child(2)::after { animation-delay:.75s; }
  .online-conversion .on-hero .on-map-tools .on-map-node:nth-child(3)::after { animation-delay:1.05s; }
  .online-conversion .on-hero .on-map-center::after { animation-delay:1.45s; animation-duration:1.4s; }
  .online-conversion .on-hero .on-map-channels .on-map-node:nth-child(1)::after { animation-delay:2s; }
  .online-conversion .on-hero .on-map-channels .on-map-node:nth-child(2)::after { animation-delay:2.3s; }
  .online-conversion .on-hero .on-map-channels .on-map-node:nth-child(3)::after { animation-delay:2.6s; }
}
@keyframes onMapPulse {
  0% { opacity:0; }
  35% { opacity:1; }
  100% { opacity:0; }
}

/* Opus 10.10: on wide screens the header sticks and carries the app action; phones keep the static header with Menu. */
.online-conversion .on-header-cta { display:none; }
@media (min-width:721px) {
  .online-conversion .on-header { position:sticky; top:0; z-index:40; background:rgba(10,18,14,.97); box-shadow:0 0 0 100vmax rgba(10,18,14,.97); clip-path:inset(0 -100vmax); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:14px 0; }
  .online-conversion .on-header-cta { display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; border-radius:10px; background:linear-gradient(180deg, rgba(61,220,151,.9), rgba(0,208,110,.92)); color:#04120b; font-weight:600; font-size:14px; white-space:nowrap; }
  .online-conversion .on-header-cta:hover { color:#04120b; filter:brightness(1.06); text-decoration:none; }
  html:has(.online-conversion) { scroll-padding-top:80px; }
}