/* /invite/: the form on its own page. Every selector is prefixed .iv-; the form itself uses the shared .ct-* styles. */
@layer marta.tools {
  .iv-root { display: block; width: 100%; overflow-x: clip; min-height: 100vh; background: var(--mb-lilac); color: var(--mb-ink); }
  .iv-main { padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 8vw, 6rem); }
  .iv-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (min-width: 1000px) {
    .iv-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
    .iv-head { position: sticky; top: 6rem; }
    /* «Запросіть» is twice as long as "Invite": size it to the column so it never runs into the form. */
    :lang(uk) .iv-poster { font-size: min(7.5rem, 8vw); }
  }
  .iv-kicker { margin: 0 0 1rem; font: 700 var(--mb-step--1)/1 var(--mb-font-text); color: var(--mb-violet); }
  .iv-poster { position: relative; font-size: clamp(3.4rem, 11vw, 7.5rem); margin: 0 0 .5em; }
  .iv-poster span:last-of-type { color: var(--mb-thread); }
  .iv-thread { position: absolute; left: -2%; bottom: -.55em; width: 5.4em; max-width: 104%; height: .6em; overflow: visible; pointer-events: none; }
  .iv-thread path { fill: none; stroke: var(--mb-thread); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900;
    animation: iv-draw 1.6s var(--mb-ease-silk) .3s forwards; }
  @keyframes iv-draw { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .iv-thread path { animation: none; stroke-dashoffset: 0; } }
  .iv-lede { max-width: 42ch; }
  .iv-unsure { margin: 1.5rem 0 0; font-weight: 600; }
}