/* One task → one explanation. The short connector carries the entrance cue. */
.se-story-delegate.se-duties {
  padding: 30px 0;
  min-height: calc(100svh - 96px);
  display: flex;
  align-items: center;
}
.se-b .se-duties h2 {
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.35;
  margin-bottom: 30px;
}
.se-duties-list { margin: 0; display: grid; gap: 12px; }
.se-duty { display: grid; grid-template-columns: 32% minmax(0, 1fr); align-items: center; }
.se-duty-label {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 22px 8px 18px;
  border: 1.5px solid var(--fv-ink);
  font: 900 clamp(17px, 1.65vw, 24px)/1.35 "SE Story", sans-serif;
  letter-spacing: -.025em;
}
.se-duty-label::after {
  content: "";
  position: absolute;
  right: -4px;
  top: calc(50% - 3.5px);
  width: 7px;
  height: 7px;
  background: var(--fv-ink);
  border-radius: 50%;
}
.se-duty-detail { position: relative; margin: 0; padding-left: clamp(56px, 5.6vw, 90px); min-width: 0; }
.se-duty-link {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: calc(clamp(56px, 5.6vw, 90px) - 10px);
  height: 2px;
  background: var(--fv-ink);
  transform-origin: left;
}
.se-duty-check { display: inline-flex; flex: 0 0 31px; padding-right: 11px; margin-right: 12px; border-right: 1px solid var(--fv-ink); }
.se-duty-check svg { width: 19px; height: 19px; stroke-width: 1.5; }
.se-duty-check rect { fill: var(--fv-citron); }
.se-duty-check + span { min-width: 0; }
.se-duty-link i { position: absolute; inset: -2px auto -2px 0; width: 24%; background: var(--fv-citron); opacity: 0; }
.se-duty-link::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border: 1.5px solid var(--fv-ink); border-radius: 50%; background: var(--fv-paper); }
@keyframes se-duty-signal {
  0% { transform: translateX(0); opacity: 0; }
  5% { transform: translateX(0); opacity: 1; }
  36% { transform: translateX(316.667%); opacity: 1; }
  42%, 100% { transform: translateX(316.667%); opacity: 0; }
}
@keyframes se-duty-arrival {
  0%, 33%, 49%, 100% { background: var(--fv-paper); }
  36%, 42% { background: var(--fv-citron); }
}
@media (prefers-reduced-motion: no-preference) {
  .has-duties-entrance .se-duty:not(.is-revealed) { opacity: 0; }
  .se-duty.is-flowing .se-duty-link i { animation: se-duty-signal 3.2s linear var(--flow-delay, 0s) infinite; }
  .se-duty.is-flowing .se-duty-link::after { animation: se-duty-arrival 3.2s linear var(--flow-delay, 0s) infinite; }
}
.se-duty-copy strong { display: block; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; font-weight: 700; letter-spacing: -.015em; }
.se-b .se-duty-copy p { margin: 1px 0 0; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.65; font-weight: 400; }
.se-story-payoff-section { padding: 0 0 80px; }
.se-story-payoff-section .se-story-payoff { padding-top: 40px; }
@media (min-width: 1101px) and (min-height: 851px) {
  .se-duties-list { gap: 12px; }
  .se-duty-label { min-height: 51px; }
  .se-b .se-duties h2 { margin-bottom: 36px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .se-duty { grid-template-columns: 34% minmax(0, 1fr); }
  .se-duty-label { font-size: 17px; padding-left: 12px; }
  .se-duty-detail { padding-left: 42px; }
  .se-duty-link { width: 32px; }
  .se-duty-copy strong { font-size: 16px; }
  .se-b .se-duty-copy p { font-size: 14px; }
}
@media (max-width: 760px) {
  .se-story-delegate.se-duties { min-height: 0; padding: 48px 0; }
  .se-b .se-duties h2 { font-size: clamp(25px, 6.4vw, 40px); line-height: 1.5; margin-bottom: 30px; }
  .se-duties-list { gap: 26px; }
  .se-duty { grid-template-columns: 1fr; }
  .se-duty-label { max-width: 100%; width: fit-content; min-height: 44px; padding: 9px 18px; font-size: clamp(16px, 4.3vw, 21px); }
  .se-duty-label::after { left: 20px; right: auto; top: auto; bottom: -4px; }
  .se-duty-detail { padding: 22px 0 0 22px; }
  .se-duty-link { left: 23px; top: 0; width: 2px; height: 16px; transform-origin: top; }
  .se-duty-link i { inset: 0 -2px auto; width: auto; height: 24%; }
  .se-duty-link::after { top: auto; bottom: -4px; right: -3px; }
  .se-duty.is-flowing .se-duty-link i { animation-name: se-duty-signal-down; }
  .se-duty-check { flex-basis: 28px; margin-right: 10px; padding-right: 8px; }
  .se-duty-copy strong { font-size: 16px; line-height: 1.6; }
  .se-b .se-duty-copy p { font-size: 14px; line-height: 1.8; margin-top: 5px; }
  .se-story-payoff-section { padding-bottom: 48px; }
  .se-story-payoff-section .se-story-payoff { padding-top: 16px; }
}

@keyframes se-duty-signal-down {
  0% { transform: translateY(0); opacity: 0; }
  5% { transform: translateY(0); opacity: 1; }
  36% { transform: translateY(316.667%); opacity: 1; }
  42%, 100% { transform: translateY(316.667%); opacity: 0; }
}