/* Trainings and courses (decision 0014): the /trainings/ page and every training page. Tokens only, Fixel only.
   Shared parts are .tr-*; page parts .ll- (Lifeline), .uc- (Unbound circle), .az- (Advocacy from scratch).
   Each theme has its register: safety = stage (plum night), advocacy = policy (lilac), growth = poster (pink). */
@layer marta.tools {
  .tr-root { display: block; background: var(--mb-paper); color: var(--mb-plum); overflow-x: clip; }
  .tr-root [data-register] { background: var(--mb-bg); color: var(--mb-ink); }
  .tr-root [hidden] { display: none !important; }
  .tr-root h1, .tr-root h2, .tr-root h3 { color: inherit; }
  .tr-kicker { margin: 0 0 .8rem; display: inline-flex; align-items: center; gap: .6em; font: 700 var(--mb-step--1)/1.3 var(--mb-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--mb-ink-soft); }
  .tr-kicker::before { content: ""; width: 1.6em; height: 2px; border-radius: 2px; background: var(--mb-accent); flex: none; }
  .tr-h2 { margin: 0 0 .6em; font: 900 var(--mb-step-3)/1 var(--mb-font-display); letter-spacing: var(--mb-track-tight); max-width: 22ch; text-wrap: balance; }
  .tr-h3 { margin: 0 0 .8rem; font: 800 var(--mb-step-1)/1.15 var(--mb-font-display); letter-spacing: -.02em; }
  .tr-sub { margin: -.2rem 0 1.6rem; max-width: 60ch; color: var(--mb-ink-soft); }
  .tr-small { font-size: var(--mb-step--1); color: var(--mb-ink-soft); max-width: 70ch; }
  .tr-title { margin: 0 0 .45em; font: 900 var(--mb-step-4)/.95 var(--mb-font-display); letter-spacing: var(--mb-track-poster); text-wrap: balance; }
  .tr-title span { display: inline; }
  .tr-title--xl { font-size: clamp(3.2rem, 1.6rem + 7vw, 8rem); line-height: .88; }
  .tr-title--xl span { display: block; }
  .tr-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 1rem; }
  .tr-first { margin: 0; font-weight: 700; }
  .tr-facts { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
  .tr-facts li { padding: .35rem .85rem; border-radius: var(--mb-radius-pill); box-shadow: inset 0 0 0 1.5px var(--mb-line); font-size: var(--mb-step--1); font-weight: 600; }
  .tr-facts--stack { flex-direction: column; align-items: flex-start; }
  .tr-hero { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem); position: relative; }
  .tr-split { display: grid; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
  @media (min-width: 900px) { .tr-split { grid-template-columns: 1.1fr .9fr; } }
  .tr-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
  .tr-list li { display: flex; gap: .7rem; align-items: flex-start; }
  .tr-list .mb-knot { flex: none; width: 1.3em; margin-top: .2em; fill: none; stroke: var(--mb-thread); stroke-width: 2.4; stroke-linecap: round; }
  .tr-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
  .tr-tiles--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
  .tr-tiles li { padding: 1.3rem 1.4rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .tr-tiles h3 { margin: 0 0 .35rem; font: 800 var(--mb-step-1)/1.1 var(--mb-font-display); }
  .tr-tiles p { margin: 0; }
  .tr-tiles .is-result { background: var(--mb-plum); color: #FFF1F6; }
  .tr-price { display: grid; gap: .6rem; padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: var(--mb-radius-lg); background: var(--mb-plum); color: #FFF1F6; }
  .tr-price p { margin: 0; }
  .tr-price__l { font: 700 var(--mb-step--1)/1 var(--mb-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--mb-pink); }
  .tr-price__n { font: 900 var(--mb-step-5)/.9 var(--mb-font-display); letter-spacing: var(--mb-track-poster); }
  .tr-price .mb-btn { justify-self: start; margin-top: .6rem; --b-bg: var(--mb-pink); --b-fg: var(--mb-plum); }
  .tr-price legend { font-weight: 700; margin-bottom: .5rem; }
  .tr-price .mb-chip { background: transparent; color: #FFF1F6; border-color: rgba(255, 241, 246, .5); }
  .tr-price .ct-topics input:checked + label { background: var(--mb-pink); border-color: var(--mb-pink); color: var(--mb-plum); }
  .tr-honest { padding: clamp(1.3rem, 4vw, 2rem); border-radius: var(--mb-radius-lg); background: var(--mb-lilac); }
  .tr-honest h3 { margin: 0 0 .6rem; font: 800 var(--mb-step-1)/1.1 var(--mb-font-display); }
  .tr-honest p { margin: 0 0 .6rem; }

  /* ---------- header + mega menu ---------- */
  .tr-nav { background: var(--mb-paper); }
  .tr-nav .mb-nav__links { align-items: center; }
  .tr-nav__more { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: .5rem .8rem; border: 0; border-radius: var(--mb-radius-pill); background: none; color: inherit; cursor: pointer;
    font: 650 var(--mb-menu-size, 17px)/1 var(--mb-font-text); white-space: nowrap; }
  .tr-nav__more:hover, .tr-nav__more[aria-expanded="true"] { background: var(--mb-surface-2); }
  .tr-nav__more .mb-go { transition: transform var(--mb-dur-3) var(--mb-ease-spring); }
  .tr-nav__more[aria-expanded="true"] .mb-go { transform: rotate(180deg); color: var(--mb-thread); }
  .tr-nav__more:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 2px; }
  .tr-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--mb-paper); box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--mb-plum) 45%, transparent);
    border-top: 1px solid var(--mb-line); max-height: calc(100vh - 80px); overflow: auto; }
  .tr-mega__inner { padding-block: 1.4rem 1.6rem; display: grid; gap: 1rem; }
  .tr-mega__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .tr-mega__card { position: relative; height: 100%; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--mb-radius-lg); text-decoration: none; color: var(--mb-plum);
    background: var(--mb-blush); transition: transform var(--mb-dur-2) var(--mb-ease-out), box-shadow var(--mb-dur-2); }
  .tr-mega__card:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: var(--mb-shadow); color: inherit; }
  .tr-mega__card:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 3px; }
  .tr-mega__card[aria-current="page"] { box-shadow: inset 0 0 0 2px currentColor; }
  .tr-mega__card--lifeline { background: var(--mb-plum); color: #FFF1F6; }
  .tr-mega__card--lifeline:hover { color: #FFF1F6; }
  .tr-mega__card--advocacy-from-zero { background: var(--mb-lavender); }
  .tr-mega__card--unbound-circle { background: var(--mb-pink); }
  .tr-mega__card--civil-society-resilience { background: var(--mb-lilac); }
  .tr-mega__emblem { width: 5.5rem; height: auto; margin-bottom: .2rem; }
  .tr-mega__tag { font: 700 var(--mb-step--1)/1.2 var(--mb-font-text); opacity: .8; }
  .tr-mega__t { font: 900 var(--mb-step-2)/1 var(--mb-font-display); letter-spacing: -.03em; }
  .tr-mega__d { font-size: var(--mb-step--1); line-height: 1.35; }
  .tr-mega__meta { margin-top: auto; padding-top: .5rem; font-size: var(--mb-step--1); font-weight: 700; }
  .tr-mega__all { justify-self: start; display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-weight: 700; color: var(--mb-plum); text-decoration: none; }
  .tr-mega__all:hover { color: var(--mb-thread); }

  /* Emblems: the red thread, drawn. On dark cards it turns pink. */
  .tr-emblem { overflow: visible; }
  .tr-emblem path, .tr-emblem circle { fill: none; stroke: var(--mb-thread); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
  .tr-emblem .e-knots circle { fill: var(--mb-thread); stroke: none; }
  .tr-emblem .e-step { stroke: currentColor; opacity: .35; stroke-width: 2.4; }
  .tr-emblem .e-plus, .tr-emblem .e-flag { stroke: currentColor; }
  .tr-mega__card--lifeline .tr-emblem .e-thread, .tr-card--lifeline .tr-emblem .e-thread { stroke: #FF5A6E; }

  /* ---------- catalogue: hero with the three needs ---------- */
  .tr-cat-hero { background: var(--mb-blush); }
  .tr-cat-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
  @media (min-width: 960px) { .tr-cat-hero__grid { grid-template-columns: 1.1fr .9fr; } }
  .tr-poster { position: relative; margin: 0 0 .4em; font-size: clamp(3rem, 1.4rem + 7vw, 7.4rem); line-height: .9; }
  .tr-poster span:last-of-type { color: var(--mb-thread); }
  .tr-poster__thread { position: absolute; left: 0; bottom: -.15em; width: min(100%, 11em); height: .5em; overflow: visible; pointer-events: none; }
  .tr-poster__thread path { fill: none; stroke: var(--mb-thread); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
  .tr-poster__thread path.is-drawn { animation: tr-draw 1.6s var(--mb-ease-silk) .3s forwards; }
  @keyframes tr-draw { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .tr-poster__thread path { stroke-dashoffset: 0; animation: none !important; } }
  .tr-needs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
  .tr-need { width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n t k" "n g k"; gap: .1rem .9rem; align-items: center; text-align: left;
    padding: 1rem 1.2rem; border: 0; border-radius: var(--mb-radius-lg); cursor: pointer; font: inherit; color: var(--mb-plum); background: var(--mb-surface);
    box-shadow: var(--mb-shadow); transition: transform var(--mb-dur-2) var(--mb-ease-out), background var(--mb-dur-2); }
  .tr-need:hover { transform: translateX(4px); }
  .tr-need:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 3px; }
  .tr-need__n { grid-area: n; font: 900 var(--mb-step-2)/1 var(--mb-font-display); color: var(--mb-thread); }
  .tr-need__t { grid-area: t; font: 800 var(--mb-step-0)/1.25 var(--mb-font-display); }
  .tr-need__g { grid-area: g; font-size: var(--mb-step--1); color: var(--mb-ink-soft); }
  .tr-need .mb-knot { grid-area: k; width: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .25; transition: opacity var(--mb-dur-2); }
  .tr-need[aria-pressed="true"] { background: var(--mb-plum); color: #FFF1F6; }
  .tr-need[aria-pressed="true"] .tr-need__g { color: var(--mb-pink); }
  .tr-need[aria-pressed="true"] .tr-need__n { color: var(--mb-pink); }
  .tr-need[aria-pressed="true"] .mb-knot { opacity: 1; stroke: var(--mb-pink); }
  .tr-needs__all { margin-top: .8rem; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--mb-plum); padding: .3rem 0; }

  /* ---------- catalogue: toolbar, groups, cards ---------- */
  .tr-catalog { scroll-margin-top: 80px; }
  .tr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding-block: 1.6rem; }
  .tr-toolbar__l { font-weight: 700; }
  .tr-toolbar__count { margin: 0 0 0 auto; font-weight: 600; color: var(--mb-ink-soft); }
  .tr-group { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
  .tr-group__grid { display: grid; gap: 1.6rem; }
  @media (min-width: 960px) { .tr-group__grid { grid-template-columns: .8fr 2fr; align-items: start; } .tr-group__head { position: sticky; top: 100px; } }
  .tr-group__head p { margin: 0; color: var(--mb-ink-soft); max-width: 36ch; }
  .tr-group__n { display: block; font: 900 var(--mb-step-4)/1 var(--mb-font-display); color: var(--mb-accent); margin-bottom: .2rem; }
  .tr-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .tr-card__link { height: 100%; display: flex; flex-direction: column; gap: .5rem; padding: clamp(1.2rem, 3vw, 1.7rem); border-radius: var(--mb-radius-lg); background: var(--mb-surface); color: var(--mb-ink);
    text-decoration: none; box-shadow: var(--mb-shadow); transition: transform var(--mb-dur-2) var(--mb-ease-out), box-shadow var(--mb-dur-2); }
  .tr-card__link:hover { transform: translateY(-4px); box-shadow: var(--mb-shadow-lift); color: var(--mb-ink); }
  .tr-card__link:focus-visible { outline: 3px solid var(--mb-accent); outline-offset: 3px; }
  .tr-card__art { display: block; padding: .8rem 1rem; border-radius: var(--mb-radius); background: var(--mb-surface-2); }
  .tr-card__art .tr-emblem { width: 100%; max-width: 240px; height: auto; display: block; color: var(--mb-ink); }
  .tr-card__meta { display: flex; flex-wrap: wrap; gap: .35rem; }
  .tr-card__meta span { padding: .15rem .6rem; border-radius: var(--mb-radius-pill); box-shadow: inset 0 0 0 1.5px var(--mb-line); font-size: var(--mb-step--1); font-weight: 600; }
  .tr-card__t { font: 900 var(--mb-step-3)/.95 var(--mb-font-display); letter-spacing: var(--mb-track-tight); }
  .tr-card__sub { font: 700 var(--mb-step-0)/1.3 var(--mb-font-display); }
  .tr-card__d { color: var(--mb-ink-soft); }
  .tr-card__foot { margin-top: auto; display: grid; gap: .15rem; padding-top: .7rem; border-top: 1px solid var(--mb-line); font-size: var(--mb-step--1); }
  .tr-card__price b { font: 900 var(--mb-step-2)/1 var(--mb-font-display); }
  .tr-card__next { font-weight: 600; }
  .tr-card__go { display: inline-flex; align-items: center; gap: .35em; font-weight: 800; color: var(--mb-accent); }
  .tr-card__soon { height: 100%; display: grid; align-content: center; gap: .5rem; padding: 1.5rem; border-radius: var(--mb-radius-lg); box-shadow: inset 0 0 0 2px var(--mb-line); color: var(--mb-ink); }
  .tr-card__soon .tr-card__t { font-size: var(--mb-step-1); line-height: 1.15; }
  .tr-card__soon .mb-link { justify-self: start; color: var(--mb-ink); }
  .tr-group__none { margin: 0; color: var(--mb-ink-soft); }

  /* ---------- catalogue: starts, how it works ---------- */
  .tr-starts__line { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); position: relative; }
  .tr-starts__item { position: relative; display: grid; gap: .3rem; padding-top: 2rem; }
  .tr-starts__item::before { content: ""; position: absolute; top: .55rem; left: 0; right: -1.2rem; height: 3px; border-radius: 3px; background: var(--mb-thread); }
  .tr-starts__item:last-child::before { right: 0; }
  .tr-starts__item--wait::before { background: repeating-linear-gradient(90deg, var(--mb-thread) 0 10px, transparent 10px 18px); }
  .tr-starts__knot { position: absolute; top: 0; left: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--mb-paper); box-shadow: inset 0 0 0 3px var(--mb-thread); }
  .tr-starts__item--set .tr-starts__knot { background: var(--mb-thread); }
  .tr-starts__when { font: 700 var(--mb-step--1)/1 var(--mb-font-text); text-transform: uppercase; letter-spacing: .08em; color: var(--mb-thread); }
  .tr-starts__t { font: 900 var(--mb-step-2)/1 var(--mb-font-display); color: var(--mb-plum); text-decoration: none; }
  .tr-starts__t:hover { color: var(--mb-thread); }
  .tr-starts__d { color: var(--mb-ink-soft); font-size: var(--mb-step--1); }
  .tr-how { background: var(--mb-cream); }
  .tr-how__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
  @media (min-width: 960px) { .tr-how__grid { grid-template-columns: 1.1fr .9fr; } }
  .tr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
  .tr-steps li { display: flex; gap: 1rem; align-items: flex-start; }
  .tr-steps__n { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--mb-thread); color: #fff; font: 900 1.2rem/1 var(--mb-font-display); }
  .tr-steps h3 { margin: .2rem 0 .2rem; font: 800 var(--mb-step-1)/1.15 var(--mb-font-display); }
  .tr-steps p { margin: 0; color: var(--mb-ink-soft); }
  .tr-how__side { display: grid; gap: 1rem; }
  .tr-promise, .tr-orgs { padding: 1.5rem; border-radius: var(--mb-radius-lg); }
  .tr-promise { background: var(--mb-lilac); }
  .tr-orgs { background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .tr-promise h3, .tr-orgs h3 { margin: 0 0 .5rem; font: 800 var(--mb-step-1)/1.1 var(--mb-font-display); }
  .tr-promise p, .tr-orgs p { margin: 0 0 .7rem; }

  /* ---------- questions, register, others, bar, footer, soon ---------- */
  .tr-faq__list { display: grid; gap: .6rem; }
  .tr-faq__item { border-radius: var(--mb-radius); background: var(--mb-surface); box-shadow: 0 1px 0 var(--mb-line); }
  .tr-faq__item summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; cursor: pointer;
    font: 800 var(--mb-step-1)/1.2 var(--mb-font-display); letter-spacing: -.01em; border-radius: var(--mb-radius); }
  .tr-faq__item summary::-webkit-details-marker { display: none; }
  .tr-faq__item summary:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 2px; }
  .tr-faq__mark { flex: none; position: relative; width: 1.1rem; height: 1.1rem; }
  .tr-faq__mark::before, .tr-faq__mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: var(--mb-thread); transition: transform var(--mb-dur-2) var(--mb-ease-out); }
  .tr-faq__mark::after { transform: rotate(90deg); }
  .tr-faq__item[open] .tr-faq__mark::after { transform: rotate(0); }
  .tr-faq__a { padding: 0 1.3rem 1.2rem; }
  .tr-faq__a p { margin: 0; max-width: 62ch; }
  .tr-register { background: var(--mb-blush); scroll-margin-top: 70px; }
  .tr-register:focus { outline: none; }
  .tr-register__grid { display: grid; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
  @media (min-width: 960px) { .tr-register__grid { grid-template-columns: .8fr 1.2fr; } .tr-register__grid > div:first-child { position: sticky; top: 100px; } }
  .tr-form .tr-field[hidden] { display: none; }
  .tr-field--chips { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; }
  .tr-field--chips legend { font-weight: 700; font-size: .95rem; padding: 0; margin-bottom: .3rem; }
  .tr-hint { font-size: var(--mb-step--1); color: var(--mb-ink-soft); }
  .tr-form textarea { min-height: 7rem; }
  .tr-closed { margin: 0; padding: .9rem 1rem; border-radius: var(--mb-radius); background: var(--mb-butter); font-weight: 600; }
  .tr-done { scroll-margin-top: 96px; }
  .tr-done h3 { margin: .4rem 0 0; color: #FFF1F6; font: 800 var(--mb-step-1)/1.1 var(--mb-font-display); }
  .tr-done p { margin: 0; }
  .tr-done__list { margin: 0; display: grid; gap: .4rem; padding: 1rem 1.1rem; border-radius: var(--mb-radius); background: rgba(255, 241, 246, .08); }
  .tr-done__list div { display: grid; gap: .1rem; }
  .tr-done__list dt { font-size: var(--mb-step--1); color: var(--mb-pink); }
  .tr-done__list dd { margin: 0; white-space: pre-wrap; }
  .tr-done__next { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
  .tr-done__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
  .tr-done__again { --b-fg: #FFF1F6; box-shadow: inset 0 0 0 2px #FFF1F6; }
  .tr-others__grid { margin-bottom: 1rem; }
  .tr-bar { position: fixed; z-index: 70; left: .75rem; right: .75rem; bottom: .75rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .6rem .6rem .6rem 1.1rem; border-radius: var(--mb-radius-pill); background: var(--mb-plum); color: #FFF1F6; box-shadow: var(--mb-shadow-lift); }
  .tr-bar p { margin: 0; font-size: var(--mb-step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-bar span { color: var(--mb-pink); font-weight: 700; }
  @media (min-width: 960px) { .tr-bar { left: auto; right: 1.5rem; bottom: 1.5rem; } }
  .tr-foot { padding-block: 2rem; border-top: 1px solid var(--mb-line); font-size: var(--mb-step--1); }
  .tr-foot a { color: inherit; }
  .tr-soon { min-height: 60vh; }
  .tr-soon__t { font-size: var(--mb-step-5); }
  .tr-soon__go { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

  /* ================= Lifeline ================= */
  .ll-hero { padding-bottom: 2rem; }
  .ll-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 960px) { .ll-hero__grid { grid-template-columns: 1.15fr .85fr; } }
  .ll-hero .tr-title span:last-child { color: var(--mb-accent); }
  .ll-hero .tr-facts li { box-shadow: inset 0 0 0 1.5px var(--mb-line); }
  .ll-hero__note { margin-top: 2rem; font-size: var(--mb-step--1); color: var(--mb-ink-soft); }
  .ll-photo { margin: 0; position: relative; max-width: 460px; justify-self: center; width: 100%; }
  .ll-photo__frame { border-radius: var(--mb-arch); overflow: hidden; aspect-ratio: 3 / 4; background: var(--mb-surface); box-shadow: 0 40px 80px -40px #000; }
  .ll-photo__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
  .ll-photo__pulse { position: absolute; left: -8%; right: -8%; width: 116%; bottom: 18%; height: 60px; overflow: visible; pointer-events: none; }
  .ll-photo__pulse path { fill: none; stroke: var(--mb-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
  .ll-photo figcaption { margin-top: .9rem; font-size: var(--mb-step--1); color: var(--mb-ink-soft); text-align: center; }
  .ll-band { overflow: hidden; background: var(--mb-thread); color: #fff; padding-block: 1rem; }
  .ll-band__track { display: flex; gap: 1.5rem; width: max-content; font: 800 var(--mb-step-1)/1 var(--mb-font-display); white-space: nowrap; animation: ll-band 32s linear infinite; }
  .ll-band__track i { font-style: normal; opacity: .7; }
  @keyframes ll-band { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .ll-band__track { animation: none; } }
  .ll-why__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 960px) { .ll-why__grid { grid-template-columns: 1.2fr .8fr; } }
  .ll-why p { max-width: 60ch; }
  .ll-gap { margin: 1.8rem 0 0; }
  .ll-gap svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }
  .ll-gap__zone { fill: var(--mb-blush); }
  .ll-gap__line { fill: none; stroke: var(--mb-plum); stroke-width: 3; stroke-linecap: round; }
  .ll-gap__pulse { fill: none; stroke: var(--mb-thread); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .ll-gap__dot { fill: var(--mb-plum); }
  .ll-gap__dot--end { fill: var(--mb-paper); stroke: var(--mb-plum); stroke-width: 3; }
  .ll-gap text { font: 700 15px var(--mb-font-text); fill: var(--mb-plum); }
  .ll-gap .ll-gap__label { fill: var(--mb-thread); font-weight: 800; }
  .ll-quote { margin: 0; padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: var(--mb-radius-lg); background: var(--mb-plum); color: #FFF1F6; }
  .ll-quote p { margin: 0 0 1rem; font: 700 var(--mb-step-1)/1.35 var(--mb-font-display); }
  .ll-quote footer { font-size: var(--mb-step--1); color: var(--mb-pink); }
  .ll-quote .mb-link { color: #FFF1F6; }

  .ll-order { background: var(--mb-cream); }
  .ll-order__grid { display: grid; gap: 1.5rem; }
  @media (min-width: 900px) { .ll-order__grid { grid-template-columns: .8fr 1.2fr; align-items: start; } }
  .ll-order__pool { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
  .ll-act { width: 100%; display: flex; align-items: center; gap: .8rem; min-height: 54px; padding: .7rem 1rem; text-align: left; border: 0; border-radius: var(--mb-radius); cursor: pointer;
    background: var(--mb-surface); color: var(--mb-plum); font: 700 var(--mb-step-0)/1.2 var(--mb-font-display); box-shadow: var(--mb-shadow); transition: transform var(--mb-dur-2) var(--mb-ease-out), opacity var(--mb-dur-2); }
  .ll-act:hover { transform: translateX(4px); }
  .ll-act:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 2px; }
  .ll-act__n { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--mb-line); font-size: .9rem; }
  .ll-act.is-used { opacity: .45; cursor: default; transform: none; box-shadow: none; }
  .ll-act.is-used .ll-act__n { background: var(--mb-thread); color: #fff; box-shadow: none; }
  .ll-act.is-wrong { animation: ll-shake .4s var(--mb-ease-out); }
  @keyframes ll-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
  @media (prefers-reduced-motion: reduce) { .ll-act.is-wrong { animation: none; box-shadow: inset 0 0 0 2px var(--mb-thread); } }
  .ll-chain { list-style: none; margin: 0; padding: 0 0 0 .2rem; display: grid; gap: .55rem; position: relative; }
  .ll-chain::before { content: ""; position: absolute; left: 1.15rem; top: 1rem; bottom: 1rem; width: 3px; border-radius: 3px; background: repeating-linear-gradient(var(--mb-line) 0 8px, transparent 8px 14px); }
  .ll-chain__slot { position: relative; display: flex; gap: .9rem; align-items: flex-start; min-height: 54px; padding: .5rem 0; }
  .ll-chain__knot { position: relative; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mb-cream); box-shadow: inset 0 0 0 2.5px var(--mb-line); font: 800 .9rem/1 var(--mb-font-display); color: var(--mb-ink-soft); }
  .ll-chain__t { padding-top: .3rem; color: var(--mb-ink-soft); display: grid; gap: .15rem; }
  .ll-chain__t b { color: var(--mb-plum); font: 800 var(--mb-step-0)/1.2 var(--mb-font-display); }
  .ll-chain__slot.is-set .ll-chain__knot { background: var(--mb-thread); color: #fff; box-shadow: none; animation: ll-pop .4s var(--mb-ease-spring); }
  @keyframes ll-pop { from { transform: scale(.4); } }
  .ll-order.is-done .ll-chain::before { background: var(--mb-thread); }
  .ll-order__say { min-height: 1.6em; margin: 1.2rem 0 .4rem; font-weight: 700; }
  .ll-order.is-done .ll-order__say { color: var(--mb-thread); }
  .ll-order__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
  .ll-order__show { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--mb-plum); padding: .3rem 0; }

  .ll-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
  .ll-tab { min-height: 48px; padding: .6rem 1.3rem; border: 0; border-radius: var(--mb-radius-pill); cursor: pointer; font: 800 var(--mb-step-0)/1 var(--mb-font-display);
    background: var(--mb-surface); color: var(--mb-plum); box-shadow: inset 0 0 0 2px var(--mb-line); }
  .ll-tab[aria-selected="true"] { background: var(--mb-plum); color: #FFF1F6; box-shadow: none; }
  .ll-tab--b[aria-selected="true"] { background: var(--mb-thread); }
  .ll-tab:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 2px; }
  .ll-panel { padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .ll-panel--b { background: var(--mb-plum); color: #FFF1F6; }
  .ll-panel h3 { margin: 0 0 1rem; font: 900 var(--mb-step-3)/1 var(--mb-font-display); letter-spacing: var(--mb-track-tight); }
  .ll-panel dl { margin: 0 0 1.4rem; display: grid; gap: 1rem; }
  @media (min-width: 800px) { .ll-panel dl { grid-template-columns: repeat(3, 1fr); } }
  .ll-panel dt { font-size: var(--mb-step--1); font-weight: 700; color: var(--mb-thread); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem; }
  .ll-panel--b dt { color: var(--mb-pink); }
  .ll-panel dd { margin: 0; }
  .ll-panel--b .mb-btn { --b-bg: var(--mb-pink); --b-fg: var(--mb-plum); }

  .ll-program { background: var(--mb-cream); }
  .ll-sessions { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: s; }
  .ll-sessions li { position: relative; padding: 1.5rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .ll-sessions li:last-child { background: var(--mb-plum); color: #FFF1F6; }
  .ll-sessions__ico { width: 3rem; height: 3rem; fill: none; stroke: var(--mb-thread); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .ll-sessions li:last-child .ll-sessions__ico { stroke: var(--mb-pink); }
  .ll-sessions__n { position: absolute; top: 1.2rem; right: 1.4rem; font: 900 var(--mb-step-3)/1 var(--mb-font-display); opacity: .15; }
  .ll-sessions h3 { margin: .8rem 0 .4rem; font: 900 var(--mb-step-2)/1 var(--mb-font-display); }
  .ll-sessions p { margin: 0; }

  .ll-kit__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 960px) { .ll-kit__grid { grid-template-columns: 1.2fr .8fr; } }
  .ll-kit__list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .9rem; }
  .ll-kit__list li { display: flex; gap: .8rem; }
  .ll-kit__list .mb-knot { flex: none; width: 1.4em; fill: none; stroke: var(--mb-thread); stroke-width: 2.4; stroke-linecap: round; margin-top: .15em; }
  .ll-card-wrap { justify-self: center; display: grid; gap: .8rem; justify-items: center; text-align: center; }
  .ll-card { width: 230px; height: 400px; }
  .ll-card .mb-flip__face { border-radius: 28px; padding: 1.4rem 1.2rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 24px 50px -24px rgba(58, 18, 48, .5); text-align: left; }
  .ll-card__front { background: var(--mb-plum); color: #FFF1F6; transform: rotate(-3deg); }
  .ll-card__back { background: var(--mb-paper); color: var(--mb-plum); padding: 0 !important; overflow: hidden; }
  .ll-card__head { background: var(--mb-plum); color: #FFF1F6; padding: 1.2rem 1.1rem .9rem; display: grid; gap: .2rem; }
  .ll-card__tag { font: 700 .72rem/1 var(--mb-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--mb-pink); }
  .ll-card__t { font: 900 1.6rem/1.05 var(--mb-font-display); }
  .ll-card__list { font-size: .9rem; color: var(--mb-pink); }
  .ll-card__steps { margin: 0; padding: .9rem 1.1rem 0 2.2rem; display: grid; gap: .55rem; font-size: .9rem; flex: 1; }
  .ll-card__turn { align-self: flex-start; margin: .6rem 1.1rem 1rem; border: 0; background: none; cursor: pointer; font: 700 .85rem/1.2 var(--mb-font-text); color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: .3rem 0; }
  .ll-card__front .ll-card__turn { margin: 0; color: var(--mb-pink); }
  .ll-card__turn:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 2px; }

  .ll-team { background: var(--mb-cream); }
  .ll-team__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 960px) { .ll-team__grid { grid-template-columns: 1fr 1fr; } }
  .ll-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
  .ll-people li { display: flex; gap: 1.1rem; align-items: center; padding: 1.1rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .ll-people h3 { margin: 0 0 .2rem; font: 900 var(--mb-step-2)/1 var(--mb-font-display); }
  .ll-people p { margin: 0; color: var(--mb-ink-soft); }
  .ll-people__img { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }

  .ll-offers__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .ll-offer { display: flex; flex-direction: column; gap: .6rem; padding: 1.6rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .ll-offer--open { box-shadow: inset 0 0 0 3px var(--mb-thread), var(--mb-shadow); }
  .ll-offer__tag { font: 700 var(--mb-step--1)/1 var(--mb-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--mb-thread); }
  .ll-offer__price { font: 900 var(--mb-step-3)/1 var(--mb-font-display); letter-spacing: var(--mb-track-tight); }
  .ll-offer__price small { font: 600 var(--mb-step--1)/1 var(--mb-font-text); color: var(--mb-ink-soft); letter-spacing: 0; }
  .ll-offer p { margin: 0 0 .6rem; }
  .ll-offer .mb-btn { margin-top: auto; align-self: flex-start; }

  .ll-gear__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 960px) { .ll-gear__grid { grid-template-columns: 1.1fr .9fr; } }
  .ll-donate { padding: 1.6rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); }
  .ll-donate h3 { margin: 0 0 .5rem; font: 800 var(--mb-step-2)/1 var(--mb-font-display); }
  .ll-donate p { margin: 0 0 1rem; }
  [data-register="stage"] .tr-kicker { color: var(--mb-ink-soft); }
  [data-register="stage"] .mb-btn--ghost { --b-fg: var(--mb-ink); box-shadow: inset 0 0 0 2px var(--mb-ink); background: transparent; }

  /* ================= Unbound circle ================= */
  .uc-hero__grid { display: grid; gap: 2rem; align-items: center; }
  @media (min-width: 960px) { .uc-hero__grid { grid-template-columns: 1.15fr .85fr; } }
  .uc-hero .tr-title span:last-child { color: var(--mb-plum); }
  .uc-hero .tr-title span:first-child { color: var(--mb-thread); }
  .uc-hero__sub { margin: 0 0 .6rem; font: 800 var(--mb-step-2)/1.15 var(--mb-font-display); max-width: 24ch; }
  .uc-stairs { width: 100%; height: auto; overflow: visible; }
  .uc-stairs__steps { fill: none; stroke: var(--mb-plum); stroke-width: 3; stroke-linejoin: round; opacity: .5; }
  .uc-stairs__thread { fill: none; stroke: var(--mb-thread); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .uc-stairs text { font: 800 13px var(--mb-font-display); fill: var(--mb-plum); }
  .uc-fit { background: var(--mb-cream); }
  .uc-fit__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
  .uc-fit__item { width: 100%; height: 100%; display: flex; gap: .6rem; align-items: flex-start; text-align: left; padding: 1.1rem 1.1rem 1.2rem; border: 0; border-radius: var(--mb-radius-lg); cursor: pointer;
    font: 500 var(--mb-step-0)/1.4 var(--mb-font-text); color: var(--mb-plum); background: var(--mb-surface); box-shadow: var(--mb-shadow); transition: transform var(--mb-dur-2) var(--mb-ease-out), background var(--mb-dur-2); }
  .uc-fit__item:hover { transform: translateY(-2px); }
  .uc-fit__item:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 2px; }
  .uc-fit__item .mb-knot { flex: none; width: 1.3em; margin-top: .2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: .25; }
  .uc-fit__item[aria-pressed="true"] { background: var(--mb-hot); color: var(--mb-plum); }
  .uc-fit__item[aria-pressed="true"] .mb-knot { opacity: 1; stroke: var(--mb-plum); }
  .uc-fit__out { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin: 1.4rem 0 0; }
  .uc-fit__out p { margin: 0; font-weight: 700; }
  .uc-quote { margin: 2.4rem 0 0; max-width: 40ch; font: 800 italic var(--mb-step-2)/1.25 var(--mb-font-display); color: var(--mb-thread); }
  .uc-path__lead { max-width: 62ch; margin: 0 0 2rem; }
  .uc-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
  .uc-stage { display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); }
  .uc-stage:nth-child(2) { margin-top: 1.2rem; } .uc-stage:nth-child(3) { margin-top: 2.4rem; } .uc-stage:nth-child(4) { margin-top: 3.6rem; }
  @media (max-width: 1100px) { .uc-stage:nth-child(n) { margin-top: 0; } }
  .uc-stage__n { font: 900 var(--mb-step-3)/1 var(--mb-font-display); color: var(--mb-violet); }
  .uc-stage h3 { margin: 0; font: 900 var(--mb-step-2)/1 var(--mb-font-display); }
  .uc-stage > p { margin: 0 0 .5rem; color: var(--mb-ink-soft); }
  .uc-meet { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .5rem; }
  .uc-meet__item { display: grid; gap: .15rem; padding: .8rem .9rem; border-radius: var(--mb-radius); background: var(--mb-lilac); transition: background var(--mb-dur-3), transform var(--mb-dur-3) var(--mb-ease-spring); }
  .uc-meet__item:nth-child(2) { background: var(--mb-blush); }
  .uc-meet__k { display: flex; justify-content: space-between; gap: .5rem; font: 700 .72rem/1.2 var(--mb-font-text); letter-spacing: .1em; text-transform: uppercase; }
  .uc-meet__you { padding: .1rem .45rem; border-radius: var(--mb-radius-pill); background: var(--mb-plum); color: #FFF1F6; letter-spacing: 0; text-transform: none; }
  .uc-meet__item b { font: 800 var(--mb-step-0)/1.2 var(--mb-font-display); }
  .uc-meet__item > span:last-child { font-size: var(--mb-step--1); }
  .uc-meet__item.is-you { background: var(--mb-hot); transform: scale(1.03); }
  .uc-how { background: var(--mb-butter); }
  .uc-lead { background: var(--mb-cream); }
  .uc-story { position: relative; margin: 1.6rem 0 0; padding: 1.5rem 1.6rem 1.3rem 1.9rem; border-radius: var(--mb-radius-lg); background: var(--mb-plum); color: #FFF1F6; }
  .uc-story::before { content: ""; position: absolute; left: .9rem; top: 1.4rem; bottom: 1.4rem; width: 3px; border-radius: 3px; background: var(--mb-hot); }
  .uc-story p { margin: 0 0 .8rem; font: 500 var(--mb-step-0)/1.55 var(--mb-font-text); }
  .uc-story footer { font-weight: 800; color: var(--mb-pink); }
  .uc-workbook { margin-top: 1.4rem; padding: 1.2rem 1.3rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .uc-workbook h3 { margin: 0 0 .3rem; font: 800 var(--mb-step-1)/1.1 var(--mb-font-display); }
  .uc-workbook p { margin: 0 0 .5rem; }
  .uc-register { background: var(--mb-pink); }

  /* ================= Advocacy from scratch ================= */
  .az-hero .tr-title span:last-child { color: var(--mb-violet); padding-left: .5em; }
  .az-hero__thread { display: block; width: 100%; height: 40px; margin: -.4rem 0 1.4rem; overflow: visible; }
  .az-hero__thread path { fill: none; stroke: var(--mb-thread); stroke-width: 4; stroke-linecap: round; }
  .az-hero__grid { display: grid; gap: 1.5rem; align-items: start; }
  @media (min-width: 900px) { .az-hero__grid { grid-template-columns: 1.4fr .6fr; } }
  .az-route__map { position: relative; height: clamp(150px, 22vw, 210px); margin: 2.5rem 0 1rem; }
  .az-route__map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .az-route__path { fill: none; stroke: var(--mb-thread); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .az-route__flag { fill: none; stroke: var(--mb-plum); stroke-width: 3; vector-effect: non-scaling-stroke; }
  .az-route__end { position: absolute; font: 800 var(--mb-step--1)/1.1 var(--mb-font-display); }
  .az-route__end--a { left: 0; top: 74%; }
  .az-route__end--b { right: 0; top: -1.6rem; color: var(--mb-thread); }
  .az-route__knots { list-style: none; margin: 0; padding: 0; }
  .az-route__knots li { position: absolute; transform: translate(-50%, -50%); }
  .az-route__knots button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--mb-paper);
    box-shadow: inset 0 0 0 3px var(--mb-plum); font: 900 1rem/1 var(--mb-font-display); color: var(--mb-plum); transition: transform var(--mb-dur-2) var(--mb-ease-spring), background var(--mb-dur-2); }
  .az-route__knots button:hover { transform: scale(1.12); }
  .az-route__knots button.is-past { background: var(--mb-lavender); }
  .az-route__knots button[aria-selected="true"] { background: var(--mb-thread); color: #fff; box-shadow: none; transform: scale(1.18); }
  .az-route__knots button:focus-visible { outline: 3px solid var(--mb-violet); outline-offset: 3px; }
  .az-week { padding: 1.4rem 1.6rem; border-radius: var(--mb-radius-lg); background: var(--mb-lilac); min-height: 8rem; }
  .az-week__n { font: 700 var(--mb-step--1)/1 var(--mb-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--mb-violet); }
  .az-week h3 { margin: .4rem 0 .3rem; font: 900 var(--mb-step-2)/1.05 var(--mb-font-display); }
  .az-week p { margin: 0; font: 600 italic var(--mb-step-1)/1.3 var(--mb-font-text); }
  .az-weeks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
  .az-weeks li { display: grid; gap: .15rem; padding: .9rem 1rem; border-radius: var(--mb-radius); background: var(--mb-surface); font-size: var(--mb-step--1); }
  .az-weeks li span { font-weight: 700; color: var(--mb-violet); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
  .az-weeks li b { font: 800 var(--mb-step-0)/1.2 var(--mb-font-display); }
  @media (max-width: 700px) { .az-route__map { display: none; } }
  @media (min-width: 701px) { .az-weeks { display: none; } }
  .az-demand { background: var(--mb-cream); }
  .az-demand__fields { display: grid; gap: 1rem; margin-top: 1.2rem; }
  .az-demand__card { display: grid; gap: .8rem; padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow-lift); position: sticky; top: 100px; }
  .az-demand__lead { margin: 0; font-weight: 700; color: var(--mb-violet); }
  .az-demand__s { margin: 0; min-height: 3.5em; font: 800 var(--mb-step-2)/1.2 var(--mb-font-display); color: var(--mb-ink-soft); }
  .az-demand__s.is-set { color: var(--mb-plum); }
  .az-demand__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--mb-step--1); }
  .az-demand__checks li { display: flex; gap: .5rem; align-items: center; color: var(--mb-ink-soft); }
  .az-demand__checks .mb-knot { width: 1.2em; fill: none; stroke: var(--mb-line); stroke-width: 2.4; stroke-linecap: round; }
  .az-demand__checks li.is-on { color: var(--mb-plum); font-weight: 700; }
  .az-demand__checks li.is-on .mb-knot { stroke: var(--mb-thread); }
  .az-demand__vague { margin: 0; padding: .6rem .8rem; border-radius: var(--mb-radius); background: var(--mb-butter); font-size: var(--mb-step--1); }
  .az-demand__card .mb-btn { justify-self: start; }
  .az-demand__card .mb-btn:disabled { opacity: .45; cursor: not-allowed; }
  .az-for__note { margin: 1.4rem 0 0; font: 800 var(--mb-step-1)/1.2 var(--mb-font-display); }
  .az-get { background: var(--mb-sky); }
  .az-how { background: var(--mb-pink); }
  .az-join { border: 0; margin: 0; padding: 0; }
  .az-register { background: var(--mb-lilac); }
}

/* ================= Motion (decision 0014, round 2) =================
   One signature: the red thread follows the reader (.tr-progress). The rest answers the reader or explains content:
   headline lines rise once on load, the route and the starts line draw when reached, the staircase climbs,
   emblems redraw on hover/focus, knots tie on chips, answers slide open, links show they are links. */
@layer marta.tools {
  /* Links inside training pages look like links before hover, not after. */
  .tr-root .mb-link { background-repeat: no-repeat; background-position: 0 100%; background-color: transparent; background-size: 100% 2px; background-image: linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent)); }
  .tr-root .mb-link:hover, .tr-root .mb-link:focus-visible { background-image: linear-gradient(var(--mb-thread), var(--mb-thread)); color: var(--mb-thread); }
  .tr-root [data-register="stage"] .mb-link:hover { color: var(--mb-pink); background-image: linear-gradient(var(--mb-pink), var(--mb-pink)); }
  .tr-mega__all, .tr-others__all { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: .55rem 1.2rem; border-radius: var(--mb-radius-pill);
    box-shadow: inset 0 0 0 2px var(--mb-plum); color: var(--mb-plum); font-weight: 800; text-decoration: none; transition: background var(--mb-dur-2), color var(--mb-dur-2); }
  .tr-mega__all .mb-go, .tr-others__all .mb-go { transition: transform var(--mb-dur-3) var(--mb-ease-spring); }
  .tr-mega__all:hover, .tr-others__all:hover { background: var(--mb-plum); color: #FFF1F6; }
  .tr-mega__all:hover .mb-go, .tr-others__all:hover .mb-go { transform: translateX(5px); }
  .tr-mega__all:focus-visible, .tr-others__all:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 3px; }

  /* The thread that follows the reader. Desktop: down the left edge, a knot at its end. Phones: across the top. */
  .tr-progress { position: fixed; z-index: 55; pointer-events: none; opacity: 0; transition: opacity var(--mb-dur-3); }
  .tr-progress.is-on { opacity: 1; }
  .tr-progress__thread { position: absolute; background: var(--mb-thread); border-radius: 3px; }
  .tr-progress__knot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--mb-thread); box-shadow: 0 0 0 3px var(--mb-paper); }
  @media (max-width: 959px) {
    .tr-progress { left: 0; right: 0; top: 0; height: 3px; }
    .tr-progress__thread { left: 0; top: 0; height: 3px; width: calc(var(--p, 0) * 100%); }
    .tr-progress__knot { display: none; }
  }
  @media (min-width: 960px) {
    .tr-progress { left: 14px; top: 90px; bottom: 24px; width: 11px; }
    .tr-progress__thread { left: 4px; top: 0; width: 3px; height: calc(var(--p, 0) * 100%); }
    .tr-progress__knot { left: 0; top: calc(var(--p, 0) * 100% - 5px); }
  }

  /* Headline lines rise once, in reading order. */
  @keyframes tr-rise { from { opacity: 0; transform: translateY(.4em); } }
  .tr-motion .tr-title span, .tr-motion .tr-poster > span { display: inline-block; animation: tr-rise .8s var(--mb-ease-out) both; }
  .tr-motion .tr-title--xl span, .tr-motion .tr-poster > span { display: block; }
  .tr-motion .tr-title span:nth-child(2), .tr-motion .tr-poster > span:nth-child(2) { animation-delay: .12s; }
  .tr-motion .tr-title span:nth-child(3), .tr-motion .tr-poster > span:nth-child(3) { animation-delay: .24s; }

  /* Emblems redraw when a card is pointed at or focused: the thread is tied again. */
  .tr-emblem .e-thread { stroke-dasharray: 1; stroke-dashoffset: 0; }
  @keyframes tr-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  :is(.tr-card__link, .tr-mega__card, .cv-mega__card):is(:hover, :focus-visible) .e-thread { animation: tr-redraw .9s var(--mb-ease-silk); }

  /* Chips: the knot ties with a small spring when chosen. */
  @keyframes tr-knot { 0% { transform: scale(.2) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } }
  .tr-root .ct-topics input:checked + label .mb-knot, .tr-root .mb-chip.is-on .mb-knot { animation: tr-knot .45s var(--mb-ease-spring); }
  .tr-root .mb-chip:active { transform: scale(.96); }

  /* Answers slide open. */
  @keyframes tr-open { from { opacity: 0; transform: translateY(-6px); } }
  .tr-faq__item[open] .tr-faq__a { animation: tr-open .35s var(--mb-ease-out); }
  .tr-faq__item { transition: box-shadow var(--mb-dur-2); }
  .tr-faq__item:hover { box-shadow: 0 1px 0 var(--mb-line), var(--mb-shadow); }

  /* Need tiles and "you belong here if" items press in; the chosen one settles. */
  .tr-need:active, .uc-fit__item:active, .ll-act:active { transform: scale(.98); }
  .uc-fit__item[aria-pressed="true"] .mb-knot { animation: tr-knot .45s var(--mb-ease-spring); }

  /* The 8-week route draws itself and the knots arrive in order. */
  .tr-motion [data-route] svg { clip-path: inset(-20px 100% -20px 0); transition: clip-path 2.2s var(--mb-ease-silk); }
  .tr-motion [data-route].is-seen svg { clip-path: inset(-20px 0 -20px 0); }
  .tr-motion [data-route] .az-route__knots li { opacity: 0; transition: opacity .3s calc(var(--i) * .22s + .2s); }
  .tr-motion [data-route].is-seen .az-route__knots li { opacity: 1; }
  .tr-motion [data-route] .az-route__end--b, .tr-motion [data-route] .az-route__flag { opacity: 0; transition: opacity .4s 2.1s; }
  .tr-motion [data-route].is-seen .az-route__end--b, .tr-motion [data-route].is-seen .az-route__flag { opacity: 1; }

  /* Upcoming starts: the thread runs left to right, knots light one after another. */
  .tr-motion .tr-starts__item::before { transform-origin: left; transform: scaleX(0); transition: transform .6s var(--mb-ease-out) calc(var(--i) * .35s); }
  .tr-motion .tr-starts__line.is-seen .tr-starts__item::before { transform: none; }
  .tr-motion .tr-starts__knot { transform: scale(0); transition: transform .4s var(--mb-ease-spring) calc(var(--i) * .35s); }
  .tr-motion .tr-starts__line.is-seen .tr-starts__knot { transform: none; }

  /* Lifeline: once the schema is reached, the pulse in "your minutes" beats twice. */
  @keyframes tr-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.06); } 60% { transform: scale(.98); } }
  .tr-motion .ll-gap.is-seen .ll-gap__zone { transform-box: fill-box; transform-origin: center; animation: tr-beat .9s var(--mb-ease-out) 1.4s 2; }
  /* The pulse on the photo keeps a slow heartbeat: a light travels along it. */
  @keyframes tr-travel { from { stroke-dashoffset: 1.2; } to { stroke-dashoffset: -.2; } }
  .ll-photo__pulse .ll-photo__glint { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: .08 1.2; animation: tr-travel 3.2s linear 2s infinite; opacity: .85; }

  /* Unbound: the four stages step up one after another — the level up, literally. */
  @media (min-width: 1101px) {
    .tr-motion .uc-stages .uc-stage { opacity: 0; translate: 0 40px; transition: opacity .6s var(--mb-ease-out) calc(var(--i) * .18s), translate .7s var(--mb-ease-spring) calc(var(--i) * .18s); }
    .tr-motion .uc-stages.is-seen .uc-stage { opacity: 1; translate: 0 0; }
  }
  .uc-meet__item.is-you { animation: tr-knot .5s var(--mb-ease-spring); }

  /* Prices tick to their new value. Order game: correct steps snap into the chain. */
  @keyframes tr-flash { 0% { color: var(--mb-pink); } }
  .tr-price__n.is-tick { animation: tr-flash .6s var(--mb-ease-out); }
  @keyframes tr-snap { from { opacity: 0; transform: translateX(-14px); } }
  .ll-chain__slot.is-set .ll-chain__t b { animation: tr-snap .35s var(--mb-ease-out); }

  /* Sent: the thread on the success panel draws. */
  @keyframes tr-draw1 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .tr-done svg path { stroke-dasharray: 1; animation: tr-draw1 1.4s var(--mb-ease-silk) .1s both; }

  @media (prefers-reduced-motion: reduce) {
    .tr-root *, .tr-root *::before, .tr-root *::after { animation: none !important; transition: none !important; }
    .tr-done svg path { stroke-dashoffset: 0 !important; }
    .tr-motion [data-route] svg { clip-path: none !important; }
    .tr-motion [data-route] *, .tr-motion .uc-stage { opacity: 1 !important; translate: none !important; }
    .tr-motion .tr-starts__item::before, .tr-motion .tr-starts__knot { transform: none !important; }
    .tr-progress { display: none; }
  }
}