:root {
    --paper: #FFFBEF; --ink: #111; --muted: #4a4a4a; --white: #fff;
    --yellow: #FFD84D; --violet: #C4B5FD; --mint: #A7F3D0; --rose: #FDA4AF; --blue: #93C5FD; --pink: #FF9EC4;
    --line: 2px solid var(--ink); --shadow: 5px 5px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink);
    --r: 18px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--paper); color: var(--ink); font-family: 'Golos Text', -apple-system, sans-serif; font-size: 17px; line-height: 1.5; }
  a { color: inherit; }
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
  h1, h2, h3, .uni { font-family: 'Unbounded', sans-serif; letter-spacing: -0.02em; }
  h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; font-weight: 800; }
  .kick { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
  .box { background: var(--white); border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
  .chip { display: inline-block; border: var(--line); border-radius: 8px; padding: 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--white); }
  .btn { display: inline-flex; align-items: center; gap: 10px; border: var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 14px 22px; font-weight: 700; font-size: 16px; text-decoration: none; background: var(--white); cursor: pointer; transition: transform .12s, box-shadow .12s; font-family: inherit; color: var(--ink); }
  .btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
  .btn.dark { background: var(--ink); color: var(--yellow); }
  section { padding: 72px 0; }

  /* nav */
  nav { position: sticky; top: 0; z-index: 20; background: rgba(255,251,239,.92); backdrop-filter: blur(8px); border-bottom: var(--line); }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .logo { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: 15px; }
  .logo span { background: var(--ink); color: var(--yellow); padding: 2px 8px; border-radius: 6px; }
  .nav-actions { display: flex; align-items: center; gap: 10px; }
  .tg-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: var(--line); border-radius: 50%; background: #2AABEE; box-shadow: var(--shadow-sm); }
  /* language switch: a plain link to the same page in the other language */
  .lang { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding: 0 9px; border: var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow-sm); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-decoration: none; }
  .lang:hover { transform: translate(-1px,-1px); }
  nav ul { display: flex; gap: 26px; list-style: none; font-weight: 600; font-size: 15px; }
  nav ul a { text-decoration: none; }
  nav ul a:hover { text-decoration: underline; text-underline-offset: 4px; }

  /* hero */
  .hero { padding: 40px 0 56px; }
  .hero-card { background: var(--yellow); border: var(--line); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); padding: 40px; display: grid; grid-template-columns: 1.35fr .85fr; gap: 36px; align-items: center; }
  .hero h1 .nw { white-space: nowrap; }
  .hero h1 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.04; font-weight: 800; }
  .hero h1 .hl { background: var(--white); border: var(--line); border-radius: 14px; padding: 0 12px 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .hero .slogan { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(18px, 2.2vw, 25px); line-height: 1.25; margin-top: 18px; }
  .hero .slogan s { text-decoration-thickness: 3px; }
  .hero p.lead { font-size: 18px; margin-top: 18px; max-width: 560px; }
  .hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
  .photo { position: relative; aspect-ratio: 4/5; border: var(--line); border-radius: 22px; box-shadow: var(--shadow); background: var(--violet); overflow: hidden; }
  .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; font-weight: 700; padding: 20px; }
  .photo .ph .uni { font-size: 64px; }
  .photo .ph small { font-weight: 500; font-size: 13px; max-width: 220px; }
  .sticker { position: absolute; background: var(--white); border: var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 8px 12px; font-weight: 700; font-size: 14px; line-height: 1.2; }
  .sticker.a { left: -18px; bottom: 26px; transform: rotate(-4deg); background: var(--mint); }
  .sticker.b { right: -14px; top: 22px; transform: rotate(5deg); background: var(--pink); }
  .photo-wrap { position: relative; }
  .photo img ~ .ph { display: none; }

  /* ticker */
  .ticker { border-top: var(--line); border-bottom: var(--line); background: var(--ink); color: var(--yellow); overflow: hidden; white-space: nowrap; }
  .ticker .track { display: inline-block; padding: 14px 0; animation: run 38s linear infinite; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 18px; }
  .ticker .track span { margin: 0 26px; }
  .ticker .track span::after { content: "✦"; margin-left: 52px; color: var(--pink); }
  @keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .ticker .track { animation: none; } }

  /* quotes */
  .quotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
  .q .face { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
  .q:nth-child(1) .face { background: var(--mint); } .q:nth-child(2) .face { background: var(--white); }
  .q:nth-child(3) .face { background: var(--blue); } .q:nth-child(4) .face { background: var(--rose); }
  .q .big { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 16px; line-height: 1.22; }
  @media (min-width: 961px) and (max-width: 1100px) { .q .big { font-size: 15px; hyphens: auto; -webkit-hyphens: auto; } }
  .q .who { margin-top: auto; font-size: 14px; font-weight: 600; }
  .q .who small { display: block; font-weight: 500; color: #333; }
  .q .stat { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 44px; line-height: 1; margin-bottom: -4px; }
  .swipe-hint { display: none; font-size: 13px; color: var(--muted); margin-top: -4px; }

  /* but */
  .but { display: grid; grid-template-columns: 1fr 440px; gap: 48px; align-items: center; }
  .flow { padding: 26px 28px; background: var(--yellow); }
  .flow .kick { margin-bottom: 18px; }
  .flow ol { list-style: none; display: grid; gap: 12px; position: relative; }
  .flow ol::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--ink); }
  .flow li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
  .flow li b { font-family: 'Unbounded', sans-serif; font-size: 14px; width: 40px; height: 40px; border: var(--line); border-radius: 99px; display: grid; place-items: center; background: var(--white); }
  .flow li:last-child b { background: var(--mint); }
  .flow h4 { font-family: 'Unbounded', sans-serif; font-size: 17px; line-height: 1.15; }
  .flow p { font-size: 14.5px; color: #333; }

  /* principles (inside the nuance block) */
  .principles { margin-top: 28px; display: grid; gap: 14px; }
  .principles .kick { margin-bottom: 0; }
  .pr { display: grid; grid-template-columns: 16px 1fr; gap: 14px; align-items: start; }
  .pr::before { content: ""; width: 16px; height: 16px; margin-top: 3px; border: 2px solid var(--ink); border-radius: 4px; background: var(--violet); }
  .pr:nth-of-type(2)::before { background: var(--mint); }
  .pr:nth-of-type(3)::before { background: var(--pink); }
  .pr b { display: block; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 16px; line-height: 1.2; }
  .pr p { font-size: 15px; color: #222; margin-top: 4px; }

  /* tariffs */
  #tariffs { background: var(--white); border-top: var(--line); border-bottom: var(--line); }
  .lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .lesson { padding: 16px 18px 18px; }
  .lesson .lab { display: inline-block; border: 2px solid var(--ink); border-radius: 7px; padding: 1px 9px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .lesson.t1 .lab { background: var(--yellow); } .lesson.t2 .lab { background: var(--mint); } .lesson.t3 .lab { background: var(--violet); }
  .lesson h4 { font-size: 17px; line-height: 1.25; margin: 8px 0 8px; }
  .lesson ul { list-style: none; }
  .lesson li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.4; }
  .lesson li + li { margin-top: 4px; }
  .lesson li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--ink); }
  @keyframes pop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .note { font-size: 13px; color: var(--muted); margin-top: 10px; }

  /* about */
  .about { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
  .about .photo { aspect-ratio: 1/1; background: var(--mint); }
  .about p { font-size: 17px; margin-top: 14px; }
  .badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
  .badge { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow-sm); font-weight: 700; font-size: 14px; text-decoration: none; }
  .badge b { font-family: 'Unbounded', sans-serif; background: var(--ink); color: var(--yellow); border-radius: 8px; padding: 4px 7px; font-size: 12px; }

  /* faq */
  .faq { display: grid; gap: 12px; margin: 30px auto 0; max-width: 880px; }
  #faq .kick, #faq h2 { text-align: center; }
  details { background: var(--white); border: var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 16px 20px; }
  summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; font-family: 'Unbounded', sans-serif; font-weight: 800; }
  details[open] summary::after { content: "–"; }
  details p { margin-top: 10px; font-size: 15.5px; color: #222; }

  /* cta */
  .cta { background: var(--pink); border: var(--line); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); padding: 40px; }
  .cta h2 { max-width: 760px; }
  .cta .cta-lead { font-size: 18px; margin-top: 12px; max-width: 640px; }
  .qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
  .qs div { background: var(--white); border: var(--line); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; font-weight: 600; }
  .qs b { font-family: 'Unbounded', sans-serif; }
  .cta .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
  footer { padding: 30px 0 40px; font-size: 14px; color: var(--muted); }
  footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

  /* netlify badge */
  #nl-badge-frame, .nl-badge { display: none !important; visibility: hidden !important; pointer-events: none !important; }
  a.logo { text-decoration: none; }

  /* hero terminal */
  .term-wrap { position: relative; }
  .term { background: var(--ink); color: #f5f5f5; border-radius: 20px; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; }
  .term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 2px solid #333; }
  .term-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--rose); }
  .term-bar i:nth-child(2) { background: var(--yellow); } .term-bar i:nth-child(3) { background: var(--mint); }
  .term-bar span { margin-left: 8px; font-size: 13px; font-weight: 700; color: #bbb; letter-spacing: .04em; }
  .term-body { padding: 18px 18px 22px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.5; flex: 1; }
  .prompt { color: #fff; min-height: 66px; }
  .prompt .you { display: inline-block; background: var(--yellow); color: var(--ink); font-family: 'Golos Text', sans-serif; font-weight: 800; font-size: 12px; border-radius: 6px; padding: 1px 7px; margin-right: 8px; vertical-align: 1px; }
  .caret { display: inline-block; width: 9px; height: 17px; background: var(--yellow); vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  #t-steps { list-style: none; margin-top: 14px; }
  #t-steps li { padding-left: 22px; position: relative; color: #d9d9d9; margin-top: 7px; animation: pop .35s ease; }
  #t-steps li::before { content: "●"; position: absolute; left: 0; color: var(--violet); }
  #t-steps li.done { color: var(--mint); font-weight: 700; }
  #t-steps li.done::before { content: "✓"; color: var(--mint); }

  /* signup */
  .steps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
  .s2 { background: var(--white); border: var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 18px 20px; display: flex; gap: 14px; }
  .s2 > b { font-family: 'Unbounded', sans-serif; font-size: 15px; flex: none; width: 34px; height: 34px; border: var(--line); border-radius: 99px; display: grid; place-items: center; background: var(--yellow); }
  .s2 h4 { font-size: 18px; margin-bottom: 4px; }
  .s2 p { font-size: 15px; color: #222; }
  .s2 .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
  .s2 .btn { padding: 11px 16px; font-size: 15px; margin-top: 12px; }
  .s2 .row .btn { margin-top: 0; }
  /* English pages have one step only (the intake form is Russian): no number, one column */
  .steps2.one { grid-template-columns: 1fr; max-width: 620px; }
  .steps2.one .s2 > b { display: none; }
  dialog#signup, dialog#waitlist, dialog#quiz { margin: auto; border: var(--line); border-radius: 22px; box-shadow: 8px 8px 0 var(--ink); background: var(--pink); padding: 28px; max-width: 760px; width: calc(100% - 32px); color: var(--ink); }
  dialog#signup::backdrop, dialog#waitlist::backdrop, dialog#quiz::backdrop { background: rgba(17,17,17,.55); }
  dialog#signup h3, dialog#waitlist h3 { font-size: 24px; margin-top: 6px; }
  dialog#signup .x, dialog#waitlist .x, dialog#quiz .x { position: absolute; right: 14px; top: 12px; border: var(--line); background: var(--white); border-radius: 10px; width: 36px; height: 36px; font-size: 20px; font-weight: 800; cursor: pointer; }

  /* about photo: poster duotone */
  .about .photo { background: var(--yellow); }
  .about .photo img { filter: grayscale(1) contrast(1.12) brightness(1.06); mix-blend-mode: multiply; object-position: center 18%; }

  @media (max-width: 960px) {
    nav ul { display: none; }
    .hero-card { grid-template-columns: 1fr; padding: 26px; }
    .photo-wrap { max-width: 360px; }
    .but, .about { grid-template-columns: 1fr; }
    .but { gap: 24px; }
    .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow { max-width: 560px; }
    .photo-wrap { max-width: 300px; }
    .qs, .steps2 { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    body { font-size: 16px; }
    section { padding: 40px 0; }
    .lessons { grid-template-columns: 1fr; }
    .flow { padding: 20px 18px; }
    .flow ol { gap: 10px; }
    .flow h4 { font-size: 15px; }
    .flow p { font-size: 14px; }
    .cta { padding: 26px; }
    /* hero: no overlapping stickers, calmer headline */
    .sticker { display: none; }
    .hero { padding: 24px 0 36px; }
    .hero-card { padding: 22px; gap: 24px; }
    .hero h1 { line-height: 1.18; }
    .hero h1 .hl { display: inline-block; margin-top: 6px; padding: 0 10px 3px; }
    .hero p.lead { font-size: 17px; }
    .term { min-height: 300px; }
    /* quotes: swipe strip instead of a tall column */
    .quotes { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 24px -20px 0; padding: 0 20px 14px; scrollbar-width: none; }
    .quotes::-webkit-scrollbar { display: none; }
    .q { flex: 0 0 78%; scroll-snap-align: start; }
    .q .big { font-size: 16px; hyphens: none; -webkit-hyphens: none; }
    .swipe-hint { display: block; }
  }

  /* pages: current link, second line of h1, plain hero on inner pages */
  nav ul a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
  .hero h1 .h1-sub { display: block; width: fit-content; margin-top: 14px; font-size: .48em; line-height: 1.25; background: var(--white); border: var(--line); border-radius: 12px; padding: 4px 12px 6px; }
  .hero-card.solo { grid-template-columns: 1fr; }
  .hero-card.solo p.lead { max-width: 780px; }
  .hero-card.mint { background: var(--mint); }
  .hero-card.violet { background: var(--violet); }

  /* three paths */
  .paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
  .path { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
  .path:nth-child(1) { background: var(--yellow); } .path:nth-child(2) { background: var(--mint); } .path:nth-child(3) { background: var(--violet); }
  .path h3 { font-size: 22px; line-height: 1.15; }
  .path p { font-size: 15.5px; }
  .cost { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.2; }
  .path .btn { justify-content: center; margin-top: auto; }

  /* info cards */
  .lead-p { margin-top: 14px; font-size: 18px; max-width: 780px; }
  .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
  .card { padding: 24px; }
  .card.y { background: var(--yellow); } .card.m { background: var(--mint); } .card.v { background: var(--violet); } .card.r { background: var(--rose); }
  .card h3 { font-size: 20px; line-height: 1.2; margin-bottom: 12px; }
  .card ol, .card ul { padding-left: 20px; display: grid; gap: 6px; font-size: 15.5px; }
  .card .cost { margin-top: 16px; }
  .strip { margin-top: 24px; padding: 18px 22px; background: var(--yellow); display: flex; gap: 10px 24px; flex-wrap: wrap; align-items: center; }
  .strip .cost { font-size: 26px; }
  .project { margin-top: 48px; }
  .project h3 { font-size: 26px; line-height: 1.15; }
  .project > p { margin-top: 8px; max-width: 780px; }
  .project .lessons { margin-top: 18px; }
  .lesson p { font-size: 14.5px; line-height: 1.45; }
  /* five project stages: one row on a wide screen, the rows fill the width on a narrow one (no stage left alone) */
  .lessons.five { display: flex; flex-wrap: wrap; }
  .lessons.five .lesson { flex: 1 1 0; min-width: 190px; }
  /* six project stages: two rows of three, two per row on a tablet, one on a phone */
  .lessons.six { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 900px) { .lessons.six { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .lessons.six { grid-template-columns: 1fr; } }

  @media (max-width: 960px) {
    nav .wrap { flex-wrap: wrap; height: auto; min-height: 56px; padding-top: 8px; }
    nav ul { display: flex; order: 3; width: 100%; gap: 18px; overflow-x: auto; white-space: nowrap; padding: 8px 0 10px; font-size: 14px; scrollbar-width: none; }
    nav ul::-webkit-scrollbar { display: none; }
    .paths, .cols2 { grid-template-columns: 1fr; }
  }
  /* with the RU/EN switch and «Вход» the header is full below ~1180px: the menu takes its own row a little earlier */
  @media (min-width: 961px) and (max-width: 1180px) {
    nav .wrap { flex-wrap: wrap; height: auto; min-height: 56px; padding-top: 8px; }
    nav ul { order: 3; width: 100%; gap: 22px; white-space: nowrap; padding: 8px 0 10px; font-size: 14px; }
  }
  .nav-actions .btn { white-space: nowrap; }
  .cost small { display: block; font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 14px; }

  /* course: three tariff cards */
  .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
  .tier-card { position: relative; scroll-margin-top: 124px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
  .tier-card:nth-child(1) { background: var(--yellow); } .tier-card:nth-child(2) { background: var(--mint); } .tier-card:nth-child(3) { background: var(--violet); }
  .tier-card h3 { font-size: 26px; }
  .tier-card .sub { font-size: 15px; font-weight: 600; }
  .tier-card .meta { display: flex; gap: 8px; flex-wrap: wrap; }
  .tier-card .price { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; margin-top: 4px; }
  .tier-card h5 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }
  .tier-card .plus { font-weight: 700; font-size: 15px; }
  .tier-card ul { list-style: none; display: grid; gap: 6px; }
  .tier-card li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.4; }
  .tier-card li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; }
  .tier-card .tools { font-size: 14px; background: var(--white); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; margin-top: auto; }
  .tier-card .btn { justify-content: center; }
  @media (max-width: 960px) { .tiers { grid-template-columns: 1fr; } }

  /* home: what you can build — one light row */
  .makes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }
  .makes .kick { margin-right: 2px; }
  .make { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
  .make .ico { flex: none; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 8px; display: grid; place-items: center; background: var(--yellow); }
  .make:nth-of-type(2) .ico { background: var(--mint); } .make:nth-of-type(3) .ico { background: var(--violet); }
  .make:nth-of-type(4) .ico { background: var(--blue); } .make:nth-of-type(5) .ico { background: var(--pink); }
  .make .ico svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 640px) { .makes { gap: 8px 16px; } .makes .kick { width: 100%; } .make { font-size: 14px; } }

  /* home: stat cards flip on click */
  .q { display: grid; perspective: 1200px; cursor: pointer; }
  .q .flip-inner { display: grid; transition: transform .6s cubic-bezier(.3, .7, .3, 1); transform-style: preserve-3d; }
  .q.flipped .flip-inner { transform: rotateY(180deg); }
  .q .face { grid-area: 1 / 1; position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .q .back { transform: rotateY(180deg); }
  .q .front, .q .back { transition: visibility 0s .3s; }
  .q .back, .q.flipped .front { visibility: hidden; }
  .q.flipped .back { visibility: visible; }
  .q .back .kick { padding-right: 36px; }
  .q .back p { font-size: 15px; line-height: 1.45; }
  .flip-ico { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 99px; background: var(--white); display: grid; place-items: center; }
  .flip-ico svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
  .q:hover .flip-ico svg { transform: rotate(90deg); }
  .q:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: var(--r); }
  @media (prefers-reduced-motion: reduce) { .q .flip-inner { transition: none; } }

  /* home: agent steps light up one by one, the line draws down behind them, the last turns into a tick */
  .flow li b { position: relative; z-index: 1; }
  .flow.anim ol::before { transform: scaleY(var(--p, 0)); transform-origin: top; transition: transform .38s linear; }
  .flow.anim li h4, .flow.anim li p { opacity: .35; transition: opacity .4s; }
  .flow.anim li.on h4, .flow.anim li.on p { opacity: 1; }
  .flow.anim li b { color: #8a8a8a; transition: background .3s, color .3s; }
  .flow.anim li:last-child b { background: var(--white); }
  .flow.anim li.on b { background: var(--ink); color: var(--yellow); }
  .flow.anim.done li:last-child b { background: var(--mint); color: var(--ink); animation: tick .5s ease; }
  @keyframes tick { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

  /* home: path picker — a decision tree; answered steps stay above, blurred, the path and the result on the right */
  .pk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 30px; align-items: start; }
  .pk.on { grid-template-columns: minmax(0, 1fr) 320px; }
  .pk-flow { display: grid; }
  .pk-level { --l: var(--ink); display: flex; flex-direction: column; align-items: center; scroll-margin: 90px 0 24px; }
  .pk-level.done { --l: rgba(17,17,17,.28); }
  .pk-level:not(.root)::before { content: ""; width: 2px; height: 22px; background: var(--l); }
  .pk-q { position: relative; padding: 6px 16px; border: 2px solid var(--ink); border-radius: 99px; background: var(--ink); color: var(--yellow); font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.3; text-align: center; }
  .pk-q::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 24px; margin-left: -1px; background: var(--l); }
  .pk-level.done .pk-q { background: var(--paper); color: rgba(17,17,17,.55); border-color: var(--l); font-family: inherit; font-size: 13.5px; }
  .pk-q + .pk-node { margin-top: 22px; }

  .pk-opts { --g: 18px; align-self: stretch; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-top: 44px; }
  .pk-level.root .pk-opts { margin-top: 0; }
  .pk-level:not(.root) .pk-opts::before { content: ""; position: absolute; top: -22px; left: calc((100% - var(--g)) / 4); right: calc((100% - var(--g)) / 4); height: 2px; background: var(--ink); }
  .pk-opt { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; padding: 20px 22px; background: var(--white); border: var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); text-decoration: none; cursor: pointer; font: inherit; color: var(--ink); transition: transform .12s, box-shadow .12s, background .12s; }
  .pk-level:not(.root) .pk-opt::before { content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 22px; margin-left: -1px; background: var(--ink); }
  @media (hover: hover) { .pk-opt:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); background: #FFF6CC; } }
  .pk-opt b { font-family: 'Unbounded', sans-serif; font-size: 18px; line-height: 1.2; }
  .pk-opt span { font-size: 14.5px; color: #333; }

  .pk-node { position: relative; max-width: min(100%, 460px); padding: 12px 22px; border: 2px solid var(--l); border-radius: 14px; background: var(--white); box-shadow: 3px 3px 0 var(--l); font: inherit; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
  .pk-c { display: block; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.25; filter: blur(1.2px); opacity: .55; transition: filter .2s, opacity .2s; }
  .pk-node::after { content: "↩ Вернуться назад"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 15px; opacity: 0; transition: opacity .2s; }
  .pk-node:focus-visible { background: var(--yellow); border-color: var(--ink); box-shadow: var(--shadow-sm); outline: none; }
  .pk-node:focus-visible .pk-c { filter: blur(5px); opacity: .2; }
  .pk-node:focus-visible::after { opacity: 1; }
  @media (hover: hover) {
    .pk-node:hover { background: var(--yellow); border-color: var(--ink); box-shadow: var(--shadow-sm); }
    .pk-node:hover .pk-c { filter: blur(5px); opacity: .2; }
    .pk-node:hover::after { opacity: 1; }
  }
  @media (hover: none) { .pk-node { padding-right: 40px; } .pk-node::before { content: "↩"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; } }
  .pk-end span { padding: 8px 18px; border-radius: 99px; background: var(--mint); border: var(--line); box-shadow: var(--shadow-sm); font-weight: 700; font-size: 15px; }
  .pk-end .btn { position: relative; margin-top: 22px; }
  .pk-end .btn::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 24px; margin-left: -1px; background: var(--ink); }

  .pk-path { padding: 22px; position: sticky; top: 88px; }
  .pk-path[hidden] { display: none; }
  .pk-path h3 { font-size: 20px; }
  .pk-path ol { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
  .pk-path li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; font-weight: 700; font-size: 15px; }
  .pk-path li::before { content: "✓"; width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 99px; display: grid; place-items: center; background: var(--mint); font-size: 14px; }
  .pk-path li.next { font-weight: 500; color: var(--muted); }
  .pk-path li.next::before { content: ""; border-style: dashed; background: none; }
  .pk-res { display: grid; gap: 8px; text-align: center; margin-top: 18px; padding: 18px; border: var(--line); border-radius: 16px; background: var(--yellow); box-shadow: var(--shadow-sm); }
  .pk-res h4 { font-family: 'Unbounded', sans-serif; font-size: 18px; line-height: 1.2; }
  .pk-res p { font-size: 15px; }
  .pk-res .btn { justify-content: center; margin-top: 6px; padding: 13px 14px; text-align: center; }
  .pk-reset { margin-top: 16px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; color: var(--ink); padding: 0; }
  .pk-path { view-transition-name: pk-path; }
  ::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  @media (max-width: 960px) {
    .pk.on { grid-template-columns: minmax(0, 1fr); }
    .pk:not(.final) .pk-path { display: none; }
    .pk-path { position: relative; top: 0; }
  }
  @media (max-width: 640px) {
    .pk-opts { grid-template-columns: 1fr; gap: 12px; }
    .pk-level:not(.root) .pk-opts::before, .pk-level:not(.root) .pk-opt:not(:first-child)::before { display: none; }
    .pk-opts { margin-top: 44px; }
    .pk-opt { padding: 16px 18px; }
    .pk-opt b { font-size: 16px; }
  }
  dialog#waitlist { background: var(--yellow); max-width: 560px; }
  .wait-form { display: grid; gap: 12px; margin-top: 12px; }
  .wait-form label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
  .wait-form input { font: inherit; padding: 12px 14px; border: var(--line); border-radius: 12px; background: var(--white); }
  .wait-form .btn { justify-content: center; }
  .wait-form[hidden] { display: none; }
  .wait-form .hp { position: absolute; left: -9999px; }
  .wait-done { margin-top: 14px; font-size: 17px; }
  #paths .kick, #paths h2 { text-align: center; }
  .pick-all { font-size: 15px; text-align: center; margin-inline: auto; view-transition-name: pk-all; }
  .tier-card .fmt { font-size: 13.5px; font-weight: 600; margin-top: -4px; }

  /* course: «Проверьте себя» — the test in a dialog, then a tariff advice; the advised card gets a sticker */
  .quiz-cta { margin-top: 24px; padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
  .quiz-cta p { flex: 1 1 360px; max-width: 700px; font-size: 16px; }
  dialog#quiz { background: var(--paper); max-width: 640px; }
  .qz-meta { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
  .qz-bar { height: 10px; margin: 8px 0 18px; border: var(--line); border-radius: 6px; background: var(--white); overflow: hidden; }
  .qz-bar i { display: block; height: 100%; background: var(--mint); }
  .qz-q { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.3; margin-bottom: 16px; }
  .qz-opts { display: grid; gap: 10px; }
  .qz-opt { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; width: 100%; padding: 11px 14px; text-align: left; border: var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); font: inherit; font-size: 16px; line-height: 1.35; color: var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
  .qz-opt b { display: grid; place-items: center; width: 32px; height: 32px; border: var(--line); border-radius: 99px; background: var(--paper); font-family: 'Unbounded', sans-serif; font-size: 13px; }
  @media (hover: hover) { .qz-opt:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); background: var(--yellow); } }
  .qz-opt:disabled { cursor: default; }
  .qz-opt.ok { background: var(--mint); } .qz-opt.bad { background: var(--rose); } .qz-opt.dim { opacity: .5; }
  .qz-explain { margin-top: 16px; padding: 14px 16px; border: var(--line); border-radius: 14px; background: var(--blue); font-size: 15.5px; }
  .qz-explain strong { display: block; margin-bottom: 4px; font-family: 'Unbounded', sans-serif; font-size: 14px; }
  .qz-next { margin-top: 16px; }
  .qz-score { margin-top: 12px; font-family: 'Unbounded', sans-serif; font-size: 44px; font-weight: 800; line-height: 1; }
  .qz-res { margin-top: 16px; padding: 18px 20px; border: var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); background: var(--yellow); }
  .qz-res.optimal { background: var(--mint); }
  .qz-res h4 { font-family: 'Unbounded', sans-serif; font-size: 20px; line-height: 1.2; }
  .qz-res p { margin-top: 6px; font-size: 15.5px; }
  .qz-res a { font-weight: 700; }
  .qz-cap { margin-top: 18px; font-weight: 700; font-size: 15px; }
  .qz-topics { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
  .qz-topics li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
  .qz-topics i { display: grid; place-items: center; width: 26px; height: 26px; border: var(--line); border-radius: 99px; font-style: normal; font-weight: 800; font-size: 13px; }
  .qz-topics .ok i { background: var(--mint); } .qz-topics .mid i { background: var(--yellow); } .qz-topics .bad i { background: var(--rose); }
  .qz-topics b { font-size: 14px; white-space: nowrap; }
  .qz-actions { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 22px; }
  .qz-again { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); cursor: pointer; }
  .tier-card.picked::before { content: "Подходит вам"; position: absolute; top: -15px; right: 18px; padding: 4px 12px; border: var(--line); border-radius: 10px; background: var(--ink); color: var(--yellow); font-weight: 700; font-size: 13px; transform: rotate(3deg); }
  @media (max-width: 640px) { dialog#quiz { padding: 22px 18px; } .qz-q { font-size: 17px; } .qz-opt { font-size: 15px; } }

  /* home: «Проверьте себя» sticker on the pink block; it nudges now and then so people notice it */
  .cta { position: relative; }
  .quiz-sticker { --tilt: 4deg; position: absolute; top: -22px; right: 36px; width: 272px; display: grid; gap: 6px; padding: 16px 18px 18px; background: var(--yellow); border: var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transform: rotate(var(--tilt)); transition: box-shadow .12s; animation: nudge 5s ease-in-out 1.5s infinite; }
  .quiz-sticker b { font-family: 'Unbounded', sans-serif; font-size: 18px; line-height: 1.2; }
  .quiz-sticker span { font-size: 14.5px; line-height: 1.4; }
  .quiz-sticker i { justify-self: start; margin-top: 4px; padding: 7px 14px; border-radius: 10px; background: var(--ink); color: var(--yellow); font-style: normal; font-weight: 700; font-size: 14px; }
  .quiz-sticker:hover, .quiz-sticker:focus-visible { animation: none; transform: rotate(0deg) translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
  @keyframes nudge { 0%, 84%, 100% { transform: rotate(var(--tilt)); } 87% { transform: rotate(-3deg) scale(1.05); } 90% { transform: rotate(8deg) scale(1.05); } 93% { transform: rotate(0deg) scale(1.03); } 96% { transform: rotate(calc(var(--tilt) + 2deg)); } }
  @media (prefers-reduced-motion: reduce) { .quiz-sticker { animation: none; } }
  /* the same sticker on the first screen of the course page: its own column on the right */
  .hero-card .quiz-sticker { position: static; align-self: center; justify-self: end; }
  @media (min-width: 1001px) {
    .hero-card.solo:has(.quiz-sticker) { grid-template-columns: minmax(0, 1fr) 272px; }
    /* top right corner, over the edge — like on the pink block of the home page */
    .hero-card .quiz-sticker { align-self: start; margin-top: -62px; }
  }
  .quiz-sticker.pink { background: var(--pink); }
  @media (max-width: 1000px) { .quiz-sticker { --tilt: -1.5deg; position: static; width: auto; max-width: 340px; margin-top: 20px; } }