/* Marta Unbound — tool styles. Tokens only, Fixel only; every selector is prefixed .ub- (decision 0012).
   Motion tiers as in V1: T1 80–150ms feedback · T2 150–250ms · T3 reveal 260ms · T4 the knot 300–600ms. */
@layer marta.tools {
  .ub-root {
    --ub-lane: 40px;          /* left lane for the thread on phones */
    --ub-col: 680px;
    display: block; background: var(--mb-cream); color: var(--mb-plum); overflow-x: clip;
    font: 400 17px/1.6 var(--mb-font-text);
  }
  .ub-root i, .ub-root em { font-family: var(--mb-font-display); font-style: italic; font-weight: 500; }
  .ub-root ::selection { background: var(--mb-pink); color: var(--mb-plum); }
  .ub-mono-fb { font: 900 1.4rem/1 var(--mb-font-display); color: var(--mb-thread); }
  .ub-kicker { font: 700 11px/1.3 var(--mb-font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mb-thread); margin: 0 0 14px; }
  .ub-small { font-size: 13px; color: var(--mb-muted); }

  /* ---------- header: the papers' nav, with chapter knots ---------- */
  .ub-knots { gap: 4px; }
  .ub-knots li { width: 22px; height: 20px; }
  .ub-nav__short { display: none; }
  @media (max-width: 419px) { .ub-nav__long { display: none; } .ub-nav__short { display: inline; } }
  .ub-knots a { display: block; width: 100%; height: 100%; }
  .ub-knots a[aria-disabled="true"] { pointer-events: none; }
  .ub-knots .k-loop { transition: stroke-dashoffset 400ms var(--mb-ease-in); }
  .ub-knots .is-done .k-loop { stroke-dashoffset: 40; }

  /* ---------- flow + thread ---------- */
  .ub-flow { position: relative; }
  .ub-thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
  .ub-thread__path { fill: none; stroke: var(--mb-thread); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- hero: she unwinds as you scroll ---------- */
  .ub-hero { position: relative; padding: 8px 20px 56px; max-width: 1360px; margin: 0 auto; }
  .ub-hero__art { position: relative; height: 46svh; min-height: 300px; max-height: 560px; margin: 0 auto 22px; width: min(100%, 400px); display: flex; justify-content: center; align-items: flex-end; }
  .ub-arch { position: absolute; inset: 6% 4% 0 4%; border-radius: 999px 999px 24px 24px; background: linear-gradient(180deg, var(--mb-pink) 0%, var(--mb-blush) 100%); }
  .ub-lady { position: relative; z-index: 2; height: 97%; aspect-ratio: 520 / 1244; transform-origin: 50% 100%; transform: scale(var(--ub-lady, .86)); }
  .ub-lady__img { position: relative; z-index: 1; display: block; height: 100%; width: 100%; filter: drop-shadow(0 26px 36px rgba(58, 18, 48, .25)); }
  .ub-coil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .ub-coil--back { z-index: 0; } .ub-coil--front { z-index: 2; }
  .ub-coil path { fill: none; stroke: var(--mb-thread); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ub-coil--back path { stroke: var(--mb-wine, #8e0016); opacity: .55; }
  .ub-hero__title { font-size: clamp(44px, 12.5vw, 124px); line-height: .92; color: var(--mb-plum); margin: 0 0 22px; }
  .ub-hero__title span { display: block; }
  .ub-hero__lines { list-style: none; margin: 0 0 22px; padding: 0; font: 500 19px/1.45 var(--mb-font-text); color: var(--mb-plum-2); }
  .ub-hero__lines li { opacity: 0; transform: translateY(12px); animation: ub-rise 300ms var(--mb-ease-out) forwards; }
  .ub-hero__lines li:nth-child(1) { animation-delay: .5s; } .ub-hero__lines li:nth-child(2) { animation-delay: .95s; } .ub-hero__lines li:nth-child(3) { animation-delay: 1.4s; }
  .ub-hero__lines b { font-weight: 700; color: var(--mb-plum); }
  .ub-hero__lines .ub-shrink { font-weight: 500; font-size: .78em; color: var(--mb-muted); display: inline-block; transition: font-size 600ms var(--mb-ease-out), color 600ms var(--mb-ease-out); }
  .ub-hero.is-grown .ub-shrink { font-size: 1.15em; color: var(--mb-thread); font-weight: 800; }
  .ub-hero__claim { font: 800 clamp(24px, 6vw, 40px)/1.15 var(--mb-font-display); letter-spacing: -.02em; color: var(--mb-plum); margin: 0 0 28px; opacity: 0; animation: ub-rise 350ms var(--mb-ease-out) 1.9s forwards; }
  .ub-hero__claim i { color: var(--mb-thread); }
  .ub-hero .mb-row { opacity: 0; animation: ub-rise 350ms var(--mb-ease-out) 2.2s forwards; }
  .ub-hero__meta { margin: 14px 0 0; font-size: 14px; color: var(--mb-muted); font-weight: 600; }
  .ub-cue { display: none; }
  @keyframes ub-rise { to { opacity: 1; transform: none; } }
  .ub-band { position: relative; z-index: 4; }
  .ub-band .mb-band__track span { font-size: clamp(22px, 4vw, 40px); }

  /* ---------- sections ---------- */
  .ub-sec { position: relative; }
  .ub-col { max-width: calc(var(--ub-col) + var(--ub-lane)); margin: 0 auto; padding-left: var(--ub-lane); padding-right: 20px; }
  #ub-intro { padding-top: 56px; }
  .ub-chap { position: relative; padding: 72px 0 44px; margin-bottom: 34px; overflow: hidden; }
  .ub-chap--pink { background: var(--mb-pink); color: var(--mb-plum); }
  .ub-chap--plum { background: var(--mb-plum); color: var(--mb-cream); }
  .ub-chap--gold { background: var(--mb-gold-soft); color: var(--mb-plum); }
  .ub-chap--blush { background: var(--mb-blush); color: var(--mb-plum); }
  .ub-chap__k { color: inherit; opacity: .7; }
  .ub-chap__n { font: 900 clamp(120px, 40vw, 300px)/.78 var(--mb-font-display); letter-spacing: -.07em; margin: 0; color: var(--mb-thread); }
  .ub-chap--plum .ub-chap__n { color: var(--mb-pink); }
  .ub-chap__t { font: 800 clamp(34px, 9vw, 68px)/1 var(--mb-font-display); letter-spacing: -.035em; margin: 12px 0 10px; }
  .ub-chap__l { font: 500 italic 20px/1.35 var(--mb-font-display); margin: 0; opacity: .9; max-width: 28ch; }
  .ub-part { margin: 0 0 44px; }
  .ub-part__t { font: 800 clamp(26px, 6.6vw, 40px)/1.08 var(--mb-font-display); letter-spacing: -.03em; color: var(--mb-plum); margin: 0 0 18px; }
  .ub-part__t:focus, .ub-chap__n:focus { outline: none; }
  .ub-body { font-size: 18px; margin: 0 0 18px; }

  .ub-rv { opacity: 0; transform: translateY(16px); transition: opacity 260ms var(--mb-ease-out), transform 260ms var(--mb-ease-out); }
  .ub-rv.is-in { opacity: 1; transform: none; }

  /* the guide's bubble */
  .ub-say { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; }
  .ub-say__ava { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--mb-thread) url("assets/mark-tile-red.svg") center / cover; }
  .ub-say__b { background: var(--mb-paper); border: 1.5px solid var(--mb-line); border-radius: 6px 20px 20px 20px; padding: 11px 16px; font-size: 16.5px; max-width: 56ch; box-shadow: 0 8px 22px -18px rgba(58, 18, 48, .6); }
  .ub-say__b i, .ub-say__b em { color: var(--mb-thread); }
  .ub-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
  .ub-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mb-muted); animation: ub-blink 900ms infinite; }
  .ub-typing i:nth-child(2) { animation-delay: .15s; } .ub-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes ub-blink { 50% { opacity: .25; } }

  .ub-quote { margin: 4px 0 24px; padding: 20px 20px 20px 22px; background: var(--mb-blush); border-left: 5px solid var(--mb-plum); border-radius: 4px 22px 22px 4px; font: 500 italic 22px/1.35 var(--mb-font-display); color: var(--mb-plum); }
  .ub-note { margin: 22px 0; padding: 18px 20px; border-radius: var(--mb-radius); background: var(--mb-plum); color: var(--mb-cream); font-size: 16px; }
  .ub-note::before { content: "✦ "; color: var(--mb-pink); }
  .ub-twin { display: grid; gap: 10px; margin: 6px 0; }
  .ub-twin div { padding: 20px; border-radius: var(--mb-radius); font: 600 17px/1.35 var(--mb-font-text); color: var(--mb-plum); }
  .ub-twin div:first-child { background: var(--mb-pink); } .ub-twin div:last-child { background: var(--mb-gold-soft); }
  .ub-twin span { display: block; font: 900 34px/1 var(--mb-font-display); color: var(--mb-thread); margin-bottom: 8px; }

  /* ---------- questions ---------- */
  .ub-q { position: relative; margin: 0 0 26px; padding: 18px 16px 16px; background: var(--mb-paper); border: 1.5px solid var(--mb-line); border-radius: var(--mb-radius); transition: border-color 200ms var(--mb-ease-out), box-shadow 200ms var(--mb-ease-out); }
  .ub-q.is-done { border-color: rgba(208, 2, 27, .28); }
  .ub-q.is-tug { box-shadow: 0 0 0 4px rgba(255, 79, 180, .25); border-color: var(--mb-hot); }
  .ub-q__label { display: block; font: 700 17px/1.35 var(--mb-font-text); color: var(--mb-plum); margin: 0 0 12px; }
  .ub-req { color: var(--mb-thread); margin-left: 4px; }
  .ub-bead { position: absolute; left: calc(-1 * var(--ub-lane) + 10px); top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--mb-cream); border: 3px solid var(--mb-thread); z-index: 4; transition: background 180ms var(--mb-ease-out), transform 180ms var(--mb-ease-out); }
  .ub-q.is-done .ub-bead { background: var(--mb-thread); animation: ub-pop 320ms var(--mb-ease-out); }
  .ub-q.is-tug .ub-bead { animation: ub-tug 600ms var(--mb-ease-silk) 2; }
  @keyframes ub-pop { 50% { transform: scale(1.35); } }
  @keyframes ub-tug { 50% { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(255, 79, 180, .3); } }
  .ub-q textarea, .ub-q input[type=text], .ub-q input[type=date], .ub-q input[type=time] { width: 100%; box-sizing: border-box; border: 1.5px solid var(--mb-line); background: #fff; border-radius: 14px; padding: 14px 15px; font: 400 17px/1.5 var(--mb-font-text); color: var(--mb-plum); resize: vertical; transition: border-color 150ms var(--mb-ease-out), box-shadow 150ms var(--mb-ease-out); -webkit-appearance: none; appearance: none; }
  .ub-q textarea { min-height: 96px; }
  .ub-q textarea:focus, .ub-q input:focus { outline: none; border-color: var(--mb-hot); box-shadow: 0 0 0 4px rgba(255, 79, 180, .2); }
  .ub-q--lead .ub-small { margin: 10px 0 0; }
  .ub-nudge { margin: 8px 0 0; font-size: 14px; color: var(--mb-thread); font-weight: 600; display: none; }
  .ub-nudge.is-shown { display: block; animation: ub-rise 240ms var(--mb-ease-out) both; }
  .ub-nudge--soft { color: var(--mb-muted); font-weight: 500; }

  .ub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .ub-chip { appearance: none; cursor: pointer; border: 1.5px solid var(--mb-plum); background: transparent; border-radius: 999px; padding: 11px 16px; font: 600 15px/1.25 var(--mb-font-text); color: var(--mb-plum); transition: background 120ms var(--mb-ease-out), color 120ms var(--mb-ease-out), transform 120ms var(--mb-ease-out); text-align: left; min-height: 44px; }
  .ub-chip:active { transform: scale(.96); }
  .ub-chip[aria-pressed=true] { background: var(--mb-plum); color: var(--mb-cream); }
  .ub-chip[aria-pressed=true]::before { content: "✓ "; }
  .ub-chips--list { flex-direction: column; }
  .ub-chips--list .ub-chip { border-radius: 16px; padding: 14px 16px; font-weight: 500; font-size: 16px; width: 100%; }
  .ub-chips--cards { display: grid; gap: 10px; }
  .ub-chips--cards .ub-chip { border-radius: 18px; padding: 18px; font: 500 italic 18px/1.35 var(--mb-font-display); border-color: var(--mb-line); background: #fff; }
  .ub-chips--cards .ub-chip[aria-pressed=true] { background: var(--mb-thread); border-color: var(--mb-thread); color: #fff; }
  .ub-chips--cards .ub-chip[aria-pressed=true]::before { content: ""; }
  .ub-react:not(:empty) { margin-top: 14px; }

  .ub-roles { display: flex; flex-direction: column; gap: 10px; }
  .ub-role { display: grid; gap: 10px; background: #fff; border: 1.5px solid var(--mb-line); border-radius: 16px; padding: 14px; }
  .ub-role__q { font-weight: 600; font-size: 15.5px; color: var(--mb-plum); }
  .ub-seg { display: flex; background: var(--mb-blush); border-radius: 999px; padding: 4px; gap: 2px; }
  .ub-seg button { flex: 1; border: 0; background: transparent; cursor: pointer; padding: 10px 8px; border-radius: 999px; font: 700 13.5px var(--mb-font-text); color: var(--mb-plum-2); transition: background 150ms var(--mb-ease-out), color 150ms var(--mb-ease-out); min-height: 40px; }
  .ub-seg button[aria-pressed=true] { color: #fff; }
  .ub-seg button[aria-pressed=true][data-v=me] { background: var(--mb-thread); }
  .ub-seg button[aria-pressed=true][data-v=him] { background: var(--mb-plum); }
  .ub-seg button[aria-pressed=true][data-v=both] { background: var(--mb-gold); color: var(--mb-plum); }
  .ub-tally { margin: 16px 0 0; padding: 18px; border-radius: 16px; background: var(--mb-plum); color: var(--mb-cream); }
  .ub-tally__bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .12); margin: 12px 0; }
  .ub-tally__bar span { transition: flex-grow 300ms var(--mb-ease-silk); flex-basis: 0; }
  .ub-tally__bar .me { background: var(--mb-thread); } .ub-tally__bar .him { background: #9b6d8a; } .ub-tally__bar .both { background: var(--mb-gold); }
  .ub-tally__legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
  .ub-tally__msg { margin: 10px 0 0; font: 500 italic 19px/1.35 var(--mb-font-display); color: var(--mb-pink); }

  .ub-scale__viz { display: flex; align-items: flex-end; justify-content: center; height: 170px; margin-bottom: 10px; }
  .ub-scale__viz img { height: 100%; width: auto; transform-origin: 50% 100%; transition: transform 200ms var(--mb-ease-out); transform: scale(calc(.25 + var(--s, .4) * .75)); }
  .ub-scale__val { font: 900 52px/1 var(--mb-font-display); color: var(--mb-thread); text-align: center; }
  .ub-scale input[type=range] { width: 100%; accent-color: var(--mb-thread); height: 40px; }
  .ub-scale__ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--mb-muted); font-weight: 600; gap: 12px; }
  .ub-scale:not(.is-touched) .ub-scale__val { color: var(--mb-muted); }

  .ub-script { background: #fff; border: 1.5px solid var(--mb-line); border-radius: 16px; padding: 16px; margin-bottom: 10px; transition: border-color 150ms var(--mb-ease-out); }
  .ub-script.is-on { border-color: var(--mb-thread); }
  .ub-script__ctx { font: 700 11px/1.2 var(--mb-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--mb-thread); margin: 0 0 8px; }
  .ub-script__t { font: 500 italic 19px/1.4 var(--mb-font-display); color: var(--mb-plum); margin: 0 0 12px; }
  .ub-script__a { display: flex; gap: 8px; flex-wrap: wrap; }
  .ub-mini { border: 1.5px solid var(--mb-plum); background: transparent; border-radius: 999px; padding: 9px 14px; font: 700 13px var(--mb-font-text); color: var(--mb-plum); cursor: pointer; min-height: 40px; transition: background 120ms var(--mb-ease-out); }
  .ub-mini:hover { background: var(--mb-blush); }
  .ub-mini[aria-pressed=true] { background: var(--mb-thread); border-color: var(--mb-thread); color: #fff; }

  .ub-fill { background: var(--mb-plum); color: var(--mb-cream); border-radius: 18px; padding: 22px 18px; font: 500 italic 20px/1.8 var(--mb-font-display); }
  .ub-fill [contenteditable] { font: 600 normal .85em var(--mb-font-text); background: rgba(255, 184, 224, .18); border-bottom: 2px solid var(--mb-pink); padding: 2px 8px; border-radius: 6px; outline: none; color: var(--mb-pink); }
  .ub-fill [contenteditable]:focus-visible { box-shadow: 0 0 0 3px var(--mb-hot); }
  .ub-fill [contenteditable]:empty::before { content: attr(data-ph); opacity: .6; }
  .ub-aloud { margin: 14px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

  .ub-ba { display: grid; gap: 10px; }
  .ub-ba__col { border-radius: 18px; padding: 18px 16px; }
  .ub-ba__col h4 { font: 500 italic 21px/1.2 var(--mb-font-display); margin: 4px 0 12px; }
  .ub-ba__k { font: 700 11px/1 var(--mb-font-text); letter-spacing: .2em; text-transform: uppercase; }
  .ub-ba__before { background: var(--mb-blush); color: var(--mb-plum); }
  .ub-ba__after { background: var(--mb-plum); color: var(--mb-cream); }
  .ub-ba__after h4 { color: var(--mb-pink); }
  .ub-ba__item { display: block; width: 100%; text-align: left; border: 1.5px solid transparent; background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 12px 14px; margin: 0 0 8px; font: 500 15px/1.45 var(--mb-font-text); color: var(--mb-plum); cursor: pointer; transition: border-color 150ms var(--mb-ease-out), background 150ms var(--mb-ease-out); }
  .ub-ba__item[aria-pressed=true] { border-color: var(--mb-thread); background: #fff; }
  .ub-ba__me { display: none; color: var(--mb-thread); font-weight: 700; }
  .ub-ba__item[aria-pressed=true] .ub-ba__me { display: inline; }
  .ub-ba__after p { font-size: 15px; margin: 0 0 10px; padding-left: 18px; position: relative; opacity: .28; transition: opacity 300ms var(--mb-ease-out); }
  .ub-ba__after p::before { content: "✦"; position: absolute; left: 0; color: var(--mb-pink); }
  .ub-ba__after p.is-glow, .ub-ba__after.is-lit p { opacity: 1; }

  .ub-row2 { display: grid; gap: 10px; margin-top: 12px; }
  .ub-cal { margin-top: 12px; }

  /* ---------- the gate: a knot that unties (T4) ---------- */
  .ub-gate { position: relative; margin: 10px 0 70px; padding: 26px 18px 24px; border-radius: var(--mb-radius-lg); background: var(--mb-paper); border: 1.5px dashed rgba(208, 2, 27, .4); text-align: center; }
  .ub-gate__knot { width: 120px; height: 80px; overflow: visible; margin: 0 auto 6px; display: block; }
  .ub-gate__knot path { fill: none; stroke: var(--mb-thread); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .ub-gate__knot .k-loop { stroke-dasharray: 300; stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--mb-ease-in); }
  .ub-gate__knot .k-free { stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 600ms var(--mb-ease-out) 250ms; }
  .ub-gate.is-untied .k-loop { stroke-dashoffset: 300; }
  .ub-gate.is-untied .k-free { stroke-dashoffset: 0; }
  .ub-gate.is-untied .k-tail { opacity: 0; transition: opacity 200ms var(--mb-ease-in); }
  .ub-gate__status { font-weight: 700; color: var(--mb-plum); margin: 0 0 14px; }
  .ub-gate__status.is-shake { animation: ub-shake 300ms var(--mb-ease-silk); }
  @keyframes ub-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
  .ub-gate.is-ready { border-style: solid; border-color: var(--mb-thread); background: #fff; }
  .ub-gate [data-untie][aria-disabled=true] { opacity: .55; }
  .ub-gate.is-untied { border-color: transparent; background: transparent; }
  .ub-gate.is-untied [data-untie], .ub-gate.is-untied .ub-gate__status { display: none; }
  .ub-gate__done { display: none; font: 500 italic 20px/1.3 var(--mb-font-display); color: var(--mb-thread); margin: 0; }
  .ub-gate.is-untied .ub-gate__done { display: block; }

  .ub-locked { margin: 0 0 60px; padding: 26px 20px; border-radius: var(--mb-radius-lg); border: 1.5px dashed var(--mb-line); color: var(--mb-muted); text-align: center; }
  .ub-locked b { display: block; font: 900 54px/1 var(--mb-font-display); color: var(--mb-line); letter-spacing: -.05em; }
  .ub-locked span { font: 800 20px/1.2 var(--mb-font-display); color: var(--mb-plum); opacity: .45; }
  .ub-locked p { margin: 8px 0 0; font-size: 14px; }

  /* ---------- finale ---------- */
  .ub-finale { text-align: center; padding-bottom: 40px; }
  .ub-finale__badge { width: 110px; height: 110px; margin: 0 auto 18px; border-radius: 30px; background: var(--mb-thread) url("assets/mark-tile-red.svg") center / cover; box-shadow: var(--mb-shadow); animation: ub-badge 700ms var(--mb-ease-out) both; }
  @keyframes ub-badge { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
  .ub-bead--finale { position: relative; display: block; margin: 0 auto 18px; left: auto; top: auto; background: var(--mb-thread); }
  .ub-finale__title { font-size: clamp(40px, 11vw, 88px); line-height: .95; color: var(--mb-plum); margin: 0 0 14px; }
  .ub-finale__title span { color: var(--mb-thread); display: block; }
  .ub-finale__lead { font-size: 18px; max-width: 52ch; margin: 0 auto 26px; }
  .ub-finale__diff { color: var(--mb-thread); max-width: 40ch; margin: 0 auto 26px; }
  .ub-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 26px; }
  .ub-stat { background: var(--mb-paper); border: 1.5px solid var(--mb-line); border-radius: 16px; padding: 16px 8px; }
  .ub-stat b { display: block; font: 900 32px/1 var(--mb-font-display); color: var(--mb-thread); margin-bottom: 6px; }
  .ub-stat span { font-size: 13px; color: var(--mb-muted); font-weight: 600; }
  .ub-finale__mine { text-align: left; background: var(--mb-plum); color: var(--mb-cream); border-radius: 22px; padding: 22px; margin: 0 0 24px; }
  .ub-finale__mine h3 { font: 500 italic 24px/1.2 var(--mb-font-display); color: var(--mb-pink); margin: 0 0 8px; }
  .ub-finale__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 30px; }
  .ub-pdf[aria-disabled=true] { opacity: .55; }
  .ub-finale__help { font-size: 14px; color: var(--mb-plum-2); background: var(--mb-blush); border-radius: 16px; padding: 16px 18px; text-align: left; }
  .ub-finale__help a, .ub-help a, .ub-foot__help a { color: var(--mb-thread); font-weight: 700; }
  .ub-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
  .ub-burst { position: fixed; pointer-events: none; z-index: 95; font-size: 20px; color: var(--mb-thread); transition: transform 700ms var(--mb-ease-out), opacity 700ms; }
  .ub-burst[data-c="1"] { color: var(--mb-hot); } .ub-burst[data-c="2"] { color: var(--mb-gold); }

  /* ---------- where to find help (was help.html in V1) ---------- */
  .ub-help { background: var(--mb-paper); padding: 56px 0 48px; position: relative; z-index: 4; border-top: 1.5px solid var(--mb-line); }
  .ub-help .ub-col { padding-left: 20px; max-width: 820px; }
  .ub-help__t { font: 900 clamp(32px, 7vw, 52px)/1.05 var(--mb-font-display); letter-spacing: -.03em; color: var(--mb-plum); margin: 0 0 18px; }
  .ub-help h3 { font: 800 22px/1.2 var(--mb-font-display); color: var(--mb-plum); margin: 26px 0 8px; }
  .ub-help__urgent { background: var(--mb-blush); border-radius: 16px; padding: 4px 18px 14px; }
  .ub-help__eu { margin: 24px 0; border: 1.5px solid var(--mb-line); border-radius: 16px; padding: 4px 18px; background: #fff; }
  .ub-help__eu summary { cursor: pointer; font: 800 20px/1.3 var(--mb-font-display); color: var(--mb-plum); padding: 14px 0; }
  .ub-help__scroll { overflow-x: auto; }
  .ub-help table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
  .ub-help caption { text-align: left; font-weight: 700; padding: 6px 0 10px; }
  .ub-help th, .ub-help td { padding: 12px 8px; border-bottom: 1px solid var(--mb-line); text-align: left; vertical-align: top; }
  .ub-help td small { display: block; font-size: 12px; margin-top: 4px; color: var(--mb-muted); }
  .ub-help__small { font-size: 13px; color: var(--mb-muted); }

  .ub-foot { background: var(--mb-plum); color: var(--mb-cream); font-size: 14px; position: relative; z-index: 4; }
  .ub-foot__in { max-width: 980px; margin: 0 auto; padding: 48px 20px 40px; display: grid; gap: 12px; }
  .ub-foot p { max-width: 72ch; margin: 0; }
  .ub-foot__help, .ub-foot__help a { color: var(--mb-pink); }
  .ub-foot__privacy a { color: var(--mb-cream); }
  .ub-foot .mb-btn--ghost { --b-fg: var(--mb-cream); color: var(--mb-cream); border-color: rgba(255, 255, 255, .4); }
  .ub-foot__end { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-top: 18px; }
  .ub-foot__end a { color: var(--mb-cream); }

  /* ≥ 720px */
  @media (min-width: 720px) {
    .ub-root { --ub-lane: 56px; }
    .ub-knots { gap: 8px; }
    .ub-twin, .ub-row2, .ub-chips--cards, .ub-ba { grid-template-columns: 1fr 1fr; }
    .ub-role { grid-template-columns: 1fr auto; align-items: center; }
    .ub-seg button { flex: none; padding: 9px 14px; }
    .ub-stats { grid-template-columns: repeat(4, 1fr); }
    .ub-q { padding: 22px 22px 20px; }
    .ub-chap { padding: 110px 0 60px; }
  }
  /* ≥ 1024px */
  @media (min-width: 1024px) {
    .ub-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; min-height: calc(100svh - 5rem); padding: 24px 48px 60px; }
    .ub-hero__art { order: 2; height: min(78svh, 800px); max-height: none; width: 100%; margin: 0; }
    .ub-hero__copy { order: 1; }
    .ub-hero__title { font-size: clamp(64px, 7vw, 100px); }
    :lang(uk) .ub-hero__title { font-size: clamp(60px, 6.4vw, 100px); }
    .ub-cue { display: flex; position: absolute; left: 48px; bottom: 18px; align-items: center; gap: 10px; font: 700 11px var(--mb-font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mb-muted); margin: 0; }
    .ub-cue span { width: 2px; height: 34px; background: var(--mb-line); position: relative; overflow: hidden; }
    .ub-cue span::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--mb-thread); animation: ub-cue 1.6s var(--mb-ease-silk) infinite; }
    @keyframes ub-cue { to { top: 100%; } }
  }

  @media (prefers-reduced-motion: reduce) {
    .ub-root *, .ub-root *::before, .ub-root *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
    .ub-hero__lines li, .ub-hero__claim, .ub-hero .mb-row, .ub-rv { opacity: 1; transform: none; }
    .ub-coil { display: none; }
    .ub-lady { transform: none; }
  }
}